【三栏布局】

两侧固定宽度,中间以一个响应式或者自适应进行布局,例如CSDN和淘宝都是通过这种方式来进行布局。

【三栏布局】

 

1.利用浮动+margin

2.利用flex布局(常用)(父盒子设置display:flex,给中间的盒子设置flex为1)

3.利用圣杯布局

DOM结构(一个大的最外层盒子 MAIN盒子 左盒子 右盒子)先全部设置左浮动  给左右盒子设置宽度 给大的盒子设置外边距 外边距等于宽度 给MAIN盒子宽度设置为100%  再让左盒子的左外边距-100% positon:relative left:-200px 右盒子也设置relative margin-left:-200px right:-200px

4.利用网格布局(Grid)布局(常用)设置行列)(给列设置宽 auto 宽) 

上一篇:前端速成(9)css


下一篇:【CSS】让textarea在div里水平垂直都居中的三种办法