Css盒子模型

• 内容盒：width和height只影响content，实际总宽高还会加上padding和border。
• 边框盒：width就是padding和border的和。

追问：

• margin 会影响盒子本身占据的空间大小吗？（不会，margin 是盒子外的空间，但会影响它在布局中的位置和与其他元素的距离）

• 讲讲 margin 合并（Margin Collapse）的场景和解决方案？（相邻兄弟元素、父子元素、空块级元素） inline 元素（如 <span>）的盒模型有什么特殊之处？（设置 width, height 无效；padding 和 border 在水平方向有效，但在垂直方向上不会撑开布局；margin 在水平方向有效，垂直方向无效）

• box-sizing 属性除了 content-box 和 border-box 还有其他值吗？（还有一个 padding-box，但已被废弃且浏览器支持不佳，基本不用）

• 如何获取一个元素在页面上占据的真实尺寸？（可以通过 element.offsetWidth 和 element.offsetHeight 这两个 DOM API，它们返回的就是 border-box 模型下的尺寸）

BFC Block Formatting Contex

• 独立的隔离环境，避免margin合并，以及浮动相互干扰

• 如何触发？

  • display：flex grid inline-block
  • overflow、float非none的值

• 用处

  • 解决外边距塌陷
    • 垂直方向上，相邻块级元素的margin会进行合并，合并成一个。（水平的不会）
    • 发生在兄弟元素之间，父元素和第一个子元素，没有content的元素自身