CSS3 box-sizing 属性

* {
-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