CSS面试题

活动发起人@小虚竹想对你说：

这是一个以写作博客为目的的创作活动，旨在鼓励大学生博主们挖掘自己的创作潜能，展现自己的写作才华。如果你是一位热爱写作的、想要展现自己创作才华的小伙伴，那么，快来参加吧！我们一起发掘写作的魅力，书写出属于我们的故事。我们诚挚邀请你参加为期14天的创作挑战赛！

提醒：在发布作品前，请将不需要的内容删除。

1.盒子模型

CSS 中的 盒子模型（Box Model） 是用来描述 HTML 元素在页面中占据空间的方式。每个元素都被视为一个矩形的盒子，这个盒子由以下四个部分组成：内容区、内边距、边框宽和外边距。

如下示意：

+------------------------------+
| Margin |
| +-------------------------+ |
| | Border | |
| | +---------------------+ | |
| | | Padding | | |
| | | +----------------+ | | |
| | | | Content | | | |
| | | +----------------+ | | |
| | +---------------------+ | |
| +--------------------------+ |
+-------------------------------+

盒子模型的计算方式

标准盒子模型（默认） ：
- 盒子的总宽度 = width + padding-left + padding-right + border-left + border-right。
- 盒子的总高度 = height + padding-top + padding-bottom + border-top + border-bottom。
替代盒子模型（box-sizing: border-box） ：
- 盒子的总宽度和高度由 width 和 height 直接决定，内边距和边框会挤占内容区的空间。
- 盒子的总宽度 = width。
- 盒子的总高度 = height。

2.对BFC的理解

BFC（Block Formatting Context，块级格式化上下文） 是 CSS 中的一种布局机制，它决定了元素如何布局以及如何与其他元素交互。BFC 是一个独立的渲染区域，内部的元素不会影响到外部的元素。

BFC 的特性

内部元素垂直排列：
- BFC 内部的块级元素会按照垂直方向一个接一个地排列。
外边距重叠：
- BFC 内部元素的外边距不会与外部元素的外边距重叠。
包含浮动元素：
- BFC 会包含其内部的所有浮动元素，避免父元素高度塌陷。
阻止元素被浮动元素覆盖：
- BFC 区域不会与浮动元素重叠。

如何创建 BFC

以下 CSS 属性可以触发 BFC：

根元素（<html>） ：
- 根元素本身就是一个 BFC。
浮动元素（float 不为 none） ：
- 例如 float: left 或 float: right。
绝对定位元素（position 为 absolute 或 fixed） 。
display 为 inline-block、table-cell、table-caption、flex、grid 等。
overflow 不为 visible ：
- 例如 overflow: hidden、overflow: auto、overflow: scroll。

BFC 的应用场景

解决外边距重叠（Margin Collapse）
清除浮动（Clear Float）
阻止元素被浮动元素覆盖
实现自适应两栏布局

3.如何实现两栏布局且右侧自适应（三栏中间自适应）

方法 1: 浮动 + BFC（三栏适用）

通过浮动左栏，并为右栏创建 BFC，使其自适应宽度。

<style>.box{height: 200px;}.left {float: left;width: 100px;height: 100px;background-color: #db9f9f;}.right {overflow: hidden;height: 100px;background-color: #a9dc1a;}</style><body><div class="box"><div class="left"> </div><div class="right"> </div></div></body>

特点

兼容性好，支持 IE6+。
右侧栏会自动填充剩余空间。

方法 2: Flexbox 布局（三栏适用）

使用 Flexbox 布局，让右侧栏自动占据剩余空间。

<style>.box{display: flex;height: 200px;}.left {width: 100px;background-color: #db9f9f;}.right {flex: 1; background-color: #a9dc1a;}</style><body><div class="box"><div class="left"> </div><div class="right"> </div></div></body>

特点

代码简洁，易于理解。
需要现代浏览器支持（IE10+）。

方法 3: Grid 布局

使用 CSS Grid 布局，定义列宽并让右侧栏自动填充。

.container {display: grid; /* 启用 Grid 布局 */grid-template-columns: 200px 1fr; /* 左栏固定宽度，右栏自适应 */
}.left {background: #f0f0f0;
}.right {background: #e0e0e0;
}

特点

功能强大，适合复杂布局。
需要现代浏览器支持（IE11+）。

三栏最外层CSS需设置：

grid-template-columns: 200px 1fr 200px; /* 左右栏固定宽度，中间栏自适应 */

4.CSS画三角形

在 CSS 中，可以通过 边框（border） 的技巧来绘制三角形。这种方法利用了边框的特性：当元素的宽度和高度为 0 时，边框会以对角线的方式相交，从而形成三角形。

实现原理

将元素的宽度和高度设置为 0。
通过设置不同方向的边框宽度和颜色，形成三角形。

.triangle-up {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;/* 向上三角形-bottom *//* 向下三角形-top    */border-bottom: 100px solid red;
}