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

更新時間:2016年05月06日15時29分來源:傳智播客UI培訓學院瀏覽次數(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;
}

外擴的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;
}
此時盒子的padding、border是內(nèi)減的

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

div{
width: 700px;
height: 100px;
margin: 100px auto;
background-color: orange;
}
/*第一個盒子，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; /*加上這個屬性，表示20%的寬度，已經(jīng)計算了padding和border。但是沒有計算margin。所以這個盒子的真實占有寬度，就是20%+10% = 30%*/
}
div p:nth-child(2){
float: left;
width: 70%;
height: 80px;
background-color: green;
}