CSS3 使用了层叠样式表技术，可以对网页布局、字体、颜色、背景灯效果做出控制。CSS3 作为 CSS 的进阶版，拆分和增加了盒子模型、列表模块、语言模块、背景边框、文字特效、多栏布局等等。CSS3 的改变有很多，增加了文字特效，丰富了下划线样式，加入了圈重点的功能。在边框方面，有了更多的灵活性，可以更加轻松地操控渐变效果和动态效果等等。在文字效果方面，特意增加了投影。CSS3在兼容上做了很大的功夫，并且网络浏览器也还将继续支持 CSS2，因此原来的代码不需要做太多的改变，只会变得更加地轻松。

CSS3 中新增了一些特性例如：

新增各种 CSS 选择器（:not(.input)：所有 class 不是“input”的节点）
圆角（border-radius:8px）
多列布局（multi-columnlayout）
阴影和反射（Shadow\Reflect）
文字特效（text-shadow）
文字渲染（Text-decoration）
线性渐变（gradient）
旋转（transform）
缩放，定位，倾斜，动画，多背景

关于 CSS 布局，参见 https://zhuanlan.zhihu.com/p/29070363，https://juejin.cn/post/7073811972361289736

1、CSS 盒模型

盒模型用于装填内容：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个部分。

div {
	box-sizing: border-box/padding-box/content-box;
}

W3C 标准盒模型：
在这里插入图片描述
IE 盒模型：

区别：这两种盒子模型最主要的区别就是 width 的包含范围，在标准的盒子模型中，width 指 content 部分的宽度，在 IE 盒子模型中，width 表示 content+padding+border 这三个部分的宽度，故这使得在计算整个盒子的宽度时存在着差异。

在 ie8+ 浏览器中使用哪个盒模型可以由 box-sizing（CSS 新增的属性）控制，默认值为 content-box。如果在 ie6，7，8 中 DOCTYPE 缺失会将盒子模型解释为 IE 盒子模型。若在页面中声明了 DOCTYPE 类型，所有的浏览器都会把盒模型解释为 W3C 盒模型。

box-sizing:content-box; 表示标准的盒子模型
box-sizing:border-box; 表示的是 IE 盒子模型
box-sizing:padding-box; 这个属性值的宽度包含了左右 padding+width

内联盒模型基本概念

内容区域（contentarea）。内容区域指一种围绕文字看不见的盒子，其大小仅受字符本身特性控制，本质上是一个字符盒子
（characterbox）；但是有些元素，如图片这样的替换元素，其内容显然不是文字，不存在字符盒子之类的，因此，对于这些元素，内容区域可以看成元素自身。
内联盒子（inlinebox）。“内联盒子”不会让内容成块显示，而是排成一行，这里的“内联盒子”实际指的就是元素的“外在盒子”，用来决定元素是内联还是块级。该盒子又可以细分为“内联盒子”和“匿名内联盒子”两类。
行框盒子（linebox），每一行就是一个“行框盒子”（实线框标注），每个“行框盒子”又是由一个一个“内联盒子”组成的。
包含块（containingbox），由一行一行的“行框盒子”组成。

幽灵空白节点
“幽灵空白节点”是内联盒模型中非常重要的一个概念，具体指的是：在 HTML5 文档声明中，内联元素的所有解析和渲染表现就如同
每个行框盒子的前面有一个“空白节点”一样。这个“空白节点”永远透明，不占据任何宽度，看不见也无法通过脚本获取，就好像幽灵
一样，但又确确实实地存在，表现如同文本节点一样，因此，我称之为“幽灵空白节点”。

2、link 与 import

link 属于 html 标签，而 @import 是 css 提供的
页面被加载时，link 会同时被加载，而 @import 引用的 css 会等到页面加载结束后加载
link 是 html 标签，因此没有兼容性问题，而 @import 只有 IE5 以上才能识别
link 方式样式的权重高于@import 的权重

3、CSS 选择符

选择器	例子
id 选择器	#myid
类选择器	.myclassname
标签选择器	div,h1,p
后代选择器	h1 p
相邻后代选择器（子）选择器	ul>li
兄弟选择器	li~a
相邻兄弟选择器	li+a
属性选择器	a[rel=“external”]
伪类选择器	a:hover,li:nth-child
伪元素选择器	::before、::after
通配符选择器	*

CSS 的优先级算法
CSS 的优先级是根据样式声明的特殊性值来判断的。选择器的特殊性值分为四个等级，如下：

标签内选择符（!improtant） x,0,0,0
id 选择符 0,x,0,0
class 选择符/属性选择符/伪类选择符 0,0,x,0
元素和伪元素选择符 0,0,0,x

计算方法：

每个等级的初始值为 0
每个等级的叠加为选择器出现的次数相加
不可进位，比如 0,99,99,99
依次表示为：0,0,0,0
每个等级计数之间没关联
等级判断从左向右，如果某一位数值相同，则判断下一位数值
如果两个优先级相同，则最后出现的优先级高，!important 也适用
通配符选择器的特殊性值为：0,0,0,0
继承样式优先级最低，通配符样式优先级高于继承样式
!important（权重），它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为 1,0,0,0

计算实例：

#demoa{color:orange;}/特殊性值：0,1,0,1/
div#demoa{color:red;}/特殊性值：0,1,0,2/

注意：

样式应用时，CSS 会先查看规则的权重（!important），加了权重的优先级最高，当权重相同的时候，会比较规则的特殊性。
规则中每出现一个选择器，就将它的特殊性进行叠加，这个叠加只限于对应的等级的叠加，不会产生进位。选择器特殊性值的比较是从左向右排序的，也就是说以 1 开头的特殊性值比所有以 0 开头的特殊性值要大。比如说特殊性值为 1000 的的规则优先级就要比特殊性值为 0999 的规则高。如果两个规则的特殊性值相等的时候，那么就会根据它们引入的顺序，后出现的规则的优先级最高
相同特殊性值的声明，根据样式引入的顺序，后声明的规则优先级高（距离元素出现最近的）
部分浏览器由于字节溢出问题出现的进位表现不做考虑

4、伪类与伪元素区别

CSS 引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句
话中的第一个字母，或者是列表中的第一个元素。

伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的
元素时，可以通过 :hover 来描述这个元素的状态。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说，我们可以通过::be
fore 来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

有时伪元素使用了两个冒号（::）而不是一个冒号（:），这是 CSS3 的一部分，并尝试区分伪类和伪元素。大多数浏览器都支持这两个值。按照规则应该使用（::）而不是（:），从而区分伪类和伪元素。但是，由于在旧版本的 W3C 规范并未对此进行特别区分，因此目前绝大多数的浏览器都支持使用这两种方式表示伪元素。

5、::before 和 :after 中双冒号和单冒号有什么区别？

单冒号（:）用于 CSS3 伪类，双冒号（::）用于 CSS3 伪元素。（伪元素由双冒号和伪元素名称组成）。双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，比如 :first-line、:first-letter、:before、:after 等，而新的在 CSS3 中引入的伪元素则不允许再支持旧的单冒号的写法。

::before 和 ::after

想让插入的内容出现在其它内容前，使用 ::before，否者，使用 ::after
在代码顺序上，::after 生成的内容也比 ::before 生成的内容靠后
如果按堆栈视角，::after 生成的内容会在 ::before 生成的内容之上

6、关于伪类 LVHA 的解释

a 标签有四种状态：链接访问前、链接访问后、鼠标滑过、激活，分别对应四种伪类 :link、:visited、:hover、:active；

当链接未访问过时：

当鼠标滑过 a 链接时，满足 :link 和 :hover 两种状态，要改变 a 标签的颜色，就必须将 :hover 伪类在 :link 伪类后面声明
当鼠标点击激活 a 链接时，同时满足 :link、:hover、:active 三种状态，要显示 a 标签激活时的样式 :active，必须将 :active 声明放到 :link 和 :hover 之后

当链接访问过时，情况基本同上，只不过需要将 :link 换成 :visited。这个顺序能不能变？可以，但也只有 :link 和 :visited 可以交换位置，因为一个链接要么访问过要么没访问过，不可能同时满足，也就不存在覆盖的问题。

7、CSS3 新增的伪类

伪类	描述
elem:nth-child(n)	选中父元素下的第 n 个子元素，并且这个子元素的标签名为 elem，n 可以接受具体的数值，也可以接受函数
elem:nth-last-child(n)	作用同上，不过是从后开始查找
elem:last-child	选中最后一个子元素
elem:only-child	如果 elem 是父元素下唯一的子元素，则选中之
elem:nth-of-type(n)	选中父元素下第 n 个 elem 类型元素，n 可以接受具体的数值，也可以接受函数
elem:first-of-type	选中父元素下第一个 elem 类型元素
elem:last-of-type	选中父元素下最后一个 elem 类型元素
elem:only-of-type	如果父元素下的子元素只有一个 elem 类型元素，则选中该元素
elem:empty	选中不包含子元素和内容的 elem 类型元素
elem:target	选择当前活动的 elem 元素
:not(elem)	选择非 elem 元素的每个元素
:enabled	控制表单控件的禁用状态
:disabled	控制表单控件的禁用状态
:checked	单选框或复选框被选中

8、CSS 中可继承的属性

每个 CSS 属性定义的概述都指出了这个属性是默认继承的，还是默认不继承的。这决定了当你没有为元素的属性指定值时该如何计算
值。当元素的一个继承属性没有指定值时，则取父元素的同属性的计算值。只有文档根元素取该属性的概述中给定的初始值（这里的意思应
该是在该属性本身的定义中的默认值）。

当元素的一个非继承属性（在 Mozillacode 里有时称之为 resetproperty）没有指定值时，则取属性的初始值 initialvalue（该值在该属性的概述里被指定）。

有继承性的属性：

字体系列属性 font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust
文本系列属性 text-indent、text-align、text-shadow、line-height、word-spacing、letter-spacing、text-transform、direction、color
表格布局属性 caption-sideborder-collapseempty-cells
列表属性 list-style-type、list-style-image、list-style-position、list-style
光标属性 cursor
元素可见性 visibility
还有一些不常用的 speak，page，设置嵌套引用的引号类型 quotes 等属性

注意：当一个属性不是继承属性时，可以使用 inherit 关键字指定一个属性应从父元素继承
它的值，inherit 关键字用于显式地指定继承性，可用于任何继承性/非继承性属性。

9、什么是包含块，对于包含块的理解？

包含块（containingblock）就是元素用来计算和定位的一个框。

根元素（很多场景下可以看成是<html>）被称为“初始包含块”，其尺寸等同于浏览器可视窗口的大小。
对于其他元素，如果该元素的 position 是 relative 或者 static，则“包含块”由其最近的块容器祖先盒的 contentbox 边界形成。
如果元素 position:fixed，则“包含块”是“初始包含块”。
如果元素 position:absolute，则“包含块”由最近的 position 不为 static 的祖先元素建立，具体方式如下：如果该祖先元素是纯 inline 元素，则规则略复杂：
- 假设给内联元素的前后各生成一个宽度为 0 的内联盒子（inlinebox），则这两个内联盒子的 paddingbox 外面的包围盒就是内联元素的“包含块”；
- 如果该内联元素被跨行分割了，那么“包含块”是未定义的，也就是 CSS2.1 规范并没有明确定义，浏览器自行发挥否则，“包含块”由该祖先的 paddingbox 边界形成。
如果没有符合条件的祖先元素，则“包含块”是“初始包含块”。

10、为什么要初始化 CSS 样式？

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

css reset 和 normalize.css 的区别
normalize.css 官网

reset 的目的，是将所有的浏览器的自带样式重置掉，这样更易于保持各浏览器渲染的一致性。

normalize 的理念则是尽量保留浏览器的默认样式，不进行太多的重置，而尽力让这些样式保持一致并尽可能与现代标准相符合。

Normalize.css 保护了有价值的默认值。Reset 通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。相比之
下，Normalize.css 保持了许多默认的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时，Normalize.css 会力求让这些样式保持一致并尽可能与现代标准相符合。
Normalize.css 修复了浏览器的 bug。它修复了常见的桌面端和移动端浏览器的 bug。这往往超出了 Reset 所能做到的范畴。关于这一点，Normalize.css 修复的问题包含了 HTML5 元素的显示设置、预格式化文字的 font-size 问题、在 IE9 中 SVG 的溢出、许多出现在各浏览器和操作系统中的与表单相关的 bug。
Normalize.css 没有复杂的继承链。使用 Reset 最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链。在Normalize.css 中就不会有这样的问题，因为在我们的准则中对多选择器的使用时非常谨慎的，我们仅会有目的地对目标元素设置样式。
Normalize.css 是模块化的。这个项目已经被拆分为多个相关却又独立的部分，这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到部分（比如表单的一般化）。
Normalize.css 拥有详细的文档。Normalize.css 的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在 Github Wiki 中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易地进行自己的测试。

11、BFC（Block Formatting Context）块级格式化上下文

块格式化上下文（BlockFormattingContext，BFC）是 Web 页面的可视化 CSS 渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。BFC 是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发 BFC 的条件，则 BFC 中的元素布局不受外部影响。

创建 BFC

根元素或包含根元素的元素
浮动元素 float＝left|right 或 inherit（≠none）
绝对定位元素 position＝absolute 或 fixed
display＝inline-block|flex|inline-flex|table-cell 或 table-caption
overflow＝hidden|auto 或 scroll(≠visible)

12、IFC 行级格式化上下文

IFC 指的是行级格式化上下文，它有这样的一些布局规则：

行级上下文内部的盒子会在水平方向，一个接一个地放置。
当一行不够的时候会自动切换到下一行。
行级上下文的高度由内部最高的内联盒子的高度决定。

参考资料：BFC、IFC

13、margin 重叠问题的理解

margin 重叠指的是在垂直方向上，两个相邻元素的 margin 发生重叠的情况。一般来说可以分为四种情形：

第一种是相邻兄弟元素的 marin-bottom 和 margin-top 的值发生重叠。这种情况下我们可以通过设置其中一个元素为 BFC 来解决。
第二种是父元素的 margin-top 和子元素的 margin-top 发生重叠。它们发生重叠是因为它们是相邻的，所以我们可以通过这一点来解决这个问题。我们可以为父元素设置 border-top、padding-top 值来分隔它们，当然我们也可以将父元素设置为 BFC 来解决。
第三种是高度为 auto 的父元素的 margin-bottom 和子元素的 margin-bottom 发生重叠。它们发生重叠一个是因为它们相邻，一个是因为父元素的高度不固定。因此我们可以为父元素设置 border-bottom、padding-bottom 来分隔它们，也可以为父元素设置一个高度，max-height 和 min-height 也能解决这个问题。当然将父元素设置为 BFC 是最简单的方法。
第四种情况，是没有内容的元素，自身的 margin-top 和 margin-bottom 发生的重叠。我们可以通过为其设置 border、padding 或者高度来解决这个问题。

14、为什么需要清除浮动？清除浮动的方式？

浮动元素可以左右移动，直到遇到另一个浮动元素或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。

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

清除浮动的方式

使用 clear 属性清除浮动。

<div>
    <ul style="float:left">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <div style="clear:both"></div>
</div>

使用伪类

<style>
    .clearfix{
        *zoom:1;
    }
    .clearfix:after{
        content:"";
        display:block;
        clear:both;
    }
</style>
<div class="clearfix">
    <ul style="float:left">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

触发 BFC 块级格式化上下文来清除浮动。因为 BFC 元素不会影响外部元素的特点，所以 BFC 元素也可以用来清除浮动的影响。

<!--1. 设置父元素float不为none-->
<div style="float:left">
    <ul style="float:left">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div> 
<!--2. 设置父元素overflow不为visiable-->
<div style="overflow:hidden">
    <ul style="float:left">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div> 
<!--3. 设置父元素display的值为inline-block、table-cell、table-caption-->
<div style="display:inline-block">
    <ul style="float:left">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>
<!--4. 设置父元素position的值为absolute或fixed-->
<div style="position:fixed">
    <ul style="float:left">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

关于 clear
官方对 clear 属性的解释是：“元素盒子的边不能和前面的浮动元素相邻。”，我们对元素设置 clear 属性是为了避免浮动元素对该元素的影响，而不是清除掉浮动。

关于 zoom
清除浮动，触发 hasLayout；zoom 属性是 IE 浏览器的专有属性，它可以设置或检索对象的缩放比例。解决 IE 下比较奇葩的 bug。譬如外边距（margin）的重叠，浮动清除，触发 ie 的 haslayout 属性等。

当设置了 zoom 的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变 zoom 值时其实也会发生重新渲染，运用这个原理，也就解决了 IE 下子元素浮动时候父元素不随着自动扩大的问题。

zoom 属性是 IE 浏览器的专有属性，火狐和老版本的 webkit 核心的浏览器都不支持这个属性。

15、visibility 的 collapse 属性在不同浏览器下有什么区别？

对于一般的元素，它的表现跟 visibility：hidden；是一样的。元素是不可见的，但此时仍占用页面空间。
但例外的是，如果这个元素是 table 相关的元素，例如 table 行，tablegroup，table 列，tablecolumngroup，它的表现却跟 display:none 一样，也就是说，它们占用的空间也会释放。

在不同浏览器下的区别：

在谷歌浏览器里，使用 collapse 值和使用 hidden 值没有什么区别。
在火狐浏览器、Opera 和 IE11 里，使用 collapse 值的效果就如它的字面意思：table 的行会消失，它的下面一行会补充它的位置。

16、display 有哪些值？

block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
none 元素不显示，并从文档流中移除。
inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
list-item 像块类型元素一样显示，并添加样式列表标记。
table 此元素会作为块级表格来显示。
inherit 规定应该从父元素继承 display

17、position 有哪些值？

absolute
生成绝对定位的元素，相对于值不为 static 的第一个父元素的 paddingbox （在计算定位距离的时候，padding 的值也要算进去）进行定位，也可以理解为离自己这一级元素最近的
一级 position 设置为 absolute 或者 relative 的父元素的 paddingbox 的左上角为原点进行定位。

fixed（老 IE 不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。

relative
生成相对定位的元素，相对于其元素本身所在正常位置进行定位。

static
默认值。没有定位，元素出现在正常的流中（忽略 top,bottom,left,right,z-index 声明）。

inherit
规定从父元素继承 position 属性的值。

sticky
sticky 定位可以表现出 relative 和 fixed 两种定位结合，正常情况下是 relative，但是当 sticky 元素的父元素出现滚动条的时候，sticky 元素距离到设置的位置如（top: 0）时会表现为 fixed，相对于最近的滚动容器的 fixed。

18、display、position 和 float 的相互关系

首先我们判断 display 属性是否为 none，如果为 none，则 position 和 float 属性的值不影响元素最后的表现。
然后判断 position 的值是否为 absolute 或者 fixed，如果是，则 float 属性失效，并且 display 的值应该被设置为 table 或者 block，具体转换需要看初始转换值。
如果 position 的值不为 absolute 或者 fixed，则判断 float 属性的值是否为 none，如果不是，则 display 的值则按上面的规则转换。注意，如果 position 的值为 relative 并且 float 属性的值存在，则 relative 相对于浮动后的最终位置定位。
如果 float 的值为 none，则判断元素是否为根元素，如果是根元素则 display 属性按照上面的规则转换，如果不是，则保持指定的 display 属性值不变。

总的来说，可以把它看作是一个类似优先级的机制，“position:absolute” 和 “position:fixed” 优先级最高，有它存在的时候，浮动不起作用，‘display’ 的值也需要调整；其次，元素的 ‘float’ 特性的值不是 “none” 的时候或者它是根元素的时候，调整 ‘display’ 的值；最后，非根元素，并且非浮动元素，并且非绝对定位的元素，‘display’ 特性值同设置值。

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

浏览器会把 inline（inline-block）元素间的空白字符（空格、换行、Tab 等）渲染成一个空格。而为了美观。我们通常是一个<li>放在一行，这导致<li>换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。

解决办法：

为<li>设置 float:left。不足：有些容器是不能设置浮动，如左右切换的焦点图等。
将所有<li>写在同一行。不足：代码不美观。
将<ul>内的字符尺寸直接设为 0，即 font-size:0。不足：<ul>中的其他字符尺寸也被设为 0，需要额外重新设定其他字符尺寸，且在 Safari 浏览器依然会出现空白间隔。
消除<ul>的字符间隔 letter-spacing/word-spacing:-8px，不足：这也设置了<li>内的字符间隔，因此需要将<li>内的字符间隔设为默认 letter-spacing:normal。

20、margin 和 padding 分别适合什么场景？

margin 是用来隔开元素与元素的间距；padding 是用来隔开元素与内容的间隔。
margin 用于布局分开元素使元素与元素互不相干。padding 用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段距离。

何时应当使用 margin：

需要在 border 外侧添加空白时。
空白处不需要背景（色）时。
上下相连的两个盒子之间的空白，需要相互抵消时。如 15px+20px 的 margin，将得到 20px 的空白，即 margin 重叠。

何时应当时用 padding：

需要在 border 内测添加空白时。
空白处需要背景（色）时。
上下相连的两个盒子之间的空白，希望等于两者之和时。如 15px+20px 的 padding，将得到 35px 的空白。

21、CSS3 all 属性

all 属性实际上是所有 CSS 属性的缩写，表示，所有的 CSS 属性都怎样怎样，但是，不包括 unicode-bidi 和 direction 这两个 CSS 属性。支持三个 CSS 通用属性值，initial，inherit，unset。

initial 是初始值的意思，也就是该元素元素都除了 unicode-bidi 和 direction 以外的 CSS 属性都使用属性的默认初始值。
inherit 是继承的意思，也就是该元素除了 unicode-bidi 和 direction 以外的 CSS 属性都继承父元素的属性值。
unset 是取消设置的意思，也就是当前元素浏览器或用户设置的 CSS 忽略，然后如果是具有继承特性的 CSS，如 color，则使用继承值；如果是没有继承特性的 CSS 属性，如 background-color，则使用初始值。

22、font-style 属性中 italic 和 oblique 的区别

italic 和 oblique 这两个关键字都表示“斜体”的意思。它们的区别在于，italic 是使用当前字体的斜体字体，而 oblique 只是单纯地让文字倾斜。如果当前字体没有对应的斜体字体，则退而求其次，解析为 oblique，也就是单纯形状倾斜。

23、width: auto 和 width: 100%的区别

width:100% 会使元素 box 的宽度等于父元素的 contentbox 的宽度。
width:auto 会使元素撑满整个父元素，margin、border、padding、content 区域会自动分配水平空间。

24、min-width/max-width 和 min-height/max-height 属性间的覆盖规则？

max-width 会覆盖 width，即使 width 是行类样式或者设置了 !important。
min-width 会覆盖 max-width，此规则发生在 min-width 和 max-width。

25、border 的特殊性

border-width 却不支持百分比。
border-style 的默认值是 none，有一部分人可能会误以为是 solid。这也是单纯设置 border-width 或 border-color 没有边框显示的原因。
border-style:double 的表现规则：双线宽度永远相等，中间间隔±1。
border-color 默认颜色就是 color 色值。
默认 background 背景图片是相对于 paddingbox 定位的。

26、line-height 的特殊性

对于非替换元素的纯内联元素，其可视高度完全由 line-height 决定。对于文本这样的纯内联元素，line-height 就是高度计算的基石，用专业说法就是指定了用来计算行框盒子高度的基础高度。
内联元素的高度由固定高度和不固定高度组成，这个不固定的部分就是这里的“行距”。换句话说，line-height 之所以起作用，就是通过改变“行距”来实现的。在 CSS 中，“行距”分散在当前文字的上方和下方，也就是即使是第一行文字，其上方也是有“行距”的，只不过这个“行距”的高度仅仅是完整“行距”高度的一半，因此，也被称为“半行距”。
行距 = line-height+font-size。
border 以及 line-height 等传统 CSS 属性并没有小数像素的概念。如果标注的是文字上边距，则向下取整；如果是文字下边距，则向上取整。
对于纯文本元素，line-height 直接决定了最终的高度。但是，如果同时有替换元素，则 line-height 只能决定最小高度。
对于块级元素，line-height 对其本身是没有任何作用的，我们平时改变 line-height，块级元素的高度跟着变化实际上是通过改变块级元素里面内联级别元素占据的高度实现的。
line-height 的默认值是 normal，还支持数值、百分比值以及长度值。为数值类型时，其最终的计算值是和当前 font-size 相乘后的值。为百分比值时，其最终的计算值是和当前 font-size 相乘后的值。为长度值时原意不变。
如果使用数值作为 line-height 的属性值，那么所有的子元素继承的都是这个值；但是，如果使用百分比值或者长度值作为属性值，那么所有的子元素继承的是最终的计算值。
无论内联元素 line-height 如何设置，最终父级元素的高度都是由数值大的那个line-height 决定的。
只要有“内联盒子”在，就一定会有“行框盒子”，就是每一行内联元素外面包裹的一层看不见的盒子。然后，重点来了，在每个“行框盒子”前面有一个宽度为 0 的具有该元素的字体和行高属性的看不见的“幽灵空白节点”。

基线和 x-height
字母 x 的下边缘（线）就是我们的基线。

x-height 指的就是小写字母 x 的高度，术语描述就是基线和等分线（meanline）（也称作中线，midline）之间的距离。在 CSS 世界中，middle 指的是基线往上 1/2x-height 高度。我们可以近似理解为字母 x 交叉点那个位置。

ex 是 CSS 中的一个相对单位，指的是小写字母 x 的高度，没错，就是指 x-height。ex 的价值就在其副业上不受字体和字号影响的内联元素的垂直居中对齐效果。内联元素默认是基线对齐的，而基线就是 x 的底部，而1ex 就是一个 x 的高度。

27、vertical-align 的特殊性

vertical-align 的默认值是 baseline，即基线对齐，而基线的定义是字母 x 的下边缘。因此，内联元素默认都是沿着字母 x 的下边缘对齐的。对于图片等替换元素，往往使用元素本身的下边缘作为基线。：一个inline-block 元素，如果里面没有内联元素，或者 overflow 不是 visible，则该元素的基线就是其 margin 底边缘；否则其基线就是元素里面最后一行内联元素的基线。
vertical-align:top 就是垂直上边缘对齐，如果是内联元素，则和这一行位置最高的内联元素的顶部对齐；如果 display计算值是 table-cell 的元素，我们不妨脑补成元素，则和元素上边缘对齐。
vertical-align:middle 是中间对齐，对于内联元素，元素的垂直中心点和行框盒子基线往上 1/2x-height 处对齐。对于 table-cell 元素，单元格填充盒子相对于外面的表格行居中对齐。
vertical-align 支持数值属性，根据数值的不同，相对于基线往上或往下偏移，如果是负值，往下偏移，如果是正值，往上偏移。
vertical-align 属性的百分比值则是相对于 line-height 的计算值计算的。
vertical-align 起作用是有前提条件的，这个前提条件就是：只能应用于内联元素以及display 值为 table-cell 的元素。
table-cell 元素设置 vertical-align 垂直对齐的是子元素，但是其作用的并不是子元素，而是 table-cell 元素自身。

28、overflow 的特殊性

一个设置了 overflow:hidden 声明的元素，假设同时存在 border 属性和 padding 属性，则当子元素内容超出容器宽度
高度限制的时候，剪裁的边界是 borderbox 的内边缘，而非 paddingbox 的内边缘。
HTML 中有两个标签是默认可以产生滚动条的，一个是根元素 <html>，另一个是文本域 <textarea>。
滚动条会占用容器的可用宽度或高度。
元素设置了 overflow:hidden 声明，里面内容高度溢出的时候，滚动依然存在，仅仅滚动条不存在

29、absolute 与 overflow 的关系

如果 overflow 不是非 static 定位元素，同时绝对定位元素和 overflow 容器之间也没有定位元素，则 overflow 无法对 absolute 元素进行剪裁。
如果 overflow 的属性值不是 hidden 而是 auto 或者 scroll，即使绝对定位元素高宽比 overflow 元素高宽还要大，也都不会出现滚动条。
overflow 元素自身 transform 的时候，Chrome 和 Opera 浏览器下的 overflow 剪裁是无效的。

30、relative 的特殊性

相对定位元素的 left/top/right/bottom 的百分比值是相对于包含块计算的，而不是自身。注意，虽然定位位移是相对自身，但是百分比值的计算值不是。
top 和 bottom 这两个垂直方向的百分比值计算跟 height 的百分比值是一样的，都是相对高度计算的。同时，如果包含块的高度是 auto，那么计算值是 0，偏移无效，也就是说，如果父元素没有设定高度或者不是“格式化高度”，那么 relative 类似 top:20% 的代码等同于 top: 0。
当相对定位元素同时应用对立方向定位值的时候，也就是 top/bottom 和 left/right 同时使用的时候，只有一个方向的定位属性会起作用。而谁起作用则是与文档流的顺序有关的，默认的文档流是自上而下、从左往右，因此 top/bottom 同时使用的时候，bottom 失效；left/right 同时使用的时候，right 失效。

31、font-weight 特殊性

如果使用数值作为 font-weight 属性值，必须是 100～900 的整百数。因为这里的数值仅仅是外表长得像数值，实际上是一个具有特定含义的关键字，并且这里的数值关键字和字母关键字之间是有对应关系的。

32、text-indet 特殊性

text-indent 仅对第一行内联盒子内容有效。
非替换元素以外的 display 计算值为 inline 的内联元素设置 text-indent 值无效，如果计算值 inline-block/inline-table 则会生效。
<input>标签按钮 text-indent 值无效。
<button>标签按钮 text-indent 值有效。
text-indent 的百分比值是相对于当前元素的“包含块”计算的，而不是当前元素。

33、letter-spacing 与字符间距

letter-spacing 可以用来控制字符之间的间距，这里说的“字符”包括英文字母、汉字以及空格等。letter-spacing 具有以下一些特性：

继承性。
默认值是 normal 而不是 0。虽然说正常情况下，normal 的计算值就是 0，但两者还是有差别的，在有些场景下，letter-spacing 会调整 normal 的计算值以实现更好的版面布局。
支持负值，且值足够大的时候，会让字符形成重叠，甚至反向排列。
和 text-indent 属性一样，无论值多大或多小，第一行一定会保留至少一个字符。
支持小数值，即使 0.1px 也是支持的。
暂不支持百分比值。

34、word-spacing 与单词间距

letter-spacing 作用于所有字符，但 word-spacing 仅作用于空格字符。换句话说，word-spacing 的作用就是增加空格的间隙宽度。

35、white-space 与换行和空格

white-space 属性声明了如何处理元素内的空白字符，这类空白字符包括 Space（空格）键、Enter（回车）键、Tab（制表符）键产生的空白。因此，white-space 可以决定图文内容是否在一行显示（回车空格是否生效），是否显示大段连续空白（空格是否生效）等。其属性值包括下面这些：

normal：合并空白字符和换行符。
pre：空白字符不合并，并且内容只在有换行符的地方换行。
nowrap：该值和 normal 一样会合并空白字符，但不允许文本环绕。
pre-wrap：空白字符不合并，并且内容只在有换行符的地方换行，同时允许文本环绕。
pre-line：合并空白字符，但只在有换行符的地方换行，允许文本环绕。

36、单行/多行文本溢出省略

/*单行文本溢出*/
p {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/*多行文本溢出*/
p {
	position: relative;
	line-height: 1.5em;
	/*高度为需要显示的行数*行高，比如这里我们显示两行，则为 3*/
	height: 3em;
	overflow: hidden;
}
p:after {
	content: "...";
	position: absolute;
	bottom: 0;
	right: 0;
	background-color: #fff;
}

37、CSS Clip 裁剪

已弃用: 不再推荐使用该特性。虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。非继承。

img {
	position: absolute;
	clip: rect(0px,60px,200px,0px); /* 裁剪一个矩形*/
}

38、隐藏元素的 background-image 是否会加载？

元素本身设置 display:none，会请求图片
父级元素设置 display:none，不会请求图片
样式没有元素使用，不会请求
:hover 样式下，触发时请求
img 标签图片任何情况下都会请求图片

39、绝对定位元素与非绝对定位元素的百分比计算的区别

绝对定位元素的宽高百分比是相对于临近的 position 不为 static 的祖先元素的 paddingbox 来计算的。
非绝对定位元素的宽高百分比则是相对于父元素的 contentbox 来计算的。

40、transition 和 animation 的区别

transition 关注的是 CSS property 的变化，property 值和时间的关系是一个三次贝塞尔曲线。

animation 作用于元素本身而不是样式属性，可以使用关键帧的概念，应该说可以实现更自由的动画效果。

41、margin 无效的情形

display 计算值 inline 的非替换元素的垂直 margin 是无效的。对于内联替换元素，垂直margin 有效，并且没有 margin 合并的问题。
表格中的 <tr> 和 <td> 元素或者设置 display 计算值是 table-cell 或 table-row 的元素的margin 都是无效的。
绝对定位元素非定位方位的 margin 值“无效”。
定高容器的子元素的 margin-bottom 或者宽度定死的子元素的 margin-right 的定位“失效”。

42、什么是替换元素？

通过修改某个属性值呈现的内容就可以被替换的元素就称为“替换元素”。因此，<img>、<object>、<video>、<iframe>或者表单元素<textarea>和<input>和<select>都是典型的替换元素。替换元素除了内容可替换这一特性以外，还有以下一些特性：

内容的外观不受页面上的 CSS 的影响。用专业的话讲就是在样式表现在 CSS 作用域之外。如何更改替换元素本身的外观需要类似 appearance 属性，或者浏览器自身暴露的一些样式接口，
有自己的尺寸。在 Web 中，很多替换元素在没有明确尺寸设定的情况下，其默认的尺寸（不包括边框）是 300 像素×150 像素，如<video>、<iframe>或者<canvas>等，也有少部分替换元素为 0 像素，如<img>图片，而表单元素的替换元素的尺寸则和浏览器有关，没有明显的规律。
在很多 CSS 属性上有自己的一套表现规则。比较具有代表性的就是 vertical-align 属性，对于替换元素和非替换元素，vertical-align 属性值的解释是不一样的。比方说 vertical-align 的默认值的 baseline，很简单的属性值，基线之意，被定义为字符 x 的下边缘，而替换元素的基线却被硬生生定义成了元素的下边缘。
所有的替换元素都是内联水平元素，也就是替换元素和替换元素、替换元素和文字都是可以在一行显示的。但是，替换元素默认的 display 值却是不一样的，有的是 inline，有的是 inline-block

43、替换元素的计算规则

替换元素的尺寸从内而外分为 3 类：固有尺寸、HTML 尺寸和 CSS 尺寸。

固有尺寸指的是替换内容原本的尺寸。例如，图片、视频作为一个独立文件存在的时候，都是有着自己的宽度和高度的。
HTML 尺寸只能通过 HTML 原生属性改变，这些 HTML 原生属性包括<img>的 width 和height 属性、<input>的 size 属性、<textarea>的 cols 和 rows 属性等。
CSS 尺寸特指可以通过 CSS 的 width 和 height 或者 max-width/min-width 和 max-height/min-height 设置的尺寸，对应盒尺寸中的 contentbox。

这 3 层结构的计算规则具体如下

如果没有 CSS 尺寸和 HTML 尺寸，则使用固有尺寸作为最终的宽高。
如果没有 CSS 尺寸，则使用 HTML 尺寸作为最终的宽高。
如果有 CSS 尺寸，则最终尺寸由 CSS 属性决定。
如果“固有尺寸”含有固有的宽高比例，同时仅设置了宽度或仅设置了高度，则元素依然按照固有的宽高比例显示。
如果上面的条件都不符合，则最终宽度表现为 300 像素，高度为 150 像素。
内联替换元素和块级替换元素使用上面同一套尺寸计算规则。

44、content 与替换元素的关系

content 属性生成的对象称为“匿名替换元素”。

我们使用 content 生成的文本是无法选中、无法复制的，好像设置了 userselect:none 声明一般，但是普通元素的文本却可以被轻松选中。同时，content 生成的文本无法被屏幕阅读设备读取，也无法被搜索引擎抓取，因此，千万不要自以为是地把重要的文本信息使用 content 属性生成，因为这对可访问性和 SEO 都很不友好。
content 生成的内容不能左右 :empty 伪类。
content 动态生成值无法获取。

45、对于 hasLayout 的理解

hasLayout 是 IE 特有的一个属性。很多的 IE 下的 cssbug 都与其息息相关。在 IE 中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。当一个元素的 hasLayout 属性值为 true 时，它负责对自己和可能的子孙元素进行尺寸计算和定位。虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。

46、层叠上下文

层叠上下文，英文称作 stackingcontext，是 HTML 中的一个三维的概念。如果一个元素含有层叠上下文，我们可以理解为这个元素在 z 轴上就“高人一等”。

层叠上下文元素有如下特性：

层叠上下文的层叠水平要比普通元素高（原因后面会说明）。
层叠上下文可以阻断元素的混合模式。
层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的“层叠上下文”。
每个层叠上下文和兄弟元素独立，也就是说，当进行层叠变化或渲染的时候，只需要考虑后代元素。
每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。

层叠上下文的创建：

页面根元素天生具有层叠上下文，称为根层叠上下文。根层叠上下文指的是页面根元素，可以看成是<html>元素。因此，页面中所有的元素一定处于至少一个“层叠结界”中。
对于 position 值为 relative/absolute 以及 Firefox/IE 浏览器（不包括 Chrome 浏览器）下含有 position:fixed 声明的定位元素，当其 z-index 值不是 auto 的时候，会创建层叠上下文。Chrome 等 WebKit 内核浏览器下，position:fixed 元素天然层叠上下文元素，无须 z-index 为数值。
其他一些 CSS3 属性，比如 opacity 值不为 1 或 0（设置 opacity 会让 z-index 生效）。

层叠水平
层叠水平，英文称作 stackinglevel，决定了同一个层叠上下文中元素在 z 轴上的显示顺序。所有的元素都有层叠水平，包括层叠上下文元素，也包括普通元素。然而，对普通元素的层叠水平探讨只局限在当前层叠上下文元素中。

层叠顺序
层叠顺序，英文称作 stackingorder，表示元素发生层叠时有着特定的垂直显示顺序。

层叠准测

谁大谁上：当具有明显的层叠水平标识的时候，如生效的 z-index 属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。
后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在 DOM 流中处于后面的元素会覆盖前面的元素。

47、z-index 生效的情况

设置元素的 position 值为 relative/absolute/fixed
当 opacity 不为 1 或 0 时
当 transform 不为 none 时
当父元素设置 display: flex | inline-flex 时，子元素设置z-index

48、元素竖向的百分比设定是相对于容器的高度吗？

浏览器会自动计算页面宽度，但浏览器不计算高度。相当于只是一个 auto，让它内容自动往下堆砌。body 的 width 对应浏览器的宽度，而height 则是通过内容撑起来的。在设置百分比高度时要制定父元素/包含块的具体高度。

如果是 height 的话，是相对于包含块的高度。
如果是 padding 或者 margin 竖直方向的属性则是相对于包含块的宽度。

当 position 属性为 absolute 时，其宽高百分比参照其最近 position 不为 static 的父元素，如果父元素且所有祖先元素没有进行定位，其宽高百分比将根据浏览器可视宽高进行计算。

49、CSS Sprite

将一个页面涉及到的所有图片都包含到一张大图中去，然后利用 CSS 的 background-image，background-repeat，background-position 的组合进行背景定位。利用 CSSSprites 能很好地减少网页的 http 请求，从而很好的提高页面的性能；CSSSprites 能减少图片的字节。

优点：

减少 HTTP 请求数，极大地提高页面加载速度
增加图片信息重复度，提高压缩比，减少图片大小
更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现

缺点：

图片合并麻烦
维护麻烦，修改一个图片可能需要重新布局整个图片，样式

50、设备像素、css 像素、设备独立像素、dpr、ppi 之间的区别？

设备像素指的是物理像素，一般手机的分辨率指的就是设备像素，一个设备的设备像素是不可变的。
css 像素和设备独立像素是等价的，不管在何种分辨率的设备上，css 像素的大小应该是一致的，css 像素是一个相对单位，它是相
对于设备像素的，一个 css 像素的大小取决于页面缩放程度和 dpr 的大小。
dpr 指的是设备像素和设备独立像素的比值，一般的 pc 屏幕，dpr=1。在 iphone4 时，苹果推出了 retina 屏幕，它的 dpr 为 2。屏幕的缩放会改变 dpr 的值。
ppi 指的是每英寸的物理像素的密度，ppi 越大，屏幕的分辨率越大。

51、CSS 单位 px，rem，em，vw，vh 的区别

px 是相对长度单位，网页设计常用的基本单位。像素px是相对于显示器屏幕分辨率而言的。
em 是相对长度单位，相对于当前对象内文本的字体尺寸（参考物是父元素的 font-size），如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸。 em的值并不是固定的，em会继承父级元素的字体大小。
rem是CSS3新增的一个相对单位，rem是相对于HTML根元素的字体大小（font-size）来计算的长度单位，如果你没有设置 html 的字体大小，就会以浏览器默认字体大小，一般是16px。除了 IE8 及更早版本外，所有浏览器均已支持 rem。在奇葩的 dpr 设备上表现效果不太好，使用 iframe 引用也会出问题。
vw、vh、vmax、vmin 这四个单位都是基于视口。vw 是相对视口（viewport）的宽度而定的，长度等于视口宽度的1/100，假如浏览器的宽度为200px，那么1vw 就等于2px（200px/100）。vh 是相对视口（viewport）的高度而定的，长度等于视口高度的1/100，假如浏览器的高度为500px，那么1vh就等于5px（500px/100）。vmin 和 vmax 是相对于视口的高度和宽度两者之间的最小值或最大值。

52、移动端 rem 适配方案

为方便计算，设计稿为 750px 情况下，平均分成 7.5 份，则每份大小为 100 px，即 font-size 为 100px：

const htmlEl = document.documentElement;

function setRemUnit() {
  const htmlWidth = htmlEl.clientWidth;
  const htmlFontSize = htmlWidth / 7.5;
  htmlEl.style.fontSize = htmlFontSize + "px";
}

setRemUnit();
window.addEventListener("resize", setRemUnit);

这时 1rem = 100px，编写样式时元素大小= (设计稿元素尺寸大小 / 100) rem。

53、移动端媒体查询

响应式网站设计是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。页面头部必须有 meta 声明的 viewport：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">

媒体查询是响应式 Web 设计的关键部分，因为它允许你按照视口的尺寸创建不同的布局，不过它也可以用来探测和你的站点运行的环境相关联的其它条件，比如用户是在使用触摸屏还是鼠标。

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}
/* example */
@media screen and (max-width: 600px) {
    body {
        color: red;
    }
}

@media 由以下部分组成：

一个媒体类型，告诉浏览器这段代码是用在什么类型的媒体上的（例如印刷品或者屏幕）
一个媒体表达式，是一个被包含的 CSS 生效所需的规则或者测试
一组 CSS 规则，会在测试通过且媒体类型正确的时候应用

media-type 主要包含如下类型：

type	涵义
all	所有设备
braille	盲文
embossed	盲文打印
handheld	手持设备
print	文档打印或打印预览模式
projection	项目演示，比如幻灯
screen	彩色电脑屏幕
speech	演讲
tty	固定字母间距的网格的媒体，比如电传打字机
tv	电视

一些复杂的媒体查询

@media screen and (min-width: 400px), screen and (orientation: landscape) {
    body {
        color: blue;
    }
}

表示 body 的文字只会在视口至少为 400 像素宽，且设备横放时变为蓝色。

54、layoutviewport、visualviewport 和 idealviewport 的区别？

第一个视口是布局视口，在移动端显示网页时，由于移动端的屏幕尺寸比较小，如果网页使用移动端的屏幕尺寸进行布局的话，那么整
个页面的布局都会显示错乱。所以移动端浏览器提供了一个 layoutviewport 布局视口的概念，使用这个视口来对页面进行布局展示，一般 layoutviewport 的大小为 980px，因此页面布局不会有太大的变化，我们可以通过拖动和缩放来查看到这个页面。

第二个视口指的是视觉视口，visualviewport 指的是移动设备上我们可见的区域的视口大小，一般为屏幕的分辨率的大小。visualviewport 和 layoutviewport 的关系，就像是我们通过窗户看外面的风景，视觉视口就是窗户，而外面的风景就是布局视口中的网页内容。

第三个视口是理想视口，由于 layoutviewport 一般比 visualviewport 要大，所以想要看到整个页面必须通过拖动和缩放才能实现。所以又提出了 idealviewport 的概念，idealviewport 下用户不用缩放和滚动条就能够查看到整个页面，并且页面在不同分辨率下显示的内容大小相同。idealviewport 其实就是通过修改 layoutviewport 的大小，让它等于设备的宽度，这个宽度可以理解为是设备独立像素，因此根据 idealviewport 设计的页面，在不同分辨率的屏幕下，显示应该相同。

55、移动端(android)下 position: fixed “失效” 现象

因为移动端浏览器默认的 viewport 叫做layoutviewport。在移动端显示时，因为layoutviewport 的宽度大于移动端屏幕的宽度，所以页面会出现滚动条左右移动，fixed 的元素是相对 layoutviewport 来固定位置的，而不是移动端屏幕来固定位置的，所以会出现感觉 fixed 无效的情况。

如果想实现 fixed 相对于屏幕的固定效果，我们需要改变的是 viewport 的大小为 idealviewport，可以如下设置：

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0, user-scalable=no"/>

56、什么是首选最小宽度？

“首选最小宽度”，指的是元素最适合的最小宽度。东亚文字（如中文）最小宽度为每个汉字的宽度。西方文字最小宽度由特定的连续的英文字符单元决定。并不是所有的英文字符都会组成连续单元，一般会终止于空格（普通空格）、短横线、问号以及其他非英文字符等。

如果想让英文字符和中文一样，每一个字符都用最小宽度单元，可以试试使用 CSS 中的 word-break:break-all。

57、CSS 预处理器

CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件。

预处理器例如：LESS、Sass、Stylus，用来预编译 Sass 或 lesscsssprite，增强了 css 代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的 UI 组件模块化开发能力，极大的提高工作效率。

CSS 后处理器是对 CSS 进行处理，并最终生成 CSS 的预处理器，它属于广义上的 CSS 预处理器。我们很久以前就在用 CSS 后处理器了，最典型的例子是 CSS 压缩工具（如 clean-css）、Autoprefixer 等。

后处理器例如：PostCSS，通常被视为在完成的样式表中根据 CSS 规范处理 CSS，让其更有效。

58、CSS 优化、提高性能的方法

加载性能：

css 压缩：将写好的 css 进行打包压缩，可以减少很多的体积
css 单一样式：当需要下边距和左边距的时候，很多时候选择:margin-top: 0;margin-bottom: 0；但 margin-bottom:bottom; margin-left:left;执行的效率更高。
减少使用 @import，而建议使用 link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载

选择器性能：

关键选择器（keyselector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS 选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等
如果规则拥有 ID 选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）
避免使用通配规则，如*{}计算次数惊人！只对需要用到的元素进行选择
尽量少的去对标签进行选择，而是用 class
尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素
了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则

渲染性能：

慎重使用高性能属性：浮动、定位
尽量减少页面重排、重绘
去除空规则：｛｝。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少 css 文档体积。
属性值为 0 时，不加单位
属性值为浮动小数 0.**，可以省略小数点之前的 0
标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后
不使用@import 前缀，它会影响 css 的加载速度
选择器优化嵌套，尽量避免层级过深
css 雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清
楚，再使用
正确使用 display 的属性，由于 display 的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能
不滥用 web 字体。对于中文网站来说 WebFonts 可能很陌生，国外却很流行。webfonts 通常体积庞大，而且一些浏览器在下载 webfonts 时会阻塞页面渲染损伤性能

可维护性、健壮性：

将具有相同属性的样式抽离出来，整合并通过 class 在页面中进行使用，提高 css 的可维护性
样式与内容分离：将 css 代码定义到外部 css 中

59、手写动画的最小时间间隔？

当动画低于 30hz 时，肉眼能明显感觉到卡顿，在 60hz 时表现非常平滑，另外，大部分显示器的刷新率也在 60hz，所以需要1秒刷新60次，即最小时间间隔为 1/60 = 0.0166秒。

60、浏览器怎样解析 CSS 选择器的？

样式系统从关键选择器开始匹配，然后左移查找规则选择器的祖先元素。只要选择器的子树一直在工作，样式系统就会持续左移，直到和规则匹配，或者是因为不匹配而放弃该规则。如果采用从左至右的方式读取 CSS 规则，那么大多数规则读到最后（最右）才会发现是不匹配的，这样做会费时耗能，最后有很多都是无用的；而如果采取从右向左的方式，那么只要发现最右边选择器不匹配，就可以直接舍弃了，避免了许多无效匹配。

61、在网页中应该使用奇数还是偶数的字体？

偶数字号相对更容易和 web 设计的其他部分构成比例关系。比如：当我用了 14px 的正文字号，我可能会在一些地方用 14 × 0.5 = 7px 的 margin，在另一些地方用 14 × 1.5 = 21px 的标题字号
浏览器缘故，低版本的浏览器 ie6 会把奇数字体强制转化为偶数，即 13px 渲染为 14px
系统差别，早期的 Windows 里，中易宋体点阵只有 12 和 14、15、16px，唯独缺少 13px

62、使用图片 base64 编码的优点和缺点

base64 编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，在页面上显示的时候，可以用该字符串来代替图片的
url 属性。

使用 base64 的优点是：

减少一个图片的 HTTP 请求

使用 base64 的缺点是：

根据 base64 的编码原理，编码后的大小会比原文件大小大 1/3，如果把大图片编码到 html/css 中，不仅会造成文件体积的增加，影响文件的加载速度，还会增加浏览器对 html 或 css 文件解析渲染的时间。
使用 base64 无法直接缓存，要缓存只能缓存包含 base64 的文件，比如 HTML 或者 CSS，这相比直接缓存图片的效果要差很多。
兼容性的问题，ie8 以前的浏览器不支持。一般一些网站的小图标可以使用 base64 图片来引入。

63、png、jpg、gif、webp 这些图片格式

BMP，是无损的、既支持索引色也支持直接色的、点阵图。这种图片格式几乎没有对数据进行压缩，所以 BMP 格式的图片通常具有较大的文件大小。
GIF 是无损的、采用索引色的、点阵图。采用 LZW 压缩算法进行编码。文件小，是 GIF 格式的优点，同时，GIF 格式还具有支持动画以及透明的优点。但，GIF 格式仅支持 8bit 的索引色，所以 GIF 格式适用于对色彩要求不高同时需要文件体积较小的场景。
JPEG 是有损的、采用直接色的、点阵图。JPEG 的图片的优点，是采用了直接色，得益于更丰富的色彩，JPEG 非常适合用来存储照片，与 GIF 相比，JPEG 不适合用来存储企业 Logo、线框类的图。因为有损压缩会导致图片模糊，而直接色的选用，又会导致图片文件较 GIF 更大。
PNG-8 是无损的、使用索引色的、点阵图。PNG 是一种比较新的图片格式，PNG-8 是非常好的 GIF 格式替代者，在可能的情况下，应该尽可能的使用 PNG-8 而不是 GIF，因为在相同的图片效果下，PNG-8 具有更小的文件体积。除此之外，PNG-8 还支持透明度的调节，而 GIF 并不支持。现在，除非需要动画的支持，否则我们没有理由使用 GIF 而不是 PNG-8。
PNG-24 是无损的、使用直接色的、点阵图。PNG-24 的优点在于，它压缩了图片的数据，使得同样效果的图片，PNG-24 格式的文件大小要比 BMP 小得多。当然，PNG24 的图片还是要比 JPEG、GIF、PNG-8 大得多。
SVG 是无损的、矢量图。SVG 是矢量图。这意味着 SVG 图片由直线和曲线以及绘制它们的方法组成。当你放大一个 SVG 图片的时候，你看到的还是线和曲线，而不会出现像素点。这意味着 SVG 图片在放大时，不会失真，所以它非常适合用来绘制企业 Logo、Icon 等。
WebP 是谷歌开发的一种新图片格式，WebP 是同时支持有损和无损压缩的、使用直接色的、点阵图。从名字就可以看出来它是为 Web 而生的，什么叫为 Web 而生呢？就是说相同质量的图片，WebP 具有更小的文件体积。现在网站上充满了大量的图片，如果能够降低每一个图片的文件大小，那么将大大减少浏览器和服务器之间的数据传输量，进而降低访问延迟，提升访问体验。

• 在无损压缩的情况下，相同质量的 WebP 图片，文件大小要比 PNG 小 26%；
• 在有损压缩的情况下，具有相同图片精度的 WebP 图片，文件大小要比 JPEG 小 25%~34%；
• WebP 图片格式支持图片透明度，一个无损压缩的 WebP 图片，如果要支持透明度只需要22%的格外文件大小。但是目前只有 Chrome 浏览器和 Opera 浏览器支持 WebP。

64、浏览器如何判断是否支持 webp 格式图片？

宽高判断法。通过创建 image 对象，将其 src 属性设置为 webp 格式的图片，然后在onload 事件中获取图片的宽高，如果能够获取，则说明浏览器支持 webp 格式图片。如果不能获取或者触发了 onerror 函数，那么就说明浏览器不支持 webp 格式的图片。
通过 canvas 的 toDataURL 将设置为 webp 格式，然后判断返回值中是否含有 image/webp 字段，如果包含则说明支持 WebP，反之则不支持。

var canvas = document.getElementById("canvas");
var dataURL = canvas.toDataURL();
console.log(dataURL);
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"

toDataURL(type, encoderOptions)
type 可选，图片格式，默认为 image/png

encoderOptions 可选，在指定图片格式为 image/jpeg 或 image/webp 的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。

65、如何修改 chrome 记住密码后自动填充表单的黄色背景？

chrome 表单自动填充后，input 文本框的背景会变成黄色的，chrome 会默认给自动填充的 input 表单加上 input:-webkit-autofill 私有属性：

input:-webkit-autofill {
	background-color:rgb(250,255,189);
	background-image:none;
	color:rgb(0,0,0);
}

对 chrome 默认定义的 background-color，background-image，color 使用 important 是不能提高其优先级的，但是其他属性可使用。使用足够大的纯色内阴影来覆盖 input 输入框的黄色背景，处理如下：

  input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {
      -webkit-box-shadow: 0 0 0px 1000px white inset;
      border: 1px solid #CCC!important;
    }

66、怎么让 Chrome 支持小于 12px 的文字？

在谷歌下 css 设置字体大小为 12px 及以下时，显示都是一样大小，都是默认 12px。

解决办法：

可以使用 Webkit 的内核的 -webkit-text-size-adjust 的私有 CSS 属性来解决，只要加了 -webkit-text-size-adjust:none; 字体大小就不受限制了。但是 chrome 更新到 27 版本之后就不可以用了。所以高版本 chrome 谷歌浏览器已经不再支持-webkit-text-size-adjust 样式，所以要使用时候慎用。
使用 css3 的 transform 缩放属性 -webkit-transform:scale(0.5); 注意收缩的是整个元素的大小，这时候，如果是内联元素，必须要将内联元素转换成块元素。
使用图片：如果是内容固定不变情况下，使用将小于 12px 文字内容切出做图片，这样不影响兼容也不影响美观。

67、让页面里的字体变清晰，变细用 CSS 怎么做？

webkit 内核的私有属性：-webkit-font-smoothing，用于字体抗锯齿，使用后字体看起来会更清晰舒服。在 MacOS 测试环境下面设置 -webkit-font-smoothing:antialiased; 但是这个属性仅仅是面向 MacOS，其他操作系统设置后无效。

68、如何居中 div？

利用 display: table

<div style="display: table;width: 500px;height: 200px;">
    <div style="display: table-cell;vertical-align: middle;"></div>
</div>

利用 display: flex

<div style="display:flex;justify-content: center; align-items:center; width: 500px;height: 200px;">
    <div style="width: 100px;height: 100px"></div>
</div>

利用定位和 transform 属性

<div style="position:relative; width: 500px;height: 200px;">
    <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width: 100px;height: 100px;"></div>
</div>

仅利用定位

<div style="position:relative; width: 500px;height: 200px;">
    <div style="position:absolute;top:50%;left:50%;margin-left:-50px;margin-top:-50px;width: 100px;height: 100px;"></div></div>

position + margin: auto

<div style="position:relative; width: 500px;height: 200px;">
    <div style="position:absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;width: 100px;height: 100px;"></div>
</div>

flex + margin: auto

<div style="display: flex;width: 500px;height: 200px;">
    <div style="margin: auto;width: 100px;height: 100px;"></div>
</div>

把元素相对于视口进行居中

<div style="margin: 50vh auto 0;transform: translateY(-50%);width: 100px;height: 100px;"></div>

关于 margin: auto：

如果一侧定值，一侧 auto，则 auto 为剩余空间大小
如果两侧均是 auto，则平分剩余空间

69、如何绘制一条 0.5 px 的边？

Chrome 把 0.5px 四舍五入变成了 1px，而 firefox/safari 能够画出半个像素的边，并且 Chrome 会把小于 0.5px 的当成 0，而 Firefox 会把不小于 0.55px 当成 1px，Safari 是把不小于 0.75px 当成 1px。

利用 transform

div {
	height: 1px;
    transform: scaleY(0.5); /* 延Y轴缩小1倍 */
	transform-origin: 50% 100%; /* 改变元素变形的原点 */
}

线性渐变linear-gradient

div {
    height: 1px;
    background: linear-gradient(0deg, #fff, #000);
}

使用boxshadow

div {
    height: 1px;
    background: none;
    box-shadow: 0 0.5px 0 #000;
}

使用SVG

.svg {
    background: none;
    height: 1px;
    background: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1px'><line x1='0' y1='0' x2='100%' y2='0' stroke='#000'></line></svg>");
}

控制viewport

<meta name="viewport" content="width=device-width,initial-sacle=0.5">

70、有一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度

<!DOCTYPE html>          
<html>          
<head>          
    <meta charset="UTF-8">      
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">    
    <title></title>        
    <style type="text/css">  
        /*.outer { height: 100vh; padding: 100px 0 0; box-sizing: border-box ; }
        .A { height: 100px; margin: -100px 0 0; background: #BBE8F2; }
        .B { height: 100%; background: #D9C666; }*/
 
        /*.outer { height: 100vh; padding: 100px 0 0; box-sizing: border-box ; position: relative; }
        .A { height: 100px; background: #BBE8F2; position: absolute; top: 0 ; left: 0 ; width: 100%; }
        .B { height: 100%; background: #D9C666; }*/
 
        .outer { height: 100vh; position: relative; }
        .A { height: 100px; background: #BBE8F2; }
        .B { background: #D9C666; width: 100%; position: absolute; top: 100px ; left: 0 ; bottom: 0; }
    </style>
</head>          
<body>  
    <div class="outer">
        <div class="A"></div>
        <div class="B"></div>
    </div>
</body>          
</html>

71、CSS 多列等高如何实实现

利用 padding-bottom|margin-bottom 正负值相抵，不会影响页面布局的特点。设置父容器设置超出隐藏（overflow:hidden），这样父容器的高度就还是它里面的列没有设定 padding-bottom 时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到里面最高那列的高，其他比这列矮的列会用它们的 padding-bottom 补偿这部分高度差。

 <div class="box">
  <div class="sub">
    <p>a</p>
  </div>
  <div class="sub">
    <p>b</p>
    <p>b</p>
  </div>
  <div class="sub">
    <p>c</p>
    <p>c</p>
    <p>c</p>
  </div>
</div>

 .box {
  width: 600px;
  overflow: hidden;
  margin: 10px auto;
  border: 1px solid #888;
}
.sub {
  float: left;
  width: 30%;
  margin-right: 3%;
  border: 1px solid orange;
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}

利用 table-cell 所有单元格高度都相等的特性，来实现多列等高。
利用 flex 布局中项目 align-items 属性默认为 stretch，如果项目未设置高度或设为 auto，将占满整个容器的高度的特性，来实现多列等高。

72、CSS 全屏滚动

带动画的滚动使用 scroll-snap，不过该属性兼容性不好。

<!DOCTYPE html>
<html lang="zh">
<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>CSS scroll snap</title>
    <style>
        body {
            margin: 0;
        }

        .container {
            height: 100vh;
            overflow-y: scroll;
            /* 在父容器上面使用 scroll-snap-type 属性 */
            scroll-snap-type: y mandatory;
        }

        section {
            padding: 112px;
            height: calc(100vh - 224px);
            color: white;
            /* 在需要滚动的容器上使用 scroll-snap-align 属性 */
            scroll-snap-align: start;
        }

        section:nth-of-type(1) {
            background-color: #60af15;
        }

        section:nth-of-type(2) {
            background-color: #158baf;
        }

        section:nth-of-type(3) {
            background-color: #af1581;
        }

        section h3 {
            font-size: 48px;
        }

        section p {
            font-size: 20px;
        }
    </style>
</head>
<body>
<div class="container">
    <section>
        <h3>A subtitle lives here</h3>
        <p>
            A
        </p>
    </section>
    <section>
        <h3>A subtitle lives here</h3>
        <p>
            B
        </p>
    </section>
    <section>
        <h3>A subtitle lives here</h3>
        <p>
            C
        </p>
    </section>
</div>
</body>
</html>

73、视差滚动

一个简单版的视差滚动：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>视差滚动</title>
	<style>
		.scene{
			position: absolute;
			width: 100%;
			height: 100%;
		}
		.scene img{
			position: absolute;
			display: block;
			border:1px solid #ccc;
			border-radius: 5px;
			box-shadow: 0 0 5px #ccc;
		}
		#pokemon1{
			width: 150px;
			top: 200px;
			left: 50px;
		}
		#pokemon2{
			width: 300px;
			left: 800px;
			top: 450px;
		}
		#pokemon3{
			top: 600px;
			left: 150px;
		}

		#pokemon4{
			width: 200px;
			left: 800px;
			top: 400px;
		}
		#pokemon5{
			width: 300px;
			left: 500px;
			top: 500px;
		}
		#pokemon6{
			top: 1200px;
		}

		#pokemon7{
			width: 150px;
			left: 250px;
			top: 550px;
		}
		#pokemon8{
			width: 300px;
			left: 100px;
			top: 900px;
		}
		#pokemon9{
			top: 1400px;
			left: 400px;
		}
	</style>
</head>
<body>
	<div id="scene_back" class="scene">
	    <img id="pokemon1" src="images/1.jpg">
	    <img id="pokemon4" src="images/4.jpg">
	    <img id="pokemon7" src="images/7.jpg">
	</div>

	<div id="scene_center" class="scene">
	    <img id="pokemon2" src="images/2.jpg">
	    <img id="pokemon5" src="images/5.jpg">
	    <img id="pokemon8" src="images/8.jpg">
	</div>

	<div id="scene_front" class="scene">
	    <img id="pokemon3" src="images/3.jpg">
	    <img id="pokemon6" src="images/6.jpg">
	    <img id="pokemon9" src="images/9.jpg">
	</div>

<script>
	var sceneBack = document.getElementById('scene_back'),
	    sceneCenter = document.getElementById('scene_center'),
	    sceneFront = document.getElementById('scene_front');

	//每个div层的初始top值
	var old_top1 = 0,
	    old_top2 = 200,
	    old_top3 = 700;

	addEvent(window,'scroll',onScroll);
	onScroll();

	function onScroll(e){
		var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
		// 让每个层的top值变化不一样,从而达到运动速度上的视差效果
		sceneBack.style.top = old_top1+scrollTop*.9+'px';
		sceneCenter.style.top = old_top2+scrollTop*.7+'px';
		sceneFront.style.top = old_top3+scrollTop*.3+'px';
	}

	//浏览器兼容
   	function addEvent(eventTarget, eventType, eventHandler) {
	    if (eventTarget.addEventListener) {
	        eventTarget.addEventListener(eventType, eventHandler, false);
	    } else {
	        if (eventTarget.attachEvent) {
	            eventType = "on" + eventType;
	            eventTarget.attachEvent(eventType, eventHandler);
	        } else {
	            eventTarget["on" + eventType] = eventHandler;
	        }
	    }
    }
</script>
</body>
</html>

74、实现一个宽高自适应的正方形

/*1.第一种方式是利用 vw 来实现*/
.square {
	width: 10%;
	height: 10vw;
	background: tomato;
}
/*2.第二种方式是利用元素的 margin/padding 百分比是相对父元素 width 的性质来实现*/
.square {
	width: 20%;
	height: 0;
	padding-top: 20%;
	background: orange;
}
/*3.第三种方式是利用子元素的 margin-top 的值来实现的*/
.square {
	width: 30%;
	overflow: hidden;
	background: yellow;
}
.square::after {
	content: "";
	display: block;
	margin-top: 100%;
}

75、一个自适应矩形，水平垂直居中，且宽高比为 2:1

/*实现原理参考自适应正方形和水平居中方式*/
.box {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	margin: auto;
	width: 10%;
	height: 0;
	padding-top: 20%; /* padding 或者 margin 竖直方向的属性是相对于包含块的宽度 */
	background: tomato;
}