转发链接：
目录
细品100道CSS知识点（上）「干货满满」
细品100道CSS知识点（下）【干货满满】本篇
前言
看到小伙伴留言说期待后面整理的CSS和JS篇，工具人小编整理出了本篇有关CSS部分的知识点。本篇文章作为对CSS知识点的统筹，囊括了目前大部分在面试当中常见的内容，包括一些易踩雷的知识点。文章篇幅较长，建议收藏慢慢细品。
文中篇概念性的内容也蛮多，小编一如既往的做了分割线，记忆力好的童鞋请自行忽略。
51. 在网页中的应该使用奇数还是偶数的字体？
一般情况下，在网页中，应该使用 偶数 字体。原因：
52. 和分别适合什么场景使用？
（1）、需要在外侧添加空白且空白处不需要背景（色），或上下相连的两个盒子之间的空白需要相互抵消时，可以使用；
（2）、需要在内侧添加空白且空白处需要背景（色）display属性，或上下相连的两个盒子之间的空白，希望等于两者之和时，可以使用。
53. 伪元素和伪类的区别和作用？
首先，伪类的效果可以通过添加实际的类来实现，而伪元素的效果可以通过添加实际的元素来实现。所以它们的本质区别就是是否抽象创造了新元素。
伪元素/伪对象： 不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。
p::first-child {color: red}
复制代码伪类：存在DOM文档中，逻辑上存在但在文档树中却无须标识的“幽灵”分类。
a:hover {color: #FF00FF}
p:first-child {color: red}
复制代码注意：
54. :: 和 :after 中双冒号和单冒号有什么区别？
综上所述：:: 是CSS3中写伪元素的新语法； :after是 CSS1 中存在的、兼容IE的老语法。
55. 怎么让支持小于12px 的文字？
.shrink {
-webkit-transform: scale(0.8);
-o-transform: scale(1);
display: inilne-block;
}
复制代码56. 将多个元素设置为同一行?清除浮动有几种方式?
将多个元素设置为同一行的方法： 使用float或-block；
清除浮动的方式：
.clear { zoom:1; }
.clear:after {
content:" ";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
复制代码57. css hack概念以及简述几个css hack?
概念： CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。
（1）、图片间隙
在div中插入图片，图片会将div下方撑大3px：
dt li 中的图片间隙：
（2）、默认高度，IE6以下版本中，部分块元素，拥有默认高度（低于18px）：
表单行高不一致：
鼠标指针：
58. css2.0 和css3.0对比有什么不同？
CSS3加强了CSS2的功能，增加了新的属性和新的标签，并且删除了一些冗余的标签，在布局方面减少了代码量。以前比较复杂的布局，现在使用一个属性就能解决（例如等）。在展示型效果方面还加入了更多的效果（如动画，阴影，圆角等），在盒子模型和列表模块都有了改进。但是CSS3就兼容性而言，还是有些不足之处的，只能支持一些高版本的浏览器。
59. 块级元素、行内元素和空元素定义？60. 如何解决特定浏览器的样式问题？
建议方案： 主张向前兼容，不考虑向后兼容。根据产品的用户群中各大浏览器，来考虑需要兼容的浏览器。
可以把浏览器分为两类： 一类是历史遗留浏览器，一类是现代浏览器。根据这个分类开发两个版本的网站，然后自己来定义哪些浏览器是历史遗留版本。
在用户使用历史遗留版本的时候，通过通告栏告知用户使用现代浏览器，获取更多的功能，拥有更好的用户体验等（升级）。当用户的浏览器不能兼容时，提示用户只是使用什么版本的浏览器才能使用网站（下载可以兼容的浏览器）。
注意：项目开始前就需要确认兼容支持的最低版本是多少，以此设计一个对应的兼容方案。
61. 浏览器如何判断元素是否匹配某个CSS选择器？
浏览器先产生一个集合，这个集合往往由最后一个部分的索引产生（如果没有索引就是所有元素的集合）。然后向上匹配，如果不符合上一个部分，就把元素从集合中删除，直到这个选择器都匹配完，还在集合中的元素就匹配这个选择器了。
62. 描述css reset的作用和用途？
Reset重置浏览器的CSS默认属性，浏览器的品种不同，样式不同时，将它们重置，让它们统一。
63. css 是什么？如何使用？
css精灵图，把一堆小的图片整合到一张大的图片（png）上，利用CSS的“-image”，“- ”``，“-”的组合进行背景定位-可以用数字能精确的定位出背景图片的位置，减轻服务器对图片的请求数量。
64. css 的优缺点？
优点：
缺点：
拓展： 目前网站开发所用的精灵图（如字体库）一般都是直接用云端，而不是采用这种本地的了，如阿里图标库等。
65. 绝对定位和浮动的区别和应用？
绝对定位： 绝对定位脱离标准文档流，它的参考点是文档的左上角或者是右上角。如果有任何父元素有定位属性，此时就可以参考“子绝父相”定律来设置自己的定位参考元素。在网页制作过程中很灵活。制作覆盖效果的时候，会大量使用绝对定位。
浮动： 浮动脱离标准文档流，通常用于制作并排显示的元素，通常用于大的布局，或者无序列表比如图片的并排。可以使用clear:both属性让标准流中的其他元素在此之后依次排列。
66. 当float和同时使用时，如何解决IE6的双倍边距？
当浮动的方向和是同方向的时候，此时IE6会在这个方向的第一个元素身上产生双倍。
解决办法：
（1）、改变的方向，float:left; -right:20px; 浮动向左，向右； （2）、给第一个元素单独写一个类叫做., 此时.{-left:一半的;}； （3）、用:;不用浮动了（哈哈哈哈）。
67. 简述什么是内容与表现分离？
首先对于html，css以及，可以这样理解：
把网站理解成一个人，html就是构成人体的‘骨架’，css就是人体的‘装饰’，比如衣服，饰品等；而就相当于人做出的‘动作’，这样就通俗易懂了。
对于内容和表现分离，小编的理解是：尽量不要在html中插入行内样式，尽量将css抽成一个独立的模块，实现html‘骨架’和样式的分离，利于搜索引擎的同时，也便于后期维护。
68. CSS怎样判断不同分辨率显示不同宽度布局，从而实现自适应宽度？69.rem为什么可以缩放，以什么为基准？其优缺点有哪些？
rem``以html的字号为基准，比如2rem，而html的字号时16px，此时rem就是32px。可以写一段js让html根元素的字号随着浏览器宽度的变化而等比例变化，此时造成页面等比例缩放的现象。
优点：
相对于em的好处来说，不会发生逐渐增大或者减小字体尺寸的情况，因为始终集成根元素的字体大小；rem单位不仅仅是可应用于字体大小，还可以用于设定高度等其它大小，使页面可以适配不同屏幕尺寸。
注意： rem 一般只用于移动端。
70. 5条常见的和IE的脚本兼容的问题。
71. css的优先级如何计算？
巩固一下：
分类 优先级 元素选择符 1 class选择器 10 id选择器 100 元素标签 1000
（1）、!声明的样式优先级最高，若有冲突会再进行计算；
（2）、优先级相同时，以最后出现的样式为准；
（3）、继承得到的样式的优先级是最低的。
72. 回顾的值及其作用？73.有哪几种高等布局？74. :link、:、:hover、:的执行顺序是怎么样的？
L-V-H-A，l(link)ov()e h(hover)a()te，即用喜欢和讨厌两个词来概括。
75. 经常遇到的浏览器兼容性有哪些？如何解决？76. 为什么要语义化以及对于标签语义化的理解？
原因： 为了在没有css的情况下，页面也能呈现出很好的内筒结构和代码架构（可以理解为为了裸奔时好看哈哈哈）。
理解：
77. 常见的CSS布局有几种？
常见的CSS布局有： 固定布局、流式布局、弹性布局、浮动布局、定位布局、和。
78. 的与fixed共同点与不同点？
相同点：
不同点：
79. CSS哪些属性可以继承？哪些属性不可以继承？80.使用过的 CSS 预处理器？
CSS预处理器的基本思想： 为CSS增加了一些变量的特性（变量，判断逻辑和函数等）。
开发者使用这种语言进行web页面上样式设计，再编译成正常的css文件使用。使用CSS预处理器，可以使CSS更加简洁，适应性更强，可读性更佳，无需考虑兼容性。最常用的CSS预处理器语言包括： Sass(Scss)和Less。
81. 设置元素浮动后，该元素的 值会如何变化？
设置元素浮动后，该元素的值自动变成block。
82. 行内元素有哪些?块级元素有哪些? 空(void)元素有哪些?83. box-属性？
用来控制元素的盒子模型的解析模式，默认为-box。
84. CSS3动画比基于脚本的动画有哪些优势？
跟脚本动画相比display属性，使用CSS3动画具有以下优势：
85. 如何优化网页的打印样式？
注意，在打印样式表也应该注意以下几点：
86. React 中的样式与css的区别？87. style标签写在body后与body前有什么区别？
一般情况下，页面加载是自上而下的。将style标签至于body之前，为的是先加载样式。
若是写在body标签之后，由于浏览器以逐行方式对html文档进行解析，当解析到写在写在文档尾部的样式表时，会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后会重新渲染，在的IE下可能会出现FOUC现象（页面闪烁）。
88. CSS属性属性定义溢出元素内容区的内容会如何处理?89. BFC、IFC、GFC、FFC是什么？90. 对于使用图片，需要注意什么？
91.如何优化图像以及图像格式有什么区别？
优化图像：
图像格式区别：
矢量图和位图的区别：
优点： 能保证在最不失真的情况下尽可能压缩图像文件的大小；
缺点： 对于需要高保真的较为复杂的图像，PNG虽然能无损压缩，但是图片较大，不适合应用在web页面上；
92. :fixed;在手机端下无效怎么处理？
fixed的元素实现爱你过对于整个页面固定位置的，当在屏幕上滑动时是在滑动整个。原来的网页还在，fixed也没有变过位置，所以说并不是手机端不支持fixed，只是fixed元素不是相对于手机屏幕固定的，因此我们按照以下方式来设计：
复制代码93. css样式引入方式的优缺点对比94. :none;与:0;有什么区别？
首先是性能差异：
兼容性差异：
95. 跟 、、float 这些特性相互叠加后会怎么样？
叠加结果：有点类似于优先机制。的值-- /fixed优先级最高，有他们在时，float不起作用，值需要调整。float或者定位的元素，只鞥是块元素或者表格。
96. 什么是 CSS？
CSS是一种提取首屏中 CSS 的技术，以便尽快将内容呈现给用户。这是快速加载网页首屏的好方法。
核心思路：