前端面试CSS 相关问题@慕课网原创_慕课网

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

A：

作用以及好处：因为各个浏览器默认对CSS的渲染有差异，"reset" CSS 通过重新定义标签样式，对浏览器进行默认样式“清零”重置，样式保持一致。
不足:

css文件大小增加；
许多样式本身就需要重置，多此一举；
增加浏览器对CSS 的渲染。
可以阅读以下文章增强了解：

CSS reset的重新审视 – 避免样式重置
常见标签的默认属性值及相互作用——关于CSS reset的思考
reset.css
前端面试问题
Q: 解释下浮动和它的工作原理。

A: 浮动出现的最开始出现的意义是用来让文字环绕图片而已。float可以自动包裹元素。float会导致高度塌陷。float为什么会导致高度塌陷：元素含有浮动属性 –> 破坏inline box –> 破坏line box高度 –> 没有高度 –> 塌陷。什么时候会塌陷：当标签里面的元素只要样子没有实际高度时会塌陷。浮动会脱离文档流。产生自己的块级格式化上下文。

可以阅读以下文章增加理解：

CSS float浮动的深入研究、详解及拓展(一)
CSS float浮动的深入研究、详解及拓展(二)
那些年我们一起清除过的浮动
《CSS权威指南》
列举不同的清除浮动的技巧，并指出它们各自适用的使用场景。

直接把<div style="clear:both;"></div>放到当作最后一个子标签放到父标签那儿，此方法兼容性强，使用方便，但是浪费了一个标签，而且只能使用一次，而且有时候如果不注意中间多了个空格会产生一段空白高度。
优点：通俗易懂，容易掌握；
缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦。
如下:

.clearfix{overflow:hidden; zoom:1;}
此方法优点在于代码简洁，涵盖所有浏览器，可是对于overflow:hidden;要是里面的元素要是想来个margin负值定位或是负的绝对定位，岂不是直接被裁掉了，所以此方法是有不小的局限性的。

优点：不存在结构和语义化问题，代码量极少；
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
如下：

.fix{zoom:1;}
.fix:after{
display:block;
content:'.';
clear:both;
line-height:0;
visibility:hidden;}
line-height:0写成height:0也是可以的。不会影响任何其他样式，通用性强，覆盖面广，我很推荐哦。

父元素也浮动：
优点：不存在结构和语义化问题，代码量极少
缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用
总结：

其一，通过在浮动元素的末尾添加一个空元素，设置 clear：both属性，after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素；
其二，通过设置父元素 overflow 或者display：table 属性来闭合浮动，这里的原理涉及到BFC，不再赘述。
同样请参考上一题给出的参考文章进行阅读加以理解。

Q: 解释下 CSS sprites，以及你要如何在页面或网站中使用它。

A: CSS Sprites就是把网页中一些小图片整合到一张图片文件中，再利用CSS的background-image，background- repeat，background-position的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。可以减少http请求。

Q: 你最喜欢的图片替换方法是什么，你如何选择使用。

一些图标是使用before和after伪元素;
还有一些使用iconfont;
使用sprite图;
用背景图片代替图片。

举个栗子：

<h1 class="nir">[content]</h1>
.nir {
height: 100px; / height of replacement image /
padding: 0;
margin: 0;
overflow: hidden;
}

.nir:before {
content: url(image.gif);
display: block;
}
详细可阅读：CSS image replacement with pseudo-elements

Q：讨论CSS hacks，条件引用或者其他。

A: CSS主要由三种方法：

属性前缀法(即类内部Hack)：例如 IE6能识别下划线""和星号" "，IE7能识别星号" "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。
选择器前缀法(即选择器Hack)：例如 IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。
IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)： ，针对IE6及以下版本： 。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

<!DOCTYPE html>
<html>
<head>
<title>Css Hack</title>
<style>

test

{
    width:300px;
    height:300px;

    background-color:blue;      /*firefox*/
    background-color:red\9;      /*all ie*/
    background-color:yellow\0;    /*ie8*/
    +background-color:pink;        /*ie7*/
    _background-color:orange;       /*ie6*/
}
:root #test { background-color:purple\9; }  /*ie9*/
@media all and (min-width:0px){ #test {background-color:black\0;} }  /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }  /*chrome and safari*/
</style>

</head>
<body>
<div id="test">test</div>
</body>
</html>
想要更多的了解CSS hack 方面的知识可以参考：

史上最全的CSS hack方式一览
史上最全的css hack
Q: 如何为有功能限制的浏览器提供网页？

Q: 你会使用哪些技术和处理方法？
A: 功能限制的浏览器，比如 IE 低版本、手机浏览器、奇葩国内浏览器，会在很多功能上不符合 Web 标准，而应对的方式有这么几种：

只提供符合 Web 标准的页面；
提供另一个符合那些浏览器标准的页面(例如说移动端一套css,电脑端一套css);
兼容：这里有两种思路，一个是渐进增强，一个优雅降级。渐进增强的思路就是提供一个可用的原型，后来再为高级浏览器提供优化。优雅降级的思路是根据高级浏览器提供一个版本，然后有功能限制的浏览器只需要一个刚好能用的版本。当然，工作中的标准都是尽量满足设计，如果不能满足的话就尽量贴近，不得已（性能之类的问题）才会砍掉某个浏览器版本上的需求。
相关技术:

Media Query
CSS hack
条件判断 除IE外都可识别 
Q：有哪些的隐藏内容的方法（如果同时还要保证屏幕阅读器可用呢？）

A: display:none看不见也摸不着，屏幕阅读器更会忽略其内容；而visibility:hidden虽然看得见但是摸不着，占据了一定的物理空间，屏幕阅读器也会忽略。如果想要在读屏设备中让这些内容可见。解决方案的基本思路都是将这些内容放到屏幕、视线意外的地方，或者就是将大小设置成 0。比如 text-indent: -9999em;、overflow: hidden;、height: 0。

.texthidden {
  display:block;/*统一转化为块级元素*/
  overflow: hidden;
  width: 0;
  height: 0;
 }

更详细的方法可以参考这篇文章HIDING CONTENT FOR ACCESSIBILITY

不过既然这是了读屏而优化的，那么可以用 media query 来完成，media speech 用于语音输出的读屏设备。

@media speech {
/ media-specify rules /
}
以上转自Witcher42给出的答案。

Q：你用过栅格系统吗？如果使用过，你最喜欢哪种？

A：使用过bootstarp。易于上手，学习成本低，还能做出比较大方美观的页面。

可阅读栅格系统延续美学。

Q: 你用过媒体查询，或针对移动端的布局/CSS 吗？

@media screen and (min-width:600px) {
nav {
float: left;
width: 25%;
}
section {
margin-left: 25%;
}
}
@media screen and (max-width:599px) {
nav li {
display: inline;
}
}
可参考：

CSS媒体查询
使用 CSS 媒体查询创建响应式网站
Q:你熟悉 SVG 样式的书写吗？

Q: 如何优化网页的打印样式？

其中media指定的属性就是设备，显示器上就是screen，打印机则是print，电视是tv，投影仪是projection。

但打印样式表也应有些注意事项：

1 打印样式表中最好不要用背景图片，因为打印机不能打印CSS中的背景。如要显示图片，请使用html插入到页面中。 2 最好不要使用像素作为单位，因为打印样式表要打印出来的会是实物，所以建议使用pt和cm。 3 隐藏掉不必要的内容。（@print div{display:none;}） 4 打印样式表中最好少用浮动属性，因为它们会消失。如果想要知道打印样式表的效果如何，直接在浏览器上选择打印预览就可以了。

Q: 书写高效 CSS 时会有哪些问题需要考虑？

样式是：从右向左的解析一个选择器
ID最快，Universal最慢有四种类型的key selector，解析速度由快到慢依次是：ID、class、tag和universal
不要tag-qualify （永远不要这样做 ul#main-navigation { } ID已经是唯一的，不需要Tag来标识，这样做会让选择器变慢。）
后代选择器最糟糕（换句话说，下面这个选择器是很低效的： html body ul li a { }）
想清楚你为什么这样写
CSS3的效率问题（CSS3选择器（比如 :nth-child）能够漂亮的定位我们想要的元素，又能保证我们的CSS整洁易读。但是这些神奇的选择器会浪费很多的浏览器资源。）
我们知道#ID速度是最快的，那么我们都用ID，是不是很快。但是我们不应该为了效率而牺牲可读性和可维护性`
可参考： http://blog.jobbole.com/55067/

等我重写这道题答案。=。=

使用 CSS 预处理器的优缺点有哪些？(SASS，Compass，Stylus，LESS)

描述下你曾经使用过的 CSS 预处理的优缺点。
如果设计中使用了非标准的字体，你该如何去实现？

Webfonts (字体服务例如：Google Webfonts，Typekit 等等。)
解释下浏览器是如何判断元素是否匹配某个 CSS 选择器？

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

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

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

请解释一下 inline 和 inline-block 的区别？

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

你目前在使用哪一套CSS框架，或者在产品线上使用过哪一套？(Bootstrap, PureCSS, Foundation 等等)

如果有，请问是哪一套？如果可以，你如何改善CSS框架？
请问你有使用过 CSS Flexbox 或者 Grid specs 吗？

如果有，请问在性能和效率的方面你是怎么看的？