等高布局
一、伪等高:
步骤:
1, 给两个盒子设置浮动.在一排显示(清浮动)
2, 两个盒子设置padding-bottom: 9999px; margin-bottom: -9999px
3, 给父盒子设置overflow:hidden
二、伪等高:
步骤:
1, 设置一个盒子,盒子有三列(左中右)(浮动)
2, 中间盒子的width:100%,左右两边盒子width固定
3, 给父盒子设置左右边框,左右边框的宽度等于左右盒子的宽度
边框颜色和左右盒子背景色一致,父盒子的背景色和中间盒子背景色一致
4, 左边盒子设置margin-left: -自身宽度;右边盒子设置margin-right: - 自身宽度
三、等高:
步骤:
1, 有几列就设置几个嵌套盒子
2, 儿子盒子的列设置浮动,清浮动
3, 爸爸盒子设置相对定位 left: 左盒子宽度
4, 儿子盒子设置相对定位 left: 中间盒子宽度
5, 爷爷盒子设置overflow:hidden
6, 子盒子设置 margin-left: 负值,移动盒子
7,爷爷盒子背景色和左盒子一致,爸爸盒子背景色与中间盒子一致,儿子盒子与右盒子一致
圣杯布局
步骤:
1、父盒子嵌套三个盒子,保证中间盒子在最上面(中间盒子宽100%),左右两边盒子宽固定
2、设置三个盒子浮动(注意清浮动)
3、左盒子设置margin-left:-100%,再设置相对定位left:-本身宽
4、右盒子设置margin-right:-本身宽度
双飞翼布局
利用margin值
步骤:
1、中间盒子在最上面(中间盒子宽100%),左右两边盒子宽固定
2、三个盒子浮动(注意清浮动)
3、在中间盒子中嵌套一个盒子main,同时给main盒子设置左右margin,值是左右盒子的宽度
4、左盒子设置margin-left:-100%
5、右盒子设置margin-left:-自身宽