box-sizing

介绍

box-sizing 决定元素的width和height如何解析。

取值

• border-box 默认值。width和height属性包括内容(content)，内边距（padding），和边框（border），但不包括外边距（margin）。

提示

尺寸计算公式：

width = border + padding + content

height = border + padding + content

• content-box 标准盒子模型。width和height只包括内容(content)，不包括边框（border），内边距（padding），外边距（margin）。

提示

尺寸计算公式：

width = content

height = content

• 默认值 border-box

样例：

box-sizing: border-box;
box-sizing: content-box;

标准化语法

content-box | border-box

与 Web 的区别

• mdn:box-sizingopen in new window

暂时不支持 inherit、initial、revert、unset 等取值。

默认值为border-box。

扩展阅读

widthheight