css盒模型之box-sizing

版权声明：本文为博主原创文章，欢迎转载，转载请标明出处。 https://blog.csdn.net/YeShenLiaoSuiFeng/article/details/80737703

box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。

box-sizing: content-box|border-box|inherit

content-box：指容器的边框的线的宽度不算在容器的宽高里面，在容器外绘制边框。

border-box：将容器的边框算在容器内，实际容器的宽高需要减去边框的宽度。

inherit:  继承父级的属性。

div.container {width:220px;}
div.box{
box-sizing:content-box;
-moz-box-sizing:content-box; /* Firefox */
width:100%;
border:1em solid tan;
float:left;
background:green;

}

div.box{
box-sizing:border-box;
width:100%;
border:1em solid tan;
float:left;
background:green;

}