ui培训之流式布局弹性盒模型(二)

更新时间:2016年05月06日15时29分来源:传智播客UI培训学院浏览次数:

二、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是内减的

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%的宽度，已经计算了padding和border。但是没有计算margin。所以这个盒子的真实占有宽度，就是20%+10% = 30%*/
}
div p:nth-child(2){
float: left;
width: 70%;
height: 80px;
background-color: green;
}