问:什么是CSS reset
在不同浏览器之间,默认样式有着诸多差异和问题,而为了在不同浏览器之间具备相同的视觉效果,开发人员往往会在样式表文件中引入一段CSS代码,如http://meyerweb.com/eric/tools/css/reset/reset200802.css,我们把这个过程叫做CSS reset。
当然,好处就和他的作用一样。但是我们应该认识其缺点,很多如排版标签,列表标签等这样的语义元素就失去了他的意义,在没有为其设置其他样式时,视觉上和其他内容也没了区别;如果页面内有第三方内容嵌入,则会影响第三方内容的视觉效果;而很多开发人员更是直接百度一段代码,复制到自己的项目中,我认为这样的开发是不负责任的。
个人认为在项目中可根据需求对一些全局样式进行设置,如字体,字号等,而对于元素的样式设置应该通过选择器精确的设置。在项目中,本人一般都会建立一个基础的样式文件,里面编写通用的类选择器,在需要的元素上添加类名达到重置的效果。如
.no-padding {padding: 0;}
.only-content {padding: 0;margin: 0;border: 0}
<body class="only-content user-difined-className"></body>
问: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,同样是最后的规则生效。
网友评论
按a-b-c-d顺序。a表示是否为style属性,是则为1,否则为0;b表示选择器ID的个数;c表示选择器中类,伪类,以及其他元素的个数;d表示元素名称和伪元素的个数。如form#form1 input[type=number] + label.input-label:before {…} 可表示为a=0 b=1 c=2 d=4
abcd都是用0到255表示