小伙伴们，前几天的css面试题汇总大全看的怎么样呢，今天，继续来更新最后一弹，咱们闲言少叙，进入正题。
如果有想一起学习web前端，HTML5及JavaScript的可以来一下我的前端群：733581373，好友都会在里面交流，分享一些学习的方法和需要注意的小细节，每天也会准时的讲一些前端的炫酷特效，及前端直播课程学习
41、上下margin重合的问题
在重合元素外包裹一层容器，并触发该容器生成一个BFC。例子：
42、设置元素浮动后，该元素的display值是多少？
自动变成display:block
43、移动端的布局用过媒体查询吗？
通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示。
- <head>里边<linkrel=”stylesheet” type=”text/css” href=”xxx.css”media=”only screen and (max-device-width:480px)”>
- CSS: @media only screen and (max-device-width:480px) {/css样式/}
44、CSS优化、提高性能的方法有哪些？
- 避免过度约束
- 避免后代选择符
- 避免链式选择符
- 使用紧凑的语法
- 避免不必要的命名空间
- 避免不必要的重复
- 最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
- 避免！important，可以选择其他选择器
- 尽可能的精简规则，你可以合并不同类里的重复规则
45、浏览器是怎样解析CSS选择器的？
CSS选择器的解析是从右向左解析的。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。
两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。
而在 CSS解析完毕后，需要将解析的结果与DOMTree 的内容一起进行分析建立一棵RenderTree，最终用来进行绘图。在建立RenderTree 时（WebKit中的「Attachment」过程），浏览器就要为每个DOMTree 中的元素根据CSS的解析结果（StyleRules）来确定生成怎样的RenderTree。
46、在网页中的应该使用奇数还是偶数的字体？为什么呢？
使用偶数字体。偶数字号相对更容易和web设计的其他部分构成比例关系。Windows自带的点阵宋体（中易宋体）从Vista开始只提供12、14、16px 这三个大小的点阵，而13、15、17px时用的是小一号的点。（即每个字占的空间大了1px，但点阵没变），于是略显稀疏。
47、margin和padding分别适合什么场景使用？
何时使用margin：
- 需要在border外侧添加空白
- 空白处不需要背景色
- 上下相连的两个盒子之间的空白，需要相互抵消时。
何时使用padding：
- 需要在border内侧添加空白
- 空白处需要背景颜色
- 上下相连的两个盒子的空白，希望为两者之和。
兼容性的问题：在IE5IE6中，为float的盒子指定margin时，左侧的margin可能会变成两倍的宽度。通过改变padding或者指定盒子的display：inline解决。
48、元素竖向的百分比设定是相对于容器的高度吗？
当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如padding-top, padding-bottom , margin-top , margin-bottom等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。
49、全屏滚动的原理是什么？用到了CSS的哪些属性？
原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，剩下的可以通过transform进行y轴定位，也可以通过margin-top实现
50、什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
响应式网站设计(ResponsiveWeb design)是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。页面头部必须有meta声明的viewport。
51、视差滚动效果？
视差滚动（ParallaxScrolling）通过在网页向下滚动的时候，控制背景的移动速度比前景的移动速度慢来创建出令人惊叹的3D效果。
- CSS3实现:优点：开发时间短、性能和开发效率比较好，缺点是不能兼容到低版本的浏览器
- jQuery实现:通过控制不同层滚动速度，计算每一层的时间，控制滚动效果。**优点：**能兼容到各个版本的，效果可控性好**缺点：**开发起来对制作者要求高
- 插件实现方式:例如：parallax-scrolling，兼容性十分好
52、::before和:after中双冒号和单冒号有什么区别？解释一下这2个伪元素的作用
- 单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
- ::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。
:before和:after这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before::after
53、你对line-height是如何理解的？
行高是指一行文字的高度，具体说是两行文字间基线的距离。CSS中起高度作用的是height和line-height，没有定义height属性，最终其表现作用一定是line-height。单行文本垂直居中：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中，其实也可以把height删除。
多行文本垂直居中：需要设置display属性为inline-block。
54、怎么让Chrome支持小于12px的文字？
55、让页面里的字体变清晰，变细用CSS怎么做？
-webkit-font-smoothing在window系统下没有起作用，但是在IOS设备上起作用-webkit-font-smoothing：antialiased是最佳的，灰度平滑。
56、;在android下无效怎么处理？
57、如果需要手动写动画，你认为最小时间间隔是多久，为什么？
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms＝16.7ms
58、li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。解决方法：
- 可以将<li>代码全部写在一排
- 浮动li中float：left
- 在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px
59、display:inline-block什么时候会显示间隙？
- 有空格时候会有间隙解决：移除空格
- margin正值的时候解决：margin使用负值
- 使用font-size时候解决：font-size:0、letter-spacing、word-spacing
60、有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度
外层div使用position：relative；高度要求自适应的div使用; top: 100px; bottom: 0; left: 0
61、png、jpg、gif这些图片格式解释一下，分别什么时候用。有没有了解过webp？
- png是便携式网络图片（PortableNetwork Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。大多数地方都可以用。
- jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
- gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.
- webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。
62、style标签写在body后与body前有什么区别？
页面加载自上而下当然是先加载样式。写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）
63、阐述一下CSSSprites
将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的background-image，background-repeat，background-position的组合进行背景定位。利用CSSSprites能很好地减少网页的http请求，从而大大的提高页面的性能；CSSSprites能减少图片的字节。
至此，全部的css面试题汇总就全部更新完了，希望能够帮助到各位的学习。小伙伴们还希望看到什么类型的干货呢，可以留言告诉小编哦~更多前端案例、习题、笔记、代码尽在下方学习群，让我们一起进步吧！
最后，如果有想一起学习web前端，HTML5及JavaScript的可以来一下我的前端群：733581373，好友都会在里面交流，分享一些学习的方法和需要注意的小细节，每天也会准时的讲一些前端的炫酷特效，及前端直播课程学习
如果想看到更加系统的文章和学习方法经验可以关注的微信号：‘web前端技术圈’或者‘webxh6’关注后回复‘2018’可以领取一套完整的学习视频