手记

前端面试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: 你最喜欢的图片替换方法是什么,你如何选择使用。

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;
}
详细可阅读: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+已经不再支持条件注释): <!--[if IE]>IE浏览器显示的内容 <![endif]-->,针对IE6及以下版本: <!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->。这类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
条件判断 <!--[if !IE]><!-->除IE外都可识别 <!--<![endif]-->
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;
}
}
可参考:

CSS媒体查询
使用 CSS 媒体查询创建响应式网站
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 吗?

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

11人推荐
随时随地看视频
慕课网APP

热门评论

挺好的,都是一些比较基础的问题。

查看全部评论