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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,302评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,563评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,433评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,628评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,467评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,354评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,777评论 3 387
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,419评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,725评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,768评论 2 314
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,543评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,387评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,794评论 3 300
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,032评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,305评论 1 252
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,741评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,946评论 2 336

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,709评论 1 92
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,452评论 1 19
  • 七月半不宜出门,这是我今天得出的结论。不要问我为什么,因为。。。。。。 跑步。现在我的内心是拒绝的,还是那种极...
    左岸啊阅读 187评论 0 1
  • 对于想象力丰富的人来说,他们总会想到解决孤独无聊的办法。不知从什么起我渐渐地相信了那种感觉:纵然我能看到的最远的地...
    高山磊磊阅读 334评论 0 0
  • CommonJS是在推行Node.js时建立的一个模块化的规范制度,他的模块就指对象,输入时必须查找对象的属性,就...
    _花阅读 418评论 0 1