第10章-CSS定位及div布局.pptVIP

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