css盒模型之box-sizing

Posted 2022-11-22 头名字W

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;