问：什么是CSS reset

在不同浏览器之间，默认样式有着诸多差异和问题，而为了在不同浏览器之间具备相同的视觉效果，开发人员往往会在样式表文件中引入一段CSS代码，如，我们把这个过程叫做CSS reset。

当然，好处就和他的作用一样。但是我们应该认识其缺点，很多如排版标签，列表标签等这样的语义元素就失去了他的意义，在没有为其设置其他样式时，视觉上和其他内容也没了区别；如果页面内有第三方内容嵌入，则会影响第三方内容的视觉效果；而很多开发人员更是直接百度一段代码，复制到自己的项目中，我认为这样的开发是不负责任的。

个人认为在项目中可根据需求对一些全局样式进行设置，如字体，字号等，而对于元素的样式设置应该通过选择器精确的设置。在项目中，本人一般都会建立一个基础的样式文件，里面编写通用的类选择器，在需要的元素上添加类名达到重置的效果。如

.no-padding {padding: 0;}  .only-content {padding: 0;margin: 0;border: 0}

问：CSS性能优化

在看到这个问题的时候，扪心自问，还真没在项目中考虑太多CSS性能优化。以下内容由网络信息总结。

作为一名前端，在开始学习时就会知道一句话——样式放在文档头部，脚本放在文档底部。根据浏览器工作过程，我们知道渲染是在加载完样式文件后开始的，所以样式文件放在头部可减少页面空白的时间，而放在底部，页面需要等待HTML内容加载完成才会加载样式文件，就会导致页面有段时间看上去没有样式（的确没有）。

在CSS优化中，众所周知的估计就是加载优化吧。在实际项目中，一般通过减少使用import或者不使用import，压缩文件体积等方式来减少网络请求，减少传输内容来提高加载性能。

我们可以从以下方面进行调优：

• 尽量避免使用： expression表达式[IE]以及filter属性[IE]。expression表达式在文档的很多交互事件中都会执行，如页面滚动，鼠标滚动，改变窗口大小等；而filter属性比较消耗内存(非常),不仅如此，所以用到该filter的元素渲染时都会重新分析该样式，而且下载filter里的图片会导致浏览器停止渲染。

• css缩写：在css中很多属性可设置多个值，如margin，padding，border，font，background等，尽量直接对该属性设置多个值，避免多个值分开设置，如

no:padding-left: 0;padding-right: 1px;padding-top: 2px;padding-bottom: 3px;do: padding: 2px 1px 3px 0

• 减少使用不必要的并行规则，如button#oneBtn{...},button.btn{...}。对于浏览器来讲，定位一个oneBtn和.btn比同时定位button#oneBtn,button.btn更快。

• 尽量减少规则层数，层数越多，定位越慢(非常慢)，使用一个有语义的选择器往往能够取得更好的效率。

• 利用好继承机制。

• 减少重布局以及重绘。改变元素大小，位置的css属性将会导致相关图层重新布局，不改变节点的大小和位置的属性改变不会触发重布局，如果改变了渲染效果会触发重绘。

问：CSS预处理

什么是CSS预处理呢？CSS预处理是一种技术，可以很好的提升CSS的编程性，开发效率以及可维护性，就是像编写其他程序一样，可以通过定义变量，调用函数等方式编写程序，最后通过特殊的处理器输出CSS代码。

该技术发展到今天，已经有很多成熟的CSS预处理器语言，如Sass，LESS等，并在很多大型项目中使用。

问：浮动的原理和工作方式，会产生什么影响呢，要怎么处理？

工作方式：浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

影响:

• 浮动会导致父元素无法被撑开，影响与父元素同级的元素。

• 与该浮动元素同级的非浮动元素，如果是块级元素，会移动到该元素下方，而块级元素内部的行内元素会环绕浮动元素；而如果是内联元素则会环绕该浮动元素。

• 与该元素同级的浮动元素，对于同一方向的浮动元素(同级)，两个元素将会跟在碰到的浮动元素后；而对于不同方向的浮动元素，在宽度足够时，将分别浮动向不同方向，在宽度不同是将导致一方换行(换行与HTML书写顺序有关，后边的将会浮动到下一行)

• 浮动元素将被视作为块元素

• 而浮动元素对于其父元素之外的元素，如果是非浮动元素，则相当于忽视该浮动元素，如果是浮动元素，则相当于同级的浮动元素。

• 而常用的清除浮动的方法，则如使用空标签，overflow，伪元素等。在使用基于浮动设计的CSS框架时，自会提供清除的方法，个人并不习惯使用浮动进行布局。

问：CSS有哪些选择器？它们的权重怎么计算的？

CSS选择器分基本选择器(元素选择器，类选择器，通配符选择器，ID选择器，关系选择器),属性选择器，伪类选择器，伪元素选择器，以及一些特殊选择器,如has，not等。

在CSS中，权重决定了哪些CSS规则生效，浏览器按如下规则进行CSS权重计算

• 1000：内联样式

• 0100：ID选择器

• 0010：类，伪类，属性选择器

• 0001：元素，伪元素，通配符，子选择器，相邻选择器等

• 无：继承样式

​浏览器通过对元素上的CSS规则进行权重计算，权重高的规则将生效，如果权重相同则最后的规则生效，而使用的！important的规则将具备最高权重，如果多条规则有！important，同样是最后的规则生效。

写在最后

如果你发现文中有错误的地方，请指出，我将及时修改。

整理的不好，非常有幸被你看到，请指点。

欢迎关注微信号: 成长之路