美文网首页前端开发精选文章我爱编程
关于别人前端面试的问题的回答(CSS篇)

关于别人前端面试的问题的回答(CSS篇)

作者: 请叫刘某 | 来源:发表于2017-02-22 21:57 被阅读1193次

    问:什么是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中很多属性可设置多个值,如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,同样是最后的规则生效。

    相关文章

      网友评论

      • 坤少卡卡:请教下楼主对权重的详细看法,我曾记得有人说256个class才能干掉一个id选择器,好像是跟内存溢出有关。我个人也实践了下十几个class也无法覆盖id的情况。谢谢:grin:
        坤少卡卡:@请叫刘某 涨知识了!谢谢楼主的付出
        请叫刘某:@坤少西西 关于内存溢出,个人认为是因为一个字节只有八位,所以会溢出。当然我也不知道浏览器这个计数是怎么记的,所以只是猜测
        请叫刘某:@坤少西西 所谓255个class覆盖一个id,是因为css的特异性规则,你可以看我这篇文章的后一篇。
        按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表示
      • JS大神:毫无尿点
        请叫刘某:@山本57 谢谢

      本文标题:关于别人前端面试的问题的回答(CSS篇)

      本文链接:https://www.haomeiwen.com/subject/ocfvwttx.html