三列布局介绍.ppt

2、r区域三列布局介绍两列定宽中间自适应的三列结构主要利用负边距原理实现两列定宽中间自适应的三列结构，这里负边距值指的是将某个元素的margin属性值设置成负值，对于使用负边距的元素可以将其他容器“吸引”到身边，从而解决页面布局的问题。#container{overflow:auto;}#mainBox{float:left;width:100%;height:200px;}#content{height:200px;margin:0210px0310px;}#submainBox{float:left;height:200px;wid

3、th:300px;margin-left:-100%;}#sideBox{float:left;height:200px;width:200px;margin-left:-200px;}三列布局介绍三列自适应结构#content{height:200px;margin:031%031%;/*设置外边距左右距离为自适应*/}#submainBox{float:left;height:200px;width:30%;/*设置宽度为30%*/margin-left:-100%;/*设置负边距为-100%*/}#sideBox{float:left;h

4、eight:200px;width:30%;/*设置宽度为30%*/margin-left:-30%;/*设置负边距为-30%*/}清除浮动父层不随子层高度用float属性不可避免在非ie浏览器下会出现浮动问题，具体症状表现为：子层不继承父层的高度，照成高度不统一现象解决方法在两个浮动层之后插入一个层定义类：.clearfloat{clear:both;height:0;font-size:1px;line-height:0px;}外边距的叠加1．两个元素垂直相遇时叠加当两个元素垂直相遇时，第一个元

5、素的下边距与第二个元素的上边距发生叠加，叠加后，两元素之间的距离为这两个元素外边距值较大者。2．两个元素包含时叠加架设两个元素没有内边距和边框，且一个元素包含另外一个元素，这时它们的上边距或下边距会发生叠加，叠加后，两元素之间的距离为这两个元素上边距或下边距较大者。IE6双倍边距bug当页面内有多个连续浮动时，如项目列表是采用左浮动，此时设置li的左侧margin值时，在最左侧呈现双倍情况。如外边距设置为10px，而左侧则呈现出20px解决方法在浮动元素上加上display:inline;的样式，可避免双倍边距bug实训：精品课程网站首页操作提

6、示