#box-sizing

#介绍

box-sizing 决定元件的 width、height、min-width、min-height、max-width、max-height 如何解析。

#使用示例

css-apisrc/box-sizing/App.tsx

预览

#语法

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

#取值

• 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

#形式定义

#形式语法

box-sizing = border-box | content-box

#与 Web 的区别

• Lynx 的默认值为 border-box，Web 的默认值为 content-box。
• box-sizing 不会影响 flex-basis 的取值。

#兼容性