css布局,三栏布局
圣杯布局:
方式一:
1,父盒子包含着三个子盒子
2,给父盒子设置宽跟高,设置相对定位,设置padding值
3,给左右的连个盒子设置的宽与父盒子的padding值一样,绝对定位,
左盒子left:0,top:0 定位到最左边
右盒子right:0,top:0 定位到最右边
中间的盒子宽度设置100%,让它自适应
方式二:
1,父盒子设置display:flex,高度
2,左右盒子设置宽一样,高度。让中间的盒子为flex为1
方式三:
1,父盒子设置高度
2,左子盒子设置左浮动,右子盒子设置右浮动
3,中间的子盒子设置overflow:hidden
双飞翼布局:
方式一:
1,更上面方式一样,只是父亲的高度要比孩子的高度要高
方式二:
1,准备三个并列的盒子,让中间的盒子再包一个小盒子
2,三个并列的盒子都设置flot:left
3,左盒子的margin-left:-100%,让它移动到最左边,
4,右盒子的margin-left:设置自身的宽度
5,中间的盒子设置margin:0 左右盒子的宽度