一列布局
- <div>作为布局板块，style样式中 margin:0 auto 表示居中
- image.png
-
运行效果
板块
二列布局
-
在main中二列布局
image.png float:left ;float:right表示浮动到左边，浮动到右边
-
浮动（float）和绝对定位(position:absolute)可以让元素脱离文档流。
image.png -
运行效果
image.png
三列布局
-
在main中三列布局
image.png -
width:33.33%平均分配
image.png -
运行效果
image.png
position:absolute绝对定位
- left、right部分绝对定位，middle部分自适应
- left{position:absolute ; left:0 ; top:100px}表示left部分绝对定位离顶100像素（ 因为top{height ：100px} ），离左边0像素，这个位置与left是否在main里面无关。
-
middle{ margin : 0 310px 0 210px} 表示middle在main里距离上0px,距离右310px,距离下0px，距离左210px。
image.png
image.png -
运行效果
image.png
混合布局
-
层级：
main(left,right)
right(sub_l,sub_r)
image.png -
自行计算width:
main (800px)
=left(200px) + right(600px)
= left(200px) + sub_l(400px) + sub_r(200px)
image.png
-
运行效果
image.png
