CSS 常见面试题速查

# CSS 优先级

内联 > ID 选择器 > 类选择器 > 标签选择器

具体到计算层面，优先级由 A、B、C、D 的值来决定，计算规则如下：

• A 存在内联样式 A 值为 1，否则为 0
• B 值为 ID 选择器出现的次数
• C 值为 类选择器 和 属性选择器 和 伪类 出现的总次数
• D 值为 标签选择器 和 伪元素 出现的总次数

比较时，权重从左到右依次减小。

ul ol li .red {} /* {0, 0, 1, 3}*/

#red {} /* {0, 1, 0, 0} */

# 选择器有哪些

• 基本选择器
  • * 通用元素选择器，匹配任何元素
  • Element 标签选择器
  • .className class 选择器
  • #footer id 选择器
• 多元素组合选择器
  • E, F 多元素选择器，同时匹配所有 E 元素 或 F 元素
  • E F 后代选择器，匹配所有属于 E 元素后代的 F 元素
  • E > F 子元素选择器，匹配所有 E 元素的子元素 F
  • E + F 相邻元素选择器，匹配所有紧随着 E 元素之后的同级元素 F
  • E ~ F CSS3，匹配任何在 E 元素之后的同级 F 元素
• 属性选择器
  • CSS 2.1
    • E[attr] 匹配所有具有 attr 属性的 E 元素（E 可以省略，如 [checked]）
    • E[attr=val] 匹配所有 attr 属性值为 val 的 E 元素
    • E[attr~=val] 匹配所有 attr 属性具有多个空格分隔的值、其中一个值等于 val 的 E 元素，如具有多个 class 名的元素
  • CSS 3
    • E[attr^="val"] 属性值 attr 以 "val" 开头的元素
    • E[attr$="val"] 属性值 attr 以 "val" 结尾的元素
    • E[attr*="val"] 属性值 attr 包含 "val" 字符串的元素

# link 和 @import 的区别

• link 属于 XHTML 标签，而 @import 是 CSS 提供的
• 页面被加载时，link 会被同时加载，而 @import 引用的 CSS 会等到页面加载完再加载
• import 只在 IE5 以上才能识别，而 link 是 XHTML 标签，无兼容问题
• link 方式的样式权重高于 @import 的权重
• 使用 JS 控制 dom 去改变样式的时候，只能使用 link 标签，因为 @import 不是 dom 可以控制的

# 为什么要初始化 CSS 样式

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

初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化

推荐

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

# 伪类和伪元素的区别

• 伪类：以冒号为前缀，被添加到一个选择器末尾的关键字，样式在特定状态下才被呈现到指定的元素
  • CSS 2.1
    • E:first-child 匹配父元素的第一个子元素
    • E:link 匹配所有未被点击的链接
    • E:visited 匹配所有已被点击的链接
    • E:active 匹配鼠标已经在其上按下、还没有释放的 E 元素
    • E:hover 匹配鼠标悬停其三的 E 元素
    • E:focus 匹配获得当前焦点的 E 元素
    • E:lang(c) 匹配 lang 属性等于 c 的 E 元素
  • CSS3
    • E:enabled 匹配表单中激活的元素
    • E:disabled 匹配表单中禁用的元素
    • E:checked 匹配表单中被选中的radio（单选框）或checkbox（复选框）元素
    • E::selection 匹配用户当前选中的元素
    • E:root 匹配文档的根元素，对于HTML文档，就是HTML元素
    • E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1
    • E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素
    • E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
    • E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)
    • E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
    • E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
    • E:only-child 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
    • E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
    • E:empty 匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素
    • E:not(s) 匹配不符合当前选择器的任何元素
• 伪元素：用于创建一些不在文档树中的元素，并为其添加样式
  • CSS 2.1
    • E:first-line 匹配 E 元素的第一行
    • E:first-letter 匹配 E 元素的第一个字母
    • E:before 在 E 元素之前插入生成的内容
    • E:after 在 E 元素之后插入生成的内容

# display 有哪些值

# 行内元素和块级元素的具体区别是什么？行内元素的 padding 和 margin 可设置吗？

• 块级元素(block)特性：
  • 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示
  • 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制
• 内联元素(inline)特性：
  • 和相邻的内联元素在同一行;
  • 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（padding和margin的left和right是可以设置的）
• 浏览器默认 inline-block 元素
  • <input>
  • <img>
  • <button>
  • <textarea>
  • <label>

# 有哪些方式（CSS）可以隐藏页面元素？

• opacity: 0：将元素透明度设为 0，看上去隐藏，但是占据空间且可以交互
• visibility: hidden：占据空间，但是不能进行交互
• overflow: hidden：隐藏元素溢出的部分，占据空间且不可交互
• display: none：彻底隐藏元素，元素从文档流中消失，既不占据空间也不能交互，也不影响布局
• z-index: -9999：将层级放到底部，被覆盖，看起来隐藏
• transform: scale(0,0)：平面变换，将元素缩放为 0， 但依然占据空间，但不可交互
• 利用绝对定位将元素移除可视区
• 使用 clip-path 进行裁剪

# em\px\rem 的区别

• px：绝对单位，页面按精确像素展示
• em：相对单位，基准点为父节点字体的大小，如果自身定义了 font-size 按自身来计算（浏览器默认字体是 16px），整个页面内 1em 不是一个固定的值
• rem：相对单位，可理解为"root em",相对根节点 html 的字体大小来计算，CSS3 新增的属性

# 块级元素水平居中的方法

margin: 0 auto

水平居中

<html>
  <body>
    <div class="center-0">
      水平居中
    </div>
  </body>
</html>

<style>
.center-0 {
  height: 200px;
  width: 200px;
  margin: 0 auto;
  border: 1px solid red;
}
</style>

felx 布局

<html>
  <body>
    <div class="center">
      <div class="flex-div">1</div>
      <div class="flex-div">2</div>
    </div>
  </body>
</html>

<style>
.center {
  display: flex;
  justify-content: center;
}
.flex-div {
  border: 1px solid red;
}
</style>

table

table-center

<html>
  <body>
    <div class="table-center">
      table-center
    </div>
  </body>
</html>

<style>
.table-center {
  display: table;
  margin: 0 auto;
  border: 1px solid red;
}
</style>

# CSS 有几种定位方式

static

• 正常文档流定位，此时 top，right，bottom，left 和 z-index 属性无效
• 块级元素从上往下纵向排列，行级元素从左向右排列

relative

• 相对定位，此时的 相对 是相对于正常文档流的位置

absolute

• 相对于最近的非 static 定位祖先元素的偏移，来确定元素位置
• 如一个绝对定位元素的父级和祖父级都为 relative，会相对父级来产生偏移

fixed

• 指定元素相对于屏幕视口（viewport）的位置来指定元素位置
• 元素的位置在屏幕滚动时不会改变，比如回到顶部按钮就用此实现

sticky 粘性定位，近似于 relative 和 fixed 的合体（示例如下）

标题一

标题二

标题三

标题四

<html>
  <body>
    <div class="container">
      <h1 class="sticky-box">标题一</h1>
      <h1 class="sticky-box">标题二</h1>
      <h1 class="sticky-box">标题三</h1>
      <h1 class="sticky-box">标题四</h1>
    </div>
  </body>
</html>

<style>
.container {
  background: #eee;
  width: 200px;
  height: 1000px;
  margin: 0 auto;
}

.sticky-box {
  position: -webkit-sticky;
  position: sticky;
  height: 60px;
  margin-bottom: 30px;
  background: #ff7300;
  top: 0px;
}

h1 {
  font-size: 30px;
  text-align: center;
  color: #fff;
  line-height: 60px;
}
</style>

# 如何理解层叠上下文

• 什么是层叠上下文（Stack Context）
  • 层叠上下文是 HTML 元素的三维概念，HTML 元素在一条家乡的相对于面向（电脑屏幕）视窗或者网页的用户的 z 轴上延伸，HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间
• 如何产生
  • 根元素（HTML）
  • z-index 值不为 'auto' 的 绝对/相对 定位
  • 一个 z-index 值不为 'auto' 的 flex item，即父元素 display: flex | inline-flex
  • opacity 属性值小于 1 的元素
  • transform 属性值不为 'none' 的元素
  • mix-blend-mode 属性值不为 'normal' 的元素
  • filter 值不为 'none' 的元素
  • perspective 值不为 'none' 的元素
  • isolation 属性被设置为 'isolate' 的元素
  • position：fixed
  • 在 will-change 中指定了任意 CSS 属性，即便没有直接指定这些属性的值
  • -webkit-overflow-scrolling 属性被设置为 'touch' 的元素

# 块级格式化上下文 BFC

• 块级格式化上下文(Block Formatting Context)
  • Box: Box 是 CSS 布局的对象和基本单位，一个页面由很多个 Box (盒模型) 组成
  • Formatting context：块级上下文格式化，是页面中的一块渲染区域，并有一套渲染规则，决定其子元素将如何定位，以及和其他元素的关系和相互作用
  • 即，它是一块独立的区域，让处于 BFC 内的元素与外部元素相互隔离
• 如何形成
  • 根元素
  • position：fixed/absolute
  • float 不为 none
  • overflow 不为 hidden
  • display 的值为 inline-block、table-cell、table-caption
• 作用是什么
  • 防止 margin 发生折叠 DEMO (opens new window)
  • 两栏布局，防止文字环绕 DEMO (opens new window)
  • 防止元素塌陷 DEMO (opens new window)

# 清除浮动有哪些方法

清除浮动实际上是清除父元素的高度塌陷。因为子元素脱离了父元素的文档流，所以父元素失去了高度，导致了塌陷。要解决这个问题，就是让父元素具有高度。

• 带有 clear属性的空元素方法：<div style="clear:both;"></div>
• clearfix 方法：结合 :after 伪元素和 IEhack 触发 hasLayout
• 给父元素设置 overflow: auto 或 overflow: hidden，使用BFC

在 flex 成为主流布局之后，浮动越来越少见了，因为它的副作用较大

# CSS sprites 的理解及其好处

• 雪碧图，也叫 CSS 精灵，是一种 CSS 图像合成技术，开发人员往往将小图标合并在一起后的图片称作雪碧图
• 使用工具将多张图片打包成一张雪碧图，并为其生成合适的 CSS，每张图都有相应的 CSS 类，该类定义了 background-image、background-position 和 background-size 属性。使用图片时将相应的类添加到元素中。

好处：

• 减少加载多张图片的 HTTP 请求次数
• 提前加载资源

缺点：

• CSS Sprite 维护成本过高，稍微改动需要重新合并图片
• 加载速度在 HTTP2 开启后不明显，HTTP2 多路复用，多张图片也可以重复利用一个连接通道搞定

# 关于媒体查询

是什么

• 媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制样式表范围的表达式组成，例如宽度、高度和颜色
• 媒体查询在 CSS3 中出现，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身
• 非常适合 web 网页应对不同型号的设备做出对应的响应适配。

怎么使用

• 媒体查询包含一个可选的媒体类型和，满足 CSS3 规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为 true 或 false
• 如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型，并且所有表达式的值都是 true，那么该媒体查询的结果为 true，那么媒体查询内的样式会生效。

示例

<!-- link 元素中的 CSS 媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css">

<!-- 样式表中的 CSS 媒体查询 -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

# 盒模型

盒模型是什么

• 当对一个文档进行布局时，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型，将所有元素表示为一个个矩形的盒子
• CSS 决定这些盒子的大小、位置以及属性（如颜色，背景，边框尺寸等）
• 盒模型由 content、padding、border、margin 组成。

标准盒模型和怪异盒模型的区别

• 标准盒模型：元素宽度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
• 怪异盒模型（IE8 以下）：元素占据宽度 = margin-left + width + margin-right （width = border-left + padding-left + content + padding-right + border-right）

现代浏览器默认使用 W3C 的标准和模型，可以在 CSS3 中使用 box-sizing 自定义

box-sizing: content-box; /* 标准盒模型 */
box-sizing: border-box; /* 怪异盒模型 */
box-sizing: padding-box; /* 火狐的私有模型 */

# 为什么有时会用 translate 来改变位置，而不是定位

translate() 是 transform 的一个值。

改变 transform 或 opacity 不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。

而改变绝对定位会触发重新布局，进而触发重绘和复合。

transform 使浏览器为元素创建一个 GPU 图层，但改变绝对定位会使用到 CPU。因此 translate() 更高效，可以缩短平滑动画的绘制时间。

translate 改变位置时，元素依然会占据原始空间，绝对定位不会发生这种情况。

# 如果需要手动写动画，最小时间间隔是多久，为什么？

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

# 超链接访问过后hover样式就不出现的问题是什么？如何解决？

被点击访问过的超链接样式不再具有 hover 和 active 了,解决方法是改变 CSS 属性的排列顺序: L-V-H-A（link,visited,hover,active）

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

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