SS 面试知识点总结

最近在整理 CSS 的时候发现遇到了很多面试中常见的面试题，本部分主要原作者在 Github 等各大论坛收录的 CSS 相关知识和一些相关面试题时所做的笔记，分享这份总结给大家，对大家对 CSS 的可以来一次全方位的检漏和排查，感谢原作者 CavsZhouyou 的付出，原文链接放在文章最下方，如果出现错误，希望大家共同指出！

1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？

相关知识点：

（1）有两种盒子模型：IE盒模型（border-box）、W3C标准盒模型（content-box）
（2）盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个部分

IE盒模型和W3C标准盒模型的区别：

（1）W3C标准盒模型：属性width，height只包含内容content，不包含border和padding
（2）IE盒模型：属性width，height包含content、border和padding，指的是content
+padding+border。

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

回答：

盒模型都是由四个部分组成的，分别是margin、border、padding和content。

标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同。标准盒模型的width和height属性的
范围只包含了content，而IE盒模型的width和height属性的范围包含了border、padding和content。

一般来说，我们可以通过修改元素的box-sizing属性来改变元素的盒模型。

详细的资料可以参考：《CSS 盒模型详解》

2.CSS 选择符有哪些？

（1）id选择器（#myid）
（2）类选择器（.myclassname）
（3）标签选择器（div,h1,p）
（4）后代选择器（h1p）
（5）相邻后代选择器（子）选择器（ul>li）
（6）兄弟选择器（li~a）
（7）相邻兄弟选择器（li+a）
（8）属性选择器（a[rel="external"]）
（9）伪类选择器（a:hover,li:nth-child）
（10）伪元素选择器（::before、::after）
（11）通配符选择器（*）

3.::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。

相关知识点：

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

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

回答：

在css3中使用单冒号来表示伪类，用双冒号来表示伪元素。但是为了兼容已有的伪元素的写法，在一些浏览器中也可以使用单冒号
来表示伪元素。

伪类一般匹配的是元素的一些特殊状态，如hover、link等，而伪元素一般匹配的特殊的位置，比如after、before等。

4.伪类与伪元素的区别

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

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

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

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

详细资料可以参考：《总结伪类与伪元素》

5.CSS 中哪些属性可以继承？

相关资料：

每个CSS属性定义的概述都指出了这个属性是默认继承的，还是默认不继承的。这决定了当你没有为元素的属性指定值时该如何计算
值。

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

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

有继承性的属性：

（1）字体系列属性
font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust

（2）文本系列属性
text-indent、text-align、text-shadow、line-height、word-spacing、letter-spacing、
text-transform、direction、color

（3）表格布局属性
caption-sideborder-collapseempty-cells

（4）列表属性
list-style-type、list-style-image、list-style-position、list-style

（5）光标属性
cursor

（6）元素可见性
visibility

（7）还有一些不常用的；speak，page，设置嵌套引用的引号类型quotes等属性


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

回答：

每一个属性在定义中都给出了这个属性是否具有继承性，一个具有继承性的属性会在没有指定值的时候，会使用父元素的同属性的值
来作为自己的值。

一般具有继承性的属性有，字体相关的属性，font-size和font-weight等。文本相关的属性，color和text-align等。
表格的一些布局属性、列表属性如list-style等。还有光标属性cursor、元素可见性visibility。

当一个属性不是继承属性的时候，我们也可以通过将它的值设置为inherit来使它从父元素那获取同名的属性值来继承。

详细的资料可以参考：《继承属性》《CSS 有哪些属性可以继承？》

6.CSS 优先级算法如何计算？

相关知识点：

CSS的优先级是根据样式声明的特殊性值来判断的。

选择器的特殊性值分为四个等级，如下：

（1）标签内选择符x,0,0,0
（2）ID选择符0,x,0,0
（3）class选择符/属性选择符/伪类选择符    0,0,x,0
（4）元素和伪元素选择符0,0,0,x

计算方法：

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

计算实例：

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


注意：
（1）样式应用时，css会先查看规则的权重（!important），加了权重的优先级最高，当权重相同的时候，会比较规则的特殊性。

（2）特殊性值越大的声明优先级越高。

（3）相同特殊性值的声明，根据样式引入的顺序，后声明的规则优先级高（距离元素出现最近的）

回答：

判断优先级时，首先我们会判断一条属性声明是否有权重，也就是是否在声明后面加上了!important。一条声明如果加上了权重，
那么它的优先级就是最高的，前提是它之后不再出现相同权重的声明。如果权重相同，我们则需要去比较匹配规则的特殊性。

一条匹配规则一般由多个选择器组成，一条规则的特殊性由组成它的选择器的特殊性累加而成。选择器的特殊性可以分为四个等级，
第一个等级是行内样式，为1000，第二个等级是id选择器，为0100，第三个等级是类选择器、伪类选择器和属性选择器，为0010，
第四个等级是元素选择器和伪元素选择器，为0001。规则中每出现一个选择器，就将它的特殊性进行叠加，这个叠加只限于对应的等
级的叠加，不会产生进位。选择器特殊性值的比较是从左向右排序的，也就是说以1开头的特殊性值比所有以0开头的特殊性值要大。
比如说特殊性值为1000的的规则优先级就要比特殊性值为0999的规则高。如果两个规则的特殊性值相等的时候，那么就会根据它们引
入的顺序，后出现的规则的优先级最高。

对于组合声明的特殊性值计算可以参考：《CSS 优先级计算及应用》《CSS 优先级计算规则》

7.关于伪类 LVHA 的解释?

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

当链接未访问过时：

（1）当鼠标滑过a链接时，满足:link和:hover两种状态，要改变a标签的颜色，就必须将:hover伪类在:link伪
类后面声明；
（2）当鼠标点击激活a链接时，同时满足:link、:hover、:active三种状态，要显示a标签激活时的样式（:active），
必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序。

当链接访问过时，情况基本同上，只不过需要将:link换成:visited。

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

8.CSS3 新增伪类有那些？

（1）elem:nth-child(n)选中父元素下的第n个子元素，并且这个子元素的标签名为elem，n可以接受具体的数
值，也可以接受函数。

（2）elem:nth-last-child(n)作用同上，不过是从后开始查找。

（3）elem:last-child选中最后一个子元素。

（4）elem:only-child如果elem是父元素下唯一的子元素，则选中之。

（5）elem:nth-of-type(n)选中父元素下第n个elem类型元素，n可以接受具体的数值，也可以接受函数。

（6）elem:first-of-type选中父元素下第一个elem类型元素。

（7）elem:last-of-type选中父元素下最后一个elem类型元素。

（8）elem:only-of-type如果父元素下的子元素只有一个elem类型元素，则选中该元素。

（9）elem:empty选中不包含子元素和内容的elem类型元素。

（10）elem:target选择当前活动的elem元素。

（11）:not(elem)选择非elem元素的每个元素。

（12）:enabled    控制表单控件的禁用状态。

（13）:disabled        控制表单控件的禁用状态。

(14):checked单选框或复选框被选中。

详细的资料可以参考：《CSS3 新特性总结(伪类)》《浅谈 CSS 伪类和伪元素及 CSS3 新增伪类》

9.如何居中 div？

-水平居中：给 div 设置一个宽度，然后添加 margin:0auto 属性

div {
  width: 200px;
  margin: 0auto;
}

-水平居中，利用 text-align:center 实现

.container {
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  font-size: 0;
}

.box {
  display: inline-block;
  width: 500px;
  height: 400px;
  background-color: pink;
}

-让绝对定位的 div 居中

div {
  position: absolute;
  width: 300px;
  height: 300px;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: pink; /*方便看效果*/
}

-水平垂直居中一

/*确定容器的宽高宽500高300的层设置层的外边距div{*/
position:absolute;/*绝对定位*/
width:500px;
height:300px;
top:50%;
left:50%;
margin:-150px00-250px;/*外边距为自身宽高的一半*/
background-color:pink;/*方便看效果*/
}

-水平垂直居中二

/*未知容器的宽高，利用`transform`属性*/
div {
  position: absolute; /*相对定位或绝对定位均可*/
  width: 500px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: pink; /*方便看效果*/
}

-水平垂直居中三

/*利用flex布局实际使用时应考虑兼容性*/
.container {
  display: flex;
  align-items: center; /*垂直居中*/
  justify-content: center; /*水平居中*/
}
.containerdiv {
  width: 100px;
  height: 100px;
  background-color: pink; /*方便看效果*/
}

-水平垂直居中四

/*利用text-align:center和vertical-align:middle属性*/
.container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  text-align: center;
  font-size: 0;
  white-space: nowrap;
  overflow: auto;
}

.container::after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.box {
  display: inline-block;
  width: 500px;
  height: 400px;
  background-color: pink;
  white-space: normal;
  vertical-align: middle;
}

回答：

一般常见的几种居中的方法有：

对于宽高固定的元素

（1）我们可以利用margin:0auto来实现元素的水平居中。

（2）利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水
平和垂直方向上的居中。

（3）利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素
的中心点到页面的中心。

（4）利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素
的中心点到页面的中心。

（5）使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对
齐，然后它的子元素也可以实现垂直和水平的居中。

对于宽高不定的元素，上面的后面两种方法，可以实现元素的垂直和水平的居中。

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

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

详细资料可以参考：《CSSdisplay 属性》

11.position 的值 relative 和 absolute 定位原点是？

相关知识点：

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

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

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

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

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

回答：

relative定位的元素，是相对于元素本身的正常位置来进行定位的。

absolute定位的元素，是相对于它的第一个position值不为static的祖先元素的paddingbox来进行定位的。这句话
我们可以这样来理解，我们首先需要找到绝对定位元素的一个position的值不为static的祖先元素，然后相对于这个祖先元
素的paddingbox来定位，也就是说在计算定位距离的时候，padding的值也要算进去。

12.CSS3 有哪些新特性？（根据项目回答）

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

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

相关知识点：

Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。注意，设为Flex布局以后，子元素的float、cl
ear和vertical-align属性将失效。

采用Flex布局的元素，称为Flex容器（flexcontainer），简称"容器"。它的所有子元素自动成为容器成员，称为Flex
项目（flexitem），简称"项目"。

容器默认存在两根轴：水平的主轴（mainaxis）和垂直的交叉轴（crossaxis），项目默认沿主轴排列。


以下6个属性设置在容器上。

flex-direction属性决定主轴的方向（即项目的排列方向）。

flex-wrap属性定义，如果一条轴线排不下，如何换行。

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为rownowrap。

justify-content属性定义了项目在主轴上的对齐方式。

align-items属性定义项目在交叉轴上如何对齐。

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。


以下6个属性设置在项目上。

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认
值为auto，即项目的本来大小。

flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为01auto。

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父
元素的align-items属性，如果没有父元素，则等同于stretch。

回答：

flex布局是CSS3新增的一种布局方式，我们可以通过将一个元素的display属性值设置为flex从而使它成为一个flex
容器，它的所有子元素都会成为它的项目。

一个容器默认有两条轴，一个是水平的主轴，一个是与主轴垂直的交叉轴。我们可以使用flex-direction来指定主轴的方向。
我们可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。还
可以使用flex-wrap来规定当一行排列不下时的换行方式。

对于容器中的项目，我们可以使用order属性来指定项目的排列顺序，还可以使用flex-grow来指定当排列空间有剩余的时候，
项目的放大比例。还可以使用flex-shrink来指定当排列空间不足时，项目的缩小比例。

详细资料可以参考：《Flex 布局教程：语法篇》《Flex 布局教程：实例篇》

14.用纯 CSS 创建一个三角形的原理是什么？

采用的是相邻边框连接处的均分原理。
  将元素的宽高设为0，只设置
  border
  ，把任意三条边隐藏掉（颜色设为
  transparent），剩下的就是一个三角形。
  #demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparenttransparentredtransparent;
}

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

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

16.CSS 多列等高如何实现？

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

（2）利用table-cell所有单元格高度都相等的特性，来实现多列等高。

（3）利用flex布局中项目align-items属性默认为stretch，如果项目未设置高度或设为auto，将占满整个容器的高度
的特性，来实现多列等高。

详细资料可以参考：《前端应该掌握的 CSS 实现多列等高布局》《CSS：多列等高布局》

17.经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用 hack 的技巧？

（1）png24位的图片在iE6浏览器上出现背景
解决方案：做成PNG8，也可以引用一段脚本处理。

（2）浏览器默认的margin和padding不同
解决方案：加一个全局的*{margin:0;padding:0;}来统一。

（3）IE6双边距bug：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或
margin-right，margin值会加倍。

#box{float:left;width:10px;margin:00010px;}

这种情况之下IE会产生20px的距离
解决方案：在float的标签样式控制中加入_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

（4）渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用"\9"这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用"+"将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
.bb{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9;/*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}

（5）IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义
属性；Firefox下，只能使用getAttribute()获取自定义属性
解决方法：统一通过getAttribute()获取自定义属性。

（6）IE下，event对象有x、y属性，但是没有pageX、pageY属性;Firefox下，event对象有
pageX、pageY属性，但是没有x、y属性。
解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

（7）Chrome中文界面下默认会将小于12px的文本强制按照12px显示
解决方法：

1.可通过加入CSS属性-webkit-text-size-adjust:none;解决。但是，在chrome
更新到27版本之后就不可以用了。

2.还可以使用-webkit-transform:scale(0.5);注意-webkit-transform:scale(0.75);
收缩的是整个span的大小，这时候，必须要将span转换成块元素，可以使用display：block/inline-block/...；

（8）超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了
解决方法：改变CSS属性的排列顺序L-V-H-A

（9）怪异模式问题：漏写DTD声明，Firefox仍然会按照标准模式来解析网页，但在IE中会触发怪异模
式。为避免怪异模式给我们带来不必要的麻烦，最好养成书写DTD声明的好习惯。

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

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

解决办法：

（1）为<li>设置float:left。不足：有些容器是不能设置浮动，如左右切换的焦点图等。

（2）将所有<li>写在同一行。不足：代码不美观。

（3）将<ul>内的字符尺寸直接设为0，即font-size:0。不足：<ul>中的其他字符尺寸也被设为0，需要额外重新设定其他
字符尺寸，且在Safari浏览器依然会出现空白间隔。

（4）消除<ul>的字符间隔letter-spacing:-8px，不足：这也设置了<li>内的字符间隔，因此需要将<li>内的字符
间隔设为默认letter-spacing:normal。

详细资料可以参考：《li 与 li 之间有看不见的空白间隔是什么原因引起的？》

19.为什么要初始化 CSS 样式？

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

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

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

淘宝的样式初始化代码：
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;}

20.什么是包含块，对于包含块的理解?

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

（1）根元素（很多场景下可以看成是<html>）被称为“初始包含块”，其尺寸等同于浏览器可视窗口的大小。

（2）对于其他元素，如果该元素的position是relative或者static，则“包含块”由其最近的块容器祖先盒的contentbox
边界形成。

（3）如果元素position:fixed，则“包含块”是“初始包含块”。

（4）如果元素position:absolute，则“包含块”由最近的position不为static的祖先元素建立，具体方式如下：

如果该祖先元素是纯inline元素，则规则略复杂：
•假设给内联元素的前后各生成一个宽度为0的内联盒子（inlinebox），则这两个内联盒子的paddingbox外面的包
围盒就是内联元素的“包含块”；
•如果该内联元素被跨行分割了，那么“包含块”是未定义的，也就是CSS2.1规范并没有明确定义，浏览器自行发挥
否则，“包含块”由该祖先的paddingbox边界形成。

如果没有符合条件的祖先元素，则“包含块”是“初始包含块”。

21.CSS 里的 visibility 属性有个 collapse 属性值是干嘛用的？在不同浏览器下以后什么区别？

（1）对于一般的元素，它的表现跟visibility：hidden;是一样的。元素是不可见的，但此时仍占用页面空间。

（2）但例外的是，如果这个元素是table相关的元素，例如table行，tablegroup，table列，tablecolumngroup，它的
表现却跟display:none一样，也就是说，它们占用的空间也会释放。

在不同浏览器下的区别：

在谷歌浏览器里，使用collapse值和使用hidden值没有什么区别。

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

详细资料可以参考：《CSS 里的 visibility 属性有个鲜为人知的属性值：collapse》

22.width:auto 和 width:100%的区别

一般而言

width:100%会使元素box的宽度等于父元素的contentbox的宽度。

width:auto会使元素撑满整个父元素，margin、border、padding、content区域会自动分配水平空间。

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

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

非绝对定位元素的宽高百分比则是相对于父元素的contentbox来计算的。

24.简单介绍使用图片 base64 编码的优点和缺点。

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

使用base64的优点是：

（1）减少一个图片的HTTP请求

使用base64的缺点是：

（1）根据base64的编码原理，编码后的大小会比原文件大小大1/3，如果把大图片编码到html/css中，不仅会造成文件体
积的增加，影响文件的加载速度，还会增加浏览器对html或css文件解析渲染的时间。

（2）使用base64无法直接缓存，要缓存只能缓存包含base64的文件，比如HTML或者CSS，这相比域直接缓存图片的效果要
差很多。

（3）兼容性的问题，ie8以前的浏览器不支持。

一般一些网站的小图标可以使用base64图片来引入。

详细资料可以参考：《玩转图片 base64 编码》《前端开发中，使用 base64 图片的弊端是什么？》《小 tip:base64:URL 背景图片与 web 页面性能优化》

25.'display'、'position'和'float'的相互关系？

（1）首先我们判断display属性是否为none，如果为none，则position和float属性的值不影响元素最后的表现。

（2）然后判断position的值是否为absolute或者fixed，如果是，则float属性失效，并且display的值应该被
设置为table或者block，具体转换需要看初始转换值。

（3）如果position的值不为absolute或者fixed，则判断float属性的值是否为none，如果不是，则display
的值则按上面的规则转换。注意，如果position的值为relative并且float属性的值存在，则relative相对
于浮动后的最终位置定位。

（4）如果float的值为none，则判断元素是否为根元素，如果是根元素则display属性按照上面的规则转换，如果不是，
则保持指定的display属性值不变。

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

详细资料可以参考：《position 跟 display、margincollapse、overflow、float 这些特性相互叠加后会怎么样？》

26.margin 重叠问题的理解。

相关知识点：

块级元素的上外边距（margin-top）与下外边距（margin-bottom）有时会合并为单个外边距，这样的现象称为“margin合
并”。

产生折叠的必备条件：margin必须是邻接的!

而根据w3c规范，两个margin是邻接的必须满足以下条件：

•必须是处于常规文档流（非float和绝对定位）的块级盒子，并且处于同一个BFC当中。
•没有线盒，没有空隙，没有padding和border将他们分隔开
•都属于垂直方向上相邻的外边距，可以是下面任意一种情况
•元素的margin-top与其第一个常规文档流的子元素的margin-top
•元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
•height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
•高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top
和margin-bottom


margin合并的3种场景：

（1）相邻兄弟元素margin合并。

解决办法：
•设置块状格式化上下文元素（BFC）

（2）父级和第一个/最后一个子元素的margin合并。

解决办法：

对于margin-top合并，可以进行如下操作（满足一个条件即可）：
•父元素设置为块状格式化上下文元素；
•父元素设置border-top值；
•父元素设置padding-top值；
•父元素和第一个子元素之间添加内联元素进行分隔。

对于margin-bottom合并，可以进行如下操作（满足一个条件即可）：
•父元素设置为块状格式化上下文元素；
•父元素设置border-bottom值；
•父元素设置padding-bottom值；
•父元素和最后一个子元素之间添加内联元素进行分隔；
•父元素设置height、min-height或max-height。

（3）空块级元素的margin合并。

解决办法：
•设置垂直方向的border；
•设置垂直方向的padding；
•里面添加内联元素（直接Space键空格是没用的）；
•设置height或者min-height。

回答：

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、pa
dding或者高度来解决这个问题。

27.对 BFC 规范（块级格式化上下文：blockformattingcontext）的理解？

相关知识点：

块格式化上下文（BlockFormattingContext，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒
子的区域，也是浮动元素与其他元素的交互限定区域。

通俗来讲

•BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。
•如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。

创建BFC

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

回答：

BFC指的是块级格式化上下文，一个元素形成了BFC之后，那么它内部元素产生的布局不会影响到外部元素，外部元素的布局也
不会影响到BFC中的内部元素。一个BFC就像是一个隔离区域，和其他区域互不影响。

一般来说根元素是一个BFC区域，浮动和绝对定位的元素也会形成BFC，display属性的值为inline-block、flex这些
属性时也会创建BFC。还有就是元素的overflow的值不为visible时都会创建BFC。

详细资料可以参考：《深入理解 BFC 和 MarginCollapse》《前端面试题-BFC（块格式化上下文）》

28.IFC 是什么？

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

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

详细资料可以参考：

《BFC 和 IFC 的理解（布局）》

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

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

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

清除浮动的方式

（1）使用clear属性清除浮动。参考28。

（2）使用BFC块级格式化上下文来清除浮动。参考26。

因为BFC元素不会影响外部元素的特点，所以BFC元素也可以用来清除浮动的影响，因为如果不清除，子元素浮动则父元
素高度塌陷，必然会影响后面元素布局和定位，这显然有违BFC元素的子元素不会影响外部元素的设定。

30.使用 clear 属性清除浮动的原理？

使用clear属性清除浮动，其语法如下：

clear:none|left|right|both

如果单看字面意思，clear:left应该是“清除左浮动”，clear:right应该是“清除右浮动”的意思，实际上，这种解释是有问
题的，因为浮动一直还在，并没有清除。

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

还需要注意的一点是clear属性指的是元素盒子的边不能和前面的浮动元素相邻，注意这里“前面的”3个字，也就是clear属
性对“后面的”浮动元素是不闻不问的。考虑到float属性要么是left，要么是right，不可能同时存在，同时由于clear
属性对“后面的”浮动元素不闻不问，因此，当clear:left有效的时候，clear:right必定无效，也就是此时clear:left
等同于设置clear:both；同样地，clear:right如果有效也是等同于设置clear:both。由此可见，clear:left和cle
ar:right这两个声明就没有任何使用的价值，至少在CSS世界中是如此，直接使用clear:both吧。

一般使用伪元素的方式清除浮动

.clear::after{
content:'';
display:table;//也可以是'block'，或者是'list-item'
clear:both;
}

clear属性只有块级元素才有效的，而::after等伪元素默认都是内联水平，这就是借助伪元素清除浮动影响时需要设置disp
lay属性值的原因。

31.zoom:1 的清除浮动原理?

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

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

zoom属性是IE浏览器的专有属性，火狐和老版本的webkit核心的浏览器都不支持这个属性。然而，zoom现在已经被逐步标
准化，出现在CSS3.0规范草案中。

目前非ie由于不支持这个属性，它们又是通过什么属性来实现元素的缩放呢？可以通过css3里面的动画属性scale进行缩放。

32.移动端的布局用过媒体查询吗？

假设你现在正用一台显示设备来阅读这篇文章，同时你也想把它投影到屏幕上，或者打印出来，而显示设备、屏幕投影和打印等这些
媒介都有自己的特点，CSS就是为文档提供在不同媒介上展示的适配方法

当媒体查询为真时，相关的样式表或样式规则会按照正常的级联规被应用。当媒体查询返回假，标签上带有媒体查询的样式表仍将被
下载（只不过不会被应用）。

包含了一个媒体类型和至少一个使用宽度、高度和颜色等媒体属性来限制样式表范围的表达式。CSS3加入的媒体查询使得无需修改
内容便可以使样式应用于某些特定的设备范围。

详细资料可以参考：《CSS3@media 查询》《响应式布局和自适应布局详解》

33.使用 CSS 预处理器吗？喜欢哪个？

SASS（SASS、LESS没有本质区别，只因为团队前端都是用的SASS）

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

加载性能：

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

选择器性能：

（1）关键选择器（keyselector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS选择符是从右到
左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；

（2）如果规则拥有ID选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹
配它们了）。

（3）避免使用通配规则，如*{}计算次数惊人！只对需要用到的元素进行选择。

（4）尽量少的去对标签进行选择，而是用class。

（5）尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过
三层，更多的使用类来关联每一个标签元素。

（6）了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。

渲染性能：

（1）慎重使用高性能属性：浮动、定位。

（2）尽量减少页面重排、重绘。

（3）去除空规则：｛｝。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。

（4）属性值为0时，不加单位。

（5）属性值为浮动小数0.**，可以省略小数点之前的0。

（6）标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。

（7）不使用@import前缀，它会影响css的加载速度。

（8）选择器优化嵌套，尽量避免层级过深。

（9）css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清
楚，再使用。

（10）正确使用display的属性，由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。

（11）不滥用web字体。对于中文网站来说WebFonts可能很陌生，国外却很流行。webfonts通常体积庞大，而且一些浏
览器在下载webfonts时会阻塞页面渲染损伤性能。

可维护性、健壮性：

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

详细资料可以参考：《CSS 优化、提高性能的方法有哪些？》《CSS 优化，提高性能的方法》

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

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

试想一下，如果采用从左至右的方式读取CSS规则，那么大多数规则读到最后（最右）才会发现是不匹配的，这样做会费时耗能，
最后有很多都是无用的；而如果采取从右向左的方式，那么只要发现最右边选择器不匹配，就可以直接舍弃了，避免了许多无效匹配。

详细资料可以参考：《探究 CSS 解析原理》

36.在网页中应该使用奇数还是偶数的字体？为什么呢？

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

详细资料可以参考：《谈谈网页中使用奇数字体和偶数字体》《现在网页设计中的为什么少有人用 11px、13px、15px 等奇数的字体？》

37.margin 和 padding 分别适合什么场景使用？

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

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

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

38.抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题]

我的理解是把常用的css样式单独做成css文件……通用的和业务相关的分离出来，通用的做成样式模块儿共享，业务相关的，放
进业务相关的库里面做成对应功能的模块儿。

详细资料可以参考：《CSS 规范-分类方法》

39.简单说一下 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，则使用初始值。

详细资料可以参考：《简单了解 CSS3 的 all 属性》

40.为什么不建议使用统配符初始化 css 样式。

采用*{pading:0;margin:0;}这样的写法好处是写起来很简单，但是是通配符，需要把所有的标签都遍历一遍，当网站较大时，
样式比较多，这样写就大大的加强了网站运行的负载，会使网站加载的时候需要很长一段时间，因此一般大型的网站都有分层次的一
套初始化样式。

出于性能的考虑，并不是所有标签都会有padding和margin，因此对常见的具有默认padding和margin的元素初始化即
可，并不需使用通配符*来初始化。

41.absolute 的 containingblock（包含块）计算方式跟正常流有什么不同？

（1）内联元素也可以作为“包含块”所在的元素；

（2）“包含块”所在的元素不是父块级元素，而是最近的position不为static的祖先元素或根元素；

（3）边界是paddingbox而不是contentbox。

42.对于 hasLayout 的理解？

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

详细资料可以参考：《CSS 基础篇--CSS 中 IE 浏览器的 hasLayout，IE 低版本的 bug 根源》《CSS 魔法堂：hasLayout 原来是这样的！》

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

如果是height的话，是相对于包含块的高度。

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

44.全屏滚动的原理是什么？用到了 CSS 的哪些属性？（待深入实践）

原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，容器及容
器内的页面取当前可视区高度，同时容器的父级元素overflow属性值设为hidden，通过更改容器可视区的位置来实现全
屏滚动效果。主要是响应鼠标事件，页面通过CSS的动画效果，进行移动。

overflow：hidden；transition：all1000msease；

详细资料可以参考：《js 实现网页全屏切换（平滑过渡），鼠标滚动切换》《用 ES6 写全屏滚动插件》

45.什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的 IE？（待深入了解）

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

详细资料可以参考：《响应式布局原理》《响应式布局的实现方法和原理》

46.视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？）

视差滚动是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。

详细资料可以参考：《如何实现视差滚动效果的网页？》

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

chrome表单自动填充后，input文本框的背景会变成黄色的，通过审查元素可以看到这是由于chrome会默认给自动填充的in
put表单加上input:-webkit-autofill私有属性，然后对其赋予以下样式：

{
background-color:rgb(250,255,189)!important;
background-image:none!important;
color:rgb(0,0,0)!important;
}

对chrome默认定义的background-color，background-image，color使用important是不能提高其优先级的，但是
其他属性可使用。

使用足够大的纯色内阴影来覆盖input输入框的黄色背景，处理如下

input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{
-webkit-box-shadow:000px1000pxwhiteinset;
border:1pxsolid#CCC!important;
}

详细资料可以参考：《去掉 chrome 记住密码后的默认填充样式》《修改谷歌浏览器 chrome 记住密码后自动填充表单的黄色背景》

48.怎么让 Chrome 支持小于 12px 的文字？

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

解决办法：

（1）可以使用Webkit的内核的-webkit-text-size-adjust的私有CSS属性来解决，只要加了-webkit-text-size
-adjust:none;字体大小就不受限制了。但是chrome更新到27版本之后就不可以用了。所以高版本chrome谷歌浏览器
已经不再支持-webkit-text-size-adjust样式，所以要使用时候慎用。

（2）还可以使用css3的transform缩放属性-webkit-transform:scale(0.5);注意-webkit-transform:scale(0.
75);收缩的是整个元素的大小，这时候，如果是内联元素，必须要将内联元素转换成块元素，可以使用display：block/
inline-block/...；

（3）使用图片：如果是内容固定不变情况下，使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观。

详细资料可以参考：《谷歌浏览器不支持 CSS 设置小于 12px 的文字怎么办？》

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

webkit内核的私有属性：-webkit-font-smoothing，用于字体抗锯齿，使用后字体看起来会更清晰舒服。

在MacOS测试环境下面设置-webkit-font-smoothing:antialiased;但是这个属性仅仅是面向MacOS，其他操作系统设
置后无效。

详细资料可以参考：《让字体变的更清晰 CSS 中-webkit-font-smoothing》

50.font-style 属性中 italic 和 oblique 的区别？

italic和oblique这两个关键字都表示“斜体”的意思。

它们的区别在于，italic是使用当前字体的斜体字体，而oblique只是单纯地让文字倾斜。如果当前字体没有对应的斜体字体，
则退而求其次，解析为oblique，也就是单纯形状倾斜。

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

设备像素指的是物理像素，一般手机的分辨率指的就是设备像素，一个设备的设备像素是不可变的。

css像素和设备独立像素是等价的，不管在何种分辨率的设备上，css像素的大小应该是一致的，css像素是一个相对单位，它是相
对于设备像素的，一个css像素的大小取决于页面缩放程度和dpr的大小。

dpr指的是设备像素和设备独立像素的比值，一般的pc屏幕，dpr=1。在iphone4时，苹果推出了retina屏幕，它的dpr
为2。屏幕的缩放会改变dpr的值。

ppi指的是每英寸的物理像素的密度，ppi越大，屏幕的分辨率越大。

详细资料可以参考：《什么是物理像素、虚拟像素、逻辑像素、设备像素，什么又是 PPI,DPI,DPR 和 DIP》《前端工程师需要明白的「像素」》《CSS 像素、物理像素、逻辑像素、设备像素比、PPI、Viewport》《前端开发中像素的概念》

52.layoutviewport、visualviewport 和 idealviewport 的区别？

相关知识点：

如果把移动设备上浏览器的可视区域设为viewport的话，某些网站就会因为viewport太窄而显示错乱，所以这些浏览器就决定
默认情况下把viewport设为一个较宽的值，比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了。
ppk把这个浏览器默认的viewport叫做layoutviewport。

layoutviewport的宽度是大于浏览器可视区域的宽度的，所以我们还需要一个viewport来代表浏览器可视区域的大小，ppk把
这个viewport叫做visualviewport。

idealviewport是最适合移动设备的viewport，idealviewport的宽度等于移动设备的屏幕宽度，只要在css中把某一元
素的宽度设为idealviewport的宽度（单位用px），那么这个元素的宽度就是设备屏幕的宽度了，也就是宽度为100%的效果。i
dealviewport的意义在于，无论在何种分辨率的屏幕下，那些针对idealviewport而设计的网站，不需要用户手动缩放，也
不需要出现横向滚动条，都可以完美的呈现给用户。

回答：

移动端一共需要理解三个viewport的概念的理解。

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

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

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

详细资料可以参考：《移动前端开发之 viewport 的深入理解》《说说移动前端中 viewport（视口）》《移动端适配知识你到底知多少》

53.position:fixed;在 android 下无效怎么处理？

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

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

<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sca
le=1.0,user-scalable=no"/>

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

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

55.如何让去除 inline-block 元素间间距？

移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing

详细资料可以参考：《去除 inline-block 元素间间距的 N 种方法》

56.overflow:scroll 时不能平滑滚动的问题怎么处理？

以下代码可解决这种卡顿的问题：-webkit-overflow-scrolling:touch;是因为这行代码启用了硬件加速特性，所以滑动很流
畅。

详细资料可以参考：《解决页面使用 overflow:scroll 在 iOS 上滑动卡顿的问题》

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

（1）外层div使用position：relative；高度要求自适应的div使用position:absolute;top:100px;bottom:0;
left:0;right:0;

（2）使用flex布局，设置主轴为竖轴，第二个div的flex-grow为1。

详细资料可以参考：《有一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度(三种方案)》

58.png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过 webp？

相关知识点：

（1）BMP，是无损的、既支持索引色也支持直接色的、点阵图。这种图片格式几乎没有对数据进行压缩，所以BMP格式的图片通常
具有较大的文件大小。

（2）GIF是无损的、采用索引色的、点阵图。采用LZW压缩算法进行编码。文件小，是GIF格式的优点，同时，GIF格式还具
有支持动画以及透明的优点。但，GIF格式仅支持8bit的索引色，所以GIF格式适用于对色彩要求不高同时需要文件体积
较小的场景。

（3）JPEG是有损的、采用直接色的、点阵图。JPEG的图片的优点，是采用了直接色，得益于更丰富的色彩，JPEG非常适合用来
存储照片，与GIF相比，JPEG不适合用来存储企业Logo、线框类的图。因为有损压缩会导致图片模糊，而直接色的选用，
又会导致图片文件较GIF更大。

（4）PNG-8是无损的、使用索引色的、点阵图。PNG是一种比较新的图片格式，PNG-8是非常好的GIF格式替代者，在可能的
情况下，应该尽可能的使用PNG-8而不是GIF，因为在相同的图片效果下，PNG-8具有更小的文件体积。除此之外，PNG-8
还支持透明度的调节，而GIF并不支持。现在，除非需要动画的支持，否则我们没有理由使用GIF而不是PNG-8。

（5）PNG-24是无损的、使用直接色的、点阵图。PNG-24的优点在于，它压缩了图片的数据，使得同样效果的图片，PNG-24格
式的文件大小要比BMP小得多。当然，PNG24的图片还是要比JPEG、GIF、PNG-8大得多。

（6）SVG是无损的、矢量图。SVG是矢量图。这意味着SVG图片由直线和曲线以及绘制它们的方法组成。当你放大一个SVG图
片的时候，你看到的还是线和曲线，而不会出现像素点。这意味着SVG图片在放大时，不会失真，所以它非常适合用来绘制企
业Logo、Icon等。

（7）WebP是谷歌开发的一种新图片格式，WebP是同时支持有损和无损压缩的、使用直接色的、点阵图。从名字就可以看出来它是
为Web而生的，什么叫为Web而生呢？就是说相同质量的图片，WebP具有更小的文件体积。现在网站上充满了大量的图片，
如果能够降低每一个图片的文件大小，那么将大大减少浏览器和服务器之间的数据传输量，进而降低访问延迟，提升访问体验。

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

但是目前只有Chrome浏览器和Opera浏览器支持WebP格式，兼容性不太好。

回答：

我了解到的一共有七种常见的图片的格式。

（1）第一种是BMP格式，它是无损压缩的，支持索引色和直接色的点阵图。由于它基本上没有进行压缩，因此它的文件体积一般比
较大。

（2）第二种是GIF格式，它是无损压缩的使用索引色的点阵图。由于使用了LZW压缩方法，因此文件的体积很小。并且GIF还
支持动画和透明度。但因为它使用的是索引色，所以它适用于一些对颜色要求不高且需要文件体积小的场景。

（3）第三种是JPEG格式，它是有损压缩的使用直接色的点阵图。由于使用了直接色，色彩较为丰富，一般适用于来存储照片。但
由于使用的是直接色，可能文件的体积相对于GIF格式来说更大。

（4）第四种是PNG-8格式，它是无损压缩的使用索引色的点阵图。它是GIF的一种很好的替代格式，它也支持透明度的调整，并
且文件的体积相对于GIF格式更小。一般来说如果不是需要动画的情况，我们都可以使用PNG-8格式代替GIF格式。

（5）第五种是PNG-24格式，它是无损压缩的使用直接色的点阵图。PNG-24的优点是它使用了压缩算法，所以它的体积比BMP
格式的文件要小得多，但是相对于其他的几种格式，还是要大一些。

（6）第六种格式是svg格式，它是矢量图，它记录的图片的绘制方式，因此对矢量图进行放大和缩小不会产生锯齿和失真。它一般
适合于用来制作一些网站logo或者图标之类的图片。

（7）第七种格式是webp格式，它是支持有损和无损两种压缩方式的使用直接色的点阵图。使用webp格式的最大的优点是，在相
同质量的文件下，它拥有更小的文件体积。因此它非常适合于网络图片的传输，因为图片体积的减少，意味着请求时间的减小，
这样会提高用户的体验。这是谷歌开发的一种新的图片格式，目前在兼容性上还不是太好。

详细资料可以参考：《图片格式那么多，哪种更适合你？》

59.浏览器如何判断是否支持 webp 格式图片

（1）宽高判断法。通过创建image对象，将其src属性设置为webp格式的图片，然后在onload事件中获取图片的宽高，如
果能够获取，则说明浏览器支持webp格式图片。如果不能获取或者触发了onerror函数，那么就说明浏览器不支持webp格
式的图片。

（2）canvas判断方法。我们可以动态的创建一个canvas对象，通过canvas的toDataURL将设置为webp格式，然后判断
返回值中是否含有image/webp字段，如果包含则说明支持WebP，反之则不支持。

详细资料可以参考：《判断浏览器是否支持 WebP 图片》《toDataURL()》

60.什么是 Cookie 隔离？（或者说：请求资源的时候不要让它带 cookie 怎么做）

网站向服务器请求的时候，会自动带上cookie这样增加表头信息量，使请求变慢。

如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量，所以不如隔离开
，静态资源放CDN。

因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，这样可以降低请
求头的大小，降低请求时间，从而达到降低整体请求延时的目的。

同时这种方式不会将cookie传入WebServer，也减少了WebServer对cookie的处理分析环节，提高了webserver的
http请求的解析速度。

详细资料可以参考：《CDN 是什么？使用 CDN 有什么优势？》

61.style 标签写在 body 后与 body 前有什么区别？

页面加载自上而下当然是先加载样式。写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式
表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可
能会出现FOUC现象（即样式失效导致的页面闪烁问题）

62.什么是 CSS 预处理器/后处理器？

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

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

CSS后处理器是对CSS进行处理，并最终生成CSS的预处理器，它属于广义上的CSS预处理器。我们很久以前就在用CSS后
处理器了，最典型的例子是CSS压缩工具（如clean-css），只不过以前没单独拿出来说过。还有最近比较火的Autoprefixer，
以CanIUse上的浏览器支持数据为基础，自动处理兼容性问题。

后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏
览器私有前缀，实现跨浏览器兼容性的问题。

详细资料可以参考：《CSS 预处理器和后处理器》

63.阐述一下 CSSSprites

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

优点：

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

缺点：

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

64.使用 rem 布局的优缺点？

优点：
在屏幕分辨率千差万别的时代，只要将rem与屏幕分辨率关联起来就可以实现页面的整体缩放，使得在设备上的展现都统一起来了。
而且现在浏览器基本都已经支持rem了，兼容性也非常的好。

缺点：
（1）在奇葩的dpr设备上表现效果不太好，比如一些华为的高端机型用rem布局会出现错乱。
（2）使用iframe引用也会出现问题。
（3）rem在多屏幕尺寸适配上与当前两大平台的设计哲学不一致。即大屏的出现到底是为了看得又大又清楚，还是为了看的更多的问
题。

详细资料可以参考：《css3 的字体大小单位 rem 到底好在哪？》《VW:是时候放弃 REM 布局了》《为什么设计稿是 750px》《使用 Flexible 实现手淘 H5 页面的终端适配》

65.画一条 0.5px 的线

采用metaviewport的方式

采用border-image的方式

采用transform:scale()的方式

详细资料可以参考：《怎么画一条 0.5px 的边（更新）》

66.transition 和 animation 的区别

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

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

推荐阅读

5个JavaScript技巧让你成为更好的开发者

Vue知识点，面试必备（基础到进阶，覆盖vue3.0，持续更新整理）

前端开发，一份关于vue-cli3项目常用项配置

React实战之React+Redux实现一个天气预报小项目

前端开发，用英雄联盟的方式讲解JavaScript设计模式（二）

出处：segmentfault
链接：104道 CSS 面试题，助你查漏补缺

文由微信公众号“科研圈”(ID: keyanquan) 授权转载

转载请先联系keyanquan@huanqiukexue.com

图片来源：Pixabay

来源 PLoS One

作者 Nicolas P. Rougier, Michael Droettboom, Philip E. Bourne

翻译 LYM

审校 戚译引

科学可视化通常被定义为以图片方式显示科学数据的过程，然而这个过程并不是直接或者是自动的。相同的数据可以采取很多不同的方法来展现，比如散点图、线形图、条形图和饼状图。此外，同样的数据使用相同类型的图来表示，在不同的人看来效果是非常不同的。对于科学可视化更准确的定义，是人与数据之间的图形交互界面。在这篇短文中，我们不会解释关于这个交互界面的所有内容，相关的介绍性工作请参见文献 [1]、[2]。我们的目标是提供一套改进图片设计的基本规则，并解释一些常见的误区。

1. 了解你的受众

根据上述对科学可视化的定义，当视觉信息的接收方与内容传递一方的意图有显著差异时，问题就产生了。因此，在设计过程中尽早地确认图像的受众和信息是很重要的。视觉上的图形设计应该以此为依据。

如果你正在为自己和直接合作者制作一张图片，那么你可以跳过设计过程中的许多步骤，因为每个人都知道图片是关于什么的。然而，如果你打算在科学期刊上发表一张图片，那么你应该确保图片内容是正确的，并且把所有相关的信息传达给更广泛的读者。学生读者需要特别加以关注，因为在这种情况下，你的目标是解释一个概念。此时你可能需要添加额外的信息，以确保他们可以完全理解这个概念。最后，公众可能是更难理解图片内容的读者了，你需要设计一张简单的图片，可能只能表达近似的意义，只展示你研究中最突出的部分（图 1）。事实证明，这是一个困难的练习（详见参考文献 [3]）。

图 1：https://doi.org/10.1371/journal.pcbi.1003833.g001

这张图片根据 2007 年在《纽约时报》（New York Times）上发布的一张图片重新制作。新图片使用了近似数据，用 matplotlib 绘制。数据由四个类别（男性死亡/病例，女性死亡/病例）组成并可以使用经典的双栏（死亡/病例）条形图表示。这里使用的布局比原图片更适合目标受众。这里他们利用了这样一个事实，即新的病例数总是大于相应的死亡人数，所以可以将两组数据对应的图像重叠起来。此外，他们还利用了阅读方向上的优势（《纽约时报》使用英语，阅读方向是从左到右），以便于男女之间的比较，同时图片中间的标签醒目展示了图片上的主要信息，即不同的癌症。

这张图片包含了理解它所需要的全部内容，清楚地传达了关于癌症死亡数量的信息。然而图片并不准确，图片所选择的布局使得读者实际上很难估计肾癌的死亡人数，因为它被标示在图片底部，而刻度标示在图片顶部。虽然这对于面向公众的出版物是可接受的，但如果在文章的其他地方没有给出实际数值，那么这在科学出版物中是不能接受的。

2. 明确图片要传达的信息

无论是在一篇文章还是一个时间有限的口头报告中，如果一个事实或者结论很难或不可能用简短的文字来表达，那么图片就派上了用场。在这种情况下，很重要的一点是要清楚地意识到图片所扮演的角色——图片隐含了怎样的信息，以及如何最好地呈现该信息。一旦明确了这点，这个信息将成为图片设计的有力指南，如图 2 所示。只有在明确了图片需要传达的信息后，才值得花时间改进你的图片，就像你在写文章时只有明确了要点之后才能遣词造句一样。如果你的图片能够让人一眼就能看到重要的信息，那么你的文章就有可能吸引更多的关注。

图 2：https://doi.org/10.1371/journal.pcbi.1003833.g002

上丘（superior colliculus, SC）是位于多功能通路交叉点的脑干结构。有神经生理学研究表明，上丘中的活跃神经元群将视觉目标的位置编码，从而诱发眼球运动。从视网膜表面（左侧）到瞳孔表面（右侧）的投影基于一个标准的定量模型，其中一个对数映射函数描述了从视网膜坐标到瞳孔坐标的投影关系。这种对数映射在眼跳（saccade）的决策中起着重要作用。为了更好地说明这个作用，研究人员使用了人工棋盘图案，即使在实验中没有使用这种图案。这个棋盘图案清楚地显示了中央凹注视区域的极端放大，这就是图形的主要信息。

3. 使图片适应支持媒介

图片可以在各种媒体上展示，例如海报、计算机显示器、投影屏幕（如做口头报告时）或简单的纸张（如印刷品中）。每一种媒介都要求图片有不同的物理尺寸，而且更重要的是，每一种媒介都暗示着观看者和与图片交互的不同方式。例如，在做口头报告的时候，图片展示的时间比较有限。因此，观众必须快速理解图片内容及其含义，同时还要倾听你的解释。在这种情况下，图片必须保持简单，必须在视觉上突出信息，以便引起注意，如图 3 所示。同样重要的是，在口头报告中，图片将被视频投影并从远处看到，因此图片中的元素必须加粗（线条）或放大（点、文本），颜色应具有强烈的对比度，并且应避免垂直文本等。

而对于期刊文章，情况就截然不同，因为读者想看多久就能看多久，直到看懂图片为止。这意味着你可以在图片中添加很多细节，并且在图注里进行补充解释。考虑到现在越来越多的人在电脑屏幕上阅读文章，他们也有可能放大和拖动这个图片。

在理想情况下，每种类型的支持媒介都需要一张不同的图片。可千万别可从论文里复制一张图片到处贴，比如贴到口头报告的 PPT 里。

图 3：https://doi.org/10.1371/journal.pcbi.1003833.g003

这两幅图片代表了对双粒子系统轨迹的相同模拟，其中两颗粒子之间存在相互作用：

系统可能以三种不同的状态结束，取决于不同的初始条件。左图是为期刊文章准备的，读者可以自由查看每个细节。红色一直用于表示初始条件（放大区域中的红点）和轨迹（红线）。为了突出轨迹重叠的区域（高色密度），增加了线条透明度。右图是口头报告准备的图片，因为图片的展示时间有限，观众无法仔细查看每一个图片细节，所以许多细节已被删除（轨迹数量减少，没有重叠的轨迹，刻度数减少，轴线加粗，刻度标签减少，没有标题，线条加粗）。此外，由于图片将在口头报告期间介绍，因此图片的一些部分已被修改，使它们更容易被口头描述（例如黄色框和红色虚线）。

4. 图注是必要的

无论是描述一个实验设置，引入一个新的模型，还是展示新的结果，你都不能解释图片本身中的所有内容——图片应该带有图注。图注解释了如何阅读图片，并为无法用图片表示的内容提供额外的准确信息。你可以认为它是你在口头陈述或活动海报前给出的解释，只是你必须提前考虑人们会问的问题。

例如，如果你有一张条形图，不要期望读者仅仅通过查看和测量图上的相对高度来猜测不同条形图的值。如果数值很重要，那么它们必须在文章的其他地方提供，或者在图上写得非常清楚。同样，如果图片中有一个令人感兴趣的点（关键域、特定点等），确保它在视觉上是清晰的，而且不要犹豫，在图注中再次指出。

5. 不要相信默认设置

所有的绘图库或者软件都带有默认设置。当用户没有指定任何设置时，这些默认设置就决定了图片的尺寸、字体、颜色、样式、刻度、标记等（图 4）。几乎所有的设置都是可以调整的，不过你通常可以一眼认出不同软件包（比如Matlab，Excel，Keynote 等）或者库（LaTeX，matplotlib，gnuplot 等）的特殊样式，这要归功于这些默认设置的选择。由于这些设置几乎可用于任何类型的绘图，因此它们并没有针对特定类型的绘图进行微调。换句话说，这些工具能画出任何类型的“足够好”的图片，但它们画出的图都不是最好的。

无论是为了让一张精确的图片更容易被广大读者看懂，还是为了根据数据本身性质来选择最佳的颜色图，所有图片都需要对不同设置进行一些手动调整，以便更好地表达信息。图 4 就展示了如何对一张使用 matplotlib 默认设置的图片进行调整，呈现更好的视觉效果。

图 4：https://doi.org/10.1371/journal.pcbi.1003833.g004

左图为采用 matplotlib 默认设置绘制的正弦和余弦函数图像。虽然图片足够清晰，但是你还可以通过调整各种设置来进行改进，如右图所示。

6. 有效地使用颜色

颜色是人类视觉的一个重要维度，因此在科学图片的设计中也同样重要。然而，正如 Edward Tufte 所言，颜色可能是你最好的盟友，但如果使用不当也会变成你最大的敌人[1] 。如果你决定使用颜色，你应该考虑使用哪种颜色，以及在哪里使用它。例如，要想突出显示图片中的某些元素，你可以对该元素使用颜色，同时保持其他元素为灰色或黑色，这提供了增强效果。然而，如果你没有这样的需要，那就该问问自己：“这张图表是蓝色而不是黑色，这样做有什么理由吗？“如果你不知道答案，那么就让它保持黑色。对于彩色图片也是如此。不要使用默认的色图设置（例如墨黑色或彩虹色），除非有明确的理由这样做（参见图 5 和文献 [5]）。

图 5：https://doi.org/10.1371/journal.pcbi.1003833.g005

这幅图使用三种不同的颜色设置表现了相同的信号，其中频率从左向右逐渐增加，强度从上到下逐渐增强。彩虹色图（rainbow colormap，定性）和地震色图（seismic colormap，发散）都不适合展示这样的信号，因为它们会隐藏高频区域（右下角）的细节信息。如果使用连续色图，比如最右紫色的色图，我们就更容易看到高频区域的细节。图片改编自文献 [5]。

色图传统上分为三大类：

• 渐变（sequential）：使用单一颜色的变化展示从低到高的定量数据；

• 分裂（diverging）：从一种颜色到另一种颜色的变化，用于突出显示与中位数的偏差；

• 定性（qualitative）：颜色的快速变化，主要用于离散或分类数据。

使用和你的数据最相关的色图。最后，避免使用过多相似的颜色，因为色盲人士可能在辨认某些颜色方面存在困难。

7. 不要误导读者

科学图片与其它图片艺术品的区别在于数据的体现，数据需要尽可能客观地展示出来。根据定义，科学图片与数据（无论是实验设置、模型还是某些结果）相关联，如果你忽略了这种联系，可能会无意中表达出与预期不同的信息。

客观地表示结果并不简单。例如，你所使用的库或软件所做的一些隐式选择在大多数情况下都是准确的，但在某些情况下也可能误导读者。如果软件自动对数值进行缩放处理，你可能会获得数据的客观表示（因为标题、标签和刻度清楚地表明实际显示的内容），但是这些数据在视觉上具有误导性（请参见图 6 中的条形图）；你无意中误导了你的读者，使他们在视觉上相信你的数据中不存在的东西。

你还可能在设计上做出明确的错误选择，例如使用饼状图或三维图表来比较数量。这两种形式的图片会导致对数量的错误感知，你需要具备一些专业知识才能正确使用它们。根据经验，请务必始终使用最简单的绘图类型来传达你的信息，并确保使用相关的标签、刻度、标题和完整的数值范围。最后，不要犹豫，多多询问同事们如何理解你的图片吧。

图 6：https://doi.org/10.1371/journal.pcbi.1003833.g006

在图的左侧，我们展示了四个值：30、20、15、10。在左上角，我们使用圆盘面积来表示数值，而左下方图片使用圆盘半径来表示。结果在视觉上非常不同。在后一种情况下（红色圆盘），最后一个值（10）与第一个值（30）相比显得非常小，然而这两个值之间的比率仅为 3∶1。这种情况在文献中实际上非常常见，因为用于生成圆或散点图（具有不同大小的点）的命令（或界面）使用半径作为默认值来指定圆盘大小。因此，使用半径长度表示一个数值看起来是合乎逻辑的，但这会产生误导。

在图的右侧，我们采用不同方法显示一个集合中的 10 个数值，对于顶部数值我们使用坐标的全范围（y 轴从 0 到 100），底部数值使用坐标的部分范围（y 轴从 80 到 100），并且我们没有明确地标记 y 轴，以增强混淆。这两组图形的视觉感受完全不同。对于右上方（黑色柱状图），我们倾向于将数值解释为非常相似的值；而在右下方，我们倾向于认为数值之间存在显著差异。即使我们使用标签来指明数值的实际范围，图片依旧会造成这样的效果，因为条形的长度就是图片中最显著的信息。

8. 避免“图表垃圾”

图表垃圾（chartjunk）指图片中所有不必要或混乱的视觉元素，这些元素不会改善信息的表示（在最好情况下），还可能增加混淆（在最坏情况下）。图表垃圾可能包括使用过多的颜色、过多的标签、毫无意义的彩色背景、无用的网格线等（参见图 7 的左侧部分）。Edward Tufte 在文献 [1] 中首次创造了这个术语，他认为任何不能为读者提供新信息的装饰都应该被禁止：“不管原因是什么，那些装饰中要么没有数据，要么包含冗余数据，而且通常是图表垃圾。”因此，为了避免产生图表垃圾，努力节约一点墨水，或者在计算机时代节约一点电力吧。在文献 [7] 中，Stephen Few 提醒我们在理想的情况下，图片应该“表示所有需要被查看和理解其意义的数据”。

不过，在一张图片中被视为图表垃圾的元素在另一张图片中可能是合理的。例如，在常规绘图中使用背景色通常是一个坏主意，因为它不会带来有用的信息；然而在图 7 的右侧，如标题中所述我们使用灰色背景框来表示 [−1，+1] 的研究范围。如果你有疑问，可以参考 Kaiser Fung 的博客 [8]，上面有许多案例分析，清楚地解释了图表垃圾的概念。

图 7：https://doi.org/10.1371/journal.pcbi.1003833.g007

我们有同等重要的七个样本，为了直观地比较它们，我们想把它们全部展示出来（确切的信号值应该在别处给出）。左图展示了什么是最糟糕的设计：所有的曲线互相重叠，不同的颜色（软件自动作出了糟糕的选择）对区分它们并没有帮助。图例框盖住了部分图形，因此无法检查重叠区域中是否有任何有用的信息。此外还有很多问题：x 轴的坐标相互重叠，难以阅读，而且到小数点后三位的精确度似乎也不携带任何重要的信息。最后，图片中的网格并没有帮助，因为它没有与信号对齐，考虑到采样点的数量很少，可以认为数据是离散的。

而右图在同样面积的纸张上采用了完全不同的布局。这一系列数据被分为七个小图表，每一个表示一类数据，而其他数据组则利用淡色绘制于主要数据后面。数据的标签被放置在数据的左侧，这样避免了使用颜色和图例框。x 轴的坐标数值减少到 3 个，并用细线在所有的图表中表示出这三个数值。最后，y 轴的刻度被完全去除，并利用灰色背景框的高度表示 [-1, +1] 的数据范围（这点也要在图片标题中说明，就像图片要被用在文章里那样）。

9. 信息重于颜值

在制作图片方面，每个科学领域都有自己的一套最佳实践方法。了解这些标准很重要，因为它们有助于将模型、研究或实验进行更直接的比较。更重要的是，它们可以帮助你在结果中发现明显的错误。不过，大多数时候你可能需要设计一张全新的图片，因为在描述研究结果这方面并没有标准的方法。在这种情况下，浏览科学文献是一个很好的起点。如果某篇文章展示了一张惊人的图片，介绍与你的结果相似的信息，你可以参考它对自己的图片进行调整（请注意，我们没有说“复制”，请尊重图片版权）。

如果你转向网络，你必须非常小心，因为数据可视化、信息图形、设计和艺术之间的界限正在变得越来越模糊 [9]。网上存在着无数的图片，其中美学是第一标准，内容是第二标准。即使这些图片中有很多可能大家认为是美观的，它们中的大多数都不符合科学框架。记住，在科学中，图片的信息和可读性是最重要的方面，而美观只是一个选项，如图 8 所示。

图 8：https://doi.org/10.1371/journal.pcbi.1003833.g008

这张图片是一个极端的案例，在这种情况下，即使图片的美感值得怀疑，其中的信息仍然非常清晰。恐怖谷理论是机器人技术领域的一个众所周知的假设，它将我们的舒适度与机器人与人类的相似程度联系起来。为了表示这个理论假设，研究人员使用了一个假设的数据来描述：

图片采用了一种手绘风格（类似对 matplotlib 的图片使用 xkcd “滤镜”），并配合卡通字体，以增强整体效果。横坐标也被移除，因为整体曲线的形状才是最重要的信息。使用手绘风格能向读者传达出这样的信息：图中数据仅为近似值，并且重要的是更高层次的整体概念，而不是低层次的细节。

10. 使用正确的工具

在绘制图片时，有许多工具可以让你更轻松，并且了解其中的一些可以为你节省大量时间。针对每个不同的图片类型，通常有一个专用工具可以完成你想要实现的目标。而至关重要的是，要了解你用于制作可视化图片的工具（软件或库）可能与你用于研究和/或分析数据的工具不同。你可以导出绘图工具中的数据，以便在其他工具中使用它。无论是绘制图表、设计实验示意图还是用数据作图，都有适合你的开源工具。它们只是等待着被发现和使用。下面是一小部分开源工具的介绍。

Matplotlib是一个 python 绘图库，主要用于二维作图，但也支持一些三维作图，可以生成具有出版级品质的各种可拷贝格式和跨平台交互式环境的图片。 它还附带了一个大型图库，涵盖几乎所有科学领域：http://matplotlib.org/gallery.html

R 语言是关于统计计算和图形的语言环境。R 语言提供各种统计功能（线性和非线性建模，经典统计测试，时间序列分析，分类，聚类等）和图形技术，并且具有高度可扩展性。

Inkscape 是一个专业的矢量图片编辑器。它允许设计复杂的图形，例如它可以用于改进脚本生成的图片或读取 PDF 文件，以便让你用各种方式提取图形和进行转换。

TikZ 和PGF是用于以编程方式创建图形的 TeX 包。 TikZ 建立在 PGF 之上，允许你以相当直观和简单的方式创建复杂的图形，如 Tikz 图库所示：http://www.texample.net/tikz/examples/all/

GIMP 是 GNU 图像处理程序。它适用于照片修饰、图像合成和图像创作等任务。如果需要快速修饰图像或添加一些图例、标签，GIMP 就是完美的工具。

ImageMagick 是一个软件套件，用于从命令行创建，编辑，编写或转换位图图像。 它可用于快速将图像转换为另一种格式，Fred Weinhaus 的巨大脚本库还将提供你要实现的几乎任何效果：

D3.js 简称 D3，即数据驱动文档（Data-Driven Documents）。这是一个 JavaScript 库，它提供了一种简单的方法来创建和控制在 Web 浏览器中运行的基于数据的交互式图形表单：

Cytoscape 是一个软件平台，用于可视化复杂网络，并将其与任何类型的属性数据（attribute data）进行整合。如果你的数据或结果非常复杂，Cytoscape 可能会帮助你减轻这种复杂性。

Circos 最初的设计方向是用于可视化基因组数据，但它也可以根据任何领域的数据创建图片。如果你的数据在一个或多个尺度上描述了描述一个或多个比例的关系或多层注释的数据，那么 Circos 就非常有用。

注：文章中的所有图片均由 matplotlib 绘制而成，图片脚本可在https://github.com/rougier/ten-rules获得。

参考文献

1. Tufte EG (1983) The Visual Display of Quantitative Information. Cheshire, Connecticut: Graphics Press.

2. Doumont JL (2009) Trees, maps, and theorems. Brussels: Principiae.

3. Kosara R, Mackinlay J (2013) Storytelling: The next step for visualization. IEEE Comput 46: 44–50. 文章链接

4. Rougier NP (2012) Scientific visualization and matplotlib tutorial. Euroscipy 2012 & 2013. Available: http://www.loria.fr/~rougier/teaching/matplotlib/matplotlib.html. Accessed 12 August 2014.

5.Borland D, Taylor RM (2007) Rainbow color map (still) considered harmful. IEEE Comput Graph Appl 27: 14–17. 文章链接

6. Okabe M, Ito K (2008). Color universal design (cud) - how to make figures and presentations that are friendly to colorblind people. Available: http://jfly.iam.u-tokyo.ac.jp/color/. Accessed 12 August 2014.

7. Few S (2011) The chartjunk debate, a close examination of recent findings. Visual Business Intelligence Newsletter. Available: http://www.perceptualedge.com/articles/visual_business_intelligence/the_chartjunk_debate.pdf. Accessed 12 August 2014.

8. Fung K (2005). Junk charts: Recycling chartjunk as junk art. Available: http://junkcharts.typepad.com. Accessed 12 August 2014.

9. Borkin MA, Vo AA, Bylinskii Z, Isola P, Sunkavalli S, et al. (2013) What makes a visualization memorable? IEEE Trans Vis Comput Graph 19: 2306–2315. 文章链接

10. Schumann J, Strothotte T, Raab A, Laser S (1996) Assessing the effect of non-photorealistic rendered images in cad. In: Proceedings of the SIGCHI Conference on Human Factors in Computing Systems; 13–18 April 1996; New York, New York, United States. CHI 96. New York: Association for Computing Machinery. pp.35–41.

原标题：科研作图十条秘籍，灵魂画手也能掌握

编辑：Cloudiiink

近期热门文章Top10

↓ 点击标题即可查看 ↓

模型

说下盒模型?

有两种盒模型，W3C盒模型和IE盒模型。通常说的“IE盒子模型”指的是IE5.5，IE6及其以后，盒模型都为 content-box。当浏览器未设置<!doctype>声明时，盒模型都为 border-box。

通过 css3 的box-sizing属性，可以更改元素的盒子模型。标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

标准盒模型 box-sizing: content-box

IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。IE盒模型 box-sizing: border-box

标准的CSS的盒子模型？

标准盒子模型：宽度=内容的宽度(content)+ border + padding + margin

与低版本IE的盒子模型有什么不同的？

低版本IE盒子模型：宽度=内容宽度(content+border+padding)+ margin

box-sizing属性？

用来控制元素的盒子模型的解析模式，默认为content-box

context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽

border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽

盒子模型在不同浏览器上的区别

盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。盒子模型有两种，分别是IE盒子模型和标准W3C盒子模型。它们对盒子模型的解释各不相同，先看看我们熟知的标准盒子模型：

标准的w3c盒子模型的范围包括margin、border、padding、content，并且content部分不包含其他部分。

在来看下IE盒子模型：

IE盒子模型的范围也包括margin、border、padding、content，和标准w3c盒子模型不同的是：ie盒子模型的content部分包含了border和padding。

例如：

一个盒子的margin为20px，border为1px，padding为10px，content的宽为200px、高为50px，加入用标准盒子模型解释，那么这个盒子需要占据的位置为：

宽：20*2 + 1 * 2 + 10* 2 + 200 = 262px, 高：20 * 2 + 1 * 2 + 10 * 2 + 50 = 112px。

盒子的实际大小为：宽1*2 + 10 * 2 + 200 = 222px,高1* 2 + 10 * 2 + 50 = 72px。

假如用IE盒子模型，那么盒子需要占据的位置为：

宽：20 * 2 + 200 = 240px,高：20 * 2 + 50 = 70px。

盒子的实际大小：宽200px,高50px。

一般推荐使用W3C盒子模型，怎样才算是选择了标准W3C盒子模型呢？就是在网页上加DOCKTYPE申明。如果不加，那么各个浏览器会根据自己的行为去理解网页。

CSS3增加了box-sizing属性，值包括content-box|border-box|inherit。

在我们的重置样式文件中一般也会重置这个属性，把box-sizing设置成border-box方便于排版。

水平垂直居中

不定宽高水平垂直居中？

1.通过display：flex；justify-content:center; align-items:center;就可以让子元素不定宽高水平垂直居中

2.也可以父display：flex；，子设置一个margin：auto；

3.通过css3，给父元素设置相对定位，给子元素设置绝对定位，left：50% top：50% 通过transform：translate(-50%，-50%)拉回自身的宽和高的一半。

4.通过给父元素设置display：table-cell; vertical-align：middle text-align：center 给子元素设置vertical-align：middle text-align：center。就可以让子元素不定宽高水平垂直居中了。

文字在垂直和水平方向重叠的两个属性分别是什么？

垂直方向：line-height。设置成比字体高度还小就可以让两行重叠

水平方向：letter-spacing。设置为负值即可实现重叠。

如何居中div

-水平居中1：给 div 设置一个宽度，然后添加 margin:0 auto; 属性

div{

width: 200px;

margin: 0 auto;

}

-水平居中2：利用 text-align:center 实现

.container{

background: rgba(0, 0, 0, .5);

text-align: center:

font-size: 0;

}

.box{

display: inline-block;

width: 500px;

height: 400px;

background-color: pink;

}

-让绝对定位的div居中

div{

positionn: absolute;

width: 300px;

height: 300px;

margin: auto;

top: 0;

left: 0;

bottom: 0;

right: 0;

background-color: pink; /* 方便看效果 */

}

-水平垂直居中1

/* 确定容器的宽高，宽500高300 */

div{

position: absolute;

width:500px;

height: 300px;

top: 50%;

left: 50%;

margin: -150px 0 0 -250px;

background-color: pink;

}

-水平垂直居中2

/* 未知容器宽高，利用 transform 属性 */

div{

position: absolute;

width: 500px;

height: 300px;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

background-color: pink;

}

-水平垂直居中3

/* 利用 flex 布局实际使用时应考虑兼容性 */

.container{

display: flex;

align-items: center; /* 垂直居中 */

justify-content: center; /* 水平居中 */

}

.container div{

width: 100px;

height: 100px;

background-color: pink;

}

为什么margin: 0 auto会让div居中

margin 可以有4个值，分别对应影响的方向是上，右，下，左， 2个值的时候，对应第一个值是 控制上下距离，第二个值是控制左右， 所以magrgin：0 auto， 就是上下距离为0，auto是自适应，这里指的是左右两个方向的距离一样，也就是说，不论你的宽度怎么变化，都是两个方向距离一样，形成居中。

要给居中元素一个宽度，否则无效

该元素不可以浮动，否则无效

BFC

什么是BFC？

BFC是W3C CSS2.1规范中的一个概念，在CSS3.0规范中已被修改为flow root。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。BFC(block formatting context)，中文为“块级格式化上下文”

对BFC的理解？

BFC规定了内部的Block Box如何布局。

定位方案：

内部的Box会在垂直方向上一个接一个放置。

Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。

每个元素的margin box 的左边，与包含块border box的左边相接触。

BFC的区域不会与float box重叠。

BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

计算BFC的高度时，浮动元素也会参与计算。

float属性不为none 【会影响上级元素】

position为absolute或fixed 【会影响上机元素】

display为inline-block, table-cell, table-caption, flex, inline-flex

overflow不为visible, 【建议使用auto/hidden】

<html>根元素

如何触发BFC？

BFC解决了什么问题？

解决自适应两栏布局问题：利用BFC的区域不会与float box重叠的规则。

解决浮动后塌陷问题：利用计算BFC的高度时，浮动元素也参与计算规则。

解决垂直margin重叠问题：利用Box垂直方向的距离由margin决定。

属于同一个BFC(同一个标记)的两个相邻Box的margin会发生重叠规则，在一个box外包裹一个容器，让他生成不同的BFC，这样就不会margin重叠了。

为什么overflow:hidden能触发bfc？

块级格式化上下文 (Block Formatting Context)：

盒子在容器(包含块)内从上到下一个接一个地放置

两个兄弟盒之间的竖直距离由 margin 属性决定

同一个 BFC 内垂直 margin 会合并

盒子的左外边缘挨着容器(包含块)的左边

块级格式化上下文(BFC) 的特性

BFC 内的浮动不会影响到BFC外部的元素

BFC 的高度会包含其内的浮动元素

BFC 不会和浮动元素重叠

BFC 可以通过 overflow:hidden 等方法创建

所有要处理 margin 折叠，就需要让两个元素处于不同的BFC，overflow: hidden正好可以触发BFC

Position

Position定位值有哪些？

static(默认)：按照正常文档流进行排列；

relative:相对定位 一般给父元素设置

absolute:绝对定位 一般给子元素设置 相对父元素或祖先带定位样式的元素定位

fixed :固定在某个位置，相对浏览器窗口固定在一个位置

Inherit:继承父元素的position值。

absolute的containing block计算方式跟正常流有什么不同？

无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：

若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；

否则,则由这个祖先元素的 padding box 构成。

如果都找不到，则为 initial containing block。

补充：

static(默认的)/relative：简单说就是它的父元素的内容框(即去掉padding的部分)

absolute: 向上找最近的定位为absolute/relative的元素

fixed: 它的containing block一律为根元素(html/body)

display

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

inline(默认)–内联

none–隐藏

block–块显示

table–表格显示

list-item–项目列表

inline-block

display:none与visibility：hidden的区别？

display：none 不显示对应的元素，在文档布局中不再分配空间(回流+重绘)

visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间(重绘)

即是，使用CSS display:none属性后，HTML元素(对象)的宽度、高度等各种属性都将“丢失”；而使用visibility:hidden属性后，HTML元素(对象)仅仅是在视觉上看不见(完全透明)，而它所占据的空间位置任然存在。

display:inline-block 什么时候会显示间隙？

有空格时候会有间隙 解决：移除空格

margin正值的时候 解决：margin使用负值

使用font-size时候 解决：font-size:0、letter-spacing、word-spacing

overflow属性定义溢出元素内容区的内容会如何处理?

参数是scroll时候，必会出现滚动条。

参数是auto时候，子元素内容大于父元素时出现滚动条。

参数是visible时候，溢出的内容出现在父元素之外。

参数是hidden时候，溢出隐藏。

visibility属性有个collapse属性值？在不同浏览器下以后什么区别？

当一个元素的visibility属性被设置成collapse值后，对于一般的元素，它的表现跟hidden是一样的。

chrome中，使用collapse值和使用hidden没有区别。

firefox，opera和IE，使用collapse值和使用display：none没有什么区别。

position跟display、overflow、float这些特性相互叠加后会怎么样？

display属性规定元素应该生成的框的类型；position属性规定元素的定位类型；float属性是一种布局方式，定义元素在哪个方向浮动。

类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

float浮动

为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。

浮动带来的问题：

父元素的高度无法被撑开，影响与父元素同级的元素

与浮动元素同级的非浮动元素(内联元素)会跟随其后

若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

父级div定义height

最后一个浮动元素后加空div标签 并添加样式clear:both。

包含浮动元素的父标签添加样式overflow为hidden或auto。

父级div定义zoom

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

自动变成display:block

margin和padding分别适合什么场景使用？

何时使用margin：

需要在border外侧添加空白

空白处不需要背景色

上下相连的两个盒子之间的空白，需要相互抵消时。

需要在border内侧添加空白

空白处需要背景颜色

上下相连的两个盒子的空白，希望为两者之和。

何时使用padding：

兼容性的问题：在IE5 IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display：inline解决。

选择器

CSS常用选择器

标签选择器

ID选择器

类选择器

组选择器

通配符选择器

后代选择器

子元素选择器

伪类选择器

哪些属性可以继承？

可继承的属性：font-size, font-family, color

不可继承的样式：border, padding, margin, width, height

优先级(就近原则)：!important > [ id > class > tag ]

!important 比内联优先级高

CSS优先级算法如何计算？

元素选择符： 1

class选择符： 10

id选择符：100

元素标签：1000

!important声明的样式优先级最高，如果冲突再进行计算。

如果优先级相同，则选择最后出现的样式。

继承得到的样式的优先级最低。

CSS3新增伪类有那些?

p:first-of-type 选择属于其父元素的首个元素

p:last-of-type 选择属于其父元素的最后元素

p:only-of-type 选择属于其父元素唯一的元素

p:only-child 选择属于其父元素的唯一子元素

p:nth-child(2) 选择属于其父元素的第二个子元素

:enabled :disabled 表单控件的禁用状态。

:checked 单选框或复选框被选中。

::before 和 :after 中双冒号和单冒号的区别？这2个伪元素的作用？

·在 CSS3 中 : 表示伪类， :: 表示伪元素

·想让插入的内容出现在其他内容前，使用::befroe。否则，使用::after

Flex布局

常见父项的属性：

●flex-direction :设置主轴的方向

Row 默认值从左到右

row-reverse 从右到左

column 从上到下

column-reverse 从下到上

●justify-content :设置主轴上的子元素排列方式

flex-start 默认值从头部开始 如果主轴是x轴，则从左到右

flex-end 从尾部开始排列(但元素的顺序还是从左到右)

center 在主轴居中对齐(如果主轴是x轴则水平居中)

space- around 平分剩余空间

space – between 先两边贴边再平分剩余空间(重要)

●flex-wrap :设置子元素是否换行

默认情况下,项目都排在一条线(又称”轴线”) 上。flex-wrap属性定义 , flex布局中默认是不换行的。

nowrap 默认值，不换行

wrap 换行

●align-content :设置侧轴上的子元素的排列方式(多行)

设置子项在侧轴.上的排列方式并且只能用于子项出现换行的情况(多行) , 在单行下是没有效果的。

flex-start 默认值在侧轴的头部开始排列

flex- end 在侧轴的尾部开始排列

center 在侧轴中间显示

space-around 子项在侧轴平分剩余空间

space- between 子项在侧轴先分布在两头,再平分剩余空间

stretch 设置子项元素高度平分父元素高度

●align-items :设置侧轴上的子元素排列方式(单行)

该属性是控制子项在侧轴(默认是y轴).上的排列方式在子项为单项(单行)的时候使用

flex-start 从上到下

flex- end 从下到上

center 挤在一起居中(垂直居中)

stretch 拉伸(默认值但是子盒子如果给高度就不会生效)

●flex-flow :复合属性,相当于同时设置了flex-direction和flex-wrap

flex-dicection: column;

flex-wrap: wrap;

它俩的简写可以写成：

flex-flow: column wrap;

常见子项的属性：

●flex子项目占的份数

flex属性定义子项目分配剩余空间,用flex来表示占多少份数。

●align-self控制子项自己在侧轴的排列方式

align-self属性允许单个项目有与其他项目不-样的对齐方式，可覆盖align-items属性。

默认值为auto ,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。

span:nth-child(2){

/*设置自己在侧轴的排列方式*/

align-self:flex-end;

}

●order属性定义子项的排列顺序(前后顺序)

数值越小,排列越靠前,默认为0。(这个是左右的形式)

注意:和z-index不-样。(index是叠罗汉的形式)

flex属性flex:1到底是什么？

flex属性 是 flex-grow、flex-shrink、flex-basis三个属性的缩写。

推荐使用此简写属性，而不是单独写这三个属性。

flex-grow：定义项目的的放大比例；

默认为0，即使存在剩余空间，也不会放大；

所有项目的flex-grow为1：等分剩余空间(自动放大占位)；

flex-grow为n的项目，占据的空间(放大的比例)是flex-grow为1的n倍。

flex-shrink：定义项目的缩小比例；

默认为1，即 如果空间不足，该项目将缩小；

所有项目的flex-shrink为1：当空间不足时，缩小的比例相同；

flex-shrink为0：空间不足时，该项目不会缩小；

flex-shrink为n的项目，空间不足时缩小的比例是flex-shrink为1的n倍。

flex-basis： 定义在分配多余空间之前，项目占据的主轴空间(main size)，浏览器根据此属性计算主轴是否有多余空间，

默认值为auto，即 项目原本大小；

设置后项目将占据固定空间。

所以flex属性的默认值为：0 1 auto (不放大会缩小)

flex为none：0 0 auto (不放大也不缩小)

flex为auto：1 1 auto (放大且缩小)

flex为一个非负数字n：该数字为flex-grow的值，

flex：n ；= flex-grow：n；

flex-shrink：1；

flex-basis：0%;

flex为两个非负数字n1，n2： 分别为flex-grow和flex-shrink的值。

flex：n1 n2；= flex-grow：n1；

flex-shrink：n2；

flex-basis：0%;

flex为一个长度或百分比L：视为flex-basis的值，

flex：L；= flex-grow：1；

flex-shrink：1；

flex-basis：L;

flex为一个非负数字n和一个长度或百分比L：分别为flex-grow和flex-basis的值，

flex：n L；= flex-grow：n；

flex-shrink：1；

flex-basis：L;

可以发现，flex-grow和flex-shrink在flex属性中不规定值则为1，flex-basis为0%。

flex：1即为flex-grow：1，经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，将内容区flex：1，内容区则会自动放大占满剩余空间。

请解释一下flexbox(弹性盒布局模型),以及适用场景？

该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。在传统的布局方式中，block 布局是把块在垂直方向从上到下依次排列的；而 inline 布局则是在水平方向来排列。弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。

试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持。

如何让DOM元素不显示在浏览器的可视范围内？

最基本的：

设置display属性为none，或者设置visiblity为hidden

技巧性：

设置高度为0， 设置透明度为0，设置z-index位置在-1000

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

第一种真正的品字：

三块高宽是确定的；

上面那块用margin: 0 auto;居中；

下面两块用float或者inline-block不换行；

用margin调整位置使他们居中。

第二种全屏的品字布局:

上面的div设置成100%，下面的div分别宽50%，然后使用float或者inline使其不换行。

兼容

常见的兼容性问题？

不同浏览器的标签默认的margin和padding不一样。*{margin:0;padding:0;}

IE6双边距bug：块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大。hack：display:inline;将其转化为行内属性。

渐进识别的方式，从总体中逐渐排除局部。首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。

{

background-color: #f1ee18;/*所有识别*/

. background-color: #00deff; /*IE6、7、8识别*/

+background-color:#a200ff;/*IE6、7识别*/

_background-color:#1e0bd1;/*IE6识别*/

}

设置较小高度标签(一般小于10px)，在IE6，IE7中高度超出自己设置高度。hack：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。

IE下，可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性；Firefox下，只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。

Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。

超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了。解决方法是改变CSS属性的排列顺序:L-V-H-A ( love hate ): a:link {} a:visited {} a:hover {} a:active {}

浏览器兼容性有哪些

1. 浏览器默认的 margin 和 padding 不同

解决：加一个全局 *{ margin: 0; padding: 0; }来统一

2. 谷歌中文界面下默认会将小于12px 的文本强制按照12px显示

解决：使用-webkit-transform:scale(.75);收缩的是整个span盒子大小，这时候，必须将span准换成块元素。

3.超链接访问过后hover样式就不会出现了，被点击访问过的超链接样式不再具有hover 和active 了

解决：改变css 属性的排列顺序L-V-H-A

CSS 预处理器

Less sass

Sass、Less是什么？为什么要使用？

他们是CSS预处理器。他是CSS上的一种抽象层。它们是一种特殊的语法、语言编译成CSS。

例如Less是一种动态样式语言。将CSS赋予了动态语言的特性，如变量，继承，运算，函数。Less即可以在客户端上运行(支持IE6+,Webkit,Firefox)，也可以在服务端运行(借助Node.js)。

Sass变量必须是$开始，而Less变量必须使用@符号开始。

为什么要使用它们？

结构清晰，便于扩展。

可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无异议的机械劳动。

可以轻松实现多重继承。

完全兼容CSS代码，可以方便地应用到老项目中。Less只是在CSS语法上做了扩展，所以老的CSS代码也可以与Less代码一同编译。

CSS 3的新增特性？

ie9开始支持

1.选择器增加；

2.样式增加：常用

比如：圆角。阴影，渐变背景，半透明，图片边框等；

3.新增的背景样式：

背景图片的显示范围，和起点，缩放。

4.引入了flex弹性 盒模型； 常用

5.阴影效果；文本及盒子阴影。 常用

6.颜色与透明；

新增了HSL/HSLA/RGBA几种颜色模式；

7.web字体和web图标 常用

@font-face{

font-family: myFont;

src: url('')

}

div{

font-family: myFont

}

8.和容器的变形； 常用

transform: translate(50px,100px);平移

transform: rotate(30deg);旋转

transform: scale(2,4);缩放

transform: skew(30deg,20deg);翻转

9.过度动画和交互； 常用

transition过度和animation动画

10.word-wrap(对长的不可分割单词换行)word-wrap：break-word

11.媒体查询：定义两套css，当浏览器的尺寸变化时会采用不同的属性

CSS 创建一个三角形

把上、左、右三条边隐藏掉(颜色设为 transparent)

#demo {

width: 0;

height: 0;

border-width: 20px;

border-style: solid;

border-color: transparent transparent red transparent;

}

CSS 初始化样式是为什么？

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

CSS 优化 提高性能的方法有哪些？

答案一：

避免过度约束

避免后代选择符

避免链式选择符

使用紧凑的语法

避免不必要的命名空间

避免不必要的重复

最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么

避免！important，可以选择其他选择器

尽可能的精简规则，你可以合并不同类里的重复规则

答案二：

加载性能：

① CSS 压缩：将写好的CSS 进行打包压缩，可以减少很多的体积。

② CSS单一样式：当需要下边距和左边距的时候，很多时候选择：margin: top 0 bottom 0;

但margin-top: top;margin-bottom: bottom;执行的效率更高。

选择器性能：

① 关键选择器。选择器的最后面的部分为关键选择器(即用来匹配目标元素的部分)

CSS 选择器是怎样被浏览器解析的？

CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点(叶子节点)，而从左向右的匹配规则的性能都浪费在了失败的查找上面。

而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时(WebKit 中的「Attachment」过程)，浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果(Style Rules)来确定生成怎样的 Render Tree。

CSS Sprites

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

CSS Hack是什么?ie6,7,8的hack分别是什么？

针对不同的浏览器写不同的CSS Code的过程，就是CSS Hack。实例如下：

#test{

width: 300px;

height: 300px;

background-color: blue;

background-color: red; /* all ie */

background-color: yellow>background-color: yellow\0; /* ie8 */<; /* ie8 */

+background-color: pink; /* ie7 */

_background-color: orange; /* ie6 */

:root #test{

background: purple; /* ie9 */

}

@media all and {min-width: 0px} #test{background-color: black>@media all and {min-width: 0px} #test{background-color: black\0;} /* opera */<;} /* opera */

@media screen and {-webkit-min-device-pixel-ratio: 0 } {#test {background-color: gray}} /* chrome and safari */

}

@media可以针对不同的媒体类型定义不同的样式。特别是如果你需要设计响应式的页面，@media是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器宽度和高度重新渲染页面。

CSS 引入方式？

外部样式表。引入一个外部CSS文件；

内部样式表。将CSS代码放在<head>标签内部；

内联样式，将CSS样式直接定义在HTML元素内部；

移动端的布局用过媒体查询吗？

通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示。

<head>里边<link rel=”stylesheet” type=”text/css” href=”xxx.css” media=”only screen and (max-device-width:480px)”>

CSS : @media only screen and (max-device-width:480px) {/css样式/}

在网页中的应该使用奇数还是偶数的字体？为什么呢？

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体(中易宋体)从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。(即每个字占的空间大了 1 px，但点阵没变)，于是略显稀疏。

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

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

全屏滚动的原理是什么？用到了CSS的哪些属性？

原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现

overflow：hidden；transition：all 1000ms ease；

什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？

响应式网站设计(Responsive Web design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。

基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。

页面头部必须有meta声明的viewport。

视差滚动效果？

视差滚动(Parallax Scrolling)通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。

CSS3实现

优点：开发时间短、性能和开发效率比较好，缺点是不能兼容到低版本的浏览器

jQuery实现

通过控制不同层滚动速度，计算每一层的时间，控制滚动效果。

优点：能兼容到各个版本的，效果可控性好

缺点：开发起来对制作者要求高

插件实现方式

例如：parallax-scrolling，兼容性十分好

line-height的理解？

行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。

单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。

多行文本垂直居中：需要设置display属性为inline-block。

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

-webkit-font-smoothing在window系统下没有起作用，但是在IOS设备上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。

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

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

li与li之间不可见空白间隔引起原因？解决办法？

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

解决方法：

可以将<li>代码全部写在一排

浮动li中float：left

在ul中用font-size：0(谷歌不支持)；可以使用letter-space：-3px

width: auto 和 width: 100% 的区别

width: 100% 会使元素box的宽度等于父元素的contentbox的宽度

width: auto 会时元素撑满整个父元素，margin, border, padding, content 区域会自动分配水平空间

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

外层div使用position：relative；高度要求自适应的div使用position: absolute; top: 100px; bottom: 0; left: 0

png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

png是便携式网络图片(Portable Network Graphics)是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。 大多数地方都可以用。

jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。

gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.

webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。

style标签写在body后与body前有什么区别？

页面加载自上而下 当然是先加载样式。

写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表(外联或写在style标签)会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象(即样式失效导致的页面闪烁问题)

使用 base64 编码的优缺点

base64编码是一种图片处理格式，通过特定的算法将图片编码成一长串字符串，

在页面上显示时可用该字符串来代替图片的url属性

使用base64的优点：

① 减少一个图片的 HTTP 请求

使用base64的缺点：

① 根据base64的编码原理，编码后的大小会比源文件大小大1/3，如果把大图片编码到html/css中，

不仅会造成文件体积增加，影响文件的加载速度，还会增加浏览器对html或css文件解析渲染的时间。

② 使用base64无法直接缓存，要缓存只能缓存包含base64的文件，比如HTML 或CSS，

这相比于直接缓存图片的效果要差很多。

③ ie8以前的浏览器不支持

一般一些网站的小图标可以使用base64图片引入

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

被点击访问过的超链接样式不再具有hover和active了，解决方式是改变CSS属性的排列顺序：L-V-H-A(linked, visited, hover, active)。

rgba()和opacity的透明效果有什么区别？

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

px和em的区别

px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em的值不是固定的，并且em会继承父级元素的字体大小。

浏览器的默认字体高度都是16px。所以未经调整的浏览器都符合：1em=16px。那么12px=0.75em, 10px = 0.625em。

描述一个“reset”的css文件并如何使用它。知道normalize.css吗？你了解他们的不同之处吗?

重置样式非常多，凡是一个前端开发人员肯定会有一个常用的重置css文件并知道如何使用它们。他们是盲目的在做还是知道为什么这么做呢？原因是不同的浏览器对一些元素有不同的的默认样式，如果你不处理，在不同浏览器下回存在必要的风险，或者更有戏剧性发生。

你可能会用Normalize来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供一套合理的默认样式值。既能够让众多浏览器达到一致和合理，但不扰乱其他的东西(如粗体的标题)。

content有什么用？有什么应用？

CSS的content属性专门应用在before/after伪元素上，用来插入生成内容。

最常见的应用是利用伪类清除浮动：

CSS Code复制内容到剪贴板

//一种常见利用伪类清除浮动的代码

.clearfix:after {

content:"."; //这里利用到了content属性

display:block;

height:0;

visibility:hidden;

clear:both; }

.clearfix {

*zoom:1;

}

after伪元素通过content在元素的后面生成一个点的块级元素，再利用clear: both清除浮动。