CSS 属性 box-sizing 定义了元素的总宽度和高度是如何计算。

语法

语法形式：box-sizing: content-box(default) | border-box;

示例

container
content-box
container
border-box

说明

box-sizing 属性的两个值：

  • content-box width 和 height 属性包含了内容 content，不包含内间距 padding，边框 border，外间距 margin。盒子的渲染宽度 = width + padding + border。默认的 CSS 盒模型。

  • border-box width 和 height 属性包含了内容 content，内间距 padding 和边框 border，但不包括外间距 margin。盒子的渲染宽度 = width。

有意思的是，content-box 是 CSS 规范的默认值，但是 border-box 会更加直观方便，简单实用，因此也受到大家青睐。令人惊讶的是 border-box 来源于 IE 里的怪异模型。

参考链接