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 屏幕的经历吗？如果有，在什么地方使用了何种技术？

　　没有。