104道 CSS 面试题，助你查漏补缺

时间 2020-03-19

标签 css 面试补缺栏目 CSS 繁體版

原文原文链接

CSS 面试知识点总结

最近在整理 CSS 的时候发现遇到了不少面试中常见的面试题，本部分主要原做者在 Github 等各大论坛收录的 CSS 相关知识和一些相关面试题时所作的笔记，分享这份总结给你们，对你们对 CSS 的能够来一次全方位的检漏和排查，感谢原做者 CavsZhouyou 的付出，原文连接放在文章最下方，若是出现错误，但愿你们共同指出！css

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

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 个伪元素的做用。

4.伪类与伪元素的区别

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

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

伪元素用于建立一些不在文档树中的元素，并为其添加样式。它们容许咱们为元素的某些部分设置样式。好比说，咱们能够经过::be
fore来在一个元素前增长一些文本，并为这些文本添加样式。虽然用户能够看到这些文本，可是这些文本实际上不在文档树中。

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

详细资料能够参考：
《总结伪类与伪元素》github

5.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和IE七、IE6分离开来，这样IE8已经独立识别。
.bb{
background-color:#f1ee18;/*全部识别*/
.background-color:#00deff\9;/*IE六、七、8识别*/
+background-color:#a200ff;/*IE六、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声明的好习惯。

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和1四、1五、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.几种常见的 CSS 布局

详细的资料能够参考：
《几种常见的 CSS 布局》

66.画一条 0.5px 的线

采用metaviewport的方式

采用border-image的方式

采用transform:scale()的方式

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

67.transition 和 animation 的区别

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

animation做用于元素自己而不是样式属性，能够使用关键帧的概念，应该说能够实现更自由的动画效果。

详细资料能够参考：
《CSSanimation 与 CSStransition 有何区别？》
《CSS3Transition 和 Animation 区别及比较》
《CSS 动画简介》
《CSS 动画：animation、transition、transform、translate》

68.什么是首选最小宽度？

“首选最小宽度”，指的是元素最适合的最小宽度。

东亚文字（如中文）最小宽度为每一个汉字的宽度。

西方文字最小宽度由特定的连续的英文字符单元决定。并非全部的英文字符都会组成连续单元，通常会终止于空格（普通空格）、短
横线、问号以及其余非英文字符等。

若是想让英文字符和中文同样，每个字符都用最小宽度单元，能够试试使用CSS中的word-break:break-all。

69.为何 height:100%会无效？

对于普通文档流中的元素，百分比高度值要想起做用，其父级必须有一个能够生效的高度值。

缘由是若是包含块的高度没有显式指定（即高度由内容决定），而且该元素不是绝对定位，则计算值为auto，由于解释成了auto，
因此没法参与计算。

使用绝对定位的元素会有计算值，即便祖先元素的height计算为auto也是如此。

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

（1）max-width会覆盖width，即便width是行类样式或者设置了!important。

（2）min-width会覆盖max-width，此规则发生在min-width和max-width冲突的时候。

71.内联盒模型基本概念

（1）内容区域（contentarea）。内容区域指一种围绕文字看不见的盒子，其大小仅受字符自己特性控制，本质上是一个字符盒子
（characterbox）；可是有些元素，如图片这样的替换元素，其内容显然不是文字，不存在字符盒子之类的，所以，对于这些
元素，内容区域能够当作元素自身。

（2）内联盒子（inlinebox）。“内联盒子”不会让内容成块显示，而是排成一行，这里的“内联盒子”实际指的就是元素的“外在盒
子”，用来决定元素是内联仍是块级。该盒子又能够细分为“内联盒子”和“匿名内联盒子”两类。

（3）行框盒子（linebox），每一行就是一个“行框盒子”（实线框标注），每一个“行框盒子”又是由一个一个“内联盒子”组成的。

（4）包含块（containingbox），由一行一行的“行框盒子”组成。

72.什么是幽灵空白节点？

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

73.什么是替换元素？

经过修改某个属性值呈现的内容就能够被替换的元素就称为“替换元素”。所以，<img>、<object>、<video>、<iframe>或者表
单元素<textarea>和<input>和<select>都是典型的替换元素。

替换元素除了内容可替换这一特性之外，还有如下一些特性。

（1）内容的外观不受页面上的CSS的影响。用专业的话讲就是在样式表如今CSS做用域以外。如何更改替换元素自己的外观须要
相似appearance属性，或者浏览器自身暴露的一些样式接口，

（2）有本身的尺寸。在Web中，不少替换元素在没有明确尺寸设定的状况下，其默认的尺寸（不包括边框）是300像素×150像
素，如<video>、<iframe>或者<canvas>等，也有少部分替换元素为0像素，如<img>图片，而表单元素的替换元素
的尺寸则和浏览器有关，没有明显的规律。

（3）在不少CSS属性上有本身的一套表现规则。比较具备表明性的就是vertical-align属性，对于替换元素和非替换元素，ve
rtical-align属性值的解释是不同的。比方说vertical-align的默认值的baseline，很简单的属性值，基线之意，
被定义为字符x的下边缘，而替换元素的基线却被硬生生定义成了元素的下边缘。

（4）全部的替换元素都是内联水平元素，也就是替换元素和替换元素、替换元素和文字都是能够在一行显示的。可是，替换元素默认
的display值倒是不同的，有的是inline，有的是inline-block。

74.替换元素的计算规则？

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

（1）固有尺寸指的是替换内容本来的尺寸。例如，图片、视频做为一个独立文件存在的时候，都是有着本身的宽度和高度的。

（2）HTML尺寸只能经过HTML原生属性改变，这些HTML原生属性包括<img>的width和height属性、<input>的s
ize属性、<textarea>的cols和rows属性等。

（3）CSS尺寸特指能够经过CSS的width和height或者max-width/min-width和max-height/min-height设置的
尺寸，对应盒尺寸中的contentbox。

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

（1）若是没有CSS尺寸和HTML尺寸，则使用固有尺寸做为最终的宽高。

（2）若是没有CSS尺寸，则使用HTML尺寸做为最终的宽高。

（3）若是有CSS尺寸，则最终尺寸由CSS属性决定。

（4）若是“固有尺寸”含有固有的宽高比例，同时仅设置了宽度或仅设置了高度，则元素依然按照固有的宽高比例显示。

（5）若是上面的条件都不符合，则最终宽度表现为300像素，高度为150像素。

（6）内联替换元素和块级替换元素使用上面同一套尺寸计算规则。

75.content 与替换元素的关系？

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

（1）咱们使用content生成的文本是没法选中、没法复制的，好像设置了userselect:none声明通常，可是普通元素的文本
却能够被轻松选中。同时，content生成的文本没法被屏幕阅读设备读取，也没法被搜索引擎抓取，所以，千万不要自觉得是
地把重要的文本信息使用content属性生成，由于这对可访问性和SEO都很不友好。

（2）content生成的内容不能左右:empty伪类。

（3）content动态生成值没法获取。

76.margin:auto 的填充规则？

margin的'auto'可不是摆设，是具备强烈的计算意味的关键字，用来计算元素对应方向应该得到的剩余间距大小。可是触发mar
gin:auto计算有一个前提条件，就是width或height为auto时，元素是具备对应方向的自动填充特性的。

（1）若是一侧定值，一侧auto，则auto为剩余空间大小。
（2）若是两侧均是auto，则平分剩余空间。

77.margin 无效的情形

（1）display计算值inline的非替换元素的垂直margin是无效的。对于内联替换元素，垂直margin有效，而且没有ma
rgin合并的问题。

（2）表格中的<tr>和<td>元素或者设置display计算值是table-cell或table-row的元素的margin都是无效的。

（3）绝对定位元素非定位方位的margin值“无效”。

（4）定高容器的子元素的margin-bottom或者宽度定死的子元素的margin-right的定位“失效”。

78.border 的特殊性？

（1）border-width却不支持百分比。

（2）border-style的默认值是none，有一部分人可能会误觉得是solid。这也是单纯设置border-width或border-col
or没有边框显示的缘由。

（3）border-style:double的表现规则：双线宽度永远相等，中间间隔±1。

（4）border-color默认颜色就是color色值。

（5）默认background背景图片是相对于paddingbox定位的。

79.什么是基线和 x-height？

字母x的下边缘（线）就是咱们的基线。

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

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

80.line-height 的特殊性？

（1）对于非替换元素的纯内联元素，其可视高度彻底由line-height决定。对于文本这样的纯内联元素，line-height就是高
度计算的基石，用专业说法就是指定了用来计算行框盒子高度的基础高度。

（2）内联元素的高度由固定高度和不固定高度组成，这个不固定的部分就是这里的“行距”。换句话说，line-height之因此起做
用，就是经过改变“行距”来实现的。在CSS中，“行距”分散在当前文字的上方和下方，也就是即便是第一行文字，其上方也是
有“行距”的，只不过这个“行距”的高度仅仅是完整“行距”高度的一半，所以，也被称为“半行距”。

（3）行距=line-height-font-size。

（4）border以及line-height等传统CSS属性并无小数像素的概念。若是标注的是文字上边距，则向下取整；若是是文字下
边距，则向上取整。

（5）对于纯文本元素，line-height直接决定了最终的高度。可是，若是同时有替换元素，则line-height只能决定最小高度。

（6）对于块级元素，line-height对其自己是没有任何做用的，咱们平时改变line-height，块级元素的高度跟着变化其实是
经过改变块级元素里面内联级别元素占据的高度实现的。

（7）line-height的默认值是normal，还支持数值、百分比值以及长度值。为数值类型时，其最终的计算值是和当前font-si
ze相乘后的值。为百分比值时，其最终的计算值是和当前font-size相乘后的值。为长度值时原意不变。

（8）若是使用数值做为line-height的属性值，那么全部的子元素继承的都是这个值；可是，若是使用百分比值或者长度值做为
属性值，那么全部的子元素继承的是最终的计算值。

（9）不管内联元素line-height如何设置，最终父级元素的高度都是由数值大的那个line-height决定的。

（10）只要有“内联盒子”在，就必定会有“行框盒子”，就是每一行内联元素外面包裹的一层看不见的盒子。而后，重点来了，在每一个
“行框盒子”前面有一个宽度为0的具备该元素的字体和行高属性的看不见的“幽灵空白节点”。

81.vertical-align 的特殊性？

（1）vertical-align的默认值是baseline，即基线对齐，而基线的定义是字母x的下边缘。所以，内联元素默认都是沿着字
母x的下边缘对齐的。对于图片等替换元素，每每使用元素自己的下边缘做为基线。：一个inline-block元素，若是里面
没有内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘；不然其基线就是元素里面最后一行
内联元素的基线。

（2）vertical-align:top就是垂直上边缘对齐，若是是内联元素，则和这一行位置最高的内联元素的顶部对齐；若是display
计算值是table-cell的元素，咱们不妨脑补成<td>元素，则和<tr>元素上边缘对齐。

（3）vertical-align:middle是中间对齐，对于内联元素，元素的垂直中心点和行框盒子基线往上1/2x-height处对齐。对
于table-cell元素，单元格填充盒子相对于外面的表格行居中对齐。

（4）vertical-align支持数值属性，根据数值的不一样，相对于基线往上或往下偏移，若是是负值，往下偏移，若是是正值，往上
偏移。

（5）vertical-align属性的百分比值则是相对于line-height的计算值计算的。

（6）vertical-align起做用是有前提条件的，这个前提条件就是：只能应用于内联元素以及display值为table-cell的元
素。

（7）table-cell元素设置vertical-align垂直对齐的是子元素，可是其做用的并非子元素，而是table-cell元素自身。

82.overflow 的特殊性？

（1）一个设置了overflow:hidden声明的元素，假设同时存在border属性和padding属性，则当子元素内容超出容器宽度
高度限制的时候，剪裁的边界是borderbox的内边缘，而非paddingbox的内边缘。

（2）HTML中有两个标签是默承认以产生滚动条的，一个是根元素<html>，另外一个是文本域<textarea>。

（3）滚动条会占用容器的可用宽度或高度。

（4）元素设置了overflow:hidden声明，里面内容高度溢出的时候，滚动依然存在，仅仅滚动条不存在！

83.无依赖绝对定位是什么？

没有设置left/top/right/bottom属性值的绝对定位称为“无依赖绝对定位”。

无依赖绝对定位其定位的位置和没有设置position:absolute时候的位置相关。

84.absolute 与 overflow 的关系？

（1）若是overflow不是定位元素，同时绝对定位元素和overflow容器之间也没有定位元素，则overflow没法对absolute
元素进行剪裁。

（2）若是overflow的属性值不是hidden而是auto或者scroll，即便绝对定位元素高宽比overflow元素高宽还要大，也
都不会出现滚动条。

（3）overflow元素自身transform的时候，Chrome和Opera浏览器下的overflow剪裁是无效的。

85.clip 裁剪是什么？

所谓“可访问性隐藏”，指的是虽然内容肉眼看不见，可是其余辅助设备却可以进行识别和访问的隐藏。

clip剪裁被我称为“最佳可访问性隐藏”的另一个缘由就是，它具备更强的广泛适应性，任何元素、任何场景均可以无障碍使用。

86.relative 的特殊性？

（1）相对定位元素的left/top/right/bottom的百分比值是相对于包含块计算的，而不是自身。注意，虽然定位位移是相对自身，可是百分比值的计算值不是。

（2）top和bottom这两个垂直方向的百分比值计算跟height的百分比值是同样的，都是相对高度计算的。同时，若是包含块的高度是auto，那么计算值是0，偏移无效，也就是说，若是父元素没有设定高度或者不是“格式化高度”，那么relative相似top:20%的代码等同于top:0。

（3）当相对定位元素同时应用对立方向定位值的时候，也就是top/bottom和left/right同时使用的时候，只有一个方向的定位属性会起做用。而谁起做用则是与文档流的顺序有关的，默认的文档流是自上而下、从左往右，所以top/bottom同时使用的时候，bottom失效；left/right同时使用的时候，right失效。

87.什么是层叠上下文？

层叠上下文，英文称做stackingcontext，是HTML中的一个三维的概念。若是一个元素含有层叠上下文，咱们能够理解为这个元
素在z轴上就“高人一等”。

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

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


层叠上下文的建立：

（1）页面根元素天生具备层叠上下文，称为根层叠上下文。根层叠上下文指的是页面根元素，能够当作是<html>元素。所以，页面中全部的元素必定处于至少一个“层叠结界”中。

（2）对于position值为relative/absolute以及Firefox/IE浏览器（不包括Chrome浏览器）下含有position:fixed声明的定位元素，当其z-index值不是auto的时候，会建立层叠上下文。Chrome等WebKit内核浏览器下，position:fixed元素自然层叠上下文元素，无须z-index为数值。根据个人测试，目前IE和Firefox还是老套路。

（3）其余一些CSS3属性，好比元素的opacity值不是1。

88.什么是层叠水平？

层叠水平，英文称做stackinglevel，决定了同一个层叠上下文中元素在z轴上的显示顺序。

显而易见，全部的元素都有层叠水平，包括层叠上下文元素，也包括普通元素。然而，对普通元素的层叠水平探讨只局限在当前层叠上
下文元素中。

89.元素的层叠顺序？

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

90.层叠准则？

（1）谁大谁上：当具备明显的层叠水平标识的时候，如生效的z-index属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。

（2）后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

91.font-weight 的特殊性？

若是使用数值做为font-weight属性值，必须是100～900的整百数。由于这里的数值仅仅是外表长得像数值，其实是一个具备特定含义的关键字，而且这里的数值关键字和字母关键字之间是有对应关系的。

92.text-indent 的特殊性？

（1）text-indent仅对第一行内联盒子内容有效。

（2）非替换元素之外的display计算值为inline的内联元素设置text-indent值无效，若是计算值inline-block/inli
ne-table则会生效。

（3）<input>标签按钮text-indent值无效。

（4）<button>标签按钮text-indent值有效。

（5）text-indent的百分比值是相对于当前元素的“包含块”计算的，而不是当前元素。

93.letter-spacing 与字符间距？

letter-spacing能够用来控制字符之间的间距，这里说的“字符”包括英文字母、汉字以及空格等。

letter-spacing具备如下一些特性。

（1）继承性。
（2）默认值是normal而不是0。虽说正常状况下，normal的计算值就是0，但二者仍是有差异的，在有些场景下，letter-spacing会调整normal的计算值以实现更好的版面布局。
（3）支持负值，且值足够大的时候，会让字符造成重叠，甚至反向排列。
（4）和text-indent属性同样，不管值多大或多小，第一行必定会保留至少一个字符。
（5）支持小数值，即便0.1px也是支持的。
（6）暂不支持百分比值。

94.word-spacing 与单词间距？

letter-spacing做用于全部字符，但word-spacing仅做用于空格字符。换句话说，word-spacing的做用就是增长空格的间隙
宽度。

95.white-space 与换行和空格的控制？

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

其属性值包括下面这些。
•normal：合并空白字符和换行符。
•pre：空白字符不合并，而且内容只在有换行符的地方换行。
•nowrap：该值和normal同样会合并空白字符，但不容许文本环绕。
•pre-wrap：空白字符不合并，而且内容只在有换行符的地方换行，同时容许文本环绕。
•pre-line：合并空白字符，但只在有换行符的地方换行，容许文本环绕。

96.隐藏元素的 background-image 到底加不加载？

相关知识点：

根据测试，一个元素若是display计算值为none，在IE浏览器下（IE8～IE11，更高版本不肯定）依然会发送图片请求，Fire
fox浏览器不会，至于Chrome和Safari浏览器则彷佛更加智能一点：若是隐藏元素同时又设置了background-image，则图片
依然会去加载；若是是父元素的display计算值为none，则背景图不会请求，此时浏览器或许放心地认为这个背景图暂时是不会使
用的。

若是不是background-image，而是<img>元素，则设置display:none在全部浏览器下依旧都会请求图片资源。

还须要注意的是若是设置的样式没有对应的元素，则background-image也不会加载。hover状况下的background-image，在触
发时加载。

回答：

-（1）元素的背景图片

-元素自己设置 display:none，会请求图片 -父级元素设置 display:none，不会请求图片 -样式没有元素使用，不会请求
-:hover 样式下，触发时请求

-（2）img 标签图片任何状况下都会请求图片

详细资料能够参考：
《CSS 控制前端图片 HTTP 请求的各类状况示例》

97.如何实现单行／多行文本溢出的省略（...）？

/*单行文本溢出*/
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;
}

详细资料能够参考：
《【CSS/JS】如何实现单行／多行文本溢出的省略》
《CSS 多行文本溢出省略显示》

98.常见的元素隐藏方式？

-（1）使用 display:none;隐藏元素，渲染树不会包含该渲染对象，所以该元素不会在页面中占据位置，也不会响应绑定的监听事件。

-（2）使用 visibility:hidden;隐藏元素。元素在页面中仍占据空间，可是不会响应绑定的监听事件。

-（3）使用 opacity:0;将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，而且可以响应元素绑定的监听事件。

-（4）经过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。

-（5）经过 z-index 负值，来使其余元素遮盖住该元素，以此来实现隐藏。

-（6）经过 clip/clip-path 元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，可是不会响应绑定的监听事件。

-（7）经过 transform:scale(0,0)来将元素缩放为 0，以此来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，可是不会响应绑定的监听事件。

详细资料能够参考：
《CSS 隐藏元素的八种方法》

99.css 实现上下固定中间自适应布局？

利用绝对定位实现body {
  padding: 0;
  margin: 0;
}

.header {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100px;
  background: red;
}

.container {
  position: absolute;
  top: 100px;
  bottom: 100px;
  width: 100%;
  background: green;
}

.footer {
  position: absolute;
  bottom: 0;
  height: 100px;
  width: 100%;
  background: red;
}

利用flex布局实现html,
body {
  height: 100%;
}

body {
  display: flex;
  padding: 0;
  margin: 0;
  flex-direction: column;
}

.header {
  height: 100px;
  background: red;
}

.container {
  flex-grow: 1;
  background: green;
}

.footer {
  height: 100px;
  background: red;
}

详细资料能够参考：
《css 实现上下固定中间自适应布局》

100.css 两栏布局的实现？

101.css 三栏布局的实现？

102.实现一个宽高自适应的正方形

/*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%;
}

《自适应正方形 demo 展现》

103.实现一个三角形

/*三角形的实现原理是利用了元素边框链接处的等分原理。*/
.triangle {
  width: 0;
  height: 0;
  border-width: 100px;
  border-style: solid;
  border-color: tomatotransparenttransparenttransparent;
}

《三角形 demo 展现》

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

/*实现原理参考自适应正方形和水平居中方式*/
.box {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;

  width: 10%;
  height: 0;
  padding-top: 20%;
  background: tomato;
}