【前端面试】之CSS篇友情提示：CSS在面试中考查的知识点并不多，记住一些高频的即可，其他的有个大概印象就行，千万不要这

废话不多说，直接开始。友情提示：CSS在面试中考查的知识点并不多，记住一些高频的即可，其他的有个大概印象就行，千万不要这里投入太多时间与精力。但是在开发中，我们一定要注重CSS能力的提升，尤其要在CSS布局、动画、架构上下功夫。表面看CSS很简单，要学好却并不容易。

1.盒模型介绍

CSS3 中的盒模型有以下两种：标准盒模型、IE（替代）盒模型。

两种盒子模型都是由 content + padding + border + margin 构成，其大小都是由 content + padding + border 决定的，但是盒子内容宽/高度（即 width/height）的计算范围根据盒模型的不同会有所不同：

标准盒模型：只包含 content 。
IE（替代）盒模型：content + padding + border 。

可以通过 box-sizing 来改变元素的盒模型：

box-sizing: content-box ：标准盒模型（默认值）。
box-sizing: border-box ：IE（替代）盒模型。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      height: 100px;
      width: 200px;
      border: 10px solid #ccc;
      padding: 15px;
      margin-bottom: 10px;
      background-color: bisque;
    }
    .ie-box {
      /* 总宽度等于200px */
      /* 总高度等于100px */
      box-sizing: border-box;
    }
    .stan-box {
      /* 总宽度等于200+10+10+15+15=250px */
      /* 总高度等于100+10+10+15+15=150px */
      box-sizing: content-box;
    }
  </style>
</head>
<body>
  <div class="ie-box">IE BOX</div>
  <div class="stan-box">Standard BOX</div>
</body>
</html>

2.CSS选择符有哪些？哪些属性可以继承

选择符：

id选择器（ # myid）
类选择器（.myclassname）
标签选择器（div, h1, p）
相邻选择器（h1 + p）
子选择器（ul > li）
后代选择器（li a）
通配符选择器（ * ）
属性选择器（a[rel = "external"]）
伪类选择器（a:hover, li:nth-child）

可继承的样式：

font-size
font-family
color
UL LI DL DD DT

不可继承的样式：

border
padding
margin
width
height

3.CSS优先级算法如何计算

优先级就近原则，同权重情况下样式定义最近者为准;载入样式以最后载入的定位为准;

同权重： 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）
不同权重： !important > id > class > tag，其中important 比内联优先级高

4.CSS3新增伪类有那些

p:first-of-type： 选择属于其父元素的首个  元素的每个元素。
p:last-of-type： 选择属于其父元素的最后  元素的每个元素。
p:only-of-type： 选择属于其父元素唯一的  元素的每个  元素。
p:only-child： 选择属于其父元素的唯一子元素的每个元素。
p:nth-child(2)： 选择属于其父元素的第二个子元素的每个  元素。
:checked： 单选框或复选框被选中。
:disabled： 控制表单控件的禁用状态。

5.display有哪些值？说明他们的作用

block： 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
none： 将元素的显示设为无,即在网页中不占任何的位置。。
inline： 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block： 默认宽度为内容宽度，可以设置宽高，同行显示。
list-item： 象块类型元素一样显示，并添加样式列表标记。
table： 此元素会作为块级表格来显示。
inherit： 规定应该从父元素继承 display 属性的值。

6.position的值relative和absolute定位原点

absolute： 生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。
fixed： 生成绝对定位的元素，相对于浏览器窗口进行定位。
relative： 生成相对定位的元素，相对于其正常位置进行定位。
static： 默认值，没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
inherit： 规定从父元素继承 position 属性的值。

7.CSS3有哪些新特性

新增各种CSS选择器： （: not(.input)：所有 class 不是“input”的节点）
圆角： （border-radius:8px）
多列布局： （multi-column layout）
阴影和反射： （Shadow\Reflect）
文字特效： （text-shadow、）
文字渲染： （Text-decoration）
线性渐变： （gradient）
旋转： （transform）
缩放,定位,倾斜,动画,多背景。 例如:transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

8.请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景

一个用于页面布局的全新CSS3功能，Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。
较为复杂的布局还可以通过嵌套一个伸缩容器（flex container）来实现。
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。
它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流可以很方便的用来做局中，能对不同屏幕大小自适应。
在布局上有了比以前更加灵活的空间，使用指南

9.一个满屏品字布局如何设计

简单的方式： 上面的div宽100%，下面的两个div分别宽50%，然后用float或者inline使其不换行即可

10.li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法

行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      ul {
        list-style: none;
        /*解决空格问题*/
        font-size: 0;
      }
      li {
        display: inline-block;
        height: 70px;
        width: 150px;
        line-height: 70px;
        text-align: center;
        border: #005AA0 solid 2px;
        /*解决空格问题*/
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>li标签</li>
      <li>li标签</li>
      <li>li标签</li>
    </ul>
  </body>
</html>

11.为什么要初始化CSS样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

12.子class选择器设置蓝色，父id选择器设置红色，最终会显示哪个

一定是子元素设置的选择器最优先，要不然页面就乱套了。所以答案是蓝色。

13.请解释一下为什么需要清除浮动？清除浮动的方式

清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .box {
        width: 510px;
        border: #0000FF solid 1px;
      }
      .box:after {
        content: "";
        visibility: hidden;
        display: block;
        height: 0;
        clear: both;
      }
      .left {
        float: left;
        width: 250px;
        height: 100px;
        background-color: green;
      }
      .right {
        float: left;
        width: 250px;
        height: 100px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </body>
</html>

解析原理：

（1） display:block 使生成的元素以块级元素显示,占满剩余空间
（2）height:0 避免生成内容破坏原有布局的高度
（3） visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互
（4）通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:"."有些版本可能content 里面内容为空
（5）zoom：1 触发IE hasLayout。

14.什么是外边距合并？

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

15.CSS优化、提高性能的方法有哪些

关键选择器（key selector），选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）；
如果规则拥有 ID 选择器作为其关键选择器，则不要为规则增加标签，过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）；
提取项目的通用公有样式，增强可复用性，按模块编写组件；
增强项目的协同开发性、可维护性和可扩展性;
使用预处理工具或构建工具（gulp对css进行语法检查、自动补前缀、打包压缩、自动优雅降级）；
更多CSS性能优化

16.浏览器是怎样解析CSS选择器的

样式系统从关键选择器开始匹配，然后左移查找规则选择器的祖先元素。只要选择器的子树一直在工作，样式系统就会持续左移，直到和规则匹配，或者是因为不匹配而放弃该规则。

17.设置元素浮动后，该元素的display值是多少

自动变成了 display:block

18.让页面里的字体变清晰，变细用CSS怎么做

-webkit-font-smoothing: antialiased;

19.什么是CSS 预处理器 / 后处理器

预处理器： LESS、Sass、Stylus，用来预编译Sass或Less，增强了CSS代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。
后处理器： PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

20.em和rem的区别在哪里

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。em会继承父级元素的字体大小。
rem是CSS3新增的一个相对单位（root em，根em），这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
总结：em相对于父元素，rem相对于根元素

21.什么是BFC？它的渲染规则是什么？如何创建BFC？它的使用场景有哪些

（1）概念：

BFC是Block Formatting Context （块级格式化上下文）的缩写，它是W3C CSS 2.1 规范中的一个概念，是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

（2）渲染规则：

内部的box会在垂直方向，一个接一个的放置；
box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠；
每个元素的margin box的左边，与包含块border box的左边相接触，即使存在浮动也是如此；
BFC的区域不会与float box重叠；
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素；
计算BFC的高度时，浮动元素也参与计算。

（3）创建BFC：

float属性不为none；
position属性值为absolute或fixed；
display属性值为inline-block，table-cell,table-caption,flex,inline-flex；
overflow属性值不为visible。

（4）使用场景：

解决垂直方向边距重叠；
解决和浮动元素的重叠；
清除浮动

22.CSS中的文档流

普通流就是正常的文档流，在HTML里面的写法就是从上到下，从左到右的排版布局。其中涉及到了块状元素和内联元素。脱离文档流的几个属性：绝对定位(absolute)、固定定位(fixed)、浮动(float)。

23.CSS中的伪类

概念： 伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。
拓展： 伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。任何常规选择器可以再任何位置使用伪类。伪类语法不区别大小写。一些伪类的作用会互斥，另外一些伪类可以同时被同一个元素使用。并且，为了满足用户在操作DOM时产生的DOM结构改变，伪类也可以是动态的。

24.CSS中的伪元素

概念： 伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码）。比如：document接口不提供访问元素内容的第一个字或者第一行的机制，而伪元素可以使开发者可以提取到这些信息。并且，一些伪元素可以使开发者获取到不存在于源文档中的内容（比如常见的::before,::after）。
拓展： 伪元素的由两个冒号::开头，然后是伪元素的名称。使用两个冒号::是为了区别伪类和伪元素（CSS2中并没有区别）。当然，考虑到兼容性，CSS2中已存的伪元素仍然可以使用一个冒号:的语法，但是CSS3中新增的伪元素必须使用两个冒号::。一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后。
分类： ::first-letter；::first-line；::before；::after；::selection；（对用户所选取的部分样式改变）

25.伪元素和伪类的区别

（1）CSS伪类： 用于向某些选择器添加特殊的效果。
（2）CSS伪元素： 用于将特殊的效果添加到某些选择器。伪元素代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
（3）总结：

- 伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
- 伪元素本质上是创建了一个有内容的虚拟容器；
- CSS3中伪类和伪元素的语法不同；
- 可以同时使用多个伪类，而只能同时使用一个伪元素。

26.CSS隐藏元素的几种方法

（1）Opacity: 元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;
（2）Visibility: 与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;
（3）Display: display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;
（4）Position: 不会影响布局，能让元素保持可以操作;

27.float和display:inline-block;的区别

（1）文档流（Document flow）:
浮动元素会脱离文档流，并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然，周围元素不会环绕这个元素，你也不可能通过清除inline-block就让一个元素跑到下面去。

（2）水平位置（Horizontal position）：
很明显你不能通过给父元素设置text-align:center让浮动元素居中。事实上定位类属性设置到父元素上，均不会影响父元素内浮动的元素。但是父元素内元素如果设置了 display：inline-block，则对父元素设置一些定位属性会影响到子元素。（这还是因为浮动元素脱离文档流的关系）。

（3）垂直对齐（Vertical alignment）：
inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你可以通过vertical属性设置这个默认基线，但对浮动元素这种方法就不行了。这也是我倾向于inline-block的主要原因。

（4）空白（Whitespace）：
inline-block包含html空白节点。如果你的html中一系列元素每个元素之间都换行了，当你对这些元素设置inline-block时，这些元素之间就会出现空白。而浮动元素会忽略空白节点，互相紧贴。

28.关于空白节点的解决方案

（1）删除html中的空白： 不要让元素之间换行，这可能比较蛋疼，但也是一种方法，特别是你元素不多的时候。
（2）使用负边距： 你可以用负边距来补齐空白。但你需要调整font-size，因为空白的宽度与这个属性有关系。
（3）给父元素设置font-size:0： 不管空白多大，由于空白跟font-size的关系，设置这个属性即可把空白的宽度设置为0.在实际使用的时候，你还需要给子元素重新设置font-size。

29.如何解决图片与文字的不对齐

（1）vertical-align： 最有效的一种方式；
（2）margin： 需要不断调试图片的高度，精确度难以保证；
（3）position： 同样是需要不断调试图片的高度，精确度难以保证。

30.position有哪些常用定位属性？定位原点是基于哪个位置

（1）relative： 相对定位，没有脱离文档流，依然占有文档空间，它是根据自身原本在文档流中的位置进行偏移；
（2）absolute： 绝对定位，脱离文档流，根据祖先类元素(父类以上)进行定位，而这个祖先类还必须是以position非static方式定位的，如果无父级是position非static定位时是以html作为原点定位；
（3）fixed： 固定定位，脱离文档流，根据浏览器窗口进行定位。

31.介绍一下box-sizing属性

（1）box-sizing属性： 主要用来控制元素的盒模型的解析模式。默认值是content-box。
（2）content-box属性值： 让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高
（3）border-box属性值： 让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content

32.解释下浮动和它的工作原理？清除浮动的技巧

（1）原理： 浮动元素脱离文档流，不占据空间，浮动元素碰到包含它的边框或者浮动元素的边框停留。
（2）使用空标签清除浮动： 这种方法是在所有浮动标签后面添加一个空标签定义css clear:both;. 弊端就是增加了无意义标签。
（3）使用overflow： 给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1 用于兼容IE6。
（4）使用after伪对象清除浮动： 该方法只适用于非IE浏览器。

#parent:after {
  content: ".";
  height: 0;
  visibility: hidden;
  display: block;
  clear: both;
}

33.浮动元素引起的问题

（1）父元素的高度无法被撑开，影响与父元素同级的元素
（2）与浮动元素同级的非浮动元素（内联元素）会跟随其后
（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

34.img的白边是因为什么

原因在于，img标签默认情况下display:inline-block;img在div中的白边就是因为inline-block；造成的，所以此时将img的display设置为block；白边就消失了

35.px、pt和em、rem的区别是什么

（1）px(pixel)指的是像素，是屏幕上显示数据的最基本的点，表示相对大小。不同分辨率下相同长度的px元素显示会不一样，比如同样是14px大小的字，在1366*768显示屏下会显示的小，在1024*768尺寸的显示器下会相对大点。
（2）pt(point)是印刷行业常用的单位，等于1/72英寸，表示绝对长度。
（3）em是相对长度单位，相对于当前对象内文本的字体尺寸，即em的计算是基于父级元素font-size的。

<body style="font-size:14px">
  <p style="font-size:2em">我这里的字体显示大小是28px(14px*2)</p>
  <div style="font-size:18px">
    <p style="font-size:2em">我这里显示字体大小是36px(18px*2),而不是上面计算的28px</p>
  </div>
</body>

（4）rem是css3新增的一个相对单位，与em的区别在于，它是相对于html根元素的。

<body style="font-size:14px">
  <p style="font-size:2rem">我这里的字体显示大小是28px(14px*2)</p>
  <div style="font-size:18px">
    <p style="font-size:2rem">我这里显示字体大小是28px(14px*2),因为我是根据html根元素的font-size大小进行计算的</p>
  </div>
</body>

36.谈谈nth-of-type() 选择器

:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，n 可以是数字、关键词或公式。其中，Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。

p:nth-of-type(2) {
  background: #ff0000;
}

p:nth-of-type(odd) {
  background: #ff0000;
}
p:nth-of-type(even) {
  background: #0000ff;
}

p:nth-of-type(3n+0) {
  background: #ff0000;
}

37.页面重排（Reflow）的概念和触发reflow的条件

（1）概念：
DOM结构中的各个元素都有自己的盒子（模型），这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置，这个过程称之为reflow。

（2）触发的条件：

当你增加、删除、修改DOM节点时，会导致reflow或repaint；
当你移动DOM的位置，或是搞个动画的时候；
当你修改CSS样式的时候；
当你resize窗口的时候（移动端没有这个问题），或是滚动的时候；
当你修改网页默认字体的时候。

38.CSS哪些属性可以继承

字体相关： line-height, font-family, font-size, font-style, font-variant, font-weight, font
文本相关： letter-spacing, text-align, text-indent, text-transform, word-spacing
列表相关： list-style-image, list-style-position, list-style-type, list-style
颜色： color

39.简要描述CSS中content属性的作用

content属性与:before及:after伪元素配合使用，用来插入生成的内容，可以在元素之前或之后放置生成的内容。可以插入文本、图像、引号，并可以结合计数器，为页面元素插入编号。比如：

body {
  counter-reset: chapter;
}
h1:before {
  content: "第"counter(chapter)"章";
}
h1 {
  counter-increment: chapter;
}

<h1></h1>
<h1></h1>
<h1></h1>

40.访问超链接后hover样式就不出现的原因是什么？应该如何解决？

因为访问过的超链接样式覆盖了原有了的hover和active伪类选择器样式，解决方法是将CSS属性的排列顺序改为L->V->H->A(link,visited,hover,active)

41.什么是外边距重叠？重叠的结果是什么？

外边距重叠就是 margin-collapse。在 CSS 当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。

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

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

43.两种以上方式实现已知或者未知宽度的垂直水平居中。

// 1
.wrapper {
  position: relative;
  .box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;
  }
}

// 2
.wrapper {
  position: relative;
  .box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

// 3
.wrapper {
  .box {
    display: flex;
    justify-content:center;
    align-items: center;
    height: 100px;
  }
}

// 4
.wrapper {
  display: table;
  .box {
    display: table-cell;
    vertical-align: middle;
  }
}

44.CSS3有哪些新特性

CSS3的选择器
@Font-face 特性
圆角
多列布局（multi-column layout）
阴影（Shadow）
CSS3的渐变效果
CSS3弹性盒子模型
动画
媒体查询

45.CSS3新增伪类有哪些

p:first-of-type 选择属于其父元素的首个  元素的每个  元素。
p:last-of-type 选择属于其父元素的最后  元素的每个  元素。
p:only-of-type 选择属于其父元素唯一的  元素的每个  元素。
p:only-child 选择属于其父元素的唯一子元素的每个  元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个  元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中。
:root
:target
:not(selector)

46.first-child和first-of-type的区别是什么

:first-child 匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。
:first-of-type 匹配的是某父元素下相同类型子元素中的第一个，比如 p:first-of-type，就是指所有类型为p的子元素中的第一个。这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了。
例子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 匹配到的是p元素,因为p元素是div的第一个子元素 */
    p:first-child {
      color: red;
    }
    /* 匹配不到任何元素，因为在这里h1是div的第二个子元素，而不是第一个 */
    h1:first-child {
      color: blue;
    }
    /* 匹配不到任何元素，因为在这里两个span元素都不是div的第一个子元素 */
    span:first-child {
      color: yellow;
    }
    /* 匹配到的是p元素,因为p是div的所有类型为p的子元素中的第一个 */
    p:first-of-type {
      font-size: 33px;
      border: 1px solid black;
    }
    /* 匹配到的是h1元素，因为h1是div的所有类型为h1的子元素中的第一个 */
    h1:first-of-type {
      font-size: 16px;
      border: 1px solid blue;
    }
    /* 匹配到的是第三个子元素span。这里div有两个为span的子元素，匹配到的是它们中的第一个 */
    span:first-of-type {
      font-size: 22px;
      border: 1px solid yellow;
    } 
  </style>
</head>
<body>
  <div>
    <p>第一个子元素</p>
    <h1>第二个子元素</h1>
    <span>第三个子元素</span>
    <span>第四个子元素</span>
  </div>
</body>
</html>

同样类型的选择器 :last-child 和 :last-of-type、:nth-child(n) 和 :nth-of-type(n) 也可以这样去理解。

47.当使用transform: translate属性时会出现闪烁现象，如何解决

-webkit-transform: translate3d(0,0,0); /*开启硬件加速*/
-webkit-backface-visibility: hidden; /*元素旋转时隐藏背面*/
-webkit-transform-style: preserve-3d; /*保留3D空间*/

48.CSS3动画如何在动作结束时保持该状态不变

根据 animation-fill-mode: none | forwards | backwards | both;属性，值的具体说明如下：

none：不改变默认行为。
forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both：向前和向后填充模式都被应用。

49.CSS3动画的优点和缺点

优点：

1.浏览器可以对动画进行优化
2.代码比较简单

缺点：

1.兼容性不好。
2.在动画控制上不够灵活，运行过程较弱，无法附加绑定回调函数，不能在特定的位置上添加回调函数或是绑定回放事件，无进度报告。

50.animation与transition的异同是什么

animation 可以用 name 设置动画的名称，用 duration 设置动画完成的周期，用 timing-function 设置动画的速度曲线，delay 设置动画什么时候开始，iteration-count 设置动画播放的次数，direction 规定下一个周期是否逆向的播放，play-state 动画是否正在进行或者暂停，fill-mode 设置动画停了之后位置什么状态
transition 用 property 去设置过渡效果的属性名称，duration 设置过渡效果的周期，timing-function 规定速度效果的速度曲线，delay 设定过渡效果什么时候开始

区别：

1.transition 是过渡，是样式值的变化的过程，只有开始和结束；animation 其实也叫关键帧，通过和 keyframe 结合可以设置中间帧的一个状态；
2.animation 配合 @keyframe 可以不触发时间就触发这个过程，而 transition 需要通过 hover 或者 js 事件来配合触发；
3.animation 可以设置很多的属性，比如循环次数，动画结束的状态等等，transition 只能触发一次；
4.animation 可以结合 keyframe 设置每一帧，但是 transition 只有两帧；
5.在性能方面：浏览器有一个主线程和排版线程；主线程一般是对 js 运行的、页面布局、生成位图等等，然后把生成好的位图传递给排版线程，而排版线程会通过 GPU 将位图绘制到页面上，也会向主线程请求位图等等；我们在用使用 aniamtion 的时候这样就可以改变很多属性，像我们改变了 width、height、postion 等等这些改变文档流的属性的时候就会引起，页面的回流和重绘，对性能影响就比较大，但是我们用 transition 的时候一般会结合 tansfrom 来进行旋转和缩放等不会生成新的位图，当然也就不会引起页面的重排了；

51.animation的属性值有哪些

animation 属性是一个简写属性，用于设置六个动画属性：

animation-name：规定需要绑定到选择器的 keyframe 名称
animation-duration：规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function：规定动画的速度曲线
animation-delay：规定在动画开始之前的延迟
animation-iteration-count：规定动画应该播放的次数
animation-direction：规定是否应该轮流反向播放动画

52.说一说盒阴影

box-shadow 属性用于向盒子添加一个或多个阴影效果，相关属性有：

offset-x：阴影的水平偏移量。正数向右偏移，负数向左偏移。
offset-y：阴影的垂直偏移量。正数向下偏移，负数向上偏移。
blur：阴影模糊度，不能取负数。
spread：阴影大小。正数阴影扩大（阴影大小大于盒子大小），负数阴影缩小（阴影大小小于盒子大小），0阴影与盒子同等大小。
inset：表示添加内阴影，默认为外阴影。
更多说明

53.如何通过CSS3实现背景颜色线性渐变

CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

1.从左侧开始的线性渐变，从红色开始，转为黄色:
background-image: linear-gradient(to right, red , yellow);

2.从左上角到右下角的线性渐变:
background-image: linear-gradient(to bottom right, red , yellow);

3.线性渐变指定一个角度:
background-image: linear-gradient(180deg, red, yellow);

4.多个终止色:
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);

5.用了透明度:
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

径向渐变（Radial Gradients）- 由它们的中心定义

54.background-origin和background-clip的区别是什么

background-origin和background-clip是CSS3内新增加的属性，一个是对背景图片的放置，另一个是对背景图片的剪裁。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1, .box2, .box3, .box4, .box5, .box6, .box7 {
        height: 200px;
        width: 200px;
        padding: 30px;
        border: 8px dashed blue;
        background-image: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1598013033813&di=8a380b2ff02331d85cc2b49b42429c75&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F14%2F75%2F01300000164186121366756803686.jpg');
        background-size: 50% 50%;
        background-repeat: no-repeat; 
        margin: 30px auto;   
      }
      .box2 {
        /* 相对于内容框定义 */
        background-origin: content-box; 
      }
      .box3 {
        background-origin: padding-box;
      }
      .box4 {
        background-origin: border-box;
      }

      .box5 {
        background-clip: content-box; 
      }
      .box6 {
        background-clip: padding-box;
      }
      .box7 {
        background-clip: border-box;
      }
    </style>
  </head>
  <body>
    <div class="box2">content-box</div>
    <div class="box3">padding-box</div>
    <div class="box4">border-box</div>
    <div style="height: 5px; width: 100%; background-color: brown;"></div>
    <div class="box5">content-box</div>
    <div class="box6">padding-box</div>
    <div class="box7">border-box</div>
  </body>
</html>

【前端面试】之CSS篇