二、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開始兼容的CSS3屬性,智能手機(jī)手機(jī)中支持這個(gè)屬性(過老的安卓版本除外)。這個(gè)屬性在流式布局中非常有用,是神器!
【階段小測試】看下面的代碼,判斷兩個(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。但是沒有計(jì)算margin。所以這個(gè)盒子的真實(shí)占有寬度,就是20%+10% = 30%*/
- }
- div p:nth-child(2){
- float: left;
- width: 70%;
- height: 80px;
- background-color: green;
- }
|
本文版權(quán)歸傳智播客UI培訓(xùn)學(xué)院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請(qǐng)注明作者出處。謝謝!
作者:傳智播客UI培訓(xùn)學(xué)院
首發(fā):http://m.8y3kgpwe.cn/ui