19个CSS布局技巧
2010-12-28 阅读 176
毫无疑问，一个合理的布局和结构是对一个web设计师是多么的重要。只有一个合理的不加和结构才能使你的页面在不同的浏览器下显示同样的效果，给人一种赏心悦目的感觉。今天，在这里留下我的脚印，希望与你们分享一些避免在创建CSS布局时容易遇到的错误的技巧。仅供大家参考。
#### Bug修正：
#### 1. IE双倍Margin bug
元素是浮动的-并且给元素一个和浮动同一个方向的margin-结果显示两倍的指定margin大小。这个方法非常简单。所有您需要做的就是添加一个display: inline规则到你的浮动元素。所以，你只是把例如这样的代码：
#content { float: left; width: 500px; padding: 10px 15px; margin-left: 20px; }
```
改为如下代码 :
#content {float: left; width: 500px; padding: 10px 15px; margin-left: 20px; display:inline;}
```
图示如下：
2．盒模型hack
如果你想给任一div指定宽度，不要指定padding或margin。只要另建一个内部(嵌套)的没有宽度的div并设定其padding和margin来替代。
代码如下：
（1）不推荐使用的代码：
#main-div{width: 150px;border: 5px;padding: 20px;}
```
（2）推荐使用的代码：
#main-div{width: 150px;}#main-div div{border: 5px;padding: 20px;}
```
min-height属性在firefox下表现很好，但是IE8一下的版本却无视了它，IE的height就像FF的min-height.注意：IE7没有这个bug。
/* 对主流浏览器*/
.container {width:20em;padding:0.5em;border:1px solid #000;min-height:8em;height:auto;}
```
/* 对IE浏览器 */
\*/* html .container {height: 8em;}/**/
```
块级原素居中的办法很多，例如：百分比大小设置或使用绝对的数值，来实现居中的效果，下面的代码是常用的办法，供大家参考一下：
代码如下：
body{text-align: center;}#container{text-align: left;width: 960px;margin: 0 auto;}
```
如果你想知道怎么才能正确的实现垂直对齐，只需要简单的为你的文本指定和容器等高的line-height。
代码如下：
#wrapper {width:530px;height:25px;background:url(container.gif) no-repeat left top;padding:0px 10px;}
#wrapper p {line-height:25px;}
7．CSS被搞乱的最大原因
相信同行一起努力的你们，也曾经因为你的css被搞乱而郁闷吧。希望看完我下面的这个图，郁闷的心情能有所好转。
如图所示：
当您尝试创建一个两列浮动的布局，IE浏览器将创建一个“浮动下降” ，这是由于在一个固定宽度的浮动DIV内存在超出宽度的内容，这些内容必须融入布局中的一个特定位置。这片文章详述了几种可能的替代方法。仅供参考。
如图所示：
一系列很有趣的文章，这些文章不仅包括定位，还包括包括定义布局的属性，比如display和float ，和对CSS3 布局模型的一个预览。第一部分将会介绍定位和display属性。Part1,?Part2,?Part3 将会带给你对定位的更深的理解.
如图所示：
对于刚开始使用CSS的人来说，无论相对行为还是绝对定位都是非常令人郁闷的。这个问题的答案将会让你郁闷的心情不在郁闷。
代码如下：
#redSquare{position: relative;bottom: 40px;right: 40px;}
```
如图所示：
在浏览器边缘创建一个固定的标签(即使内容居中)。由于篇幅所限在这就不具体说明了，在这简单的介绍下，有兴趣的朋友请查看Panic’s website for their software Coda.
代码如下：
#hang_tab {position: absolute;top: 7px;left: 0px;width: 157px;height: 93px;}
```
如图所示：
代码：
＜div＞ ＜!-- float container --＞＜div style="float:left; width:30%;"＞＜p＞Some content＜/p＞＜/div＞＜p＞Text not inside the float＜/p＞＜div style="clear:both;"＞＜/div＞＜/div＞
```
简单说明- Floatutorial带你查看浮动元素的基本原理，例如图片，下拉菜单，下一个和返回按钮，相册，内部列表和多列布局。
如图所示：
清除浮动可以说是CSS开发中的一个最令人郁闷的方面，最佳方法之一是在您的网站上使用EasyClearing .
代码如下
/*EasyClearing http://www.positioniseverything.net/easyclearing.html */#container:after{ content: "."; display: block;height: 0;clear: both; visibility: hidden;}#container{display: inline-block;}/* Hides from IE-mac \*/* html #container{height: 1%;}#container{display: block;}/* End hide from IE-mac */
```
“最简单的方法是使用一个大的gif图片，然后我将给我的盒子编码”
代码如下：
＜div＞ ＜p＞beautifully-encapsulated paragraph＜/p＞ ＜div＞＜/div＞＜/div＞“并给它添加背景”
.roundBox { background:transparent url(roundBox.gif) no-repeat top left; width:340px; padding:20px;}.roundBox .boxBottom { background:white url(roundBox.gif) no-repeat bottom left; font-size:1px; line-height:1px; height:14px; margin:0 -20px -20px -20px;}
```
同样Askthecssguy 介绍了Google Analytics中使用的技术, 他是通过在每个角留下1px的边框来实现圆角的效果，这是一种不用静态图片实现圆角的新方法。
如图所示：
如图所示：
17．网页表单的技巧 ，及:focus伪类，使用建议等技巧。
代码如下：
label {float: left; text-align: right; margin-right: 15px; width: 100px;}
```
如图所示:
18．简CSS表单设计- 对于的CSS爱好者来说，下面介绍一个如何设计纯粹的CSS表单而不使用HTML表格的建议。
有时候，我们需要向用户解释他们理应填写文本输入框。当没有标签可以显示，一个通用的解决方案是，把一些占位符文本放在文本框中，并让它当标签来用。本教 程介绍了一种很好的解决办法，并启用JavaScript ，label 元素是隐藏的，而且input 元素的title 属性值被复制到value 属性. 如果已禁用JavaScript ，标签显示在被留空的文字输入框的上面。
如图所示：
css 布局 IEBug
更新于 2023年03月28日
