一.圣杯布局和双飞翼布局的理解和区别
作用：圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
区别：圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。

二.CSS3有哪些新增的特性？
边框圆角
border-radius
盒子阴影
box-shadow
文字阴影
text-shadow
2d、3d变换
transform
rotate()
scale()
skew()
translate()
过度动画
transition
自定义动画
animation

三.在页面上隐藏元素的方法有哪些？
利用 dispaly
disaplay: none; 页面不会渲染
visibility: hidden; 页面会渲染只是不限显示
opacity: 0; 看不见，但是会占据空间
利用 position （absolute 的情况下）
left/right/top/bottom: 9999px/-9999px 让元素在视区外
z-index: -9999 放到最底层，同一位置可以让其他元素把这个给遮掉

四.CSS选择器有哪些？哪些属性可以继承？
选择器
通配符
id
class
标签
后代选择器
子选择器
兄弟选择器
属性选择器
伪类选择器
伪元素选择器
可以继承的属性
font-size
font-weight
font-style
font-family
color

五.CSS3新增伪类有哪些并简要描述
CSS3 中规定伪类使用一个 : 来表示；伪元素则使用 :: 来表示。
CSS3 中新增的伪元素有以下这些:
:first-child / :last-child 表示子元素结构关系的
:nth-child() / nth-last-child() 用来控制奇数、偶数行的（控制表单奇数、偶数行的样式）
:first-of-type / :last-of-type 表示一组兄弟元素中其类型的第一个元素 MDN
:nth-of-type() / :nth-last-of-type() 这个选择器匹配那些在相同兄弟节点中的位置与模式 an+b 匹配的相同元素` MDN
:root html 根元素
:not() 否定选择器，用的比较多
:only-child 只有一个子元素时才会生效
:empty 选择连空格都没有的元素

六.简述你对BFC规范的理解
是CSS中的一个渲染机制，BFC就相当于一个盒子，内部的元素与外界的元素互不干扰。它不会影响外部的布局，外部的布局也不会影响到它。
特性
计算BFC的高度时，浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
BFC的区域不会与float的元素区域重叠
形成条件
html 根元素
float的值不是none
position 的值不是static或者relative
display的值是inline-block,table-cell,table-caption,flex,inline-flex
overflow的值不是visible
应用场景
解决浮动子元素导致父元素，高度坍塌的问题
解决文字环绕在float 四周的情况
解决边距重叠问题 （父子，兄弟，空元素等）

七.清除浮动的方式有哪些及优缺点？
上面分析了问题出现的原因，不难找到第一种解决方案（既然孩子丢了，那就去找呗）——给外部盒子也添加浮动
把外部盒子也从标准文档流中抽离，让它和孩子们见面。
缺点：可读性差，不易于维护（别人很难理解为什么要给父元素也添上float），而且可能需要调整整个页面布局。
在外部盒子内最下方添上带clear属性的空盒子
可以是div也可以是其它块级元素，把

八.简述下你理解的优雅降级和渐进增强
渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3，但是 CSS3 特效太优秀不忍放弃，所以在高级浏览器中使用 CSS3，而在低级浏览器只保证最基本的功能。
优雅降级
先不考虑兼容，优先最新版本浏览器效果，之后再逐渐兼容低版本浏览器。
渐进增强
考虑兼容，以较低（多）浏览器效果为主，之后再逐渐增加对新版本浏览器的支持，以内容为主。也是多数公司所采用的方法。

九.对比下px、em、rem有什么不同？
px: 绝对固定的值，无论页面放大或者缩小都不会改变。
em: 相对父元素字体大小的倍数。如果父元素的字体为 12px，那么子元素 1em 就是 24px。由于是相对父级的倍数，所以多层嵌套时，倍数关系的计算会很头痛。
rem: 相对根元素字体大小的倍数。相对于 html 的字体大小，如果不做任何修改，浏览器默认字体大小为 16px。

十.css常用的布局方式有哪些？
流式布局: 最基本的布局，就是顺着 html 像流水一样流下来
绝对定位: 利用 position: absolute 进行绝对定位的布局
float 布局: 最初用来解决多栏布局的问题。比如圣杯、双飞燕的布局都可以用 float 来实现
珊格布局: bootstrap 用的布局，把页面分为 24 分，通过 row 和 col 进行布局
flex 布局: css3 的布局可以非常灵活地进行布局和排版
grid 布局: 网格布局

十一.说说你对css盒子模型的理解
盒模型分为： IE盒模型和W3C盒模型
盒模型是由 content、padding、border、margin组成的
区别：
IE盒模型的width = content + padding + border
W3C盒模型的width = content
CSS3的属性box-sizing可以指定两种盒模型
其中border-box属性为IE盒模型
content-box属性为W3C盒模型

十二.::before和:after中单冒号和双冒号的区别是什么，这两个伪元素有什么作用？
1.:表示伪类，是一种样式，比如:hover, :active等
2.::表示伪元素，是具体的内容，比如::before是在元素前面插入内容，::after则是在元素后面插入内容，不过需要content配合，并且插入的内容是inline的。
3.:before和:after其实还是表示伪元素，在css3中已经修订为::before和::after了，只是为了能兼容IE浏览器，所以也可以表示成:before和:after

十三. style标签写在body前和body后的区别是什么？
渲染机制的区别，在body前是已经把样式浏览一遍，到了对应标签直接，渲染样式。显示块。
在body后，是浏览器已经把标签浏览了，但基于没有样式，显示的不完全，再把body后的样式表，扫描后，在成为真正的样式。会慢，遇到大型网站，效果更差，这都基于浏览器从上而小的浏览机制导致的。

十四.请描述margin边界叠加是什么及解决方案
在一个BFC下两个元素的margin会重叠
解决方法：
将两个元素分别放在不同的BFC下
改成padding

十五.解释下 CSS sprites的原理和优缺点分别是什么？
原理：
多张图合并成一张图
优点&解决的问题
hover效果，如果是多个图片，网络正常的情况下首次会闪烁一下。如果是断网情况下，就没图片了。sprites 就很好的解决了这个问题（第一次就加载好了）。
合并了请求数
制作帧动画方便
缺点
位置不好控制，有时候容易露底。。比如说3030的按钮，图片只有1212保不齐就漏出其他图片了。
合成时候比较费时（有工具代替）
位置计算费时（有工具代替）
更新一部分的时候，需要重新加载整个图片，缓存失效。

十六.什么是FOUC？你是如何避免FOUC的？
FOUC 即 Flash of Unstyled Content，是指页面一开始以样式 A（或无样式）的渲染，突然变成样式B。
原因是样式表的晚于 HTML 加载导致页面重新进行绘制。
通过 @import 方式导入样式表
style 标签在 body 中
解决方法：把 link 标签将样式放在 head 中

十七.css的属性content有什么作用呢？有哪些场景可以用到？
content 属性与 :before 及 :after 伪元素配合使用，在元素头或尾部来插入生成内容。

十八.要让Chrome支持小于12px的文字怎么做？
1, 改用图片
2, 使用 -webkit-text-size-adjust:none; 但是不支持chrome 27.0以上版本
3, 使用 transform: scale( )缩小

十九.说说浏览器解析CSS选择器的过程？
从上到下，从右到左
因为从左到右，首先浏览器会遍历你最左边的选择器，可能是div，可能是span，我需要在整个页面去把匹配成功的dom找出来，可以说是海底捞针，但是从右到左不一样了，它通过具体的遍历条件去寻找一个最匹配的值，查找之后在向上查询，是否符合自己的选择器规则，才最后匹配成功；
前者会浪费大量的遍历时间，造成大量错误的匹配结果

二十.说说CSS的优先级是如何计算的？
!important > 内联样式（1000） > id 选择器（100） > class 选择器（10） > tag（1） > *

二十一.你有用过CSS预处理器吗？喜欢用哪个？原理是什么？
less和scss都用过，less用得比较多一些
嵌套功能让css像html一样结构化，不管是从书写还是查看维护都更轻松
声明变量让后期修改界面整体样式变得轻松
原理就是 预处理器有自己的一套方便的规则，最后通过解析生成css

二十二.说说你对z-index的理解
当网页上出现多个由绝对定位（position:absolute）或固定定位（position:fixed）所产生的浮动层时，必然就会产生一个问题，就是当这些层的位置产生重合时，谁在谁的上面呢？或者说谁看得见、谁看不见呢？这时候就可以通过设置z-index的值来解决，这个值较大的就在上面，较小的在下面。
z-index的意思就是在z轴的顺序，如果说网页是由x轴和y轴所决定的一个平面，那么z轴就是垂直于屏幕的一条虚拟坐标轴，浮动层就在这个坐标轴上，那么它们的顺序号就决定了谁上谁下了。

二十三.rgba()和opacity这两个的透明效果有什么区别呢？
1.opacity 是属性，rgba()是函数，计算之后是个属性值；
2.opacity 作用于元素和元素的内容，内容会继承元素的透明度，取值0-1；
3.rgba() 一般作为背景色 background-color 或者颜色 color 的属性值，透明度由其中的 alpha 值生效，取值0-1；

二十四.描述下你所了解的图片格式及使用场景
▍GIF
优点：GIF是动态的；支持无损耗压缩和透明度。
缺点：的详细的图片和写实摄影图像会丢失颜色信息；在大多数情况下，无损耗压缩效果不如 JPEG 格式或 PNG 格式；GIF 支持有限的透明度，没有半透明效果或褪色效果。
适用场景：主要用于比较小的动态图标。
▍PNG
优点：PNG格式图片是无损压缩的图片，能在保证最不失真的情况下尽可能压缩图像文件的大小；图片质量高；色彩表现好；支持透明效果；提供锋利的线条和边缘，所以做出的logo等小图标效果会更好；更好地展示文字、颜色相近的图片。
缺点：占内存大,会导致网页加载速度慢；对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。
适用场景：主要用于小图标或颜色简单对比强烈的小的背景图。
▍JPG
优点：占用内存小，网页加载速度快。
缺点：JPG格式图片是有损压缩的图片，有损压缩会使原始图片数据质量下降，即JPG会在压缩图片时降低品质。
适用场景：由于这种格式图片对色彩表现比较好，所以适用于色彩丰富的图片。主要用于摄影作品或者大的背景图等。不合适文字比较多的图片。
▍SVG
优点：SVG是矢量图形，不受像素影响，在不同平台上都表现良好；可以通过JS控制实现动画效果。
缺点：DOM比正常的图形慢，而且如果其结点多而杂，就更慢；不能与HTML内容集成。
适用场景：主要用于设计模型的展示等。
▍WebP
优点：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器宽带资源和数据空间。
缺点：相较编码JPEG文件，编码同样质量的WebP文件需要占用更多的计算资源。
适用场景：WebP既支持有损压缩也支持无损压缩。将来可能是JPEG的代替品。

二十五.让网页的字体变得清晰，变细用CSS怎么做？
font-weight + font-family
font-weight 来控制粗细还是需要看对应的字体有没有对应的变种字体。因此这就和 font-family 相关。
-webkit-font-smoothing
这个属性是 Chrome 的抗锯齿属性。加上后会显得细一些，但是只针对 webkit 内核的浏览器才有效。

二十六.浏览器是怎样判断元素是否和某个CSS选择器匹配？
有选择器：
div.ready #wrapper > .bg-red
先把所有元素 class 中有 bg-red 的元素拿出来组成一个集合，然后上一层，对每一个集合中的元素，如果元素的 parent id 不为 #wrapper 则把元素从集合中删去。 再向上，从这个元素的父元素开始向上找，没有找到一个 tagName 为 div 且 class 中有 ready 的元素，就把原来的元素从集合中删去。
至此这个选择器匹配结束，所有还在集合中的元素满足。大体就是这样，不过浏览器还会有一些奇怪的优化。

二十七.写出主流浏览器内核私有属性的css前缀
Chrome：Blink内核 -webkit-
Safari：WebKit内核 -webkit-
Firefox ：Gecko内核 -moz-
IE：Trident内核 -ms-
Opera：Presto内核 -o-

二十八.怎么才能让图文不可复制？
利用 user-select: none 属性，让元素不能被选中。

二十九.重置（初始化）css的作用是什么？
简单讲主要是为了 统一各个浏览器自带的默认样式而诞生的。

三十.span与span之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
可能是设置成了inline-block。
第一种解决方案是，去掉span标签内的空白。
第二种解决方案是，设置margin负值，但要根据字体调整，不方便大规模使用。

三十一.你知道全屏滚动的原理是什么吗？它用到了CSS的哪些属性？
全屏滚动和轮播图类似，都是通过改变元素位置或者显示与隐藏来实现，配合JS的一些交互距离判断，实现类似原生滚动捕获的效果。这里全屏的话就需要将宽高都设置为窗口的大小，可以通过百分百实现。
关键CSS属性是父容器 overflow: hidden; 。

三十二.列举CSS优化、提高性能的方法
加载性能
压缩CSS
通过link方式加载，而不是@import
复合属性其实分开写，执行效率更高，因为CSS最终也还是要去解析如 margin-left: left;
选择器性能
尽量少的使用嵌套，可以采用BEM的方式来解决命名冲突
尽量少甚至是不使用标签选择器，这个性能实在是差，同样的还有*选择器
利用继承，减少代码量
渲染性能
慎重使用高性能属性：浮动、定位；
尽量减少页面重排、重绘；
css雪碧图
自定义web字体，尽量少用
尽量减少使用昂贵属性，如box-shadow/border-radius/filter/透明度/:nth-child等
使用transform来变换而不是宽高等会造成重绘的属性

三十三.要是position跟display、overflow、float这些特性相互叠加后会怎么样？
display:none之后别的样式设置成什么都不管用了，dom元素不可见了。position:absolute之后float应该就不起作用了

三十四.css3的:nth-child和:nth-of-type的区别是什么？
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。
:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素。
n 可以是数字、关键词或公式。

三十五.margin和padding使用的场景有哪些？
margin:
需要在border外侧添加空白时；
空白处不需要背景（色）时；
上下相连的两个盒子之间的空白，需要相互抵消时。
padding：
需要在border内测添加空白时；
空白处需要背景（色）时；
上下相连的两个盒子之间的空白，希望等于两者之和时。

三十六.inline、block、inline-block这三个属性值有什么区别？
inline： 行内元素，元素不独占一行，不可以修改宽高
block： 块级元素，元素独占一行，可以修改宽高
inline-block： 行内块级元素，元素不独占一行，并且可以修改宽高

三十七.说说position的absolute和fixed共同与不同点分别是什么？
相同点：
1、都是用来给元素定位的属性，具有定位元素的一切特点（例如脱离文本流、不占据空间等等）；
2、改变元素的呈现方式为display：block；
不同点：
1、fixed的父元素永远是浏览器窗口，不会根据页面滚动而改变位置；absolute的父元素是可以设置的，他会永远跟随父元素的位置的改变而改变。

三十八.举例说明css中颜色的表示方法有几种
单词 pink
rgb(255,255,255)
rgba(0,0,0,.5)
十六进制 #ffffff

三十九.元素竖向的百分比设置是相对容器的高度吗？
父级非 auto 的 height 时，子级百分比的 height 才有效。
即使父级有 min-height 或其他子级撑起的高度，子级百分比 height 依旧无效。

四十.你对响应式设计的理解是什么？知道它基本的原理是吗？要想兼容低版本的IE怎么做呢？
理解：在不同系统，不同设备，不同尺寸的界面，有良好的用户体验，舒适的阅读体验，交互体验。
原理：根据不同设备尺寸，浏览器自动调整或通过样式调整，来保证用户体验。
兼容：Respond.js

四十一.说说你对!important的理解，一般在哪些场景使用？
!important 可以让样式的特指度最高，覆盖任何样式，而且本身不可被覆盖。
一般场景就是用来强制覆盖其他样式，用的比较少，不建议使用，因为别人没法覆盖这个样式，维护性比较。

四十二.请你解释下什么是浮动和它的工作原理是什么？同时浮动会引起什么问题？
什么是浮动：我们在做布局的时候用到的一种技术，通过浮动可以让元素左右浮动，然后通过margin调整位置
工作原理：使元素脱离文档流，让元素可以左右浮动，直到遇到另一个浮动元素的边缘才停止。
带来的问题：浮动元素会造成父级元素无法自动获取高度，导致父级塌陷，布局错乱。

四十三.请问display:inline-block在什么时候会显示间隙？
display: inline-block 在IE67下会产生4px的空白间隙，原因是换行或空格会占据一定的位置。
解决办法： 设置父元素的font-size: 0; letter-spaceing: -4px;

四十四.font-style的属性有Italic和oblique，两者有什么区别呢
italic和oblique都是向右倾斜的文字, 但区别在于Italic是指斜体字，而Oblique是倾斜的文字，对于没有斜体的字体应该使用Oblique属性值来实现倾斜的文字效果.

四十五.display有哪些值？分别说明他们的作用是什么？
display:block/inline-block 给元素转块/转行内块
display:inline 把元素转成内联元素（我很少用到）
display:none让元素消失，不显示
display:flex弹性布局

四十六.说说你对CSS样式覆盖规则的理解
1.首先看权重，权重高的样式会覆盖权重低大的样式。
!important > #id > .class > tag > *
2.同等权重时，css 靠后的覆盖靠前的（就近原则），只与 css 书写的顺序有关，与 class 引用的顺序无关
3.行内样式 > 内联样式 > 外联样式

四十七.CSS的overflow属性定义溢出元素内容区的内容会如何处理呢
overflow:hidden可以清除浮动，如果对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。

四十八.CSS的伪类和伪对象有什么不同？
伪类：我们常用的比如，hover，focus等，我认为伪类是为了弥补选择器的不足。还有伪类选择器，比如first-child,nth-child.
伪元素 : ::before ::after 是为了创建一个dom元素，使用content属性指定要插入的内容。content必须有值（空值也行）。还有 伪元素选择器，比如 first-line first-letter

四十九.行内元素和块级元素有什么区别，如何相互转换
一般通过display属性来区分块级元素和行内元素，block代表块级元素，inline代表行内元素。
块级元素：
1、内容独占一行。
2、width和height可以设置。
3、margin和padding也可以设置。
行内元素：
1、内容不独占一行。
2、width由内容撑开，不可设置。
3、竖直方向marigin和padding不可设置，水平方向可设置。
4、有多个行内元素，则会排列在一行，直到父容器放不下才会换行。
块级元素和行内元素通过修改display属性可相互切换。

五十.过渡和动画的区别是什么？
过渡 transition
1.需要事件触发，比如hover，focus，checked , js改, @media query
2.一次性的
3.只能定义开始和结束状态，不能定义中间状态。
动画 animation
1.不需要事件触发
2.显示地随着时间的流逝，周期性的改变元素的css属性值。区别于一次性。
3.通过百分比来定义过程中的不同形态，可以很细腻

五十一.position的relative和absolute定位原点是哪里？
absolute: 定位原点为第一个position不为static的父级元素的左上角。
可以基于该特性实现height:100%生效
relative：定位原点为元素本身的所在位置。
relative的偏移量设置会导致显示效果和定位原点不重合。

五十二.说下你对cursor属性的理解
cursor是用来显示鼠标不同的光标的
它的属性主要有auto，move，text，pointer，各种方向的resize，还有放大镜的zoom-in，放小镜的zoom-out等

五十三.说说你对设备像素比的理解
设备像素比(Device Pixel Ratio 简称：DPR)，是指物理像素和CSS像素的比例。

五十四.你有用过table布局吗？
在 div + css 布局成为主流之前，基本都是以 table 布局为主。曾经的三剑客，Dreamever 的所见即所得也是利用 table 来做布局。
table 布局对于排版比较友好，水平居中、垂直居中都可以利用 table 的属性来完成。但缺点也是十分明显的。
table 布局往往是 table 嵌套 table，会有非常多的 DOM 节点，对于性能来说是一个灾难
语义化不明，本身就是标签错误的用法。因此对 SEO 不友好。
DOM 操作是噩梦，无数的 tr、td 中要寻找到目标 DOM 元素非常困难，代码没有维护性可言。

五十五.标签、class和id选择器三者的区别是什么？分别在什么时候用？
标签选择器：tag{} 选取对应的标签例如 a span div
class选择器：.class-name{} 选取对应class-name的元素
id选择器：#id-name{} 选取对应id的元素
其中id是具有唯一性的。
三者优先级为 id>类>标签
因此一般可以用标签选择器添加该标签的通用样式，类选择器对样式进一步细化，id选择器针对某几个需要特殊处理的元素添加单独的样式。

五十六.为什么要使用css sprites？
css sprites指的是将该页面请求的图片资源都拼接到一个图片文件上，通过css从拼接好的图片上获取需要的部分。
优点:
一个是减少了HTTP请求的发送次数
一个是合并后的图片一般小于合并前的图片大小总和
缺点：
如果发生改动需要重新做拼接

五十七.Reset CSS和Normalize CSS的区别是什么？
Reset：将所有浏览器的默认样式都统一化，注重的是跨浏览器统一样式，用户还要自行添加一些默认样式。
Normalize：会根据各个浏览器的不同保留有用的浏览器特色样式，修复浏览器的一些BUG，更注重易用性。

五十八.说说你对GPU的理解，举例说明哪些元素能触发GPU硬件加速？
GPU: 图形处理器,用于处理图形有关的任务,用于渲染页面
在css中使用 transform: translateZ(0),可以开启GPU硬件加速

五十九.举例说明伪元素 (pseudo-elements) 有哪些用途？
可以用于给元素添加伪元素来调整布局。
可以添加伪元素，通过content添加内容

六十.什么是zoom？它有什么作用？
zoom 最初是 IE 的私有属性，现在除了 Firefox 之外的浏览器基本都支持 zoom。不过，zoom 依旧不是正式的属性。与之对应的 transform 的 scale 属性是正式的 CSS 属性。
zoom 主要的作用是用于元素或者页面的缩放；transform 的 scale 也有同样的作用，两者有如下的区别。
zoom 的缩放点在元素左上角。在 Chrome 下，文字如果缩小后小于 12px 的情况仍然会显示 12px。并且 zoom 缩放会影响元素实际的位置，这样就会造成页面的重排和重绘，在性能上会有影响。
transform 的 scale 缩放点在元素中心。缩放会对文字有影响，可以利用此属性实现 Chrome 下小于 12px 的字体。但是 transform 缩放后不会改变元素的位置，即如果元素原来是 200px 宽，缩小 50% 后虽然看上去只有 100px 宽了，但是仍然占 200px。

六十一.举例说明伪类:nth-child、:first-child与:first-of-type这三者有什么不同？
:nth-child(n): 选择当前元素的父元素下的第n个子元素（从1开始）
:nth-of-type(n)： 选择当前元素的父元素下的第n个同类型子元素（从1开始）
:first-child: 相当于:nth-child(1)
:first-of-type: 相当于:nth-type(1)

六十二.说说visibility属性的collapse属性值有什么作用？在不同浏览器下有什么区别？
设置visibility: collapse后对于普通元素来说跟visibility: hidden效果一样，隐藏元素，且占用空间
但对于一些table元素，比如row、columu、group，效果则跟display: none一样，隐藏元素，但不占空间
但这些效果会随着浏览器底层实现不同而改变：

在Chrome下，visibility: collapse都与visibility: hidden没有什么区别，即仍会占用空间
在火狐浏览器、Opera里，使用collapse值的效果就如它的字面意思：table的行会消失，它的下面一行会补充它的位置，不占用空间。
在IE即使设置了visibility: collapse，还是会显示元素。

六十三. absolute的containing block（容器块）计算方式和正常流有什么区别？
absolute会先向上找到第一个position不为static或者fixed的祖先元素，然后根据该祖先元素的display属性分类讨论。
如果为块级元素，则为该块级元素的padding box。
如果为行内元素，则为包含该祖先元素内所有行内元素的padding box
如果是正常流，其中元素的containing block是其最近的块级元素的content box

六十四.有哪些方式可以对一个DOM设置它的CSS样式？
1.可以使用行内样式
2.可以使用style标签
3.可以使用link引入css文件
4.可以使用js动态修改

六十五.z-index有时不起作用的原因是什么？怎么解决？
1、可能是没有设置position
解决：设置position为relative,absolute,fixed
2、设置了浮动
解决：清除浮动
3、父元素position为relative
解决：设置为absolute

六十六.word-wrap、word-break和white-space有什么区别？
word-wrap：现在改为overflow-wrap了；用于控制单词在超出其包裹元素时是否中断单词换行；
white-space：用于处理元素中的空白符号（包括空格，换行符，制表符，
元素，文字自然换行）；
word-break：用于控制单词在换行时如何断开；

六十七.移动页面底部工具条有3个图标，如何平分？在设置边框后最后一个图标掉下去了怎么办？
flex以后,space-around 或者space-between,再加个左右padding,设置border-box

六十八.请问background-attachmentn属性有什么用途？
background-attachment: fixed / scroll / local： 设置背景图像是否固定或者随着页面的其余部分滚动。
fixed: 背景图片不会随着页面的滚动而滚动。
scroll: 背景图片随着页面的滚动而滚动，这是默认的。
local: 背景图片会随着元素内容的滚动而滚动。
inherit: 指定 background-attachment 的设置应该从父元素继承。

六十九.请说说在什么时候用transition？什么时候使用animation？
transition 相当于是个过度动画，需要又过度效果才会触发。一般用来做元素的放大缩小、平移旋转等简单的操作。transition 只执行一次，当需要执行多次时，一般会利用 :hover 等时机或者使用 javaScript 改变类名进行控制。
animation 需要自己设定关键帧，可以做相对复杂的操作，比如延迟、循环播放等。一般在需要比较复杂的情况才会使用 animation。

七十.外边距重叠是什么？重叠的结果是什么？怎么防止外边距重叠？
什么是外边距重叠？
块级元素的上外边距和下外边距有时会合并（或折叠）为一个外边距，其大小取其中的最大者。
重叠的结果是什么？
兄弟元素： 毗邻的两个元素之间的外边距会折叠
父子元素：如果在父元素与其第一个子元素之间不存在边框、内边距、行内内容，也没有创建块格式化上下文、或者清除浮动将两者的 margin-top 分开；或者在父元素与其最后一个子元素之间不存在边框、内边距、行内内容、height、min-height、max-height将两者的 margin-bottom 分开，那么这两对外边距之间会产生折叠。此时子元素的外边距会“溢出”到父元素的外面(表现是marign像是作用在了父元素上)。
空的块级元素：如果一个块级元素中不包含任何内容，并且在其 margin-top 与 margin-bottom 之间没有边框、内边距、行内内容、height、min-height 将两者分开，则该元素的上下外边距会折叠。(这一条没明白)
怎样防止外边距重叠？
底部元素脱离文档流(float: left/right || position: absolute/fixed)
给兄弟元素设置垂直边界的时候，统一设置一边(margin-top或margin-bottom)

七十一.css怎么更改表单的单选框或下拉框的默认样式？
下拉框
select可以通过appearance:none去除默认样式，然后进行自定义，但是option标签不能通过CSS自定义，所以最佳方案是自定义标签重写select
单选框
隐藏input标签，自定义标签通过checked伪类进行实现

七十二.你有使用过字体图标吗？它有什么好处？
可以很方便的修改颜色，大小等，节省空间，不需要请求图片资源

七十三.如果css文件过大时，如何异步加载它？
1、动态插入css 也就是自己创建一个link 标签 并赋予src等属性
2、在link标签中 设置media为不适合的格式，待加载完毕后改回来
3、同样用2的方式改变rel
4、还有一种添加preload属性 这种方式能比其他三种更早的加载css,但兼容性不强

七十四.你是怎样对css文件进行压缩合并的？
使用在线网站进行压缩
使用 html-minifier 对 html 中的 css 进行压缩
使用 clean-css 对 CSS 进行压缩

七十五.你知道css的预处理器和后处理器都有哪些吗？它们有什么区别呢？
预处理器 eg:Less,sass,Stylus.
后处理器 eg:各种压缩工具,自动处理浏览器兼容工具.

七十六.相邻兄弟选择器、后代选择器和子选择器三者有什么区别？
后代选择器与子选择的关系：后代选择器>子选择器。
后代选择器：包括父元素的子元素以及孙子元素（代表符号：空格）
子选择器：包括父元素的子元素（仅仅是子元素）（代表符号：>）
相邻兄弟选择器与后续兄弟选择的关系：后续兄弟选择>相邻兄弟选择器
相邻兄弟选择器：紧跟在目标元素后面的第一个兄弟元素（代表符号：+）
后续兄弟选择器：紧跟在目标元素后的所有兄弟元素（代表符号：~）