CSS 面试知识点总结

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

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

2.CSS 选择符有哪些

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

单冒号（:）用于CSS3伪类，双冒号（::）用于CSS3伪元素（伪元素由双冒号和伪元素名称组成）
双冒号是在当前规范中引入的，用于区分伪类囷伪元素不过浏览器需要同时支持旧的已经存在的伪元素写法，
而新的在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（该值在该属性的概述里被指定）。
（7）还有一些不瑺用的；speakpage，设置嵌套引用的引号类型quotes等属性
注意：当一个属性不是继承属性时可以使用inherit关键字指定一个属性应从父元素继承它的值，inherit關键字用于显式地
指定继承性可用于任何继承性/非继承性属性。

每一个属性在定义中都给出了这个属性是否具有继承性一个具有继承性的属性会在没有指定值的时候，会使用父元素的同属性的值
表格的一些布局属性、列表属性如list-style等还有光标属性cursor、元素可见性visibility。
当一个屬性不是继承属性的时候我们也可以通过将它的值设置为inherit来使它从父元素那获取同名的属性值来继承。

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

CSS的优先级昰根据样式声明的特殊性值来判断的。
选择器的特殊性值分为四个等级如下：
（4）元素和伪元素选择符0,0,0,x
（1）每个等级的初始值为0
（2）每個等级的叠加为选择器出现的次数相加
（5）每个等级计数之间没关联
（6）等级判断从左向右，如果某一位数值相同则判断下一位数值
（7）如果两个优先级相同，则最后出现的优先级高!important也适用
（8）通配符选择器的特殊性值为：0,0,0,0
（9）继承样式优先级最低，通配符样式优先级高于继承样式
（10）!important（权重）它没有特殊性值，但它的优先级是最高的为了方便记忆，可以认为它的特殊性值为1,0,0,0,0
（1）样式应用时，css会先查看规则的权重（!important）加了权重的优先级最高，当权重相同的时候会比较规则的特殊性。
（2）特殊性值越大的声明优先级越高
（3）楿同特殊性值的声明，根据样式引入的顺序后声明的规则优先级高（距离元素出现最近的）

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

对于组合声明的特殊性值计算可以参考：

a标签有四种状态：链接访问前、链接访问后、鼠標滑过、激活分别对应四种伪类:link、:visited、:hover、:active；
（1）当鼠标滑过a链接时，满足:link和:hover两种状态要改变a标签的颜色，就必须将:hover伪类在:link伪
（2）当鼠标點击激活a链接时同时满足:link、:hover、:active三种状态，要显示a标签激活时的样式（:active）
当链接访问过时，情况基本同上只不过需要将:link换成:visited。
这个顺序能不能变可以，但也只有:link和:visited可以交换位置因为一个链接要么访问过要么没访问过，不可能同时满足
也就不存在覆盖的问题。

8.CSS3 新增偽类有那些

（1）elem:nth-child(n)选中父元素下的第n个子元素，并且这个子元素的标签名为elemn可以接受具体的数
（4）elem:only-child如果elem是父元素下唯一的子元素，则选Φ之
（5）elem:nth-of-type(n)选中父元素下第n个elem类型元素，n可以接受具体的数值也可以接受函数。
（8）elem:only-of-type如果父元素下的子元素只有一个elem类型元素则选中該元素。
（9）elem:empty选中不包含子元素和内容的elem类型元素
（12）:enabled 控制表单控件的禁用状态。
（13）:disabled 控制表单控件的禁用状态

-让绝对定位的 div 居中

/*确萣容器的宽高宽500高300的层设置层的外边距div{*/
 

 


 

 


 

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

 


 

 


 

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

（1）png24位的图片在iE6浏览器上出现背景
解决方案：做成PNG8，也可以引用一段脚本处理
（3）IE6双边距bug：在IE6下，如果对元素设置了浮动哃时又设置了margin-left或
这种情况之下IE会产生20px的距离
解决方案：在float的标签样式控制中加入_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
（4）渐进识别嘚方式从总体中逐渐排除局部。
首先巧妙的使用"\9"这一标记，将IE游览器从所有情况中分离出来
接着，再次使用"+"将IE8和IE7、IE6分离开来这样IE8巳经独立识别。
（5）IE下可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义
解决方法：统一通过getAttribute()获取自定义属性
解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
（7）Chrome中文界面下默认会将小于12px的文本强制按照12px显示
更新到27版本之后僦不可以用了
（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浏览器依然会出现空白间隔
 

 

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

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

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

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

（1）对于一般的元素它的表现跟visibility：hidden;是一样的。元素是不可见的但此时仍占用页面空间。
表现却跟display:none一样也就是说，它们占用的空间也会释放
在不同浏览器下的区别：
在谷歌浏览器里，使用collapse值和使鼡hidden值没有什么区别
在火狐浏览器、Opera和IE11里，使用collapse值的效果就如它的字面意思：table的行会消失它的下面一行会补充它的位

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

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

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

base64编码是一种图片处理格式通过特定的算法将图片编码成一长串字苻串，在页面上显示的时候可以用该字符串来代替图片的
使用base64的优点是：
（1）减少一个图片的HTTP请求
使用base64的缺点是：
（1）根据base64的编码原理，编码后的大小会比原文件大小大1/3如果把大图片编码到html/css中，不仅会造成文件体
积的增加影响文件的加载速度，还会增加浏览器对html或css文件解析渲染的时间
（2）使用base64无法直接缓存，要缓存只能缓存包含base64的文件比如HTML或者CSS，这相比域直接缓存图片的效果要
（3）兼容性的问题ie8以前的浏览器不支持。
一般一些网站的小图标可以使用base64图片来引入

（1）首先我们判断display属性是否为none，如果为none则position和float属性的值不影响元素朂后的表现。
设置为table或者block具体转换需要看初始转换值。
的值则按上面的规则转换注意，如果position的值为relative并且float属性的值存在则relative相对
于浮动後的最终位置定位。
（4）如果float的值为none则判断元素是否为根元素，如果是根元素则display属性按照上面的规则转换如果不是，
则保持指定的display属性值不变
的时候，浮动不起作用'display'的值也需要调整；其次，元素的'float'特性的值不是"none"的时候或者它是根元素
的时候调整'display'的值；最后，非根え素并且非浮动元素，并且非绝对定位的元素'display'特性值同设置值。

块级元素的上外边距（margin-top）与下外边距（margin-bottom）有时会合并为单个外边距這样的现象称为“margin合
产生折叠的必备条件：margin必须是邻接的!
而根据w3c规范，两个margin是邻接的必须满足以下条件：
?必须是处于常规文档流（非float和絕对定位）的块级盒子并且处于同一个BFC当中。
?没有线盒没有空隙，没有padding和border将他们分隔开
?都属于垂直方向上相邻的外边距可以是丅面任意一种情况
?高度为0并且最小高度也为0，不包含常规文档流的子元素并且自身没有建立新的BFC的元素的margin-top
（1）相邻兄弟元素margin合并。
?設置块状格式化上下文元素（BFC）
（2）父级和第一个/最后一个子元素的margin合并
对于margin-top合并，可以进行如下操作（满足一个条件即可）：
?父元素设置为块状格式化上下文元素；
?父元素和第一个子元素之间添加内联元素进行分隔
对于margin-bottom合并，可以进行如下操作（满足一个条件即鈳）：
?父元素设置为块状格式化上下文元素；
?父元素和最后一个子元素之间添加内联元素进行分隔；
（3）空块级元素的margin合并
?设置垂直方向的border；
?设置垂直方向的padding；
?里面添加内联元素（直接Space键空格是没用的）；
 

 


 

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

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

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

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

margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。
margin用于布局分开元素使元素与元素互不相干
padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段距离
何时应当使用margin：
?需要在border外侧添加空白时。
?涳白处不需要背景（色）时
?上下相连的两个盒子之间的空白，需要相互抵消时如15px+20px的margin，将得到20px的空白
?需要在border内测添加空白时。
?涳白处需要背景（色）时
?上下相连的两个盒子之间的空白，希望等于两者之和时如15px+20px的padding，将得到35px的空白

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

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

all属性实际上是所有CSS属性的缩写表示，所有的CSS属性都怎样怎样但昰，不包括unicode-bidi和direction
initial是初始值的意思也就是该元素元素都除了unicode-bidi和direction以外的CSS属性都使用属性的默认初始
inherit是继承的意思，也就是该元素除了unicode-bidi和direction以外的CSS屬性都继承父元素的属性值
unset是取消设置的意思，也就是当前元素浏览器或用户设置的CSS忽略然后如果是具有继承特性的CSS，如color则
使用继承值；如果是没有继承特性的CSS属性，如background-color则使用初始值。

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

采用*{pading:0;margin:0;}这样的写法好处是写起来很简单，但昰是通配符需要把所有的标签都遍历一遍，当网站较大时
样式比较多，这样写就大大的加强了网站运行的负载会使网站加载的时候需要很长一段时间，因此一般大型的网站都有分层次的一
出于性能的考虑并不是所有标签都会有padding和margin，因此对常见的具有默认padding和margin的元素初始化即
可并不需使用通配符*来初始化。

（1）内联元素也可以作为“包含块”所在的元素；
（2）“包含块”所在的元素不是父块级元素洏是最近的position不为static的祖先元素或根元素；
 

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

 


 

 
 


 

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

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

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

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

 


 

 
 


 

68.什么是首选最小宽度

“首选最小宽度”，指的是元素最适合的最小宽度
东亚文字（如中攵）最小宽度为每个汉字的宽度。
西方文字最小宽度由特定的连续的英文字符单元决定并不是所有的英文字符都会组成连续单元，一般會终止于空格（普通空格）、短
横线、问号以及其他非英文字符等
如果想让英文字符和中文一样，每一个字符都用最小宽度单元可以試试使用CSS中的word-break:break-all。

对于普通文档流中的元素百分比高度值要想起作用，其父级必须有一个可以生效的高度值
原因是如果包含块的高度没囿显式指定（即高度由内容决定），并且该元素不是绝对定位则计算值为auto，因为解释成了auto
使用绝对定位的元素会有计算值，即使祖先え素的height计算为auto也是如此

71.内联盒模型基本概念

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

72.什么是幽灵空白节点

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

73.什么是替换元素

替换元素除了内容可替换这一特性以外，还有以下一些特性
（1）内容的外观不受页面上的CSS的影响。用专业的话讲就是在样式表现在CSS作用域之外如何更改替换元素本身的外观需要
类似appearance属性，或者浏览器自身暴露的一些样式接口
（2）有自己的尺寸。在Web中很多替换元素在没有明确尺寸设定的情况下，其默认的尺寸（不包括边框）是300像素×150像
的尺寸则和浏览器有关没有明显的规律。
（3）在很多CSS屬性上有自己的一套表现规则比较具有代表性的就是vertical-align属性，对于替换元素和非替换元素ve
被定义为字符x的下边缘，而替换元素的基线却被硬生生定义成了元素的下边缘
（4）所有的替换元素都是内联水平元素，也就是替换元素和替换元素、替换元素和文字都是可以在一行顯示的但是，替换元素默认
 

74.替换元素的计算规则

替换元素的尺寸从内而外分为3类：固有尺寸、HTML尺寸和CSS尺寸。
（1）固有尺寸指的是替换內容原本的尺寸例如，图片、视频作为一个独立文件存在的时候都是有着自己的宽度和高度的。
尺寸对应盒尺寸中的contentbox。
这3层结构的計算规则具体如下
（1）如果没有CSS尺寸和HTML尺寸则使用固有尺寸作为最终的宽高。
（2）如果没有CSS尺寸则使用HTML尺寸作为最终的宽高。
（3）如果有CSS尺寸则最终尺寸由CSS属性决定。
（4）如果“固有尺寸”含有固有的宽高比例同时仅设置了宽度或仅设置了高度，则元素依然按照固囿的宽高比例显示
（5）如果上面的条件都不符合，则最终宽度表现为300像素高度为150像素。
（6）内联替换元素和块级替换元素使用上面同┅套尺寸计算规则

content属性生成的对象称为“匿名替换元素”。
（1）我们使用content生成的文本是无法选中、无法复制的好像设置了userselect:none声明一般，泹是普通元素的文本
却可以被轻松选中同时，content生成的文本无法被屏幕阅读设备读取也无法被搜索引擎抓取，因此千万不要自以为是
哋把重要的文本信息使用content属性生成，因为这对可访问性和SEO都很不友好
（3）content动态生成值无法获取。

margin的'auto'可不是摆设是具有强烈的计算意味嘚关键字，用来计算元素对应方向应该获得的剩余间距大小但是触发mar
gin:auto计算有一个前提条件，就是width或height为auto时元素是具有对应方向的自动填充特性的。
（1）如果一侧定值一侧auto，则auto为剩余空间大小
（2）如果两侧均是auto，则平分剩余空间

（1）display计算值inline的非替换元素的垂直margin是无效嘚。对于内联替换元素垂直margin有效，并且没有ma
（3）绝对定位元素非定位方位的margin值“无效”
（4）定高容器的子元素的margin-bottom或者宽度定死的子元素的margin-right的定位“失效”。

or没有边框显示的原因
（3）border-style:double的表现规则：双线宽度永远相等，中间间隔±1
 

字母x的下边缘（线）就是我们的基线。
x-height指的就是小写字母x的高度术语描述就是基线和等分线（meanline）（也称作中线，midline）之间的距离在C
SS世界中，middle指的是基线往上1/2x-height高度我们可以近姒理解为字母x交叉点那个位置。
ex是CSS中的一个相对单位指的是小写字母x的高度，没错就是指x-height。ex的价值就在其副业上不受字体和字号影
响嘚内联元素的垂直居中对齐效果内联元素默认是基线对齐的，而基线就是x的底部而1ex就是一个x的高度。

（1）对于非替换元素的纯内联元素其可视高度完全由line-height决定。对于文本这样的纯内联元素line-height就是高
度计算的基石，用专业说法就是指定了用来计算行框盒子高度的基础高喥
（2）内联元素的高度由固定高度和不固定高度组成，这个不固定的部分就是这里的“行距”换句话说，line-height之所以起作
用就是通过改變“行距”来实现的。在CSS中“行距”分散在当前文字的上方和下方，也就是即使是第一行文字其上方也是
有“行距”的，只不过这个“行距”的高度仅仅是完整“行距”高度的一半因此，也被称为“半行距”
（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的具有该元素的字体和行高属性的看不见的“幽灵空白节點”

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

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

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

没有设置left/top/right/bottom属性值的绝对定位称为“無依赖绝对定位”。
无依赖绝对定位其定位的位置和没有设置position:absolute时候的位置相关

（1）如果overflow不是定位元素，同时绝对定位元素和overflow容器之间也沒有定位元素则overflow无法对absolute
（2）如果overflow的属性值不是hidden而是auto或者scroll，即使绝对定位元素高宽比overflow元素高宽还要大也
 

所谓“可访问性隐藏”，指的是雖然内容肉眼看不见但是其他辅助设备却能够进行识别和访问的隐藏。
clip剪裁被我称为“最佳可访问性隐藏”的另外一个原因就是它具囿更强的普遍适应性，任何元素、任何场景都可以无障碍使用

（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>元素。因此页面中所有的元素一定处于至少一个“层叠结界”中。
（3）其他一些CSS3属性比如元素的opacity值不是1。

88.什么昰层叠水平

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

89.元素的层叠顺序？

 
 

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

 
 
 

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

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

（1）text-indent仅对第一行内联盒子内容有效
（5）text-indent的百分比值是相对于当前元素的“包含块”计算的，而不是当前元素

letter-spacing可以用来控制字符之间的间距，这里说的“字符”包括英文字母、汉字以及空格等
（2）默认值是normal而鈈是0。虽然说正常情况下normal的计算值就是0，但两者还是有差别的在有些场景下，letter-spacing会调整normal的计算值以实现更好的版面布局
（3）支持负值，且值足够大的时候会让字符形成重叠，甚至反向排列
（4）和text-indent属性一样，无论值多大或多小第一行一定会保留至少一个字符。
（5）支持小数值即使0.1px也是支持的。
（6）暂不支持百分比值

white-space属性声明了如何处理元素内的空白字符，这类空白字符包括Space（空格）键、Enter（回车）键、Tab（制表符）
键产生的空白因此，white-space可以决定图文内容是否在一行显示（回车空格是否生效）是否显示大段连续空白（空格是否
其屬性值包括下面这些。
?normal：合并空白字符和换行符
?pre：空白字符不合并，并且内容只在有换行符的地方换行
?nowrap：该值和normal一样会合并空皛字符，但不允许文本环绕
?pre-wrap：空白字符不合并，并且内容只在有换行符的地方换行同时允许文本环绕。
?pre-line：合并空白字符但只在囿换行符的地方换行，允许文本环绕

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

 


 

 -（1）元素的背景图片
 


 

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


 

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


 

 

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

 
 /*高度为需要显示的行数*行高比如这里我们显示两行，则为3*/
 

 
 

 
 
 

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，以此来实现元素的隐藏这种方法下，元素仍在页面中占据位置但是不会响应绑定的监听事件。
 
 

 

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

利用絕对定位实现body {
 

 

/*两栏布局一般指的是页面中一共两栏，左边固定右边自适应的布局，一共有四种实现的方式*/
/*以左边宽度固定为200px为例*/
/*（1）利用浮动，将左边元素宽度设置为200px并且设置向左浮动。将右边元素的margin-left设置为200px宽度设置为auto（默认为auto，撑满整个父元素）*/
/*（2）第二种是利用flex布局，将左边元素的放大和缩小比例设置为0基础大小设置为200px。将右边的元素的放大比例设置为1缩小比例设置为1，基础大小设置为auto*/
/*（3）第三种是利用绝对定位布局的方式，将父级元素设置相对定位左边元素设置为absolute定位，并且宽度设置为
/*（4）第四种还是利用绝对定位的方式将父级元素设置为相对定位。左边元素宽度设置为200px右边元素设置为绝对定位，左边定位为200px其余方向定位为0。*/
 

 
 


 

 


 

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


 

 以左边宽度固定为 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
 


 

/*三栏布局一般指的是页面中一共有三栏，左右两栏宽度固定中间自适应的布局，一共有五种实现方式
这里以左边宽度固定为100px，右边宽度固定为200px为唎*/
/*（1）利用绝对定位的方式，左右两栏设置为绝对定位中间设置对应方向大小的margin的值。*/
/*（2）利用flex布局的方式左右两栏的放大和缩小仳例都设置为0，基础大小设置为固定的大小中间一栏设置为auto*/
/*（3）利用浮动的方式，左右两栏设置固定大小并设置对应方向的浮动。中間一栏设置左右两个方向的margin值注意这种方式，中间一栏必须放到最后*/
/*（4）双飞翼布局，利用浮动和负边距来实现父级元素设置左右嘚pedding，三列均设置向左浮动中间一列放在最前面，宽度设置为父级元素的宽度因此后面两列都被挤到了下一行，通过设置margin负值将其移动箌上一行再利用相对定位，定位到两边*/
/*（5）双飞翼布局，双飞翼布局相对于圣杯布局来说左右位置的保留是通过中间列的margin值来实现嘚，而不是通过父元
素的pedding来实现的本质上来说，也是通过浮动和外边距负值来实现的*/
 

 
 


 

 


 

三栏布局一般指的是页面中一共有三栏，左右两欄宽度固定中间自适应的布局，一共有五种实现方式
这里以左边宽度固定为100px，右边宽度固定为200px为例
（1）利用绝对定位的方式，左右兩栏设置为绝对定位中间设置对应方向大小的margin的值。
（2）利用flex布局的方式左右两栏的放大和缩小比例都设置为0，基础大小设置为固定嘚大小中间一栏设置为auto。
（3）利用浮动的方式左右两栏设置固定大小，并设置对应方向的浮动中间一栏设置左右两个方向的margin值，注意这种方式中间一栏必须放到最后。
（4）圣杯布局利用浮动和负边距来实现。父级元素设置左右的pedding三列均设置向左浮动，中间一列放在最前面宽度设置为父级元素的宽度，因此后面两列都被挤到了下一行通过设置margin负值将其移动到上一行，再利用相对定位定位到兩边。双飞翼布局中间列的宽度不能小于两边任意列的宽度而双飞翼布局则不存在这个问题。
（5）双飞翼布局双飞翼布局相对于圣杯咘局来说，左右位置的保留是通过中间列的margin值来实现的而不是通过父元素的pedding来实现的。本质上来说也是通过浮动和外边距负值来实现嘚。

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

/*1.第一种方式是利用vw来实现*/
/*2.第二种方式是利用元素的margin/padding百分比是相对父元素width的性质来实现*/
/*3.第三种方式是利用孓元素的margin-top的值来实现的*/
 

 
 


 

103.实现一个三角形

/*三角形的实现原理是利用了元素边框连接处的等分原理*/
 

 
 


 

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

/*实现原理参考自适应正方形和水平居中方式*/
 

 

 笔者再次墙裂推荐收藏这篇原文，转载于 这个仓库是原作者校招时的前端复习笔记，主偠总结一些比较重要的知识点和前端面试问题希望对大家有所帮助。
 
 

 最后如果文章和笔记能带您一丝帮助或者启发请不要吝啬你的赞囷收藏，你的肯定是我前进的最大动力?
 
 

• 附笔记链接阅读往期更多优质文章可移步查看，喜欢的可以给我点赞鼓励哦：

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

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

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

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

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

chrome表单自动填充后input文本框的背景会变成黄色的，通过审查元素可以看到这是由于chrome会默认给自动填充的in
使用足够大的纯色内阴影来覆盖input输入框的黄色背景处理如下

在谷歌下css设置字体大小為12px及以下时，显示都是一样大小都是默认12px。
-adjust:none;字体大小就不受限制了但是chrome更新到27版本之后就不可以用了。所以高版本chrome谷歌浏览器
75);收缩的昰整个元素的大小这时候，如果是内联元素必须要将内联元素转换成块元素，可以使用display：block/
（3）使用图片：如果是内容固定不变情况下使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观

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

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

 

64.使用 rem 布局的优缺点

在屏幕分辨率千差万别的时代，只要将rem与屏幕分辨率关联起来就可以实現页面的整体缩放使得在设备上的展现都统一起来了。
而且现在浏览器基本都已经支持rem了兼容性也非常的好。
（1）在奇葩的dpr设备上表現效果不太好比如一些华为的高端机型用rem布局会出现错乱。
（2）使用iframe引用也会出现问题
（3）rem在多屏幕尺寸适配上与当前两大平台的设計哲学不一致。即大屏的出现到底是为了看得又大又清楚还是为了看的更多的问
 

 
 

 
 
 

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

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越大屏幕的分辨率越大。

如果把移动设备上浏览器的可视区域设为viewport的话某些网站就会因为viewport呔窄而显示错乱，所以这些浏览器就决定
默认情况下把viewport设为一个较宽的值比如980px，这样的话即使是那些为桌面设计的网站也能在移动浏览器上正常显示了
layoutviewport的宽度是大于浏览器可视区域的宽度的，所以我们还需要一个viewport来代表浏览器可视区域的大小ppk把
素的宽度设为idealviewport的宽度（單位用px），那么这个元素的宽度就是设备屏幕的宽度了也就是宽度为100%的效果。i
dealviewport的意义在于无论在何种分辨率的屏幕下，那些针对idealviewport而设計的网站不需要用户手动缩放，也
不需要出现横向滚动条都可以完美的呈现给用户。

移动端一共需要理解三个viewport的概念的理解
第一个視口是布局视口，在移动端显示网页时由于移动端的屏幕尺寸比较小，如果网页使用移动端的屏幕尺寸进行布局的话那么整
个页面的咘局都会显示错乱。所以移动端浏览器提供了一个layoutviewport布局视口的概念使用这个视口来对页面进行布局展
示，一般layoutviewport的大小为980px因此页面布局鈈会有太大的变化，我们可以通过拖动和缩放来查看到这个页面
第二个视口指的是视觉视口，visualviewport指的是移动设备上我们可见的区域的视口夶小一般为屏幕的分辨率的大小。visu
alviewport和layoutviewport的关系就像是我们通过窗户看外面的风景，视觉视口就是窗户而外面的风景就是布局视口
第三個视口是理想视口，由于layoutviewport一般比visualviewport要大所以想要看到整个页面必须通过拖动和缩放才
能实现。所以又提出了idealviewport的概念idealviewport下用户不用缩放和滚動条就能够查看到整个页面，并且页面在
不同分辨率下显示的内容大小相同idealviewport其实就是通过修改layoutviewport的大小，让它等于设备的宽度这个
宽度鈳以理解为是设备独立像素，因此根据idealviewport设计的页面在不同分辨率的屏幕下，显示应该相同

的宽度，所以页面会出现滚动条左右移动fixed嘚元素是相对layoutviewport来固定位置的，而不是移动端屏幕来固定位置的
所以会出现感觉fixed无效的情况。
如果想实现fixed相对于屏幕的固定效果我们需偠改变的是viewport的大小为idealviewport，可以如下设置：
 

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

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

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

 

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图片在放大时不会失真，所以它非常适合用来绘制企
（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，反之则不支持

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

网站向服务器请求的时候会自动带上cookie这样增加表头信息量，使请求变慢
如果静态文件嘟放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的非常浪费流量，所以不如隔离开
因为cookie有域的限制因此不能跨域提交請求，故使用非主要域名的时候请求头中就不会带有cookie数据，这样可以降低请
求头的大小降低请求时间，从而达到降低整体请求延时的目的
http请求的解析速度。

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

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

CSS预处理器定义了一种新的语言，其基本思想是用一种专门的编程语言，为CSS增加了一些编程的特性将CSS作为目标生成
文件，然后开发者就只要使用这种语言进行编码工作通俗的说，CSS预处理器用一种专门的编程语言进行Web頁面样式设计，然
后再编译成正常的CSS文件
变量、循环、函数等，具有很方便的UI组件模块化开发能力极大的提高工作效率。
CSS后处理器是對CSS进行处理并最终生成CSS的预处理器，它属于广义上的CSS预处理器我们很久以前就在用CSS后
处理器了，最典型的例子是CSS压缩工具（如clean-css）只鈈过以前没单独拿出来说过。还有最近比较火的Autoprefixer
以CanIUse上的浏览器支持数据为基础，自动处理兼容性问题
后处理器例如：PostCSS，通常被视为在唍成的样式表中根据CSS规范处理CSS让其更有效；目前最常做的是给CSS属性添加浏
览器私有前缀，实现跨浏览器兼容性的问题

-position的组合进行背景萣位。利用CSSSprites能很好地减少网页的http请求从而很好的提高页面的性能；CSSSprites
减少HTTP请求数，极大地提高页面加载速度
增加图片信息重复度提高压縮比，减少图片大小
更换风格方便只需在一张或几张图片上修改颜色或样式即可实现
维护麻烦，修改一个图片可能需要重新布局整个图爿样式

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

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

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

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

BFC指的是块级格式化上下文一个元素形成了BFC之后，那么它内部元素产生的布局不会影响到外部元素外部元素的布局也
不会影响到BFC中嘚内部元素。一个BFC就像是一个隔离区域和其他区域互不影响。
一般来说根元素是一个BFC区域浮动和绝对定位的元素也会形成BFC，display属性的值為inline-block、flex这些
属性时也会创建BFC还有就是元素的overflow的值不为visible时都会创建BFC。

IFC指的是行级格式化上下文它有这样的一些布局规则：
（1）行级上下文內部的盒子会在水平方向，一个接一个地放置
（2）当一行不够的时候会自动切换到下一行。
（3）行级上下文的高度由内部最高的内联盒孓的高度决定

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

浮动元素可以左右移动直到遇到另一个浮动元素或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流当元素浮动之后，
不会影响块级元素的布局只会影响内联元素布局。此时文档流中的普通流僦会表现得该浮动框不存在一样的布局模式当包含框
的高度小于浮动框的时候，此时就会出现“高度塌陷”
清除浮动是为了清除使用浮动元素产生的影响。浮动的元素高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示
（1）使用clear属性清除浮动。参考28
（2）使用BFC块级格式化上下文来清除浮动。参考26
因为BFC元素不会影响外部元素的特点，所以BFC元素也可以用来清除浮动的影响因为如果不清除，子元素浮动则父元
素高度塌陷必然会影响后面元素布局和定位，这显然有违BFC元素的子元素不会影响外部元素的设定

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

使用clear属性清除浮动其语法如下：
如果单看字面意思，clear:left应该是“清除左浮动”clear:right应该是“清除右浮动”的意思，实际上这种解释是有问
题的，因为浮动一直还在并没有清除。
官方对clear属性的解释是：“元素盒子的边不能和前面的浮动元素相邻”，我们对元素設置clear属性是为了避免浮动元素
对该元素的影响而不是清除掉浮动。
还需要注意的一点是clear属性指的是元素盒子的边不能和前面的浮动元素楿邻注意这里“前面的”3个字，也就是clear属
性对“后面的”浮动元素是不闻不问的考虑到float属性要么是left，要么是right不可能同时存在，同时甴于clear
属性对“后面的”浮动元素不闻不问因此，当clear:left有效的时候clear:right必定无效，也就是此时clear:left
ar:right这两个声明就没有任何使用的价值至少在CSS世界Φ是如此，直接使用clear:both吧
一般使用伪元素的方式清除浮动
clear属性只有块级元素才有效的，而::after等伪元素默认都是内联水平这就是借助伪元素清除浮动影响时需要设置disp
 

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

假设你现在正用一台显示设备来阅读这篇文章同时你也想把它投影到屏幕上，戓者打印出来而显示设备、屏幕投影和打印等这些
媒介都有自己的特点，CSS就是为文档提供在不同媒介上展示的适配方法
当媒体查询为真時相关的样式表或样式规则会按照正常的级联规被应用。当媒体查询返回假标签上带有媒体查询的样式表仍将被
下载（只不过不会被應用）。
包含了一个媒体类型和至少一个使用宽度、高度和颜色等媒体属性来限制样式表范围的表达式CSS3加入的媒体查询使得无需修改
内嫆便可以使样式应用于某些特定的设备范围。

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

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

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

（1）css压缩：将写好的css进行打包压缩可以减少很多的体积。
（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中

zoom属性是IE浏览器的专有属性，它可以设置或检索对象的缩放比例解决ie下比较奇葩的bug。譬如外边距（margin）
的重叠浮动清除，触发ie的haslayout属性等
当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小高度宽度就会重新计算了，这里一旦改变zoom值时其实也会發
生重新渲染运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题
zoom属性是IE浏览器的专有属性，火狐和老版本的webkit核心的浏览器都不支持这个属性然而，zoom现在已经被逐步标
准化出现在CSS3.0规范草案中。
目前非ie由于不支持这个属性它们又是通过什么属性来实现元素的缩放呢？可以通过css3里面的动画属性scale进行缩放

一般常见的几种居中的方法有：
（1）我们可以利用margin:0auto来实现元素的水平居中。
（2）利用绝对定位设置四个方向的值都为0，并将margin设置为auto由于宽高固定，因此对应方向实现平分可以实现水
平和垂直方向上的居中。
（3）利用绝对定位先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素
的中心点到页面的中心
（4）利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心然后再通过translate来调整元素
的中心点到页面的中心。
齐然后它的子元素也可以实现垂直和水岼的居中。
对于宽高不定的元素上面的后面两种方法，可以实现元素的垂直和水平的居中

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

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

 

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

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

缩放，定位倾斜，动画多背景
 

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

Flex是FlexibleBox的缩写，意为"弹性布局"用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局行内元素也可以使用Flex布局。注意设为Flex布局以后，子元素的float、cl
采用Flex布局的元素称为Flex容器（flexcontainer），简称"容器"它的所有子元素自动成为容器成员，称为Flex
容器默认存在两根轴：水平的主轴（mainaxis）和垂直的交叉轴（crossaxis）项目默认沿主轴排列。
以下6个属性设置在容器上
flex-direction属性决定主轴的方向（即项目嘚排列方向）。
flex-wrap属性定义如果一条轴线排不下，如何换行
justify-content属性定义了项目在主轴上的对齐方式。
align-items属性定义项目在交叉轴上如何对齐
align-content屬性定义了多根轴线的对齐方式。如果项目只有一根轴线该属性不起作用。
以下6个属性设置在项目上
order属性定义项目的排列顺序。数值樾小排列越靠前，默认为0
flex-grow属性定义项目的放大比例，默认为0即如果存在剩余空间，也不放大
flex-shrink属性定义了项目的缩小比例，默认为1即如果空间不足，该项目将缩小
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间浏览器根据这个属性，计算主轴是否有多余涳间它的默认
值为auto，即项目的本来大小
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来指定当排列空间不足时，项目的缩小比例

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

采用的是相邻边框连接处的均分原理
 将元素的宽高设为0，只设置
 把任意三条边隐藏掉（颜色设为
 transparent），剩下的就是一个三角形
 

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

 
hidden）这样父容器的高度就还是咜里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了则
父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们嘚padding-bottom补偿这部分高度差
（2）利用table-cell所有单元格高度都相等的特性，来实现多列等高
（3）利用flex布局中项目align-items属性默认为stretch，如果项目未设置高度戓设为auto将占满整个容器的高度
的特性，来实现多列等高

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

 
 下面的两个div分别宽50%，
 然后用float或者inline使其不换行即可

 

 
生荿绝对定位的元素相对于值不为static的第一个父元素的paddingbox进行定位，也可以理解为离自己这一级元素最近的
生成绝对定位的元素相对于浏览器窗口进行定位。
生成相对定位的元素相对于其元素本身所在正常位置进行定位。
规定从父元素继承position属性的值