共计 1610 个字符，预计需要花费 5 分钟才能阅读完成。
左右布局
/* 注释以下全是重点 */
.bigBox::after{
/* 清除浮动【重点】*/
content:”;
display: block;
clear:both;
}
.box1{
width: 50%;
background: palegreen;
/*【重点】*/
float: left;
}
.box2{
width: 50%;
background: paleturquoise;
/*【重点】*/
float: left;
}
<div class=”bigBox”>
<div class=”box1″>box1</div>
<div class=”box2″>box2</div>
</div>
左中右布局【flex】
两版固定宽度 中间自适应 全部自适应 宽度可以都写成 flex: 1;（数值自行调整）
.box{
height:50px;
/*【重点】*/
display: flex
}
.left{
background-color: #b1dfbb;
/*【重点】*/
width: 300px; /* 如果均分 这个可以改为 flex: 1; */
}
.center{
background-color: yellowgreen;
/*【重点】*/
flex: 1;
}
.right{
background-color: #b1dfbb;
/*【重点】*/
width: 300px; /* 如果均分 这个可以改为 flex: 1; */
}
<div class=’box’>
<div class=’left’>left</div>
<div class=’center’>center</div>
<div class=’right’>right</div>
</div>
水平居中
.box{
width: 200px;
height: 200px;
background: aquamarine;
/*【重点】*/
margin: 0 auto;
}
<div class=”box”>box</div>
以下效果都一样 以下效果都一样 以下效果都一样 以下效果都一样 以下效果都一样 以下效果都一样
水平、垂直居中【translate】
.box{
width: 200px;
height: 200px;
background: palevioletred;
/*【重点】*/
position: relative;
}
.box span{
background: aquamarine;
width: 100px;
height: 150px;
/*【重点】*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
<div class=”box”>
<span>123</span>
</div>
水平、垂直居中【减 margin】
*{
padding:0;
margin: 0;
}
.box{
width: 200px;
height: 200px;
background: palevioletred;
/*【重点】*/
position: relative;
}
.box span{
background: aquamarine;
width: 100px;
height: 150px;
/*【重点】*/
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -50px;
}
<div class=”box”>
<span>123</span>
</div>
水平、垂直居中【flexBox】
.box{
width: 200px;
height: 200px;
background: palevioletred;
/*【重点】*/
display: flex;
justify-content: center;
align-items:center;
}
.box span{
background: aquamarine;
width: 100px;
height: 150px;
}
<div class=”box”>
<span>123</span>
</div>
