CSS的box-sizing和calc()

    有如下前端代码：

    CSS:

.out{
	width:300px;
	height:300px;
}
.in{
        width:100%;
	height:100%;
	padding-left:10px;
}

    html:

<div class="out">
	<div class="in"></div>
</div>

    现在外层div的width是300px,内层div的width是多少？ 300px还是 310px?

    要回答这个问题，需要了解box-sizing属性。

    1. box-sizing

    box-sizing有两个属性，content-box和border-box。

    content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内容框和边框。这个是W3C的标准模式，目前现代浏览器默认都是这个模式。所以如果内层div加上content-box后，div的width是310px，如下图所示。