Skip to content

Latest commit

 

History

History
279 lines (208 loc) · 13.6 KB

6.md

File metadata and controls

279 lines (208 loc) · 13.6 KB
Raw

前端面试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;
  }

    详细可阅读：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 方面的知识可以参考：

  • 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;
    }
  }

    可参考：

  • 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 吗？

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