CSS 设计彻底研究（四）盒子的浮动与定位

第四章 盒子的浮动与定位

　　本章的重点和难点是深刻地理解”浮动“和”定位“这两个重要的性质，对于复杂页面的排版至关重要。

4.1 盒子的浮动

　　在标准流中，一个块级元素在水平方向会自动伸张，直到包含它的元素的边界；而在竖直方向和兄弟元素依次排列，不能并排。使用“浮动”方式后，块级元素就可以并排了。

　　CSS中的float属性，默认为none。就是标准流通常的情况。 如果将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧。同时默认情况下，盒子的宽度不再伸张，而是根据盒子里面的内容的宽度来确定。

4.1.1 准备代码

　　对浮动的解决方法，用clear清除浮动

　　clear属性有 left、right、both。同时消除左右两边的影响。

　   对div设置浮动后，会导致父div没有高度，只有border和 padding 的值，因为浮动后就不在标准流中。 可使用以下几种方式解决：

　　· 在子div后增加一个<div style="clear:both"></div>

　　` 或者设置父div的高度。

4.2 盒子的定位

　　position属性可以设置为4个属性值之一：

　　1. static： 这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局；

　　2. relative：称为相对定位，使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。

　　3. absolute：绝对定位，盒子的位置以它的包含框为基准进行偏移。绝对定位的盒子从标准流中脱离。这以为着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。

　　4. fixed：称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口的滚动条时，依然保持对象位置不变。

4.2.1 static（静态定位）

　 static为默认值，表示块表示在原本应该在的位置上，即该值没有任何移动的效果。　

4.2.2 relative（相对定位）

　　表示块相对没有偏移之前的位置移动的距离。

　　position:relative; left:30px; top:20px;  表示模块的左上边距与原来位置的距离。距离之前位置的左边界有30px，距离之前的上面边界20px，也就是向右移动30px，向下移动20px。

　　当子块使用相对定位发生偏移后，及时移动到了父盒子的外面，父盒子也不会变大，就像子盒子没有变化一样。

　　A. 使用相对定位的盒子，会相对于它原本的位置，通过偏移指定的距离，到达新的位置。

　　B. 使用相对定位的盒子仍在标准流中，它对父块和兄弟块都没有任何影响。

4.2.3 absolute（绝对定位）

　　A. 使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。

　　　　如：给子div 设置 position：absolute； top:10px; left:10px;   并且设定 父div  position：relative. 那么就是子div以父div为基准进行偏移。相对父div的边界 距离上面10px，左边10px。  如果不设置父div的positon，则相对于浏览器的边界偏移。

　　B. 绝对定位的框从标准流中脱离，意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。

　　* IE6中会出现错误，需给父div（定位的基准盒子）增加一条CSS样式。  height:1%;

　　3. 浏览器的Bug和Hack

　　对于存在于程序中的小错误，称为“Bug”。　　

　　Hack 是指一些说得清或者说不清的道理，但有很有效的解决办法。类似生活中的“偏方”。 因为有了很多Hack方法，来解决一些特定的Bug。

　　

　　4. 绝对定位的特殊性质

　　　　如果设置了绝对定位，而没有设置偏移属性，那么它仍将保持在原来的位置。这个性质可以用于需要使某个元素脱离标准流，而仍然希望它保持在原来的位置的情况。

4.2.4 fixed（固定定位）

　　定位的基准是浏览器窗口或者其他显示设备的窗口。也就是当访问者拖动浏览器窗口滚动条时，固定定位的元素将保持相对于浏览器窗口不变的位置。

4.3 z-index 空间位置

　　z-index属性用于调整定位时重叠块的上下位置。

　　z-index属性的值为整数，可以是正数也可以使负数。当块被设置了position属性时，该值便可设置各块之间的重叠高低关系。默认的z-index值为0，当两个块的z-index值一样时，将保持原有的高低覆盖关系。

4.4 盒子的display属性

　　display属性值有：block， inline，none。  block 可使行内元素设置为块级元素如span添加block后同div一样。