常见的布局(知识点)

多列布局 :

(1)左列定宽 ,右边自适应 ( 右边定宽,左边自适应 )

解决 : 利用 float + margin 实现 ,IE6有3px的bug
利用float + overflow(左边定宽)
flex弹性盒子,左边为定宽,右边flex:1(IE9+以上)

(2)两列定宽,一列自适应

解决: 利用 float + margin 实现 ,IE6有3px的bug
利用float(两边) + hidden (左边定宽)
table实现(父元素设置 display:table 把元素变为表格的形式 IE8+以上 )
flex弹性盒子,左两边为定宽,右边flex:1

(3)两侧定宽,中栏自适应

利用 float + margin 实现 ,IE6有3px的bug
flex弹性盒子,左右两边为定宽,中间flex:1
table实现(父元素设置 display:table 把元素变为表格的形式 )

.parent{display:table;table-layout:fixed;width:100%;} 
.left,.center,.right{display:table-cell;} 
.left,.center{width:200px;background: red;}

(4)一列不定宽,一列自适应

解决: 利用float + overflow
table实现(父元素设置 display:table(固定 fixed width:100%) 把元素变为表格的形式 IE8+以上 )
flex弹性盒子,右边flex:1,父元素设置display:flex;

(5)多列等分布局

解决: 利用float (设置box-sizing:border-box; border的颜色为白色(隐藏) .bb+.bb 从第二个元素到最后一个设置margin-left)
table实现(父元素设置 display:table(固定 fixed width:100%) 把元素变为表格的形式 IE8+以上 )
flex弹性盒子,右边flex:1,父元素设置display:flex;(.bb+.bb 从第二个元素到最后一个设置margin-left)

flex-direction:column(主轴和块轴相同)
row : flex容器的主轴和文本方向相同
row-reverse:表现和row相同,但是置换了主轴起点和主轴终点
column: flex容器的主轴和块轴方向相同
row-column: 表现和column相同,但是置换了主轴起点和主轴终点

(6)九宫格布局

解决: flex弹性盒子 (父元素设置 flex flex-direction:column 方向 )

(7)响应式布局

解决: meta标签的使用

<meta name="viewport" content="width=device-width,initial-scale=1">