CSS 面试知识点总结

最近在整顿 CSS 的时候发现遇到了很多面试中常见的面试题，本局部次要原作者在 Github 等各大论坛收录的 CSS 相干常识和一些相干面试题时所做的笔记，分享这份总结给大家，对大家对 CSS 的能够来一次全方位的检漏和排查，感激原作者 CavsZhouyou 的付出，如果呈现谬误，心愿大家独特指出！喜爱的能够给我点赞激励，附笔记链接：https://github.com/Wscats/articles

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申明的好习惯。

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.几种常见的 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 两栏布局的实现？

相干材料：

/*两栏布局个别指的是页面中一共两栏，右边固定，左边自适应的布局，一共有四种实现的形式。*/
/*以右边宽度固定为200px为例*/

/*（1）利用浮动，将右边元素宽度设置为200px，并且设置向左浮动。将左边元素的margin-left设置为200px，宽度设置为auto（默认为auto，撑满整个父元素）。*/
.outer {
  height: 100px;
}

.left {
  float: left;

  height: 100px;
  width: 200px;

  background: tomato;
}

.right {
  margin-left: 200px;

  width: auto;
  height: 100px;

  background: gold;
}

/*（2）第二种是利用flex布局，将右边元素的放大和放大比例设置为0，根底大小设置为200px。将左边的元素的放大比例设置为1，放大比例设置为1，根底大小设置为auto。*/
.outer {
  display: flex;

  height: 100px;
}

.left {
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: 200px;

  background: tomato;
}

.right {
  flex: auto;
  /*11auto*/

  background: gold;
}

/*（3）第三种是利用相对定位布局的形式，将父级元素设置绝对定位。右边元素设置为absolute定位，并且宽度设置为
200px。将左边元素的margin-left的值设置为200px。*/
.outer {
  position: relative;

  height: 100px;
}

.left {
  position: absolute;

  width: 200px;
  height: 100px;

  background: tomato;
}

.right {
  margin-left: 200px;
  height: 100px;

  background: gold;
}

/*（4）第四种还是利用相对定位的形式，将父级元素设置为绝对定位。右边元素宽度设置为200px，左边元素设置为相对定位，右边定位为200px，其余方向定位为0。*/
.outer {
  position: relative;

  height: 100px;
}

.left {
  width: 200px;
  height: 100px;

  background: tomato;
}

.right {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 200px;

  background: gold;
}

《两栏布局 demo 展现》

答复：

两栏布局个别指的是页面中一共两栏，右边固定，左边自适应的布局，一共有四种实现的形式。

以右边宽度固定为 200px 为例

-（1）利用浮动，将右边元素宽度设置为 200px，并且设置向左浮动。将左边元素的 margin-left 设置为 200px，宽度设置为 auto（默认为 auto，撑满整个父元素）。

-（2）第二种是利用 flex 布局，将右边元素的放大和放大比例设置为 0，根底大小设置为 200px。将左边的元素的放大比例设置为 1，放大比例设置为 1，根底大小设置为 auto。

-（3）第三种是利用相对定位布局的形式，将父级元素设置绝对定位。右边元素设置为 absolute 定位，并且宽度设置为 200px。将左边元素的 margin-left 的值设置为 200px。

-（4）第四种还是利用相对定位的形式，将父级元素设置为绝对定位。右边元素宽度设置为 200px，左边元素设置为相对定位，右边定位为 200px，其余方向定位为 0。

101.css 三栏布局的实现？

相干材料：

/*三栏布局个别指的是页面中一共有三栏，左右两栏宽度固定，两头自适应的布局，一共有五种实现形式。

这里以右边宽度固定为100px，左边宽度固定为200px为例。*/

/*（1）利用相对定位的形式，左右两栏设置为相对定位，两头设置对应方向大小的margin的值。*/
.outer {
  position: relative;
  height: 100px;
}

.left {
  position: absolute;

  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  position: absolute;
  top: 0;
  right: 0;

  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 100px;
  background: lightgreen;
}

/*（2）利用flex布局的形式，左右两栏的放大和放大比例都设置为0，根底大小设置为固定的大小，两头一栏设置为auto*/
.outer {
  display: flex;
  height: 100px;
}

.left {
  flex: 00100px;
  background: tomato;
}

.right {
  flex: 00200px;
  background: gold;
}

.center {
  flex: auto;
  background: lightgreen;
}

/*（3）利用浮动的形式，左右两栏设置固定大小，并设置对应方向的浮动。两头一栏设置左右两个方向的margin值，留神这种形式，两头一栏必须放到最初。*/
.outer {
  height: 100px;
}

.left {
  float: left;
  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  float: right;
  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  height: 100px;
  margin-left: 100px;
  margin-right: 200px;
  background: lightgreen;
}

/*（4）双飞翼布局，利用浮动和负边距来实现。父级元素设置左右的pedding，三列均设置向左浮动，两头一列放在最后面，宽度设置为父级元素的宽度，因而前面两列都被挤到了下一行，通过设置margin负值将其挪动到上一行，再利用绝对定位，定位到两边。*/
.outer {
  height: 100px;
  padding-left: 100px;
  padding-right: 200px;
}

.left {
  position: relative;
  left: -100px;

  float: left;
  margin-left: -100%;

  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  position: relative;
  left: 200px;

  float: right;
  margin-left: -200px;

  width: 200px;
  height: 100px;
  background: gold;
}

.center {
  float: left;

  width: 100%;
  height: 100px;
  background: lightgreen;
}

/*（5）双飞翼布局，双飞翼布局绝对于圣杯布局来说，左右地位的保留是通过两头列的margin值来实现的，而不是通过父元
素的pedding来实现的。实质上来说，也是通过浮动和外边距负值来实现的。*/

.outer {
  height: 100px;
}

.left {
  float: left;
  margin-left: -100%;

  width: 100px;
  height: 100px;
  background: tomato;
}

.right {
  float: left;
  margin-left: -200px;

  width: 200px;
  height: 100px;
  background: gold;
}

.wrapper {
  float: left;

  width: 100%;
  height: 100px;
  background: lightgreen;
}

.center {
  margin-left: 100px;
  margin-right: 200px;
  height: 100px;
}

《三栏布局 demo 展现》

答复：

三栏布局个别指的是页面中一共有三栏，左右两栏宽度固定，两头自适应的布局，一共有五种实现形式。

这里以右边宽度固定为100px，左边宽度固定为200px为例。

（1）利用相对定位的形式，左右两栏设置为相对定位，两头设置对应方向大小的margin的值。

（2）利用flex布局的形式，左右两栏的放大和放大比例都设置为0，根底大小设置为固定的大小，两头一栏设置为auto。

（3）利用浮动的形式，左右两栏设置固定大小，并设置对应方向的浮动。两头一栏设置左右两个方向的margin值，留神这种形式，两头一栏必须放到最初。

（4）圣杯布局，利用浮动和负边距来实现。父级元素设置左右的pedding，三列均设置向左浮动，两头一列放在最后面，宽度设置为父级元素的宽度，因而前面两列都被挤到了下一行，通过设置margin负值将其挪动到上一行，再利用绝对定位，定位到两边。双飞翼布局两头列的宽度不能小于两边任意列的宽度，而双飞翼布局则不存在这个问题。

（5）双飞翼布局，双飞翼布局绝对于圣杯布局来说，左右地位的保留是通过两头列的margin值来实现的，而不是通过父元素的pedding来实现的。实质上来说，也是通过浮动和外边距负值来实现的。

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;
}