盒模型

88 阅读1分钟

重要性

在源代码中通过 <tag> 描述语义 Element 在页面中具体表现为 Box

盒模型是排版和渲染的基本单位。

盒模型的组成

  • content
  • padding
  • border
  • margin

box-sizing

盒模型的大小和生活中盒大小的概念是有偏差的。

例如:在盒模型设置宽度 width 时,默认设置的是 content 的宽度;而在生活中说一个盒子的大小是指整个盒子,并非内部的空间大小。

这样就会导致在UI还原的过程中出现问题。

  • content-box: width = content
  • border-box: width = content + padding + border