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

QA

Step 1

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

A:: CSS 盒子模型是一种用于描述 HTML 元素结构和布局的模型。每个 HTML 元素被表示为一个矩形盒子，包含以下几个部分：1. Content（内容）：元素的实际内容。2. Padding（内边距）：内容周围的空间，透明但会扩大元素的大小。3. Border（边框）：围绕在内边距外面的边框。4. Margin（外边距）：边框外部的空间，用于间隔其他元素。盒子模型的主要目的是帮助设计师和开发者更好地控制元素的尺寸和布局。

Step 2

Q:: 如何通过 CSS 修改盒子模型？

A:: 可以通过 CSS 的 box-sizing 属性来修改盒子模型。默认值是 content-box，表示元素的宽高只包括内容，不包括内边距和边框。设置为 border-box 时，元素的宽高将包括内边距和边框。示例：box-sizing: border-box;。

Step 3

Q:: 什么是 margin collapsing？

A:: margin collapsing 是指当两个垂直方向上的相邻块级元素的外边距重叠时，它们之间的距离不是两个 margin 之和，而是取其中较大的一个。例如，如果一个元素的底部 margin 是 20px，另一个相邻元素的顶部 margin 是 30px，那么它们之间的距离将是 30px 而不是 50px。

Step 4

Q:: 如何解决盒子模型中的 margin 重叠问题？

A:: 可以通过以下几种方法解决 margin 重叠问题：1. 使用 padding 或 border 替代 margin。2. 在元素之间插入一个空的元素，如 <div style='height:0;'>。3. 给相邻的元素设置不同的父元素。

用途

面试中问及 CSS 盒子模型的目的是为了评估候选人对网页布局和样式控制的基本理解。这在实际生产环境中非常重要，因为盒子模型是网页布局的基础。掌握这一概念有助于开发者精确控制页面元素的大小、边距和对齐方式，从而实现设计师的视觉效果并提高页面的响应性和兼容性。\n

相关问题

🦆

解释一下 CSS 的 position 属性及其不同的值.▷

CSS 的 position 属性用于指定一个元素在文档中的定位方式。常见的值有：1. static：默认值，元素按照正常的文档流进行定位。2. relative：相对定位，元素相对于其正常位置进行偏移。3. absolute：绝对定位，元素相对于最近的定位祖先元素进行定位，如果没有，则相对于初始包含块。4. fixed：固定定位，元素相对于浏览器窗口进行定位。5. sticky：粘性定位，元素在滚动过程中相对于其最近的滚动祖先元素进行定位，当滚动超过某个阈值时变为固定定位。

🦆

什么是 Flexbox 布局?▷

Flexbox（Flexible Box）布局是一种用于一维布局的 CSS 布局模式。它可以通过指定容器的 display 属性为 flex 或 inline-flex 来启用。Flexbox 布局允许容器内的子元素灵活地排列和对齐，可以轻松实现垂直和水平居中、元素间距分配和重新排序。其主要属性包括：1. flex-direction：定义主轴方向。2. justify-content：定义主轴上的对齐方式。3. align-items：定义交叉轴上的对齐方式。4. flex-wrap：定义是否换行。

🦆

什么是 CSS Grid 布局?▷

CSS Grid 布局是一种用于二维布局的 CSS 布局模式。它可以通过指定容器的 display 属性为 grid 或 inline-grid 来启用。Grid 布局允许开发者在行和列的网格中放置元素，从而实现复杂的布局。其主要属性包括：1. grid-template-rows 和 grid-template-columns：定义网格的行和列。2. grid-gap：定义网格单元之间的间距。3. grid-area：定义元素在网格中的位置。4. justify-items 和 align-items：定义网格单元内元素的对齐方式。

🦆

解释一下 BFCBlock Formatting Context的概念及其应用.▷

BFC（块级格式化上下文）是一个独立的渲染区域，内部的元素布局不受外部元素的影响。创建 BFC 的方式包括：1. 设置浮动（float 不为 none）。2. 设置绝对定位（position 为 absolute 或 fixed）。3. 设置 display 为 inline-block、table-cell、table-caption 等。4. 设置 overflow 不为 visible。BFC 的应用场景包括清除浮动、避免 margin 重叠、处理容器高度塌陷等。

什么是点击穿透怎么解决 React.memo 和 useMemo 的用法是什么有哪些区别