首页 / HTML / 前端开发面试题（一）_html/css_WEB-ITnose

前端开发面试题（一）_html/css_WEB-ITnose

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了前端开发面试题（一）_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8218字，纯文字阅读大概需要12分钟。

内容图文

前一段时间应聘了一家公司，由于面试前完全没有做准备，面试过程中被问到了一些基础的前端开发问题我没答出来，对方认为"和我们期望的水平还有一定差距"为由拒绝我。

刚好我在github看到一篇很全的前端开发面试题目，所以就尝试自己整理一份答案出来。这篇文章的初衷是希望能够和大家互相讨论交流一下，如果我有错误的地方十分欢迎指出来。

PS: 我不认为单纯通过做题能够成为一名优秀的开发者，但是如果因为没有准备充足错失去机会是一件更糟糕的事（有这种经验的人会认同我的）。

CSS相关问题

1. class和id的区别

如果元素具有唯一性，就考虑使用id；如果元素会多次出现，就是用class。值得注意的是，id的优先级比class高。

"CSS doesn't care,But Javascript care"

如果id和class用的不恰当，在JavaScript中就会遇到问题。例如getElementById返回一个对象，而getElementByClassName就会返回一个数组。

2. 描述下"reset"CSS文件的作用和使用它的好处

每个浏览器对于不同元素的css样式的默认值是不一样的，使用reset可以统一css样式。
常见的reset方法有：

* {	margin: 0;	padding: 0;}

  • 期待能够指出它的负面影响，或者提到它的一个替代者normalize

    使用reset方法会有个很大弊端，因为它清除了所有元素的margin和padding。实际上，对于某些元素保留一定的padding和margin是有好处的。

    normalize是一个比较理想的解决方案。它统一了css的默认样式，同时对相应的元素初始化了默认值。一些比较流行的库例如bootstrap已经事先引入了normalize。

    • 3. 解释一下浮动和它的工作原理

  • 浮动的工作原理：

    如果对一个元素设置浮动，它就会脱离文本流直到碰到框的最左或者最右，普通流的其他元素会取代它原本的位置。
    值得注意的是，如果框太窄不足容纳多个浮动元素，多出来的浮动的元素会出现在下一行；如果先前的元素高出其他浮动元素，可能导致下一行的浮动元素被"卡住"，接触不到下一行的边框。

    • 4. 描述z-index和叠加上下文是如何形成的

    z-index属性设置元素的堆叠顺序，数值越大的越靠前。注意，z-index的值可以是负数，并且只在元素设置定位(比如position:absolute)才可形成。

    点击查看CodePen示例

    顺便加一句，firefox为web开发者增添了3D视图的功能。pretty neat, huh?

    5. 列举不同的清除浮动的技巧，并指出它们各自适应的场景

  • 元素溢出

    浮动会出现一个问题，由于浮动的元素脱离了文本流，如果框的高度不足以包含浮动元素，浮动的元素就会"溢出"。

  • 清除浮动元素溢出的方法

  • 设置空标签：

    • 在框内设置一个空标签

    , 空标签的CSS样式： 
    .clear {	clear: both;}

    这个方法的弊端是增加了无意义的标签。

    点击查看CodePen示例

  • 框架同时设置为浮动

    • 把框架（包含浮动元素的元素）同时设置成浮动，子元素会被完全包含。这种方法的弊端是，下一个元素也会收到这个浮动框架的影响，没有从根本上解决问题。

  • 添加:after伪元素

    • 这个办法其实本质上和设置空标签是一样的，只不过这里是用css样式在框内设置一个伪元素，然后把这个元素设置clear:both之后隐藏起来(height:0;visibility:hidden;)。

    #parent:after {	content: '.';	height: 0;	visibility: hidden;	display: block;	clear:both;}

    需要注意的是，如果不把伪元素的高度设置为0，框内最底部就会多出几行空白像素。

    点击查看CodePen示例

  • 框架设置overflow

    • 父级元素设置样式：

    #parent { overflow: hidden; zoom: 1;}

    zoom: 1;用于兼容ie浏览器

    点击查看CodePen示例

    6. 解释下CSS sprites，以及你要如何在页面或者网站中使用它

    css sprites就是把网站的一些图片整合到一张图片当中，利用css的background属性把对应的图片需要的部位显示出来，达到减少请求数的目的。

    css sprites最大的优点是减少请求数，并且减少图片的字节数。弊端是开发比较繁琐，难以适应高分辨率的图片。

    点击查看CodePen示例

    如果只是单纯现在自己的页面添加一些icon，强烈推荐font-awesome。

    7. 你最喜欢的图片替代方案是什么，你如何选择使用

    图片替代就是在使用图片来替换文档中原来的文本内容，达到文本内容无法渲染的视觉效果。图片替代的弊端是增加请求，而且会障碍人士和seo都不是十分友好。一般常用的图片替代方案有:

  • FIR方法

    点击查看CodePen示例

    • 这种方法是添加一层包裹需要替换的内容，这新添加的一层上面设置background。需要替换的内容设置为display:none;
    这种做法是相对比较简便的，也对seo比较有利。弊端是添加了多余的div。

  • Phark方法

    点击查看CodePen示例

    • 这种方法主要是这是text-indent属性。text-indent属性通常用于这只第一行文本的缩进，可以未负值。所以可以用text-indent: -999px;把文本内容缩进超出了视图范围以外。这种方法的好处的支持障碍人士的阅读器，是比较常用的替代方案。

    8. 讨论css hacks，条件引用或者其他

    不同的浏览器对于不同css样式解释不一样，因此导致生成不同的页面效果。css hacks是针对不同的浏览器的特性，编写在不同浏览器上显示相等的效果；反过来，也可以针对不同浏览器编写出不同的页面效果。

    9. 如何为有功能限制的浏览器提供网页？

  • 你会使用哪些技术和处理方法？

    • 10. 有那些隐藏内容的方法（如果还要要保证屏幕阅读器可用呢？）

  • display:none;

    display:none;不会为元素保留物理空间，所以某些搜索引擎过滤掉，所以这种做法对于seo不利。

  • visibility:hidden;

    这种做法会占据物理空间，破坏页面结构，不推荐使用。

  • overflow: hidden;

    hello this will not be display

    .hide {	display: block;	overflow: hidden;	width: 0;	height: 0;}

    这是一种比较合理的处理办法，把文本内容设置为块级元素，然后撤销它的高度和宽度，在把超出的部分隐藏起来。既不影响seo，又达到了隐藏的目的。

    • 11. 你用过栅格系统吗？如果使用过，你最喜欢哪种？

    Bootstrap。Bootstrap是个比较Nice的框架，即使是初学者也很容易掌握。它预定义了大部分比较常用的css样式，除此之外还包含了一堆有很有的组件，你需要做的只不过是给标签添加上适当的class它就会为你完成工作。你还可以利用less/sass更改源码，自定义你需要的样式。

    Bootstrap的栅格系统把一行最多分为12列，你可以组合成3x4列，4x3列，2x6列等；然而分成12列是不能完全适应到所有的应用场所。比如，我先把一行平均分为5列，它就无能为力了。

    另外，使用Bootstrap还有个比较严重的弊端。如果你的页面很依赖Bootstrap，你在标签上面定义的class会飞涨！如果你再加上AngularJS，项目的html文档很快就会变得无法管理。

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

    13. 你熟悉SVG样式的书写吗？

    14. 如何优化网页的打印样式？


    以上为打印样式表，定义打印样式表需要注意的是：

  • 不要使用背景图片
  • 使用pt或者cm作为单位
  • 不要设置浮动元素

    • 15. 在书写高效CSS时会有哪些问题需要考虑？

  • 选择器效率

    > CSS选择器效率从高外低的排序为：
    1. id选择器（#header）
    1. class选择器（.container）
    2. tag选择器（div，p）
    3. siblings选择器（h2+p）
    4. 子选择器（li>ul）
    5. 后代选择器（ul a）
    6. 属性选择器（type="text"）
    7. 伪类、伪选择器（a:hover）

  • 组合选择器

    通常我们编写组合选择器（如ul li）是从左往右编写的，但是浏览器解析是从右外左的；也就是说，浏览器会从右外左遍历所有选择了的元素，在倒过来从DOM树的最顶端往下解析一次。

  • 关键选择器

    正如上面所解析的原理，假设我有```#box a {}```这条规则；浏览器会选中DOM树中所有的a标签，然后再一条一条检查这些a标签是否有一个id为box的父元素，这种做法会耗费太多浏览器资源。

    解决办法是给需要选中的a标签添加一些关键词， 例如#box a.item {}

  • 过度限制选择器

    一部分新手会这样写规则:> html body div#nav ul li a { ... }

    不要笑，我是认真的。我以前也认为这种写法可能更加便于浏览器找到我想要的东西，
    但是实际上正好相反。我们来还原一下浏览器解析这段规则的过程: 浏览器从右解析，抓去DOM树所有的标签，一个一个检查它们是不是有一个

  • 的祖先元素；把它们提取出来后，再一个一个检查它们同时有一个拥有
      祖先元素的
    • 元素...好的，你现在知道我不是在开玩笑了。

    • 现在你知道为什么#nav a { ... }比#nav li a { ... }高效了吧?

    16. 使用CSS预处理器的优缺点有哪些？（SASS、Compass、Stylus、LESS）描述一下你使用过的CSS预处理器的优缺点

    CSS预处理器是一种语言来增加CSS的"可编程性"，一般的预处理器都支持变量，嵌套，Mixin等高级功能。用于提高css样式的编写效率，提高可维护性等。

    缺点是，学习成本提高了，无形中会增加了团队的沟通成本。

    17. 如果设计中用到了非标准字体，你该如何去实现？

    相比英文字体，中文字体的选择在网页设计中有很大的局限性。原因是中文字体比英文字体字符多太多，一套英文字符顶多是26个字母再加一些符号；一套汉字每个字都是不同的字符，一套完整的字符至少也有几个MB。

    国外的网站开发通常会引用一些厂商提供的Web Fonts(比如Google Fonts)，但是这套方案由于上文提到的原因对汉字不适用。

    通常，开发者偏向于使用系统自带的字体，这样就可以减少请求了。但是使用操作系统自带的字体会遇到另外的问题。由于操作系统自带的字体本来就不多，相互之间几乎没有交集，针对Mac OS系统写的网站，可能在PC上面显示得很糟糕。

    幸好CSS提供了一个比较合理的解决办法。我们可以使用CSS的font-family属性来引用多种字体。font-family属性的规则是：

    1. 优先使用最前的字体
    2. 如果找不到字体，则使用下一个指定的字体
    3. 如果都没法满足，则使用系统默认的字体

    示例：

    font-family: Georgia, "Times New Roman",              "Microsoft YaHei", "微软雅黑",              STXihei, "华文细黑",              serif;

    不好意思，好像跑题了。题目问的是『设计中用到了非标准的字体』。如果是这种情况，最好的办法应该是：

    如果是英文，可以考虑使用Web Fonts；如果是Logo/Icon等，使用图片替代；文本内容使用font-family尽量做到与设计相近。

    （待续）

    内容总结

    以上是互联网集市为您收集整理的前端开发面试题（一）_html/css_WEB-ITnose全部内容，希望文章能够帮你解决前端开发面试题（一）_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

    内容备注

    版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

    内容手机端

    扫描二维码推送至手机访问。

    本文链接：https://qyyshop.com/info/401802.html

    来源：【匿名】