2022最新Web前端经典面试试题及答案——CSS篇.docx

"2022最新Web前端经典面试试题及答案——CSS篇" 本资源摘要信息将对 CSS 相关知识点进行详细的解释和总结。 一、BFC（Block Formatting Context）的理解及作用 BFC 是 Block Formatting Context 的缩写，指的是页面上一个独立的容器，容器内部的子元素不会影响到外部的元素。BFC 的区域有一个独立的块级渲染区域，该区域有一个套渲染规则来约束盒子的布局，与外部的区域没有关系。 创建 BFC 的方法有多种，例如： * float 的值不为 none * position 的值为 absolute 或 fixed * overflow 的值不为 visible * display 的值不为 inline-block、flex、inline-flex BFC 的特性包括： * 内部的 box 会在垂直方向，一个接着一个的放置。 * box 垂直方向的距离由 margin 决定属于同一个 BFC 的两个相邻 box 的 margin 会发生重叠 * BFC 的区域不会与浮动区域的 box 重叠 * BFC 在页面上是一个独立的容器，外部的元素不会影响 BFC 内的元素，内部的子元素也不会影响外部元素。 BFC 的作用包括： * 取消盒子的 margin 塌陷 * 清除内部浮动，不会影响外部元素 * 可以阻止元素被浮动元素覆盖 二、三栏布局的实现 三栏布局有多种实现方式，常见的有五种： 1. 使用 flex 布局 2. 使用 grid 布局 3. 使用圣杯布局 4. 使用双飞翼布局 5. 使用系统的浮动布局 每种布局方式都有其特点和实现方法，例如 flex 布局可以使用 display:flex，定宽元素设置 width，自适应的子元素设置 flex:1 或 flex-grow:1。 三、CSS Reset 的理解 CSS Reset，也称为 reset.css，是一个 CSS 文件，用来重置浏览器默认的 CSS 样式。CSS Reset 主要是为了增强跨浏览器渲染的一致性。然而，CSS Reset 在实际应用中存在性能差的问题，例如加载了许多无用的样式代码，导致代码冗余。 四、奇数还是偶数的字体 答案是：偶数。原因是偶数让文字在浏览器上更好看。UI 给前端的设计图一般都是偶数，这样不管布局也好，转换 px 也好，会方便一些。 五、CSS 优先级算法 CSS 优先级算法用于计算选择器的优先级，可以总结为： * 选中且设置 !important 的 > 权重高的 > 权重相同位置靠后的 > 来自继承的 * 一个选择器的优先级可以由四部分计算得分： + 千位：如果声明在 style 的属性里，则该部分得一分 + 百位：选择器包含 id 选择器，则该位得一分 + 十位：选择器包含类、属性选择器和伪类，则该位得一分 + 个位：选择器包含标签、伪元素选择器，则该位得一分