CSS 面试题解答

阅读 5774
收藏 158
2017-02-25
原文链接:www.jianshu.com

问:什么是CSS reset

在不同浏览器之间,默认样式有着诸多差异和问题,而为了在不同浏览器之间具备相同的视觉效果,开发人员往往会在样式表文件中引入一段CSS代码,如meyerweb.com/eric/tools/…,我们把这个过程叫做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中很多属性可设置多个值,如marginpaddingborderfontbackground等,尽量直接对该属性设置多个值,避免多个值分开设置,如

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,同样是最后的规则生效。

写在最后

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

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

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

原文链接

评论