前端经典面试题合集, 什么是 CSS 盒子模型?

Step 1

Q:: 什么是 CSS 盒子模型？

A:: CSS 盒子模型是 CSS 中一个用于描述元素框架的概念。每个元素被认为是一个矩形盒子，盒子模型包括元素内容(content)、内边距(padding)、边框(border)和外边距(margin)。内容区包含实际内容，内边距是围绕内容的空白区，边框围绕内边距，外边距是围绕边框的空白区。盒子模型在布局和设计中起关键作用。

Step 2

Q:: 如何更改一个元素的盒子模型？

A:: 可以使用 CSS 的 box-sizing 属性来更改元素的盒子模型。默认值是 content-box，即只包含内容区。设置为 border-box 时，元素的宽度和高度包括内容、内边距和边框。border-box 常用于确保元素在添加内边距和边框后不会改变其总宽度和高度。

Step 3

Q:: 解释 CSS 中的 margin 和 padding 有什么区别？

A:: margin 和 padding 都是用于控制元素周围的空间。margin 是元素外部的空白区，影响元素与周围元素之间的距离；padding 是元素内部的空白区，影响元素内容与其边框之间的距离。两者可以分别设置不同的方向（如 top、right、bottom、left）。

Step 4

Q:: 盒子模型的内边距和外边距会重叠吗？

A:: 在 CSS 中，垂直方向的相邻块元素的外边距可能会发生重叠，这种现象称为外边距折叠 (margin collapsing)。内边距则不会重叠，它始终应用于元素的内容和边框之间。

Step 5

Q:: 如何解决外边距重叠问题？

A:: 可以通过设置元素的 overflow 属性为 hidden 或者给元素添加 padding 或者 border 来解决外边距重叠问题。此外，也可以使用浮动（float）或者绝对定位（position: absolute）来避免重叠。