比来几个月一直用vue在写手机真个项目，主要写业务逻辑，，在js方面投入的时间和精力也对照多。这两天写页面明显觉得css构造方面的常识有不敷，所以温习一下构造要领。

两栏构造

1、浮动

.box1 .left { float: left; width: 100px; height: 100px; background-color: red; } .box1 .right { margin-left: 100px; height: 100px; background-color: green; } <div> <div></div> <div>两列自适应</div> </div>

2、定位

.box1{ position: relative; width: 100%; height: 100px; } .box1 .left{ position: absolute; width: 100px; height: 100%; background-color: red; } .box1 .right{ margin-left: 100px; width: 100%; height: 100%; background-color: green; } <div> <div></div> <div></div> </div>

3、flex

.box1{ display: flex; height: 100px; } .box1 .left{ width: 100px; height: 100%; background-color: red; } .box1 .right{ flex:1; height: 100%; background-color: green; } <div> <div></div> <div></div> </div>

圣杯结谈判双飞翼构造目的是我们但愿先加载的是中间的部分，然后再开始加载 left 和 right 两个相对来说不是很重要的对象。

圣杯构造

圣杯构造给最外面加padding, 让 padding-left 和 padding-right 的数值即是left 和 right 的宽度，然后操作相对定位把他们再移动在两旁。

.box{ padding: 0 100px;/* 留出摆布的距离*/ height: 100px; } .box .middle { float: left; width: 100%; height: 100%; background-color: yellow; } .box .left { float: left; width: 100px; margin-left: -100%; background-color: red; position: relative; left: -100px;/*往左拉*/ height: 100%; } .box .right { float: left; width: 100px; margin-left: -100px; background-color: green; position: relative; right: -100px; height:100%; } <div> <!--注意挨次--> <div>middle</div> <div>left</div> <div>right</div> </div> 双飞翼构造 .box { position: relative; height: 100px; } .middle-wrap { position: relative; float: left; width: 100%; height: 100%; } .middle-wrap .middle { height: 100%; margin: 0 100px; /*留出距离*/ background-color: yellow; } .left { float: left; width: 100px; margin-left: -100%; height: 100%; background-color: red; } .right { float: left; width: 100px; height: 100%; margin-left: -100px; background-color: green; } <div> <div> <div></div> </div> <div></div> <div></div> </div>