盒子模型

box-sizing

CSS 中的 box-sizing 属性定义了 user agent 应该如何计算一个元素的总宽度和总高度。

• content-box：是默认值，设置border和padding均会增加元素的宽高。 :::danger width = content + padding + border :::

• border-box：设置border和padding不会改变元素的宽高，而是挤占内容区域。

.div-inner {
    width: 100px;
    height: 100px;
    background-color: darkred;
    box-sizing: border-box;
    padding: 10px 10px;
    border: 10px dotted red;  
}