1,居中布局
語(yǔ)法:
margin:0 auto;
將div框?qū)挾仍O(shè)置為100%就能占滿屏幕,如果不想占滿屏幕,只希望在任何分辨率的屏幕上居中布局設(shè)定好的寬度,只需要定義寬度大小。此時(shí)是看不到div框的,可以設(shè)置高度,或者填充內(nèi)容,內(nèi)容高度即div高度。
2,關(guān)于display:inline-block
簡(jiǎn)單來(lái)說(shuō)就是將對(duì)象呈現(xiàn)為inline對(duì)象,但是對(duì)象的內(nèi)容作為block對(duì)象呈現(xiàn)。之后的內(nèi)聯(lián)對(duì)象會(huì)被排列在同一行內(nèi)。比如我們可以給一個(gè)link(a元素)inline-block屬性值,使其既具有block的寬度高度特性又具有inline的同行特性
3,關(guān)于background-size:cover
在寫手機(jī)端頁(yè)面或者PC端頁(yè)面的時(shí)候,如果要寫一些純色提示的,直接用background-size:cover來(lái)設(shè)置
HTML:
<div class="wrap-one">
<div class="bg"></div>
</div>
<div class="wrap-two">
<div class="tip">注意安全</div>
</div>
CSS:
.wrap-one{
margin: 0 auto;
width: 300px;
height: 100px;
background-color: rgb(48, 133, 133)
}
.bg{
background-color: rgba(0,0,0,.7);
background-size: cover;
padding-top: 20%;
}
.wrap-two{
margin: 0 auto;
width: 300px;
height: 90px;
background-color: #c7202f;
}
.tip{
line-height: 60px;
font-size: 14px;
text-align: center;
background-color: rgba(135, 25, 46, 0.7);
color: #FFF;
}