前端面试CSS 相关问题
-
Q：描述下 “reset” CSS 文件的作用和使用它的好处。
A：
- 作用以及好处：因为各个浏览器默认对CSS的渲染有差异，"reset" CSS 通过重新定义标签样式，对浏览器进行默认样式“清零”重置，样式保持一致。
- 不足:
- css文件大小增加；
- 许多样式本身就需要重置，多此一举；
- 增加浏览器对CSS 的渲染。
可以阅读以下文章增强了解：
-
Q: 解释下浮动和它的工作原理。
A: 浮动出现的最开始出现的意义是用来让文字环绕图片而已。
float可以自动包裹元素。float会导致高度塌陷。float为什么会导致高度塌陷：元素含有浮动属性 –> 破坏inline box–> 破坏line box高度 –> 没有高度 –> 塌陷。什么时候会塌陷：当标签里面的元素只要样子没有实际高度时会塌陷。浮动会脱离文档流。产生自己的块级格式化上下文。可以阅读以下文章增加理解：
-
列举不同的清除浮动的技巧，并指出它们各自适用的使用场景。
-
直接把
<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: 你最喜欢的图片替换方法是什么，你如何选择使用。
A:
- 一些图标是使用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; } -
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 方面的知识可以参考：
-
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 吗？
A:
@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; } }可参考：
-
Q:你熟悉 SVG 样式的书写吗？
A:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <circle cx="40" cy="40" r="24" style="stroke:#006600; fill:#00cc00"/> <text x="250" y="150" font-family="Verdana" font-size="10px" fill="blue">Hello, out there</text> <defs><style type="text/css"> <![CDATA[.sample{stroke:blue;fill:#0080FF;opacity:1;}]]></style></defs> <use xlink:href="#sample1" class="sample"/> </svg>教程参考: SVG教程
-
Q: 如何优化网页的打印样式？
A:
<link rel="stylesheet" type="text/css" media="screen" href="xxx.css" />
其中media指定的属性就是设备，显示器上就是screen，打印机则是print，电视是tv，投影仪是projection。
<link rel="stylesheet" type="text/css" media="print" href="yyy.css" />
但打印样式表也应有些注意事项：
1 打印样式表中最好不要用背景图片，因为打印机不能打印CSS中的背景。如要显示图片，请使用html插入到页面中。
2 最好不要使用像素作为单位，因为打印样式表要打印出来的会是实物，所以建议使用pt和cm。
3 隐藏掉不必要的内容。（@print div{display:none;}）
4 打印样式表中最好少用浮动属性，因为它们会消失。
如果想要知道打印样式表的效果如何，直接在浏览器上选择打印预览就可以了。
-
Q: 书写高效 CSS 时会有哪些问题需要考虑？
A:
- 样式是：从右向左的解析一个选择器
- 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 吗？
- 如果有，请问在性能和效率的方面你是怎么看的？
