网上找的方法,自己整理一下~(这些面试也会考)
#三栏
绝对布局
<div id = "left">我是左边</div>
<div id = "right">我是右边</div>
<div id = "center">我是中间</div>
html,body{
margin: 0px;
width: 100%;
}
#left,#right{
width: 200px;
height: 200px;
background-color: #ffe6b8;
position: absolute;
}
#left{
left:0px;
}
#right{
right: 0px;
}
#center{
margin:2px 210px ;
background-color: #eee;
height: 200px;
}
浮动(中间的要放在最后)
<div id = "left">我是左边</div>
<div id = "right">我是右边</div>
<div id = "center">我是中间</div>
html,body{
margin: 0px;
width: 100%;
}
#left,#right{
width: 200px;
height: 200px;
background-color: #ffe6b8;
}
#left{
float: left;
}
#right{
float: right;
}
#center{
margin: 0 210px;
height: 200px;
background-color: #a0b3d6
}
margin负值法(布局中间部分一定要放在前面,左右顺序不限制。对于left快的margin负值一定要等于wrap的宽度。)
<div id = "wrap">
<div id = "center"></div>
</div>
<div id = "left_margin"></div>
<div id = "right_margin"></div>
html,body{
margin: 0px;
width: 100%;
}
#wrap{
height: 100px;
background-color: #fff;
float: left;
}
#wrap #center{
margin:0 210px;
height: 100px;
background-color: #ffe6b8;
}
#left_margin,#right_margin{
float: left;
width: 200px;
height: 100px;
background-color: darkorange;
}
#left_margin {
margin-left: -100%;
background-color:lightpink;
}
#right_margin{
margin-left:-200px;
}
flex
<div id = "box">
<div id = "left_box"></div>
<div id = "center_box"></div>
<div id = "right_box"></div>
</div>
html,body{
margin: 0px;
width: 100%;
}
#box{
display: flex;
height: 200px;
margin: 10px;
}
#left_box,#right_box{
width: 200px;
height: 200px;
margin: 10px;
background-color:lightpink;
}
#center_box{
flex:1;
height: 200px;
margin: 10px;
background-color:lightgreen;
}
#垂直居中
css2:
<div class="parentNode">
<div class="childNode"></div>
</div>
.parentNode {
width: 400px;
height: 400px;
background: #f00;
overflow: hidden;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
<div class="parentNode">
<div class="childNode"></div>
</div>
* {
margin: 0;
padding: 0;
}
.parentNode {
width: 400px;
height: 400px;
background: #f00;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
.childNode {
width: 200px;
height: 200px;
background: #fff;
}
css3: (transforrm)
<div class="parentNode">
<div class="childNode"></div>
</div>
.parentNode {
width: 400px;
height: 400px;
background: #f00;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
首先定义为绝对定位
top: 50%;left: 50%; 是以父元素(positon不为static)的左上角为原点,将元素分别向右和向下移动父元素的宽和高的50%距离translate(-50%,-50%) 作用是,往上(x轴),左(y轴)移动自身长宽的 50%,以使其居于中心位置
tips:
flex实现流式布局
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
*{
margin: 0;
padding:0;
}
.container{
margin: 20px 20px;
padding: 10px 10px;
display: flex;
flex-wrap:wrap;
border: 1px solid #ADAAAA;
}
.item{
flex:0 0 40%;
height: 100px;
margin:20px 5%;
box-sizing: border-box;
border: 1px solid red;
}
@media (min-width:960px){
.item{
flex:0 0 20%;
height: 100px;
margin:20px 2.5%;
box-sizing: border-box;
border: 1px solid red;
}
}