Front-end-Developer-Interview-Questions面试题笔记(二)CSS篇

CSS Questions:

  1、CSS 中类(classes)和 ID 的区别。

  首先,选择器不同class用.而ID用#,class更倾向于类的说法,而ID更像是特例,优先级不同,ID高于class

  2、描述下 “reset” CSS 文件的作用和使用它的好处。

  是指*{margin:0;padding:0}这种东西吗?但是这种东西还是用到哪个元素重置哪个,不要用*,原因因为不同浏览器对不同元素的默认属性不一致,会导致页面在不同浏览器显示效果不一样。

  3、解释下浮动和它的工作原理。

  float可以向左或者向右,某个元素应用float以后他会向左或者右紧靠边框或者另一个浮动元素,这个元素会脱离文档流,行内元素会包裹他,其实很类似word文档里插入图片,然后让他浮动起来以后的效果。因为浮动以后脱离了文档流所以会造成的包裹他的元素无法被撑开,所以一般都会有很多方法去清理浮动了(其实应该是清理浮动造成的影响)。

  4、描述z-index和叠加上下文是如何形成的。

  因为页面是二维的,而z-index是垂直于页面的第三维,z-index值越大就会越处于遮盖的上层,z-index也允许负值,没有应用z-index的元素默认为0。

  5、列举不同的清除浮动的技巧,并指出它们各自适用的使用场景。

  具体可以参考这里http://www.cnblogs.com/ForEvErNoME/p/3383539.html

  

  6、解释下 CSS sprites,以及你要如何在页面或网站中实现它。

  将很多图片都放在一张图片上,然后通过坐标来取出不同的元素。实现就是先设置窗口的大小width和height,然后设置overflow:hidden将窗口以外的东西隐藏了,然后设置backgroundposition的X,Y坐标,可以想成是在移动后面的图片,然后这样就让想要出现的东西从窗口中显示出来,负值就是向左向上移,一般来说图片的左上角是0,0,所以通常X,Y坐标都会是负值。

  7、你最喜欢的图片替换方法是什么,你如何选择使用。

  这个我确实没了解过,也没用过,参考这个吧http://ce.sysu.edu.cn/hope2008/beautydesign/ShowArticle.asp?ArticleID=12696

  大体上就是,为了设计上的好看,用了图片,但是为了seo也不能把文字给去掉,所以出现了这种显示是图片,但是文字也会存在的技术。

  8、讨论CSS hacks,条件引用或者其他。

  用于区分不同浏览器,主要用于兼容性的处理。

  具体参考http://www.duitang.com/static/csshack.html

  9、如何为有功能限制的浏览器提供网页?你会使用哪些技术和处理方法?

  具体功能有多差劲啊,而且是指哪方面的功能啊?呃,这个还真没思考过,用多点图片来替代css吗?。。。。 

    

  10、有哪些的隐藏内容的方法(如果同时还要保证屏幕阅读器可用呢?)

  • display:none
  • visibility:hidden
  • overflow:hidden

  11、你用过栅格系统吗?如果使用过,你最喜欢哪种?

  用过bootsrap,传统的栅格系统。

  12、你用过媒体查询,或针对移动端的布局/CSS 吗?

  媒体查询用过,移动端确实没什么太多经验。

  13、你熟悉 SVG 样式的书写吗?

  有所了解,没有实际运用过。

  14、如何优化网页的打印样式?

  打印的话就做过局部打印,这个确实没有太多经验。

  15、在书写高效 CSS 时会有哪些问题需要考虑?

  以下摘自互联网:

    • 使用Reset但并非全局Reset 
    • 良好的命名习惯 
    • 代码缩写 
    • 利用CSS继承 
    • 使用多重选择器 
    • 给你的CSS代码排序 
    • 保持CSS的可读性 
    • 选择更优的样式属性值 
    • 使用<link>代替@import 
    • 使用外部样式表 
    • 避免使用CSS表达式(Expression) 
    • 代码压缩 

  

  16、使用 CSS 预处理器的优缺点有哪些?(SASS,Compass,Stylus,LESS)描述下你曾经使用过的 CSS 预处理的优缺点。

  用过LESS,仅限于简单的尝试,没有应用于实际的项目中,优点来说,结构更清晰吧,而且可以继承,这个很方便,缺点的话就是需要额外的工具来编译吧。

  17、如果设计中使用了非标准的字体,你该如何去实现?

  是指webfonts吗?中文字体的话还是算了吧。

  

  18、解释下浏览器是如何判断元素是否匹配某个 CSS 选择器?

  通过选择器的权值累加来判断,标签里写style(1000)、ID选择器(100)、class选择器(10)、元素选择器(1),!important可以出现在任何选择器中,他出现就有限匹配他。

  19、解释一下你对盒模型的理解,以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。

  盒模型包括margin、border、padding和content,W3C的标准是width和height就是content的宽和高,而IE默认盒模型的width和height是包含了border、padding和content的。box-sizing:content-box(w3c标准盒模型),border-box(IE类盒模型)。

  20、请解释一下 * { box-sizing: border-box; } 的作用, 并且说明使用它有什么好处?

  这就是将所有元素的border和padding算在width和height里了,就变成了ie的盒模型了。

  21、请罗列出你所知道的 display 属性的全部值

  block、none、inherit、inline、inline-block、table、table-row、table-cell,就能记住这些了。

  22、请解释一下 inline 和 inline-block 的区别?

  行内元素和行内块级元素,最基本的区别就是inline元素不能设置宽高边距,inline-block则可以,block是块级元素是独占一行的,inline-block就是能放在一行的block。关于这个问题,低版本的ie是有bug的,通过再次设置display为inline可以解决。

  

div{
    display:inline-block;
}
div{
    display:inline;
}

  

  23、请解释一下 relative、fixed、absolute 和 static 元素的区别

  • relative相对于自己
  • fixed相对于浏览器
  • absolute相对于第一个非static的父级元素
  • static无定位

  24、The 'C' in CSS stands for Cascading. How is priority determined in assigning styles (a few examples)? How can you use this system to your advantage?(CSS的优先级?)

  采用权值相加的方式来适配权值最高的css,具体权值:标签里写style(1000),id选择器(100),class选择器(10),标签(1),还有!important可以写在任何地方,而且优先级是最高的。

  25、你目前在使用哪一套CSS框架,或者在产品线上使用过哪一套?如果有,请问是哪一套?如果可以,你如何改善CSS框架?

  以前用过ligerui、easyui现在用的就是bootstrap了,这些虽然不是纯css框架,我确实没用过什么纯css框架,也基本没有去改善他们了。

  26、请问你有使用过 CSS Flexbox 或者 Grid specs 吗?如果有,请问在性能和效率的方面你是怎么看的?

  没有。

  27、响应式设计(responsive design)和自适应设计(adaptive design)不同?

  都是对于不同分辨率页面做出调整的设计,响应式是会根据不同分辨率出现不同布局的页面,而自适应的话是页面总体布局不变,内部样式改变,其实可以理解bootstrap里的传统栅格布局和流式栅格布局吧?

  28、你有兼容 retina 屏幕的经历吗?如果有,在什么地方使用了何种技术?

  没有。

原文地址:https://www.cnblogs.com/xnn5566/p/4360816.html