当前位置：文江博客文章教程详情

CSS 面试题分享

发布于 2022-11-19 14:03:55 字数 7663 浏览 143 评论 0

CSS 的盒子模型有哪些？

W3C 标准盒模型：width = content
IE 怪异盒模型：width = content + padding-left + padding-right + border-left + border-right

为什么要初始化 CSS 样式？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异。

最简单的初始化方法就是： * { padding: 0; margin: 0; } （不建议）

CSS优先级如何计算？

同权重下，优先级就近原则（离被设置元素越近优先级别越高），载入样式以最后载入的为准：

内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）

不同权重下，优先级关系：

!important > 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配符选择器
计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照“就近原则”来判断

参考：CSS 样式优先级

什么是 FOUC？如何避免

Flash Of Unstyled Content：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再从新显示文档，造成页面闪烁。解决方法：把样式表放到文档的head

考虑下面的代码，<h1> 和 <p> 元素的 margin-bottom 的值分别应该是多少px？（假设 <h1> 和 <p> 是同级元素）。

html {
  font-size: 100%;
}
h1 { 
  font-size: 2em;
  margin-bottom: 1em;
} 
p { 
  font-size: 1em;
  margin-bottom: 1em;
}

<h1>的margin-bottom是 32px，<p>的margin-bottom是 16px

这种现象的发生在于1em等同于它当前的font-size。因为<h1>中的font-size被设置为了2em,其用在<h1>内的em来计算的属性，就为1em = 32px。(对于大多数的用户(和浏览器)，font-size的值为100%，就会默认为16px，除非用户通过浏览器设置来改变font-size的默认值)

引申部分：

面试题中，一般 em 会跟 rem、px、vh、vw 等单位进行比较使用场景和区别，px、em 和 rem 应该是被比较的比较多的，简单介绍一下：

px 像素。绝对单位，像素px是相对于显示器屏幕分辨率而言的，是一个虚拟单位。是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI
em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值
rem 是 CSS3 新增的一个相对单位(root em,根em),使用rem为元素设定字体大小事，仍然是相对大小但相对的只是HTML根元素

css 清除浮动的几种方式

clear:both
overflow（hidden和auto可以清除浮动，visible不行）
clearfix

clearfix 方法一：

利用 :after 和 :before 来在元素内部插入两个元素块，其实现原理类似于 clear:both 方法（只使用 clearfix:after 时在跨浏览器兼容问题会存在一个垂直边距叠加的 bug）

.clearfix:before,
.clearfix:after {
   content: ".";
   display: block;
   height: 0;
   visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */

clearfix 方法二：

Nicolsa 在《Better float containment in IE using CSS expressions》中介绍的方法

.clearfix:before,
.clearfix:after {
  content:"";
  display:table;
}
.clearfix:after {
  clear:both;
  overflow:hidden;
}
.clearfix {
  zoom:1; /* IE < 8 */
}

参考：Clear Float

BFC 是什么?怎么触发？有什么用？

BFC 即 Block Formatting Contexts (块级格式化上下文)，是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

只要元素满足下面任一条件即可触发 BFC 特性：

body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

BFC 作用：

不和浮动元素重叠
清除元素内部浮动
解决上下相邻两个元素重叠

重绘和回流（重排）是什么，如何优化？

Reflow（回流）：当 Render Tree 中的一部分（或全部）因为元素的尺寸、布局、隐藏等改变而需要重新构建。这就称为回流
Repaint（重绘）：当 Render Tree 中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格、而不会影响布局的，就是重绘

重绘（Repaint）不一定会引起回流（Reflow重排），但回流必将引起重绘（Repaint）

导致 Reflow（回流）的情况：

页面首次加载
添加或者删除可见的 DOM 元素；
元素位置改变；
元素尺寸改变——边距、填充、边框、宽度和高度
内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；
页面渲染初始化；
浏览器窗口尺寸改变——resize 事件发生时；

减少回流、重绘其实就是需要减少对 render tree 的操作（合并多次多 DOM 和样式的修改），并减少对一些 style 信息的请求，尽量利用好浏览器的优化策略。具体方法有：

直接改变className，如果动态改变样式，则使用 cssText（考虑没有优化的浏览器）
让要操作的元素进行 离线处理，处理完后一起更新
不要经常访问会引起浏览器 flush 队列的属性，如果你确实要访问，利用缓存
让元素脱离动画流，减少回流的 Render Tree 的规模

参考：页面重绘和回流以及优化

rgba() 和 opacity 的透明效果有什么不同？

rgba() 和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度，而 rgba() 只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）

如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

多数显示器默认频率是 60Hz，即1秒刷新60次，所以理论上最小间隔为 1/60＊1000ms ＝ 16.7ms

怎么解决移动端 Retina 屏幕 1px 边框问题？

viewport + rem 实现
0.5px 方案
border-image
background-image
多背景渐变实现
使用 box-shadow 模拟边框
伪类 + transform 实现

css hack 原理及常用 hack

由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。

CSS Hack 大致有3种表现形式，CSS 属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

属性前缀法（即类内部 Hack）：例如 IE6能识别下划线""和星号" * "，IE7能识别星号" * "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。
选择器前缀法（即选择器 Hack）：例如 IE6 能识别 html .class{}，IE7 能识别+html .class{} 或者 *:first-child+html .class{}。
IE条件注释法(即HTML条件注释Hack)：针对所有 IE（注：IE10+ 已经不再支持条件注释）： IE 浏览器显示的内容，针对 IE6 及以下版本：。这类 Hack 不仅对 CSS 生效，对写在判断语句里面的所有代码都会生效。

参考：史上最全的 CSS hack 方式一览