* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
一:
box-sizing:
content-box;
默认值,W3C标准盒子模型,元素的宽度和高度等content+padding+border。css中设置的width就是设置的content的宽高,不包含border和padding
<
div
class=
"content1"
>
<
img
class=
"img"
src=
"../src/assets/images/background-image.jpg"
>
</
div
>
.content1{
box-sizing:
content-box;
width:
200px;
height:
200px;
padding:
20px;
border:
5px
solid
#f00;
margin:
30px;
}
.img{
width:
100%;
height:
100%;
display:
inline;
}
二:
box-sizing:
border-box;
让元素维持IE传统的盒模型(IE6以下版本和IE6-IE7怪异模式),也就是元素的宽高度等于元素内容的宽高度。元素内容的宽高度包含了content+padding+border
<
div
class=
"content2"
>
<
img
class=
"img"
src=
"../src/assets/images/background-image.jpg"
>
</
div
>
.content2{
box-sizing:
border-box;
width:
200px;
height:
200px;
padding:
20px;
border:
5px
solid
#f00;
margin:
30px;
}
结果:
三:
box-sizing:
inherit;
使元素继承父元素的盒子模型
参考url:http://www.w3chtml.com/css3/properties/user-interface/box-sizing.html