前端面试题

外观

CSS 盒模型怎么讲？ ​

box-sizing: content-box 时，width 只是内容宽度，padding 和 border 加在外面。border-box 时，width 已经包含 padding 和 border。现在的全局实践是 box-sizing: border-box。

原理 ​

从内到外是：内容、padding、border、margin。标准盒模型里写 width: 100px; padding: 10px; border: 1px solid 时，占位宽度是 100 + 20 + 2。border-box 下这 100px 就是边框外沿之间的宽度，内容区会被 padding 和 border 挤小。

css
*,
*::before,
*::after {
  box-sizing: border-box;
}

margin 不在 width 里面。相邻块级元素的垂直 margin 会折叠：两个正 margin 取较大的那个，不是相加。水平 margin 不折叠。折叠发生在同一块格式化上下文里，浮动、绝对定位、overflow 不为 visible 的容器会把它隔开。见 BFC。

inline 元素的垂直 margin、以及宽高，不参与布局。要间距和尺寸，用 inline-block 或 flex/grid。

追问 ​

width: 100% 为什么溢出？

父元素给的百分比通常相对包含块的内容宽度。子元素如果是 content-box，自身的 padding 和 border 会加在这 100% 外面。改成 border-box，或用 max-width: 100%，溢出就消失。

box-sizing 影响 margin 吗？

不影响。margin 始终在设定的宽度之外。

易错点 ​

  • 全局 border-box 之后，仍然有人按「width 加 padding」去心算，布局会对不上。
  • 垂直 margin 折叠不是 bug，是块布局的规则。
  • height: 100% 要父元素有明确高度，否则百分比算不出来。

相关 ​