首頁(yè)電商視覺(jué)設(shè)計(jì)技術(shù)文章正文

ui培訓(xùn)之流式布局彈性盒模型(二)

更新時(shí)間:2016年05月06日15時(shí)29分來(lái)源:傳智播客UI培訓(xùn)學(xué)院瀏覽次數(shù):

二、CSS3中的彈性盒模型

div{
width: 200px;
height: 200px;
padding: 10px 20px 30px 40px;
border-style:solid;
border-color: red;
border-width: 10px 20px 30px 40px;
background-color: orange;
}

外擴(kuò)的padding和border

div{
width: 200px;
height: 200px;
padding: 10px 20px 30px 40px;
border-style:solid;
border-color: red;
border-width: 10px 20px 30px 40px;
background-color: orange;
box-sizing:border-box;
}
此時(shí)盒子的padding、border是內(nèi)減的

box-sizing是IE9開(kāi)始兼容的CSS3屬性，智能手機(jī)手機(jī)中支持這個(gè)屬性（過(guò)老的安卓版本除外）。這個(gè)屬性在流式布局中非常有用，是神器！
【階段小測(cè)試】看下面的代碼，判斷兩個(gè)盒子能否并排：

div{
width: 700px;
height: 100px;
margin: 100px auto;
background-color: orange;
}
/*第一個(gè)盒子，CSS3的選擇器*/
div p:nth-child(1){
float: left;
width: 20%;
height: 80px;
background-color: pink;
padding: 10px 20px 30px 40px;
border: 1px solid red;
margin-right: 10%;
box-sizing:border-box; /*加上這個(gè)屬性，表示20%的寬度，已經(jīng)計(jì)算了padding和border。但是沒(méi)有計(jì)算margin。所以這個(gè)盒子的真實(shí)占有寬度，就是20%+10% = 30%*/
}
div p:nth-child(2){
float: left;
width: 70%;
height: 80px;
background-color: green;
}