05常用的CSS基本布局.docVIP

常用的CSS基本布局 实例： 一列居中布局： 利用margin设定：margin:0 auto; 自动居中的关键在于让浏览器自动判断布局div的左右边距； margin属性用于控制对象的上、右、下、左4方向的外边距，既可以分开来写单独设定某一个方向的外边距值。也可以按照上面的顺时针顺序直接写出4方向的值。当我们只写出2个方向的值时，第一个值代表上下外边距，第二个值代表左右外边距。还有个auto 值是指让浏览器自动判断边距。 margin：10px 20px 20px 10px； /*分别是上、右、下、左 4个外边距的值*/ margin：10px 20px； /*分别是上下和左右的外边距的值，缩写形式*/ margin：10px； /*是4个方向外边距的值，缩写形式*/ margin：auto； /*由浏览器自动判断边距*/ 二列自适应布局： 利用float浮动属性来实现两个同级div容器的并列关系 2列布局是有2个最外级的div容器一起来控制页面的布局，由于div 本身是个块状元素，前面一个div容器默认情况下独占一行会将后面的一个div容器挤到下一行，而不能实现2个容器并列存在于一行内，因此需要使用float属性让容器浮动起来，改变原来独占一行的特点，使前后对象可以流动，从而形成2个容器并列在同一行内达到布局目的； float：left； /*对象向左浮动*/ float：right； /*对象向右浮动*/ float：none； /*对象不浮动*/ 这里要注意的是，前面的容器给予了float浮动，后面的容器才能流动起来。如果颠倒了前后关系则并列效果就不可以实现了； 二列自适应居中布局： 需要利用到div的嵌套关系 首先建立一个外层自适应居中的容器实现布局，然后在里面嵌套利用浮动并列的2个div层。 div id=”外层容器” div id=”内层左容器”/div div id=”内层右容器”/div /div 三列布局——左右固定，中间自适应： 需要利用position的绝对定位和margin的外边距控制； 关键在于用绝对定位控制左右两栏的值，然后中间栏用控制外边距的值留出左右栏位置达到三栏全部显示的目的。 body { margin:0px;} #left { position:absolute; left:0px; background-color: #CCFF66; width: 100px;} #right { position:absolute; top:0px; right:0px; background-color: #66CCCC; width: 100px;} #center { margin:0 100px; background-color: #9933CC; height: 500px;} 高度自适应： 高度和宽度一样，一般拥有数值和百分比2种形式来控制； 当高度为百分比的时候才能做到自适应； 高度的百分比是需要有个参照对象的，这个参照对象就是父级对象； 针对外框的布局层，高度的父级对象是body，但从兼容性的角度出发，我们在设定布局高度自适应时，要让html和body都被赋予一个值，使布局层的高度有个参照对象。 html,body { height:100%;} 限 教学指导手册（一期） DW 自编教学提纲 -2- chenyun Page 5 12/9/2009 -1-