本文深入探讨了CSS布局的核心概念和技术，包括span和div元素的应用、盒状模型、外边距和内边距设置、边框样式、position和float属性的作用以及z-index在层叠中的应用。
1、组织元素（span和div）
span和div元素用于组织和结构化文档，并经常联合class和id属性一起使用。
在这一课中，我们将进一步探究span和div的用法，因为这两个HTML元素对于CSS是很重要的。
用span组织元素
span元素可以说是一种中性元素，因为它不对文档本身添加任何东西。但是与CSS结合使用的话，span可以对文档中的部分文本增添视觉效果。
让我们用一句本杰明·弗兰克林（Benjamin Franklin）的名言来举个例子：
|
以下是代码片段： <p>早睡早起使人健康、富裕又聪颖。</p> |
假设我们想用红色来强调弗兰克林先生所认为的“不要在睡眠中度过一天”的好处，我们可以用<span>标签来标记上述每一点好处。然后，我们将这几个span设置为相同的class。这样，我们稍后就可以在样式表里针对这个class定义特定的样式。
|
以下是代码片段： <p>早睡早起使人<span |
相应的CSS代码如下：
|
以下是代码片段： span.benefit } |
当然，你也可以采用id来为span元素添加样式。如果采用id的话，你必须为这三个span元素各自分别指定一个唯一的id。
用div组织元素
如前面例子所示，span的使用局限在一个块元素内，而div可以被用来组织一个或多个块元素。
除去这点区别，div和span在组织元素方面相差无几。让我们来看一个例子。我们将历届美国总统按其所属的政营分别组织为两个列表：
|
以下是代码片段： <div <ul> <li>富兰克林·D·罗斯福</li> <li>哈利·S·杜鲁门</li> <li>约翰·F·肯尼迪</li> <li>林登·B·约翰逊</li> <li>吉米·卡特</li> <li>比尔·克林顿</li> </ul> </div> <div <ul> <li>德怀特·D·艾森豪威尔</li> <li>理查德·尼克松</li> <li>杰拉尔德·福特</li> <li>罗纳德·里根</li> <li>乔治·布什</li> <li>乔治·W·布什</li> </ul> </div> |
在这里，我们可以采用跟上例同样的方法来处理样式表：
|
以下是代码片段： #democrats } #republicans } |
2、盒状模型
CSS中的盒状模型（box model）用于描述一个为HTML元素形成的矩形盒子。盒状模型还涉及为各个元素调整外边距（margin）、边框（border）、内边距（padding）和内容的具体操作。
CSS中的盒状模型
在例子中，有一个标题和一些文本。该例的HTML代码如下（摘自世界人权宣言）：
|
以下是代码片段： <h1>Article <p>All and They and spirit |
通过添加一些颜色及字体信息，该例可以有以下显示效果：
这个例子包含了两个元素：h1和p。这两个元素的盒状模型如下图所示：
尽管上图显得有点复杂，不过它展示了每个HTML元素是如何被盒子所围绕的。我们可以通过CSS来调整这些盒子。
3、外边距和内边距
为元素设置外边距
一个元素有上（top）、下（bottom）、左（left）、右（right）四个边。外边距（margin）表示从一个元素的边到相邻元素(或者文档边界)之间的距离。
在下面这个例子中，我们将了解如何为文档本身（即body元素）定义外边距。下图显示了我们对外边距的要求。
满足上述要求的CSS代码如下：
|
以下是代码片段： body } |
或者你也可以采用一种较优雅的缩写形式：
|
以下是代码片段： body } |
几乎所有元素都可以采用跟上面一样的方法来设置外边距。例如，我们可以为所有用<p>标记的文本段落定义外边距：
|
以下是代码片段： body } p } |
为元素设置内边距
内边距（padding）也可以被理解成“填充物”。这样理解是合理的，因为内边距并不影响元素间的距离，它只定义元素的内容与元素边框之间的距离。
下面我们通过一个简单的例子来说明内边距的用法。在这个例子中，所有标题都具有背景色：
|
以下是代码片段： h1 } H5 } |
通过为标题设置内边距，你可以控制在标题文本周围填充多少空白：
|
以下是代码片段： h1 } H5 } |
4、边框
边框（border）可以有多种用途，比如作为装饰元素或者作为划分两物的分界线。在设置边框方面，CSS为你提供了无尽选择。
边框宽度[border-width]
边框宽度由CSS属性border-width定义，其值可以是“thin”（薄）、“medium”（普通）或“thick”（厚）等，也可以是像素值。如下图所示：
边框颜色[border-color]
CSS属性border-color用于定义边框的颜色。其值就是正常的颜色值，例如：“#123456”、 “rgb(123,123,123)”、“yellow”等。
边框样式[border-style]
边框样式有多种可供选择。下图显示了8种不同样式的边框在Internet Explorer 5.5里的实际显示效果。在这个例子里，我们为这8种边框都选择了“金色（gold）”作为边框颜色、“厚(thick)”作为边框宽度。当然，这只是个例子，你可以为边框设置别的颜色和厚度。
如果你不想有任何边框，可以为它取值为“none”或者“hidden”。
我们可以将上面三个有关边框的CSS属性组合起来使用，从而制造出多种多样的变化。来举个例子，我们要为一个文档中的h1、H5、ul和p等元素分别定义不同的边框。尽管其显示效果也许并不那么美观，但是它很好地向你展示了多种变化的可能：
|
以下是代码片段： h1 } H5 } p } ul } |
我们也可以为上边框、下边框、右边框、左边框分别指定特定的CSS属性。具体做法如下例所示：
|
以下是代码片段： h1 } |
缩写[border]
跟许多其他属性一样，你也可以将有关边框的CSS属性缩写为一个border属性。让我们看一个例子：
|
以下是代码片段： p } |
可被缩写为：
|
以下是代码片段： p } |
5、position属性
position属性有五个取值，分别为：static, relative, absolute, fixed, inherit, 其中“static”为默认值。
static
该值为position的默认值，可以省略不写，当position取值为static或者没有设置position属性的时候，div的显示方式为按文本流的顺序从上至下，或者从左到右顺序显示。
例如：
层一
层二
源代码如下：
|
以下是代码片段： <div <div .style border:1px background-color:#CCFF99; width:80px; height:80px; margin-bottom:5px; } |
relative
相对定位，相对于什么位置呢？官方手册中是这样说的：“Relative position that is offset from the initial normal position in the flow.”可以简单的如此解释：偏移文本流中最初的位置。最初位置也就是当position取值为static时的位置，也就是说这里的相对定位是相对于它在正常情况下的默认位置的。下图列出了偏移产生前后的位置关系：
完整的代码如下：
偏移前：
|
以下是代码片段： <style .style1 position:relative; height:80px; width:80px; margin-bottom:10px; border:1px background-color:#acd373; } .style2 position:relative; height:80px; width:80px; border:1px background-color:#f26c4f; } </style> <div <div |
偏移后：
|
以下是代码片段： <style .style1 position:relative; left:30px; top:30px; height:80px; width:80px; margin-bottom:10px; border:1px background-color:#acd373; } .style2 position:relative; height:80px; width:80px; border:1px background-color:#f26c4f; } </style> <div <div |
结合以上图示和CSS样式表可以得出以下两个结论：
·
·
另外我们还可以做如下尝试，当层二对应的css样式表“style2”不设置position:relative时，会发现层一偏移后重叠时，层一覆盖了层二。而不是我们图示上层二覆盖了层一。
原因时这样的，当设置了position:relative，层的层叠级别高于默认的文本流级别。当然了，如果都设置了position:relative，同等级别下将会按照文本流的顺序层叠显示。
absolute
绝对定位，当我们设置position的值为static或者relative时，层依然存在于文本流中，也就是不管位置是否偏移，文本流中依然为它保留了该有的位置。但当层设置了position:relative并产生偏移（设置了top,left等值）时，该层将完全从文本流中脱离，进而以该层所在的父容器的坐标原点为参考点进行偏移，可以这理解，该层已经和同级容器中的其它元素脱离了关系，也不会对其它元素产生人和影响。
注意：如果父容器没有设置position属性或position值为static时，将以body的坐标原点为参考。
下面我们以三个图示来分别说明。
上面三个页面效果的css样式表如下：
页面一：
|
以下是代码片段： <style .style1 height:150px; width:150px; border:1px background-color:#a2d39c; } .style2 height:50px; width:50px; border:1px background-color:#f68e56; } .style3 height:50px; width:50px; border:1px background-color:#00adef; } </style> <div <div <div </div> |
页面二：
|
以下是代码片段： <style .style1 height:150px; width:150px; border:1px background-color:#a2d39c; } .style2 position:absolute; top:0; left:0; height:50px; width:50px; border:1px background-color:#f68e56; } .style3 height:50px; width:50px; border:1px background-color:#00adef; } </style> <div <div <div </div> |
页面三：
|
以下是代码片段： <style .style1 position:relative; height:150px; width:150px; border:1px background-color:#a2d39c; } .style2 position:absolute; top:10px; left:10px; height:50px; width:50px; border:1px background-color:#f68e56; } .style3 height:50px; width:50px; border:1px background-color:#00adef; } </style> <div <div <div </div> |
fixed
固定定位，它的效果类似常见的浮动广告，无论如何拖动浏览器的滚动条，层始终悬浮在浏览器的某个位置。由于该属性只能被Firefox很好的支持，虽然可以在通过其它设置在IE6.0中得到同样的效果，但由于本文篇幅原因，不继续对本属性继续作解释。下面的经典案例中将会有相关解释。
inherit
继承，和其它属性的继承一样。在这里为继承父元素中的position值。
top，right，bottom，left四个属性
在设置了position属性，并且值不为static时生效。当position取值relative时，偏离文本流初始位置；当position取值absolute时，以父容器对应的初始点为原点偏移，如果父容器没有设置positon或者position取值static时，以body对应的坐标点为参考点偏移。
深度理解：
如果用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute。
【position属性:absolute】
意思是：他的意思是绝对定位，他默认参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，有以下属性：
1)如果没有TRBL，以父级的左上角；在没有父级的时候，他是参照浏览器左上角；如果在没有父级元素的情况下，存在文本，则以它前面的最后一个文字的右上角为原点进行定位但是不断开文字，覆盖于上方。
2)如果设定TRBL，并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。
3)如果设定TRBL，并且父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置由TRBL决定。即使父级有Padding属性，对其也不起作用，说简单点就是：它只坚持一点，就以父级左上角为原点进行定位，父级的padding对其根本没有影响。
以上三点可以总结出：若想把一个定位属性为absolute的元素定位于其父级元素内，只有满足两个条件：第一：设定TRBL；第二：父级设定Position属性
可以保证你在用absolue布局页面的时候，不会错位，并且随着浏览器的大小或者显示器分辨率的大小，而不发生改变。
只要有一点不满足，元素就会以浏览器左上角为原点，这就是初学者容易犯错的一点。如果不清楚Position属性为absolute的板块，若想定位到父级板块中，并且当浏览器的大小改变或显示器的分辨率改变，布局不发生改变，是需要满足两个条件的，只要有一点不满足，元素就会以浏览器左上角为原点，从而导致页面布局错位。
【position属性:relative】
意思是相对定位，他是默认参照父级的原始点为原始点，无父级则以文本流的顺序在上一个元素的底部为原始点，配合TRBL进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位，有以下属性：
1)如果没有TRBL，以父级的左上角，在没有父级的时候，他是参照浏览器左上角(到这里和absolute第一条一样)，如果在没有父级元素的情况下，存在文本，则以文本的底部为原始点进行定位并将文字断开(和absolute不同)。
2)如果设定TRBL，并且父级没有设定position属性，仍旧以父级的左上角为原点进行定位(和absolut不同)
3)如果设定TRBL，并且父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置由TRBL决定(前半段和absolut一样)。如果父级有Padding属性，那么就以内容区域的左上角为原点，进行定位(后半段和absolut不同)。
以上三点可以总结出：无论父级存在不存在，无论有没有TRBL，均是以父级的左上角进行定位，但是父级的Padding属性会对其影响。
只要将我们平时布局页面的div的CSS属性中加上position:relative后，就不只是用float布局页面了，还可以用TRBL进行布局页面了。但是position属性为absolute不可以用来布局页面，因为如果用来布局的话，所有的DIV都相对于浏览器的左上角定位了，所以只能用于将某个元素定位于属性为absolute的元素的内部某个位置。
这样我们就可以总结比较重要的结论：
属性为relative的元素可以用来布局页面，属性为absolute的元素用来定位某元素在父级中的位置，既然属性为absolute的元素用来定位某元素在父级中位置，就少不了TRBL，这时候根据一开始讲的absolute的第三条，如果父级元素没有position属性，那么absolute元素就会脱离父级元素，但是如果是布局页面，父级元素position的属性又不能为absolute，不然就会以浏览器左上角为原点了，所以父级元素的position属性只能为relative！
总结：
如果用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用absolute，因为它不受父级元素的padding的属性影响，当然你也可以用position，不过到时候计算的时候不要忘记padding的值。
6、float属性
我们可以通过CSS属性float令元素向左或向右浮动。也就是说，令盒子及其中的内容浮动到文档（或者是上层盒子）的右边或者左边（参见第9课关于盒状模型的描述）。下图阐明了其原理：
举个例子，假如我们想让一张图片被一段文字围绕着，那么其显示效果将如下所示：
如何实现这个效果？
上例的HTML代码如下所示：
|
以下是代码片段： <div id="picture"> </div> <p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p> |
要实现图片向左浮动、而且被文字环绕的效果，你只需先设定图片所在盒子的宽度，然后再把CSS属性float设为left即可：
|
以下是代码片段： #picture } |
另一个例子：列
浮动也可以用于实现在文档中分列。要创建多个列，你需要在HTML代码里用div来结构化想要的各个列：
|
以下是代码片段： <div </div> <div </div> <div </div> |
下面，我们把各列的宽度设定为“33%”，并通过定义float属性令各列向左浮动：
|
以下是代码片段： #column1 } #column2 } #column3 } |
float属性的值可以是left、right或者none。
clear属性
CSS属性clear用于控制浮动元素的后继元素的行为。
缺省地，后继元素将向上移动，以填补由于前面元素的浮动而空出的可用空间。在前面的例子中，文本自动上移到了比尔盖茨的图片旁。
clear属性的值可以是left、right、both或none。原则是这样的：如果一个盒子的clear属性被设为“both”，那么该盒子的上边距将始终处于前面的浮动盒子（如果存在的话）的下边距之下。
|
以下是代码片段： <div </div> <h1>Bill <p idciro |
要避免文本上移到图片旁，我们可以在CSS中添加以下代码：
|
以下是代码片段： #picture } .floatstop } |
7、用z-index进行层次堆叠
该属性在设置了position并取值为“absolute”或“relative”时有效，用于控制层在Z- 轴上的排列顺序，值为整数（由于不同浏览器的兼容性的区别，最好是正整数），取值越大层越在最上面。比方说，我们正在打扑克，并且拿了一手同花大顺。我们可以通过为各张牌设定一个z-index的方式来表示这手牌：
在这个例子中，我们采用了1-5五个连续的数字来表示堆叠次序，但是你也可以用五个不同的其他数字来取得同样的效果。这里的要点在于：用数字的大小次序反映希望的堆叠次序。
扑克牌这个例子的代码可以这样写：
|
以下是代码片段： #ten_of_diamonds } #jack_of_diamonds } #queen_of_diamonds } #king_of_diamonds } #ace_of_diamonds } |
小结
层次可以应用于许多情况之下。例如，可以用z-index实现为标题（headline）增添效果（避免了采用图片的方式）。这样，一方面，装载文本的速度比图片要快；另一方面，采用文本可能更有利于提高网站的搜索引擎排名。
扫一扫
166
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
