css 布局

1:2自适应布局
元素的padding的百分比值是基于其父元素的宽度计算的，如此，设置元素宽度width:25%，元素高度不设定，元素padding-bottom:75%，就可以得到一个高宽比为3:1的盒子。或者，元素的宽高都不设定，设置元素的padding-right: 25%，padding-bottom:75%，也可以得到一个高宽比为3:1的盒子。

width: 100%;position: relative;padding-top: 75%;

三列布局
（1）弹性布局 可使两列固定宽度，另一列设置为弹性

.container{display: flex;}.left{width: 200px;  // flex:0.3}.center{flex: 1;       // flex:0.4}.right{width: 300px;   // flex:0.3}

（2）浮动

.left{width: 200px;float: left;}.center{margin: 0 300px 0 200px;min-width: 100px;  /* 最小宽度，防止浏览器缩小后中间部分被隐藏 */}.right{width: 300px;float: right;}

（3）绝对定位

.left{width: 200px;position: absolute; /* 绝对定位，使位置固定 */left: 0;top: 0;}.center{margin: 0 300px 0 200px;   /* 通过外边距确定宽度 */}.right{width: 300px;position: absolute; /* 绝对定位，使位置固定 */right: 0;top: 0;}