box-sizing属性

用途 box-sizing 属性是用来更改 CSS盒模型 中的这种 计算元素宽高 的一种方法

box-sizing: content-box

    <style type="text/css">
    	* {
    		padding: 0;
    		margin: 0;
    	}
    	.box {
    		width: 100px;
    		height: 100px;
    		background: #f4f4f4;
    		padding: 20px;
    		border:1px solid #2577e3;
    		box-sizing: content-box;
    	}
    </style>
    <div class="box">
    </div>复制代码

 

通过案例我们可以观察到 box-sizing: content-box 即默认值 如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

box-sizing: border-box

    <style type="text/css">
    	* {
    		padding: 0;
    		margin: 0;
    	}
    	.box {
    		width: 100px;
    		height: 100px;
    		background: #f4f4f4;
    		padding: 20px;
    		border:1px solid #2577e3;
    		box-sizing: border-box;
    	}
    </style>
    <div class="box">
    </div>复制代码

通过案例发现如果你将一个元素的 width 设为100px,那么这100px会包含它的 border 和 padding，内容区的实际宽度会是 width 减去 border + padding 的计算值。