CSS - box-sizing简单例子

最近工作中使用到css box-sizing属性，以一个简单的例子特此记录。

1. 实验

css代码：

.monitor {
font-size: 16px;
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid black;
box-sizing: content-box;
}

html代码：

<div id="hp" class="monitor">
</div>

效果截图：

指定 box-sizing 为 content-box：





指定 box-sizing 为 border-box：

2. 结论：

1. 当指定 box-sizing 为 content-box：div 中 content 的 width 等于 css 中设置的 width 
（100px ）

2. 当指定 box-sizing 为 border-box： div 中 content 的 width 等于 css 中设置的 width - padding width * 2 - border width * 2 
（100 - 10 * 2 - 1 * 2 = 78px ）
3. 常见应用： 有时候设置子元素的padding或者border, 会把父元素撑破，为了避免这种情况，我们可以指定子元素的box-sizing为border-box。