最近几个月一直用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 class="box1">
<div class="left"></div>
<div class="right">两列自适应</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 class="box1">
<div class="left"></div>
<div class="right"></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 class="box1">
<div class="left"></div>
<div class="right"></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 class="box">
<!--注意顺序-->
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">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 class="box">
<div class="middle-wrap">
<div class="middle"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。