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。