第10章_CSS定位与div布局讲解.ppt

* 倘若希望很精确地控制块的位置，就必须对margin有更深入的了解，。 结论1: 当一个div设置为向左或向右浮动后，它的宽度将不再撑满整个父块，而是以能够容纳下它的内容的最小宽度来显示。 Box-1这个盒子已经脱离了父块， Box-2盒子的范围就占据了原来Box-1的位置，Box-2里面的文字会受到浮动盒子的影响，而是围绕着Box-1显示。 10.3.1 float浮动 实验2：设置第二个浮动的div 10.3.1 float浮动 实验3：设置第三个浮动的div 结论2: 当某一个或几个盒子，都设置为浮动以后，它们就会脱离标准流，而标准流其他的内容就会顶上去，其文字会围绕着浮动的盒子环绕排列。 标准流指的是在不使用其他的与排列和定位相关的特殊CSS规则时，各种元素的排列规则。 就象流水，排在前面的标签内容前面出现，排后面的标签内容后面出现 。 10.3.1 float浮动 实验4：改变浮动方向（box-3向右） 10.3.1 float浮动 实验5：再次改变浮动方向（box-3向左、box-2向右） 10.3.1 float浮动 实验6：全部向左浮动 10.3.1 float浮动 实验7：使用clear属性清除浮动的影响 总结 宽度不会自动伸展，而是以内容为准。 脱离标准流，而独立存在。 它会对后面标准流的文字产生影响，而使文字环绕着它进行排列。 10.3.2 position定位 position定位 功能：指定块的位置，即块相对于其父块的位置和相对于它自身应该在的位置。 取值：static、absolute、relative和fixed。 10.3.2 position定位 static（静态定位） 这是默认的属性值，也就是盒子按照标准流（包括浮动方式）进行布局。 10.3.2 position定位 absolute（绝对定位） 参考实例：10-20.htm/ 10-21.htm top、right、bottom和left这4个CSS属性，它们都是配合position属性使用的。 1、当position设置为absolute时，其表示的是块的各个边界离页面边框的距离。 2、当position设置为relative时，其表示的是块的各个边界离原来位置的距离。 3、只有当position属性设置为absolute或者relative时才生效，如果将上例中的position设置为static，则子块不会有任何变化。 10.3.2 position定位 absolute（绝对定位） 参考实例：10-22.htm 参考实例：10-23.htm/ 10-24.htm 当同时设置了块的left、right或者top、bottom或者4个属性都设置时，对于IE浏览器仅仅只有left和top两个位置发挥了作用，而right和bottom值因为冲突没有根据需要进行调整。对于firefox浏览器，为了满足4个边界的要求，子块的大小被改变了。 总结： 若盒子的父容器都没有设置定位方式（position:relative;），这时盒子以浏览器为坐标原点进行定位；若盒子的父容器设置了定位方式，这时盒子以离它最近的设置定位方式的父容器为坐标原点进行定位。 10.3.2 position定位 10.3.2 position定位 relative（相对定位） 盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它原本位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。 参考实例：10-25.htm 参考实例：10-26.htm 10.3.2 position定位 fixed 称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准，进行定位。很遗憾的是，IE7和IE6都不支持该属性。 10.3.3 z-index空间位置 z-index 功能：用于调整定位时重叠块的上下位置。 取值：其值为整数，可以是正数也可以是负数，其值大的页面位于其值小的上方。 当块被设置了position属性时，该值便可设置各个块之间的重叠高低关系。默认为0，当两个块的z-index值一样时，将保持原有的高低覆盖关系。 参考实例：10-28.htm 10.4 盒子的display属性 body divbox-1/div divbox-2/div divbox-3/div spanbox-4/span spanbox-5/span spanbox-6/span divbox-7/div spanbox-8/span /body 10.4 盒子的display属性 body div style=“display:inl