前端开发面试题及答案

1 / 15 前端开发面试题及答案 标记引入样式 ：加载顺序的差别。当一个页面被加载的时候， 用的 同时被加载，而 用的 以在 再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，如： - 这样做有一个缺 点，会对网站服务器产生过多的 前是一个文件，而现在却是两个或更多文件了。服务器的压力增大，浏览量大的网站还是谨慎使用。 择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和 个优先级高？ 通配选择符 * 类型选择符 Etd4px;20? 属 性 选 择 符Eh* 所有具有 性的 h 对象2 / 15 */ a“? 包 含 选 择 符4? 子 对 象 选 择 符24 ID 类选择符 选择符分组 2,E3 伪类及伪对象选择符 E:(:可以继承的有： 可 继 承 的 一 般 有 ：3 / 15 = 关于 性或称非凡性，它是衡量一个衡量 然作为标准，就具有一套相关的判定规定及计算方式， 一个四位的数字串 (来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。 在多个选择符应用于同一个元素上那么 选择符 列表： 规则： 为 1,0,0,0，高于外部定 义。 如： 部定义指经由或标签定义的规则； 2.!明的 最高； 一样的情况下，按 码中出现的顺序决定，后者 计算，它低于一切其他规则 (比如全局选择符 *定义的规则 )。 4 / 15 算法： 当遇到多个选择符同时出现时候，按选择符得到的逐位相加， 数 位 之 间 没 有 进 制 比 如 说 ：0,0,0,5+0,0,0,5=0,0,0,10 而不是 0,0,1,0就得到最终计算得的 后在比较取舍时按照从左到右的顺序逐位比较。 实例分析： 2 分析： 1个元素 为 0,0,0,1 分析： 3个元素 ,0,0,3 2 分析： 1 个元素 为 0,0,0,1;1个类选择符 为 0,0,1,0 最终： 为 0,0,1,1 2 分析： 1 个元素 为 0,0,0,1;1个类选择符 为 0,1,0,0 最终： 为 0,1,0,1 p 5 / 15 分析： 6个元素 为 0,0,0,6;1 个 属 性 选 择 符1为 0,0,1,0;2 个其他选择符 为 0,0,0,0 最终： 为 0,0,1,6 !优先级最高 使用 !以 改变优先级别为最高，其次是后是 id外在同级样式按照申明的顺序后出现的样式具有高优先级。 别是什么？作用是什么？ 网页分成三个层次，即：结构层、表示层、行为层。 网页的结构层（ 签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如， P 标签表达了这样一种语义： “ 这是一个 文本段。 ” 网页的表示层（ 责创建。 如何显示有关内容 ” 的问题做出了回答。 网页的行为层（ 责回答 “ 内容应该如何对事件做出反应 ” 这一问题。这是 言和 6 / 15 选择器 属性 1:值 1;属性 2:值 2;? 些浏览器的内核分别是什么 ?经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么 ？ 核浏览器： 360，傲游，搜狗，世界之窗，腾讯 倍边距的问题，在使用了 情况下，不管是向左还是向右都会出现双倍，最简单的解决方法就是用 到 面去。 样是 4不同浏览器下占的空间是不一样的， 6留白 37留白 1留白 3就更不一样了。解决方案：给文字设定 保所有文字都有默认的 点很重要，在高度上我们不能容忍 1差异。 容器定义了 器边框的外形就确定了，不会被内容撑大，而 是会被内容撑大，高度限定失效。所以不要轻易给容器定义 向上的。如果 15 容器未定义宽度， 内容会尽可能撑开容器宽度， 则会优先考虑内容折行。故，内 容可能撑破的浮动容器需要定义 外层元素内有 层 元 素 如 定 义 4 将 自 动 生 成4是 类 不只这一种出现条件，还没系统整理。解决方案：外层元素设定 于篇幅，我就不展开了。还是 下两 个 面的 置背景，却发现下面没有设置背景的 就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。解决方案：使用。这个 象是专门为解决 生的。 “ 多出来的一只猪。 ” 这是前人总结这个 用的文案， 这个 ，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用 “方法写注释。 是一个典型的，棘手的兼容问 题，希望引起大家正视，给 的解释会让你摸不着头脑，由8 / 15 于问题的复杂性，将另起一文专门讨论该问题。在 文里有相关成果，却没给出问题解决的过程。 的留白。解决方案：给 定 字，很遗憾，在 单行文字 果消失了。原因是这个 素写在一起了。解决方案：让 文字都 来。 态。 a:00们想让鼠标 ，链接里包含的图片宽度变化，可惜在 态。 这样的样式 有效果。 其下的绝对层者相对层 效。解决方案：给 者另， 持 者 素如没定义宽度，内部如有 义了 ，这个 会占满一整行， 即使你给了宽度。 素如果作为布局用或复杂的容器，都要给个宽度的。 9 / 15 的 对定位的 包含相对定位的 果给内层相对定位的 度 体值，内层相对层将具有 100%的 层绝对层将被撑大。解决方案给内层相对层 有的情况下， 缺点。 00%这个东西在向上 逐层搜索 视浮动层的影响， 此，只能给中间的所有浮动层加 00%才行，累啊。 点倒学乖了跟了 设置容器的浮动方式为相对定位，然后确定容器的宽高，比如宽 500高 300的层，然后设置层的外边距。 00px;001500%;0%; 注 有请简单说一些您对它们的了解情况！ ,等 影，对文字加特效，增加了更多的 10 / 15 会如何来管理所有 的前景会怎么样？ 1、列举你工作中遇到的 谈解决方案。 作为一名前端，我们通常要做的就是让页面在各系统浏 览器上良好显示。当然，还有性能问题。不过，今天要说的是样式的兼容问题。在 分天下 的 今 天 ， 系 列/这些浏览器的兼容，无不让前端们头痛。而在这之中，最让人头痛的当数 别是 定了 本也就能称霸半个江山了。搞定了 相当于占领了 7、 80%的领地。 1、 倍边距 如为一个 0 在0是在 0就是说，在与浮动同方向的空白边会加倍，解决方法是为这个 添加：这样就可避免双倍边距 2、像素问题及解决办法 当使用 动容器后，在 为是确切的 3以，用 “ 暴 吧，比如 1 / 15 _3还有一种 方法是也设置 ：样式： 00px;00px;096; 00px;00px;39F; 在 在 在 览状态下，我们看到。绿色 蓝色 就是 像素 。 结果： 3、当子元素浮动且未知高度时，怎么使父容器适应子元素的高度？ 这种情况可在父窗口加上 ;这两个样式属性， 让父容器来自适应内部容器的高度， _;是为了兼容 4、 奇数宽高的 有奇数宽高的 决方案就是将外部相对定位的 12 / 15 5、 为什么图片下方有空隙产生 解决这个 方法也有很多，可以是改变 排版，或者定义 者 定 义 性 值 为 可以设置父容器的字体大小为零， 6、 空标签高度问题 一个空 果高度设置为 0 到 19高度默认始终 19 例如： .c*给定任何小于 20高度 */ 如果不让它默认为 19是 0话 解决方法有 3 种： 1.) 2.) 3.) ;然后 面加上# (#换成 &) 2、如何用 别单独定义 7、 8 的 13 / 15 性。 所有浏览器 通用 100用 _100用 *100用 *+100用 1003、 哪些属性可以同父元素继承。 继承：文本类的均可继承，列表元素可继承 4、你如何理解 候能让页面呈现清晰的结构： 身是没有表现的，我们看到例如是粗体，字体大小 2粗；是加粗的，不要认为这是 表现，这些其实 认的 式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的 构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达 语义，可以说浏览器的默认样式和语义化的 14 / 15 果访客有视障）会完全根据你的标记来 “ 读 ” 你的网页 . 例如 ,如果你使用的含 语义的标记 ,屏幕阅读器就会“ 逐个拼出 ” 你的单词 ,而不是试着去对它完整发音 . 机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对 . 使用语义标记可以确保这些设备以一种有意义的方式来渲染网页 观看设备的任务是符合设备本身的条件来渲染网页 . 语义标记为设备提供了所需的相关信息 ,就省去了你自己去考虑所有可能的显示情况（包括现有的或者将来新的设备） 一部手机可以选择使一段标记了标题的文字以粗体显示 大的字体来显示 您就可以确信读取设备将根据其自身的条件来合适地显示页面 . 过去你可能还没有考虑搜索引擎的爬虫也是网站的“ 访客 ”, 但现在它们他们实际上是极其宝贵的用户 搜索引擎将无法索引你的网站 ,然后一般用户将很难过来访问 . 因为爬虫15 / 15 很大程度上会忽略用于表现的标记