高级前端css【Q608】请简介 CSS 的盒模型

请简介 CSS 的盒模型

Issue 欢迎在 Gtihub Issue 中回答此问题: Issue 626

Author 回答者: linlai163

  • 标准盒模型 width = content-width height = content-height
  • 怪异盒模型 width = content-width + padding + border height = content-height + padding + border

但是我感觉怪异盒模型更好用 😂

Author 回答者: shfshanyue

CSS 的盒模型主要包括以下两种,可通过 box-sizing 属性进行配置:

  • content-box:默认属性。width 只包含 content
  • border-box:width 包含 (content、padding、border)