兩欄布局
<body>
<div class="left">定寬</div>
<div class="right">自適應(yīng)</div>
</body>
.left{
width: 200px;
height: 600px;
background: red;
float: left;
display: table;
text-align: center;
line-height: 600px;
color: #fff;
}
.right{
margin-left: 210px;
height: 600px;
background: yellow;
text-align: center;
line-height: 600px;
}
三欄布局
<div class="wrapper">
<div class="left">左欄</div>
<div class="middle">中間</div>
<div class="right">右欄</div>
</div>
.wrapper{
display: flex;
}
.left{
width: 200px;
height: 300px;
background: green;
}
.middle{
width: 100%;
background: red;
marign: 0 20px;
}
.right{
width: 200px;
height: 300px;
background: yellow;
}
水平居中
行內(nèi)元素
.center-children {
text-align: center;
}
塊級(jí)元素
.center-me {
margin: 0 auto;
}
垂直居中
行內(nèi)元素
.center-text-trick {
height: 100px;
line-height: 100px;
white-space: nowrap;
}
塊級(jí)元素
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
漸變邊框
.box {
margin: 80px 30px;
width: 200px;
height: 200px;
position: relative;
background: #fff;
float: left;
}
.box:before {
content: '';
z-index: -1;
position: absolute;
width: 220px;
height: 220px;
top: -10px;
left: -10px;
background-image: linear-gradient(90deg, yellow, gold);
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
