简述CSS盒模型

CSS 盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

两种盒模型

• content-box 内容盒模型：内容就是盒子的边界,宽度只含content
• border-box 边框盒模型：边框才是盒子的边界，宽度含有：border,padding,content

公式

• content-box width=内容宽度
• border-box width=内容宽度+padding+border

一般选用哪种盒模型

通常选用border-box，可以指定padding，border，width

margin合并

• 那些情况下合并？
  1. 父子margin合并
  2. 兄弟mergin合并
• 怎么阻止合并？
  1. 阻止父子margi合并
     • padding/border挡住
     • overflow: hidden挡住
     • display: flex挡住
  2. 兄弟mergin合并
     • 兄弟合并是符合预期的
     • 兄弟合并可以用 inline-block 消除

本文仅为学习笔记，文章资料来源：饥人谷