热搜：前端 vuedraggable 插件 vue

HTML&&CSS面试题

lxf2023-03-15 17:55:01

HTML

1.谈谈你对Web标准以及W3C的理解和认识

web标准简单来说可以分为结构、表现和行为。其中结构主要是由HTML标签组成，通俗的来说结构指的是我们写在body里面的一些标签，都是为了页面的结构。表现即css样式表，通过css使页面更具有美感。行为指的是页面和用户之间有一定的交互，使页面结构或表现发生变化，主要由JS组成。

web标准是将该三部分独立分开，使其更具模块化。但是，当行为产生的时候，结构和表现难免的会发生变化，这也使得这三个的界面并不是那么清晰。

W3C对Web标准提出了规范化的要求，也就是在实际编程中的一些代码规范：

(1)对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对SEO搜索引擎优化很有帮助）

  • 标签字母要小写
  • 标签要闭合
  • 标签不允许随意嵌套

（2）对于CSS和JS要求：

  • 尽量使用外链CSS样式表和JS脚本。使结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
  • 样式尽量少用行间样式表，使结构和表现分离，标签的id和class等属性名要做到见文起义，标签越少加载越快，用户体验提高，代码维护简单，便于改版。
  • 提高网站易用性。

2.HTML、XML和XHTML有什么区别

三者的定义：

  • HTML：超文本标记语言
  • XML：可扩展标准语言
  • XHTML：可扩展超文本标记语言

HTML是用来描述和定义网页内容的标记语言，是构成网页的最基本的东西。

所谓超文本，就是说它除了能标记文本，还能标记其他的内容，比如：图片、链接、音频、视频等。

它的作用就是一个规范，告诉所有浏览器都统一标准，比如我给这段文字加个<p>标签，那就是告诉浏览器这是一个段落，不要弄错。浏览器看到后，就会正确解析，产生相应的行为。

XML它的表现形式就是给一个文档加一堆标签，说明每段文字是干什么的。这样做的目的是方便存储、传输、分享数据，人和机器都可以方便的读。XML和HTML有一个明显的区别：HTML标签都是预定义的，你不可以自己随便添加，但是XML可以自己随意“发明”标签-这就是“可扩展”的 一个含义。

XHTML就是以XML语法形式来写HTML（XHTML是作为XML被重新设计的HTML）

XHTML出现的原因：HTML是一种语法形式比较松散的标记语言，语法要求也不严格。比如大小写可以混用，单引号或双引号随便引用。HTML标准的制定者W3C就将XML的语法形式与HTML结合，形成XHTML，所以也可以把XHTML理解为HTML的严格语法形式，除此之外，其他方面基本相同。

比如XHTML有一些强制的要求：

  • 必须包含一个文件头声明 <!DOCTYPE>
  • 所有元素名必须小写
  • 所有空元素必须关闭
  • 所有属性名必须小写
  • 所有属性名必须加引号
  • 所有布尔值属性必须加上属性值

与HTML相比最重要的区别：

文档结构

  • XHTML DOCTYPE是强制性的
  • <html>中的XML namespace属性是强制性的
  • <html> 、 <head> <title> 以及 <body>也是强制性的

元素语法

  • XHTML元素必须正确嵌套
  • XHTML元素必须始终关闭
  • XHTML元素必须小写
  • XHTML文档必须有一个根元素

属性语法

  • XHML属性必须使用小写
  • XHTML属性必须用引号包围
  • XHTML属性最小化也是禁止的

如何从HTML转换到XHTML

  1. 向每张页面的第一行添加XHTML <!DOCTYPE>
  2. 向每张页面的html元素添加xmlns属性
  3. 把所有元素名改为小写
  4. 为所有属性值加引号

HTML和XHTML的共同点

  1. 所有标记都必须要有一个相应的结束标记
  2. 所有标签的元素和属性的名字都必须是小写
  3. 所有的XML标记都必须合理嵌套
  4. 所有的属性必须用引号括起来
  5. 所有的 “<”和“&”特殊符号都用编码表示
  6. 给所有属性赋一个值
  7. 不要再注释内容中使“--”
  8. 图片必须要有说明文字

3.严格模式和混杂模式如何区分，如何触发这两种模式

DOCTYPE的定义：是一组机器可读的规则，它们指示（X）HTML文档允许有什么，不允许有什么，DOCTYPE正是告诉浏览器使用哪种DTD，一般放在（X）HTML文档开头声明，用以告诉其他人这个文档的类型风格。

DOCTYPE的作用：告知浏览器的解析器，用什么文档类型规范来解析这个文档。

DOCTYPE的种类：该标签可声明3中种文档类型，分别表示严格版本（strict），过渡版本（Transitional）和基于框架（Frameset）的HTML文档。

严格模式：就是浏览器根据Web标准去解析页面的方法，是一种要求严格的DTD，不允许使用任何表现层的语法。（就是以W3C标准解析文档）--标准模式

混杂模式：是一种向后兼容的解析方法（浏览器用自己的方式解析文档）--兼容模式

如何区分？

与网页中的DTD直接相关

如何触发？

严格模式：就是在HTML标签前声明正确的DTD

混杂模式：可以在HTML文档开始时不声明DTD，或者在DOCTYPE前加入XML声明

两种模式的差异

（1）盒模型不同

  • 严格模式：其宽高代表一个元素内容的宽高
  • 混杂模式：其宽高代表 content+padding+border

（2）设置行内元素的宽高

  • 严格模式：不能给 span 等行内元素设置 width 和 height
  • 混杂模式：可以设置

（3）设置百分比

  • 严格模式：一个元素的高度由其内容来决定。如果父元素没有设置高度，子元素设置百分比是无效的。

（4）水平居中

  • 严格模式：使用 margin: 0 auto
  • 混杂模式：用 text-aligin

（5）混杂模式下不能设置图片 padding ， table字体不能继承上层设置；混杂模式下， white-space：pre 会失效

区分严格模式和混杂模式的意义？

严格模式的排版和JavaScript运行模式以该浏览器支持的最高标准运行。

混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

严格模式和混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。

4.什么是静态网页？什么是动态网页

静态网页：指没有数据交互的网页，即没有数据库参与，没有服务器端数据的加载。比如静态网页就是只有 HTML+CSS+JavaScript做成的网站

动态网页：指有后台数据参与的网页，网页中的数据是从数据库中提取的，需要由后台逻辑的支持。比如动态网页就是JSP页面等。

5.语义化的主要目的是什么

  • 利于SEO优化（也就是搜索引擎的抓取，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重）
  • 在样式丢失的时候，还是可以比较好的呈现结构
  • 更好地支持各种终端，例如无障碍阅读和有声小说等
  • 利于团队开发和维护，W3C给我们定了一个标准，那么团队中都遵循这个标准，那么代码的差异就会缩小，在卡法和维护的时候就可以提高效率。

`语义化的主要目的是可以概括为用正确的标签做正确的事。

HTML语义化可以让页面的内容结构化，便于浏览器解析和搜索引擎解析，并提高代码的可维护度和可重用性。比如，少使用 <div> 这种无语义的标签，多使用语义化的标签 <header> <footer> 等。

6.锚点的作用是什么？如何创建锚点？

锚点是文档中某一行的一个标记，类似于书签，用于链接到文档中的某个位置。

当定义锚点后，可以创建直接跳至该锚点（比如页面中某个小节）的链接，这样使用者就无须不停地滚动页面来寻找他们需要的信息了。

在使用 <a>元素创建锚点时，可以使用 name 属性为其命名（W3C规范）

对其他元素，还可以使用 id属性为其命名，代码如下：

<h1 id="check">选择内容</h1>
<a name="school"> 选择内容</a>

然后就可以创建链接、单击链接，直接跳转到锚点，代码如下：

<a href="#check"> 选择内容</a>
<a name="#school"> 选择内容</a>

7.列举常用的结构标签，并描述其作用

结构标签专门用于标识页面的不同结构，相对于使用 <div> 元素而言，结构标签可以实现语义化的标签。

常用的结构标签有以下几种：

  • <header>元素：用于定义文档的页眉
  • <nav>元素：用于定义页面的导航链接部分
  • <section>元素：用于定义文档中的节，表示文档中一个具体的组成部分
  • <article>元素：常用于定义独立于文档其他部分的内容
  • <footer>元素：常用与定义某区域的脚注信息
  • <aside>元素：常用与定义页面的一些额外组成部分，如广告栏、侧边栏和相关引用信息

8.超链接有哪些常见的表现形式？

<a>元素用于创建超级链接，常见的表现形式有以下几种

  • 普通超级链接，语法为： <a href="http://www.baidu.com">百度</a>
  • 下载链接，即目标文档为下载资源，语法为： <a href="day.zip">下载</a>
  • 电子邮件链接，用于链接到 E-mail，语法为： <a href="mailto:2284098244@qq.com"></a>
  • 空链接，用于返回页面顶部，语法为： <a href="">...</a>
  • 锚点跳转，用于跳转到页面某一个位置，目前常用语前端路由，语法为： <a href="#school"></a>
  • 用于实现特定的代码功能，语法为： <a href="javascript:void(0);"></a>

9.div是什么？在它出现之前用什么做网站布局？

div是网站布局的盒子标签。它出现之前使用 table布局。因为 table布局嵌套很多，网站加载慢（table无法局部渲染），布局层级不清晰。

div+css布局的好处：

1.符合W3C标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。

2.布局精准，网站版面布局修改简单。

3.加快了页面的加载速度（最重要的）（在IE中要将整个table加载完了才显示内容）。

4.节约站点所占的空间和站点的流量。

5.用只包含结构化内容的HTML代替嵌套的标签，提高另外搜索引擎对网页的搜索效率。

table布局的好处（table布局也不是一点用的没有，这点是毋庸置疑的）

1.容易上手。

2.可以形成复杂的变化，简单快速。

3.表现上更加“严谨”，在不同浏览器中都能得到很好的兼容。

但是table布局的缺陷确实非常明显：table虽然修改方便，但是它会影响网站的加载速、展现。当网速很慢的话，必须加载完毕才能显示，不然没办法展现，影响网站的展示效果。

10.img标签上的 title和 alt属性的区别是什么？

title的功能是为元素提供标题信息，即当光标悬浮在标签上后显示的信息；

alt 的功能是图片的替换文字，即当图片不能正常显示的时候，用文字代替。

11.空元素（单标签）有哪些？

知名的空元素（单标签）:<br>,<hr>,<img>,<input>,<link>,<meta>

12.简述一下 src和 href的区别

href ：指向网络资源所在位置，简历和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接

src ：指向外部资源的位置，指向的内容会嵌入到文档当前标签所在位置，在请求 src 资源时会将其指向的资源下载并应用到文档中。

13.简述一下 <strong><em>和 <b><i>标签的区别

<strong>和 <em>用于强调文本，但是 <strong>强调的程度更强一些。

<em>是斜体强调标签， <strong>是粗体表示；

<em>是局部强调， <strong>是全局强调；从视觉上考虑， <em>的强调是有顺序的，阅读到某处时，才会注意到。 <strong>的强调则是一种随意无顺序的，看见某文时，立刻就凸显出来的关键词句。

<em>表示内容的重点， <strong>表示强烈的重要性、严重性或内容的紧迫性， <strong>不会改变所在句子的语义， <em>则会改变所在句子的语义。

HTML5工作草案中：

<em>和 <strong>仍然是表达要素，但这时的 <strong>表示html页面上的强调， <em>表示句子上的强调。

<b>和 <i>是视觉要素，分别表示无意义的加粗和无意义的斜体。

14.HTML、CSS、JavaScript的关系是什么？

  1. HTML是网页内容的载体，是内容显示的框架。内容就是网页制作者放在页面上让用户浏览的信息，包括文字、图片、视频等。
  2. CSS是网页内容的表现，就像对网页进行包装。比如字体、颜色、边框等，这些都是用来改变内容外观的东西。
  3. JavaScript用来实现网页上的特效和交互。比如，当光标放在某个链接上时背景颜色改变等。

15.在一个特定的框架中如何使用HTML中的超链接定位？

可以使用 target 属性在指定的框架中打开被链接的文档。

有 4 个保留的目标名称用作特殊的文档重定向操作：

  • _blank：浏览器总在一个新打开、未命名的窗口中载入目标文档。

  • _self：这个目标的值对所有没有指定目标的 < a > 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 标签中的 target 属性一起使用。

  • _parent：这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。

  • _top：这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

提示：这些 target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略，因此，不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符。

16.常见浏览器内核有哪些？

  • IE：trident内核

  • Firefox：gecko内核

  • safari：webkit内核

  • opera：以前是presto内核，现在改用google chrome的Blink内核

  • Chrome：Blink（基于webkit，google与opera software共同开发）

HTML5

1.如何处理HTML5新标签的浏览器兼容问题？

IE8,7,6支持用 document.createElement产生标签，可以利用这一特性让这些浏览器支持HTML5新标签。浏览器支持新标签后，还需要添加标签默认的样式（最好的方式是直接使用成熟的框架，使用最多的设计 html5shim框架），可以用IE hack引用该框架。

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

2.如何区分HTML和HTML5？

HTML5约等于HTML4.0+css3+JS+API

HTML5和html的实质区别：

  • 在文档类型声明上
//html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

//html5
 <!DOCTYPE html>
  • 在结构语义上

html4.0：没有体现结构语义化标签，通常都是这样命名的

<div id="header"></div>

html5：在语义上却有很大的优势。提供了一些新的html5标签，例如：

<header> 、<nav>、<article>、<aside>、<footer>..
  • 强大的HTML5的新的功能
  1. 强大的绘图功能：Canvas标签，它是通过 JavaScript来绘制2D图形， Canvas是逐像素进行渲染的。在 Canvas中国，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果位置发生变化，那么整个场景也需要重新绘制，包括任何或许被图形覆盖的对象。该元素的强大之处在于可以直接在HTML上进行图像操作。 SVG是一种使用XML描述2D图形的语言， SVG基于XML，这意味着 SVG DOM中的每个元素都是可用的。可以为某个元素附加 JavaScript事件处理器。在 SVG中，每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化，那么浏览器能够自动重现图形。
  2. 新增的视频标签

使用SVG的优势在于：

  1. SVG图像可以通过文本编辑器来创建和修改
  2. SVG图像可被搜索、索引、脚本化或压缩
  3. SVG是可伸缩的
  4. SVG图像可以在任何的分辨率下备高质量的打印
  5. SVG可在图像质量不下降的情况下被放大

两者都是用户绘图，区别：

Canvas：

  1. 依赖分辨率
  2. 不支持事件处理器
  3. 弱的文本渲染能力
  4. 能够以 .png和 .jpg 格式保存结果图像
  5. 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

  1. 不依赖分辨率
  2. 支持事件处理器
  3. 最适合带有大型渲染区域的应用程序（比如谷歌地图）
  4. 复杂度高会减慢渲染速度（热和过度使用DOM的应用都不快）
  5. 不适合游戏开发

3.什么是HTML5？

HTML5 是目前最新的HTML标准，它的主要目的是提供所有内容，而不需要任何如 Flash、

SilverLight等的额外插件，这些内容来自动画、视频、富GUI等。

HTML5 是万维网联盟（W3C）和网络超文本应用技术组（WHATWG）合作输出的。

4.新的HTML5文档类型和字符集是什么？

文档类型是 <!doctype html>

字符集 <meta charset="UTF-8">

5.HTML5新增了哪些功能？

结构元素

  1. article元素，表示页面中的一块与上下文不相关的独立内容，比如博客中的一篇文章。
  2. aside元素，表示article内容之外的内容，辅助信息。
  3. header元素，表示页面中一个内容区块或整个页面的页眉。
  4. hgroup元素，用于对页面中一个区块或整个页面的标题进行组合。
  5. footer元素，表示页面中一个内容区块或整个页面的页脚。
  6. figure元素，表示媒介内容的分组，以及它们的标题。
  7. section元素，表示页面中一个内容区块，比如章节。
  8. nav元素，表示页面中的导航链接。

其他元素

  1. video元素，用来定义视频。
  2. audio元素，用来定义音频。
  3. canvas元素，用来展示图形，该元素本身没有行为，仅提供一块画布。
  4. embed元素，用来插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3等。
  5. mark元素，用来展示高亮的文字。
  6. progress元素，用来展示任何类型的任务的进度。
  7. meter元素，表示度量衡，定义预定义范围内的度量。
  8. time元素，用来展示日期或者时间。
  9. command元素，表示命令按钮。
  10. details元素，用来展示用户要求得到并且可以得到的细节信息。
  11. summary元素，用来为details元素定义可见的标题。
  12. datalist元素，用来展示可选的数据列表，与input元素配合使用，可以制作出输入值的下拉列表。
  13. datagrid元素，也用来展示可选的数据列表，以树形列表的形式来显示。
  14. keygen元素，表示生成密匙。
  15. output元素，表示不同类型的输出。
  16. source元素，为媒介元素定义媒介资源。
  17. menu元素，表示菜单列表。
  18. ruby元素，表示ruby注释， rt元素表示字符的解释或发音。 rp元素在ruby注释中使用，以定义不支持ruby元素的浏览器所显示的内容。
  19. wbr元素，表示软换行。与br元素的区别是：br元素表示此处必须换行，而wbr元素的意思是浏览器窗口或父级元素的宽度够宽时。不进行换行，而当宽度不够时，主动在此处进行换行。
  20. bdi元素，定义文本的文本方向，使其脱离其周围文本的方向设置。
  21. dialog元素，表示对话框或窗口。

废除的元素

  1. 纯表现元素：纯表现的元素就是那些可以用css替代的元素。basefont、big、center、font、s、strike、tt、u这些元素，他们的功能都是纯粹为页面展示服务的，html5提倡把页面展示性功能放在css样式表中统一处理，所以将这些元素废除，用css样式进行替代。
  2. 对可用性产生负面影响的元素：对于frameset元素、frame元素与noframes元素，由于frame框架对网页可用性存在负面影响，在html5中已不支持frame框架，只支持iframe框架，html5中同时将frameset、frame和noframes这三个元素废除。
  3. 只有部分浏览器支持的元素：对于applet、bgsound、blink、marquee等元素，由于只有部分浏览器支持，特别是bgsound元素以及marquee元素，只被IE支持，所以在html5中被废除。其中applet元素可由embed元素或object元素替代，bgsound元素可由audio元素替代，marquee可以由javascript编程的方式替代。

新增的API

  • Canvas API：canvas元素可以为页面提供一块画布展示图形。结合 Canvas API，就可以在这块画布上动态生成和展示各种图形、图表、图像以及动画了。Canvas本质上是位图画布，不可伸缩，绘制出来的对象不属于页面DOM结果或者任何命名空间。不需要将每个图元当做对象存储，执行性能非常好。
  • SVG：它是一种标准的矢量图形，是一种文件格式，有自己的API。HTML5引入了内联的SVG，使得SVG元素可以直接出现在HTML标记中。
  • 音频和视频： audio和 video元素的出现让HTML5的媒体应用多了新选择，对于这两个元素，HTML5规范提供了通用、完整、可脚本化控制的API，使用HTML5的媒体标签的两个好处：
  1. 作为浏览器原生支持的功能，新的 audio和 video元素无需安装
  2. 媒体元素向 Web页面提供了通用、集成和脚本化控制的API
  • Geolocation API：可以请求用户共享他们的位置。使用方法非常简单，如果用户同意，浏览器就会返回位置信息，该位置信息是通过支持html5地理定位功能的底层设备（如笔记本电脑或手机）提供给浏览器的。位置信息由经纬度坐标和一些其他元数据组成。
  • Communication API：
  1. 跨文档消息传递：处于安全方面的考虑，运行在同一浏览器中的框架、标签页、窗口间的通信一直都受到严格的限制。然而，现实中存在一些合理的让不同站点的内容能在浏览器内进行交互的需求。这种情况下，如果浏览器内部能提供直接的通信机制，就能更好的组织这些应用。

segmentfault.com/a/119000001…

6.HTML5的form如何关闭自动补全功能？

三种方式：

  • 在IE的Internet选项菜单里的内容--自动完成里面设置
  • 设置Form的autocomplete为 “on”或者“off”来开启或者关闭自动完成的功能
  • 设置输入框的autocomplete为 “on”或者“off”来开启或者关闭自动完成的功能

6.HTML5应用缓存和常规的HTML浏览器缓存有什么区别？

HTML5应用缓存最关键的就是支持离线应用，可获取少数或者全部网站内容，包括HTML，CSS，图像和JavaScript脚本并存在本地。改性能提升了网站的性能，可通过如下方式实现。

<!doctype html>
<html manifest="example.appcache">
</html>

与传统的浏览器缓存相比，该特性并不强制要求用户访问网站。

HTML应用程序缓存

使用HTML5，通过创建 cache manifest 文件，可以轻松地创建web应用的离线版本。

什么是应用程序缓存（Application Cache）？

HTML5引入了应用程序缓存，这意味着web应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

  • 离线浏览-用户可在应用离线时使用它们
  • 速度-已缓存资源加载更快
  • 减少服务器负载-浏览器将只从服务器下载更新过或更改过的资源

浏览器支持

所有主流浏览器均支持应用程序缓存，除了 Internet Explorer

Cache Manifest 基础

如果需要启用应用程序缓存，在文档的 <html >标签中包含 manifest属性：

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

每个指定了 manifest的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest文件中直接指定了该页面 ）。

manifest文件建议的文件扩展名是 .appcache

请注意， manifest文件需要排至正确的 MIME-type，即 “text/cache-manifest”。必须在web服务器上进行配置。

Manifest文件

该文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）

manifest文件可分为三部分：

  • CACHE MANIFEST-在此标题下列出的文件将在首页下载后进行缓存
  • NETWORK-在此标题下列出的文件需要与服务器的连接，且不会被缓存
  • FALLBACK-在此标题下列出的文件规定当页面无法访问时的回退页面（比如404页面）

CACHE MANIFEST

第一行，CACHE MANIFEST，是必须的：

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

上面的manifest文件列出了三个资源：一个CSS文件，一个GIF图像，以及一个JavaScript文件。当manifest文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。

NETWORK

下面的NETWORK规定的文件永远不会被缓存，且离线时是不可用的：

NETWORK:
login.asp//可以使用*来指示所有其他资源/文件都需要因特网连接

FALLBACK

下面的FALLBACK规定如果无法建立因特网连接，则用 offline.html 替代 /html5/目录中的所有文件：

FALLBACK:
/html5/ /404.html

注释：第一个 URI 是资源，第二个是替补。

更新缓存

一旦应用被缓存，它就会保持缓存直到发生下列情况：

  • 用户清空浏览器缓存
  • manifest文件被修改：更改注释达到更改文件的目的
  • 由程序来更新应用缓存：使用 window.applicationCache 的接口更新缓存。方法是检测 window.applicationCache.status 的值，如果是 UPDATEREADY，那么可以调用 window.applicationCache.update() 更新缓存

实例----完整的 Manifest文件

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html

重要的提示：以 "#" 开头的是注释行，但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

关于应用程序缓存的注释

请留心缓存的内容。

一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保 浏览器更新缓存，您需要更新 manifest 文件。

注释：浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。

7.为什么HTML5里面不需要DTD？如果不放入<! doctype html>标签，HTML5还会工作吗？

HTML5没有使用SGML或者XHTML，它是一个全新的类型，因此不需要参考DTD。对于HTML5，仅需放置<! doctype html>标签代码，让浏览器识别HTML5文档。

如果不放入 <! doctype html>标签，HTML5不会工作。浏览器将不能识别出它是HTML文档，同时HTML5的标签将不能正常工作。

8.本地存储和会话（事务）存储之间的区别是什么？

本地存储数据持续永久，但是会话存储在浏览器打开时有效，在浏览器关闭时会话重置存储数据。

9.如果把HTML5看成一个平台，它的构建模块有哪些？

  • <nav>标签用来将具有导航性质的链接划分在一起，使代码结构在语义化方面更加准确。
  • <header>标签用来定义文档的页眉。
  • <section>标签用来描述文档的结构。
  • <footer>标签用来定义页脚。在典型情况下，该元素会包含文档作者的姓名、文档的创作日期和联系信息

10.请你说一下Web Worker和 WebSocket的作用

web Worker的作用如下:

  1. 通过 worker = new Worker(url)加载一个 JavaScript 文件，创建一个 Worker，同时返回一个 Worker 实例。
  2. 用 worker.postMessage(data) 向 Worker发送数据。
  3. 绑定 worker.onmessage接受 Worker发送过来的数据。
  4. 可以使用 worker.terminate() 终止一个 Worker的执行。

WebSocket的作用如下： 它是 Web应用程序的传输协议，提供了双向的、按序到达的数据流。它是HTML5 新增的协议，WebScoket的连接是持久的，它在客户端和服务器之间保持双工连接，服务器的更新可以及时推送到客户端，而不需要客户端以一定的时间间隔去轮询。

11.如何实现浏览器内多个标签页之间的通信？

在标签页之间，调用 localStorage、 cookies等数据存储，可以实现标签页之间的通信。

12.HTML5为浏览器提供了哪些数据存储方案？

在较高版本的浏览器中，提供了 sessionStorage和 globalStorage。在HTML5规范中，用 localStorage取代了 globalStorage。

13.什么是SVG？

SVG即可缩放适量图像。它是基于文本的图形语言，使用文本、线条、点等来绘制图像，这使得它轻便、显示迅速。

14.Canvas和SVG的区别是什么？

  1. 一旦 Canvas绘制完成将不能访问像素或操作它；任何使用SVG绘制的形状都能被记忆和操作，可以被浏览器再次显示。
  2. Canvas对绘制动画和游戏非常有利；SVG对创建图形（如CAD）非常有利。
  3. 因为不需要记住以后事情，所以Canvas运行更快；因为为了之后的操作，SVG需要记住坐标，所以运行比较缓慢。
  4. 在Canvas中不能为绘制对象绑定相关事件；在SVG中可以为绘制对象绑定相关事件。
  5. Canvas绘制出的是位图，因此与分辨率有关；SVG绘制出的是矢量图，因此与分辨率无关。

15.HTML5如何实现跨域？

从HTML5开始，可以通过在响应头里增加 Access-Control-Allow-Origin，实现跨域请求。这个特性的出现使得跨域通信只需通过配置http协议头即可。

eg：

header(``'Access-Control-Allow-Origin:http: //a.com'``);

header(``'Access-Control-Allow-Methods:POST,GET'``);

header(``'Access-Control-Allow-Credentials:true'``);

echo 'Cross-domain Ajax'``;

JavaScript

var xhr = new XMLHttpRequest(); ; 
xhr.open('GET', 'http: //b.com/cros/ajax.php', true);
xhr.withCredentials = true;
xhr.onload = function () {          
  alert(xhr.response);//reposHTML;
};  
xhr.onerror = function () {
 alert('error making the request.');
};
xhr.send();

CSS

1.CSS有哪些基本选择器？它们的权重是如何表示的？

css基本选择器有类选择器、属性选择器和ID选择器

作为标签属性的styleID选择器类名选择器标签名选择器
1000010000100001

元素样式渲染时，权重高的选择器样式会覆盖权重低的选择器样式。

！important 关键字优先级最高

注意： ！important 并非选择器，而是针对选择器内的单一样式设置的。当然，不同选择器内应用

！important的权重也是不一样的。（权重越高的选择器 ！important关键字权重越高 ）

2.CSS的引入方式有哪些？ link和 @import 的区别是什么？

css有三种引入方式：

  • 行内式指将样式写在元素的 style 属性内
  • 内嵌式是指将样式写在style元素内
  • 外链式是指通过 link（@import）标签，引入css文件内的样式

通过 link标签引入样式与通过 @import方法引入样式有如下区别

  • 加载资源的限制

link是XHTML标签，除了加载CSS文件外，还可以加载RSS等其他事物，如加载模板等。

@import只能加载CSS样式

  • 加载方式

如果用 link引用CSS，在页面载入时同时加载，即同步加载

如果用 @import引用CSS，则需要等到网页完全载入后，再加载CSS文件，即异步加载

  • 兼容性

link是XHTML的标签，没有兼容问题

@import是在CSS2.1中提出的，不支持低版本的浏览器

  • 改变样式

link的标签是DOM元素，支持使用 JavaScript控制DOM和修改样式

@import是一种方法，不支持控制DOM和修改样式

3.浮动元素引起的问题和解决办法是什么？

引起的问题：

  1. 父元素的高度无法被撑开，影响与父元素同级的元素
  2. 与元素同级的非浮动元素会紧随其后（类似遮盖现象）
  3. 如果一个元素浮动，则该元素之前的元素也需要浮动；否则，会影响页面显示的结构（即通常所说的串行现象）。

解决办法：

  1. 为父元素设置固定的高度
  2. 为父元素设置 overflow：hidden 即可清除浮动，让父元素的高度被撑开
  3. 外墙法是指在父元素外面，添加 “一道墙”，设置属性 clear：both
  4. 内墙法是指在父元素内部，浮动元素的最后面，添加“一道墙”设置属性 clear：both
  5. 伪元素是指为了少创建元素，对父元素添加 after伪元素，设置属性 content：“”；display：block；clear：both 
    .clearfix:after{
    content:'';
    display:block;
    clear:both;
}

4. position的值分别是相对于哪个位置定位的？

  • relative ：表示相对定位，相对于自己本身所在正常文档流中的位置进行定位
  • absolute ：表示绝对定位，相对于最近一级（从直接父级元素往上数，直到根元素）定位，相对于 static的父元素进行定位
  • fixed ：用于生成绝对定位，相对于浏览器窗口或frame进行定位
  • static： 是默认值，没有定位，元素出现在正常的文档流中
  • sticky ：是生成粘性定位的元素，容器的位置根据正常文档流计算得出

5.请说明 position：absolute和 float属性的异同

共同点：对内联元素设置 float和 absolute属性，可以让元素脱离文档流，并且可以设置其宽高。

不同点： float仍可占据位置，不会覆盖在另一个BFC区域上，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 absolute会覆盖围挡流中的其他元素，即遮盖现象。

6.CSS选择器（符）有哪些？

  1. id选择器 #myID
  2. 类选择器 .myClassName
  3. 标签选择器 div,p,h1
  4. 相邻选择器 h1+p
  5. 子选择器 ul>li
  6. 后代选择器 li a
  7. 通配符选择器 *
  8. 属性选择器 button[disabled=''true]
  9. 伪类选择器 a:hover 、li:nth-child 表示一种状态
  10. 伪元素选择器 li:before 、：after 表示文档某个部分的表现

注意： 在CSS3 规范中，为了区别伪元素和伪类，CSS3建议伪类用单冒号 “：”，伪元素用双冒号 “：：”

7.CSS有哪些样式可以继承？哪些不可以继承？

可继承：

  • 跟文本相关的属性:

    color、font、font-family、font-size、 font-weight、font-variant、font-style、line-height、letter-spacing、text-align、 text-indent、text-transform、white-space 以及 word-spacing。

  • 列表属性：

    list-style、list-style-type、 list-style-position 以及 list-style-image

  • 表格的边框属性 border-collapse 和 border-spacing

不可继承： border， padding， margin， width， height等尺寸属性

元素显示隐藏属性:visibility可以继承，diaplay:none不可以继承。

注意：与字体相关的样式通常可以继承，与尺寸相关的样式通常不能继承

8.HTML是什么？CSS是什么？JavaScript是什么？

  1. HTML：（HyperText Markup Language，超文本标记语言）是做网站时使用的一些文本标记标签，比如 div ，span等
  2. CSS：（Cascading Style Sheet ，层叠样式表）是做网站时为美化网站而为标签添加的样式，比如 background（北京）， color（字体颜色）等
  3. JavaScript：是网站中实现前后台交互效果、网页动画效果的一种开发语言。比如鼠标单击（ click ）事件、前后台数据请求（ Ajax ）等

9.为什么初始化CSS？

因为浏览器的兼容问题，不同浏览器对有些标签的默认值时不同的，如果没有初始化CSS，往往会导致页面在不同浏览器之间出现差异。

当然初始化样式有时会对SEO产生一定的影响。但是相比较起来，初始化相对重要，则我们应该在力求影响最小的情况下完成CSS初始化。

10.display有哪些值？说明它们的作用？

block： 块状类型。默认宽度为父元素宽度，可设置宽高，换行显示。

none：元素不会显示，已脱离文档流。

inline：行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。

inline-block：指默认宽度为内容宽度，可以设置宽高，同行显示。

list-item：指像块元素一样显示，并添加样式列表标记。

table：指此元素会作为块级表格显示。

inherit：指从父元素继承 display属性的值。

11.简述块级元素和行内元素的区别

  • 块级元素：独占一行，宽高可以设置，内外边距可以设置

  • 行内元素：同行显示，宽高不可设置，内外边距只可以设置水平方向

  • 行内块级元素：比如 <image><input>元素等。同行显示，宽高可以设置，内外边距可以设置。

12.解释浮动及其工作原理（AdminJS）

浮动元素可以向左或向右移动，直到它的外边缘碰到包含元素（父元素）或另一个浮动元素的边框为止。

虽然浮动元素已不在文档流中，但是它浮动后所处的位置依然在浮动之前的水平方向上。因为浮动元素不在文档流中，所以文档流中的块元素表现的就像浮动元素不存在一样，下面的元素会填补原来的位置。有些元素会在浮动元素的下面，但是这些元素的内容并不一定会被浮动的元素遮盖。当定位内联元素时，需考虑浮动元素的边界，围绕浮动元素防止内联元素。也可以把内联元素想象成块元素忽略的元素，而内联元素会关注的元素。

什么是浮动？

通过让元素浮动，我们可以使元素在水平上左右移动，在通过 margin属性调整位置

浮动的原理？

使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。

13.解释一下CSS Sprite，以及如何在页面或网站中使用

CSS Sprite 其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的 background-image， background-repeat， background-position的组合进行背景定位， background-position可以用数字精确的定位出背景图片的位置。

优点：当页面加载时，不是加载每一个单独的图片，而是一次加载整个组合图片。它大大减少了HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。

缺点：做图像拼合的时候很麻烦

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

  • 样式，从右向左解析一个选择器
  • 类型选择器的速度，ID选择器最快，（*）通配符最慢。对于常用的四种类型选择器，解析速度由快到慢一次是 ID， class， tag， universal通配符
  • 不要用标签限制ID选择器（如 ul#main-navigation{}，ID已经是唯一了，不需要tag来限制，这样做会让选择器变慢 ）
  • 后代选择器最糟糕（换句话说，html body ul li a {}这个选择器是很低效的）
  • 想清楚你的需求，再去书写 选择器
  • CSS选择器（如u nth-child ）能够漂亮的定位我们想要的元素，又能保证CSS整洁易读。然而，这些神奇的选择器会浪费很多的浏览器资源
  • 我们知道ID选择器的速度最快，但是如果都用ID选择器，会降低代码的可读性和可维护性等。在大型项目中，相对于使用ID选择器提升速度，代码的可读性和可维护性带来的收益更大。

15.页面重构怎样操作？

页面重构：根据原有页面内容和结构的基础上，通过 div+css写出符合web标准的页面结构，让页面结构更加合理化，提升用户体验，达到良好的页面效果并提升性能。

具体实现要达到以下三点：

  1. 功能符合用户体验，用户交互结构完整，可通过标准验证
  2. 代码重构：代码质量、SEO优化、页面性能、更好的语义化、浏览器兼容、CSS优化
  3. 充分考虑到页面在站点中的“作用和重要性”，并对其进行有针对性的优化

16.内联元素可以实现浮动吗？

在CSS中，任何元素都可以实现浮动。不论浮动元素本身是何种元素，都会生成一个块级框。因此，对于内联元素，如果设置为浮动，会产生和块级框相同的效果。

17.简要描述CSS中content属性的作用

content属性与 ：before及 ：after伪元素配合使用，用来插入生成的内容，可以在元素之前或之后放置生成的内容。可以插入文本、图像、引号，并可以结合计数器，为页面元素插入编号。

18.如何定义高度很小的容器？

因为有一个默认的行高，所以在IE6下无法定义小高度的容器

两种解决方案分别是 overflow：hidden 或 font-size：容器高度px

20.如何让超出宽度的单行文字显示为省略号？

{
    overflow:hidden;
    width:30px;
    white-space:nowrap;
    text-overflow:ellipsis;
}

21.多行文字超出部分显示省略号

        .morelineEllipsis {
            overflow: hidden;
            width: 100px;
            text-overflow: ellipsis;

            display: -webkit-box;
            -webkit-line-clamp: 3;// 设置3行
            -webkit-box-orient: vertical;

        }

22.如何让英文单词发生词内断行？

输入 word-warp:break-word

23.什么叫优雅降级和渐进增强？两者有什么区别？

优雅降级（graceful degradation）：是指一开始就构建完整的功能，然后在针对低版本浏览器进行兼容。

渐进增强（progressive enhancement）：是指针对低版本浏览器构建页面，保证最基本的功能，然后在针对高级浏览器进行效果、交互等改进并追加功能，以达到更好的用户体验。

两者的区别如下：

  1. 优雅降级从复杂的现状开始，并试图减少用户体验的供给。
  2. 渐进增强则从一个非常基础并且能够起作用的版本开始，并不断扩充，以适应未来环境的需要。
  3. 降级（功能衰退）意味着往回看，而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

在现实工作中我们应该根据用户中浏览器占比进行选择：高版本的浏览器占比高就选择优雅降级，低版本浏览器占比高就选择渐进增强。

但实际上大部分的工作都是渐进增强的，先有一套基本的东西上线，后边再追加功能。

24.网页制作会用到哪些图片格式？

  • JPG：压缩率高，文件小，最常用。
  • PNG：支持无损压缩，色彩损失小，保真度高，文件稍大。
  • GIF：支持动画显示，但只支持256色显示，目前已经被Flash大量取代

25.对行内元素设置 margin-top和 margin-bottom是否起作用？

不起作用（需要注意行内元素的替换元素（也就是行内块元素） img， input，它们是行内元素，但是可以设置它们的宽度和高度，并且 margin属性也对它们其作用， margin-top和 margin-bottom有着类似于 inline-block的行为 ）

26.div+css的布局较 table布局有什么优势？

  1. 改版的时候更方便，只需要改动CSS文件
  2. 页面加载速度更快、结构清晰、页面简洁
  3. 表现与结构分离
  4. 搜索引擎优化（SEO）更友好，排名更靠前

速度和加载方式方面的区别：

<div>:加载方式是即读即加载，遇到 <div>没有遇到 </div>的时候一样加载 <div>中的内容，读多少加载多少。

<table> :加载方式是完成后加载，遇到 <table>后，在读到 </table>之前， <table>中的内容不加载。

27.谈谈你对BFC规范的理解

BFC（Block Formatting Context）指块级格式化上下文，即一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中，两个毗邻的块级盒在垂直方向上（和布局方向有关系）的 margin会发生重叠

  • BFC是页面上的独立容器，内外元素互不影响
  • BFC内部box在竖直方向上一个个排列
  • box的纵向距离由margin决定，同一个BFC相邻的box外边距重叠
  • BFC不与float box重叠
  • BFC计算高度，浮动元素也参与计算

如何创建一个BFC:

  • float:left/right
  • overflow:hidden/auto/scroll
  • display:inline-block
  • position:absolute/fixed

BFC的作用：

  • 避免margin重叠：同一个BFC下相邻的box外边距会产生重叠，若想避免，可以让每个box单独生成一个BFC
  • 清除浮动：由于BFC计算高度的时候会计算浮动元素的高度，所以可以通过为父元素添加overflow:hidden生成BFC，避免浮动元素父元素的高度无法撑起的问题
  • 自适应两栏布局：因为BFC不与float box重叠，所以可以通过设置左栏float:left，设置右栏overflow:hidden完成两栏布局

28.谈谈你对IFC规范的理解

IFC（Inline Formitting Context）指内联格式化上下文。IFC的线框（Line box）高度由其包含行内元素中最高的实际高度计算而来（不受竖直方向的 padding/margin的影响）。IFC中的线框一般左右都贴近整个IFC，但是会被 float元素扰乱。同一个IFC下的多个线框高度不同。IFC中是不可能有块级元素的，当插入块级元素时（如在 p中插入 div ），会产生两个匿名矿，两者与 div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与 div垂直排列。

29.谈谈你对GFC规范的理解

GFC（GridLayout Formatting Style）指网格布局格式化上下文，即当把一个元素的 display值设为 grid的时候，此元素将会获得一个独立的渲染区域。可以通过在网格容器（grid container）上定义网格定义行和网格定义列，再往个项目上定义网格行和网格列来为每一个网格项目定义位置和空间

30.谈谈你对FFC规范的理解

FFC（Flex Formatting Style）指自适应格式化上下文，即 display值为 flex或 inline-flex的元素将会生成自适应容器。伸缩容器中的每一个子元素都是一个伸缩单元。伸缩单元可以是任意数量的。伸缩单元内和伸缩单元外的一切元素都不受影响。简单地说， Flexbox定义了伸缩容器内伸缩单元的布局

31.访问超链接后 hover样式就不出现的原因是什么？应该如何解决？

因为访问过的超链接样式覆盖了原有的 hover和 active伪类选择器样式，解决办法是将CSS属性的排列顺序改为：L->V->H->A（link，visited，hover，active）

32.什么是外边距重叠？重叠的结果是什么？

在CSS中，同一个BFC下相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式成为折叠，因此而结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则

  • 当两个相邻的外边距都是正数时，折叠的结果是它们两者中较大的值
  • 当两个相邻的外边距都是负数时，折叠的结果是两者中绝对值较大的值
  • 当两个外边距一正一负时，折叠的结果是两者相加的和

33. rgba()和 opacity的透明度有什么不同？

两者都能实现透明效果

opacity作用于元素，并且可以设置元素内所有内容的透明度（具有继承性）

rgba()只作用于元素的颜色或其背景颜色（设置rgba透明的元素的子元素不会继承透明效果）

使用 rgba给元素的背景设置透明度的方式来替代使用 opacity，可以解决子元素继承父元素透明度的问题

34.常用的块属性标签及其特征有哪些？

常用块标签有 div， h1-h6， ol， ul， li， dl， table， p， br， form。

块标签的特征有独占一行，换行显示，可以设置 宽、高，可以设置内外边距，块可以嵌套块和行标签

35.常用的行内属性标签及其特征有哪些？

行标签有 span， a， img， var， em， strong， textarea， select， option， input。

行标签的特征有在行内显示，内容撑开宽、高，不可以设置宽、高（ img、 input、 textarea 等替换元素除外 ），行只能套用行标签。

36.如何避免文档流中的空白符合并现象？

空白符合并是标准文档流的特征之一，可以通过设置 white-space 修改这一特征，属性值如下：

  • pre表示不会合并空白符，渲染换行符，不会自动换行，相当于 pre元素
  • pre-wrap表示不会合并空白符，渲染换行符，自动换行
  • pre-line表示合并空白符，渲染换行符，自动换行
  • nowrap表示合并空白符，不会渲染换行符，不会自动换行
  • normal表示默认值，按照文档流特点渲染，合并空白符，不会渲染换行符，自动换行。

37.CSS中，自适应的单位有哪些？

  • 百分比： %
  • 相对于视口宽度的单位： vw
  • 相对于视口高度的单位： vh
  • 相对于视口宽度或高度（取决于哪个小）的单位： vm
  • 相对于当前元素字体大小或者父元素字体大小的单位： em
  • 相对于根元素字体大小的单位： rem

38.什么是 FOUC？如何避免 FOUC？

FOUC即无样式内容闪烁（Flash Of Unstyled Content），是在IE下通过 @import 导入css文件引起的。

IE会首先加载整个HTML文档的DOM，然后再导入外部的css文件。因此，在页面DOM加载完成到css导入完成之间，有一段时间页面上的内容是没有样式的，这段时间的长短跟网速和电脑速度都有关系。

解决方法：在<head>之间加入一个<link>标签来导入css文件。

39.CSS中类（class）和ID的区别

  • 书写上的差别：class名用 “.”号开头来定义，id名用“#”号开头来定义
  • 优先级不同（权重不同）
  • 调用上的区别：在同一个html网页页面中class是可以被多次调用的（在不同地方）。而id名作为标签的身份则是唯一的，id在页面中只能出现一次。在js脚本中经常会用到id来修改一个标签的属性
  • id作为元素的标签，用于区分不同结构和内容，而class作为一个样式，它可以应用到任何结构和内容上
  • 在布局思路上，一般坚持这样的原则：id是先确定页面的结构和内容，然后再为它定义样式；而class相反，它先定义好一类样式，然后在页面中根据需要把类样式应用到不同的元素和内容上面
  • 在实际应用时，class更多地被应用到文字版块或页面修饰等等，而id更多地被用来实现宏伟布局和设计包含块或包含块的样式

一般原则：类应该应用于概念上相似的元素，这些元素可以出现在同一页面上多个位置，而ID应该应用于不同的唯一的元素。

40.如何解决特定浏览器的样式问题？

  • 主张向前兼容，不考虑向后兼容
  • 根据产品的用户群中各大浏览器，来考虑需要兼容的浏览器
  • 把浏览器分为两类，一类历史遗留浏览器，一类是现代浏览器，然后根据这个分类开发两个版本的网站，然后自己定义哪些浏览器是历史遗留浏览器，历史遗留版浏览器，使用历史遗留页面，通过通告栏告知用户使用现代浏览器，功能更全面，提供好的用户体验。
  • 直接在用户的浏览器不能兼容的时候，提示用户至少什么版本的IE和火狐 谷歌浏览器才能支持
  • 项目开始前就得需要确认兼容支持的最低版本是什么，设计一个对应的兼容方案

41.使用CSS预处理器的优缺点有哪些？

缺点：简单来说CSS预处理器语言较CSS玩法变得更高级了，但同时降低了自己对最终代码的控制力。更致命的是提高了门槛，首先是上手门槛，其次是维护门槛，再来是团队整体水平和规范的门槛。这也造成了初学学习成本的昂贵。

优点：用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

42.请解释浏览器是如何判断元素是否匹配某个CSS选择器？

浏览器解析css选择器的规则是从右向左的，这样会提高查找选择器所对应的元素的效率。

HTML 经过解析生成 DOM Tree（这个我们比较熟悉）；而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。

Render Tree 中的元素（WebKit 中称为「renderers」，Firefox 下为「frames」）与 DOM 元素相对应，但非一一对应：一个 DOM 元素可能会对应多个 renderer，如文本折行后，不同的「行」会成为 render tree 种不同的 renderer。也有的 DOM 元素被 Render Tree 完全无视，比如 display:none 的元素。

在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 renderer。对于每个 DOM 元素，必须在所有 Style Rules 中找到符合的 selector 并将对应的规则进行合并。选择器的「解析」实际是在这里执行的，在遍历 DOM Tree 时，从 Style Rules 中去寻找对应的 selector。

因为所有样式规则可能数量很大，而且绝大多数不会匹配到当前的 DOM 元素（因为数量很大所以一般会建立规则索引树），所以有一个快速的方法来判断「这个 selector 不匹配当前元素」就是极其重要的。

如果正向解析，例如「div div p em」，我们首先就要检查当前元素到 html 的整条路径，找到最上层的 div，再往下找，如果遇到不匹配就必须回到最上层那个 div，往下再去匹配选择器中的第一个 div，回溯若干次才能确定匹配与否，效率很低。

逆向匹配则不同，如果当前的 DOM 元素是 div，而不是 selector 最后的 em，那只要一步就能排除。只有在匹配时，才会不断向上找父节点进行验证。 但因为匹配的情况远远低于不匹配的情况，所以逆向匹配带来的优势是巨大的。

同时我们也能够看出，在选择器结尾加上「*」就大大降低了这种优势，这也就是很多优化原则提到的尽量避免在选择器末尾添加通配符的原因

HTML&&CSS面试题

43.flex实现均匀分布

里边div数量不固定实现等宽、水平均匀分布。

{
 display: flex;
 justify-content: space-around; /*space-between左右两侧靠边位置没有空隙*/
 flex-wrap: wrap; /*换行*/
}

垂直均匀分布

display: flex;
flex-direction: column;
justify-content: space-evenly; /*水平方向均匀分布*/
align-items: center;/*水平居中*/
flex-wrap: wrap;

HTML&&CSS面试题

44.px,%,em,rem,vw/vh的区别

  • px：绝对单位，无论在哪一种情况下都是一样的
  • %：相对父元素的宽度比例
  • em：相对当前元素的font-size，当用em设置font-size时是相对于父元素的font-size
  • rem：相对根元素的font-size 常用于根据屏幕不同的宽度使用media设置html的font-size，从而根据不同的屏幕显示不同的字体。
  • vw：相对屏幕宽度的1%
  • vh：相对屏幕高度的1%
  • vmin：vw和vh中最小的一个
  • vmax：vw和vh中最大的一个

45. background-size中的cover与contain的区别

background-size中的cover与contain都是都是将图片以相同宽高比缩放以适应整个容器的宽高。

不同的是在no-repeat情况下，如果容器宽高比与图片宽高比不同：

  • cover会缩放至图片能够铺满整个容器，可能会有部分图片区域被裁剪，
  • 而contain则是图片会缩放至整个图片都能显示完全，但是容器可能会有留白。

在repeat情况下：

  • cover:与上述相同；
  • contain:容器内至少有一张完整的图，容器留白区域则平铺背景图，铺不下的再裁掉。

ps:这个就是设置大小的，不是位置

46. z-index从父原则

什么是从父原则：

  • 子元素在与父辈元素比较的时候，用父辈的 z-index 去比较
  • 在与同级元素比较的时候，才有自己的 z-index 去比较

什么情况下会出现从父原则：

  • 父元素通过fixed absolute relative定位的元素, 子元素也是fixed absolute relative定位的元素。
  • 在父元素上设置了z-index
  • 跟父元素同级的元素也是通过fixed absolute relative定位的元素，并且设定了z-index

47.简要介绍⼀下, 你在项⽬中, 如何管理各个元素的 z-index

制定使⽤z-index的规范，⽐如 popover，modal，colorpicker 之类的组件，按照组件特性指定其层级的⾼低规范。另外业务布局中如果⽤到了z-index，尽量控制其层级为较低的规范内，如布局中的z-index尽量使⽤1xx，弹出层类的组件使⽤2xx等。

全局维护⼀个获取z-index的⽅法，每次调⽤时数值递增1:

/* 思路：
我们可以把 DOM 中的所有元素集合起来，
然后转化成一个数组，
然后我们遍历这个数组，把所有元素的 z-index 值提取出来，然后就形成了一个纯数字的数组，
最后从中取到最大值，就是当前页面中的最大的 z-index 值了。
*/

function getZIndex(){
    return [...document.all].reduce((r, e) => Math.max(r, +window.getComputedStyle(e).zIndex || 0), 0)
}

在element-ui中，可以统一使用PopupManager管理


import { PopupManager } from ‘element-ui/lib/utils/popup’

PopupManager.nextZIndex()

48.简要介绍⼀下, 你如何在项⽬中管理样式的? 如何避免不同⻚⾯ / 模块中, 样式的互相影响 ?

  • 使用BEM规则,通过区分模块和元素来进⾏样式命名。

  • 通过 css modules 将css进⾏分模块管理。

    import buttons from "./buttons.css";
import padding from "./padding.css";

element.innerHTML = `<div class="${buttons.red} ${padding.large}">`;

CSS3

1.css3有哪些新特性？

  • 圆角（border-radius）
  • 阴影（box-shadow）
  • 对文字加特效（text-shadow）
  • 线性渐变（gradient）
  • keyframes定义动画
  • 变换（transform）
  • 更多的CSS选择器
  • 多背景设置
  • 色彩模式，如rgba
  • 伪元素 ::selection
  • 媒体查询
  • 多栏布局
  • 图片边框（border-image）

2.CSS3新增伪类有哪些？

  • p:first-of-type ：选择属于其父元素的首个 <p>元素的每个 <p>元素。
  • p:last-of-type：选择属于其父元素的最后一个<p>元素的每个<p>元素。
  • p:only-of-type：选择属于其父元素的唯一 <p>元素的每个<p>元素。
  • p:only-child：选择属于其父元素的唯一子元素的每个 <p>元素。
  • p:nth-child(2)：选择属于其父元素的第二个子元素的每个 <p>元素。
  • ：enabled：disabled：控制表单控件的禁用状态。
  • ：checked：单选框或复选框被选中。

3. :first-of-type 和 :first-child的区别是什么?

：first-child 匹配的是父元素的第一个子元素，可以说是结构上的第一个子元素。

first-of-type匹配的是该类型的第一个元素，类型就是指冒号前面匹配到的元素。并不限制是第一个子元素，只要是该类型元素的第一个即可，这些元素的范围都属于同一级，也就是同辈。

eg:
<div>
   <p></p>
   <span></span>
</div>

p:first-child 匹配到的 p元素，因为p元素是div的第一个子元素

span：first-child 匹配不到span元素，因为span是div的第二个子元素

p:first-of-type匹配到p元素，因为p是div所有为p的子元素中的第一个。

span：first-of-type匹配到span元素，因为span是div多有span的子元素中的第一个。

4.介绍下 box-sizing属性

该属性主要用来控制元素盒模型的解析模式。默认值是 content-box

content-box让元素维持W3C的标准盒模型。元素的宽度/高度由 border+padding+content的宽度/高度决定，设置width/height属性指的是指定 content部分的宽度/高度。

border-box让元素维持IE传统盒模型（IE以下版本和IE6、IE7的怪异模式）。设置width/height属性指的是指定 border+padding+content的宽度/高度。

标准浏览器下，按照W3C规范解析盒模型。一旦修改了元素的边框或内距，就会影响元素的盒子尺寸，就不得不重新计算元素的盒子尺寸，从而影响整个页面的布局。

5.CSS3动画的优缺点是什么？

优点：

  • 在性能上会稍微好一点，浏览器会对CSS3的动画做一些优化。
  • 代码相对简单

缺点：

  • 在动画控制上不够灵活
  • 兼容性不好
  • 部分动画功能无法实现

6. background-origin和 background-clip的区别是什么？

background-origin 定义的是背景位置（ background-position ）的起始点；

background-clip 是对背景（图片和背景色）的切割。

css常见布局

两栏布局

  <div class="left">
    <h1>Left Side</h1>
    <p>我是左侧栏</p>
  </div>
  <div class="right">
    <h1>Right Side</h1>
    <p>我是右侧栏</p>
  </div>

浮动定位法：float + margin-left

    .left{
      width: 200px;
      background-color: antiquewhite;
      float: left;
    }
    .right{
      background-color: cornflowerblue;
      /* 等于左侧的宽度 */
      margin-left: 200px;
    }

绝对定位法：absolute + margin-left

    .left {
        width: 200px;
        background-color: antiquewhite;
        position: absolute;
        background-color: yellow;
    }

    .right {
        background-color: cornflowerblue;
        /* 等于左侧的宽度 */
        margin-left: 200px;
    }

margin负值法

  <div class="aside"></div>
  <div class="main">
      <div class="content"></div>
  </div>

    .aside {
      width: 300px;
      height: 100px;
      background: darkcyan;
      margin-right: -100%;
      float: left;
    }

    .main {
      width: 100%;
      float: right;
      
    }

    .content {
      margin-left: 300px;
      height: 100px;
      background: salmon;
    }

flex

  <div class="box"> //关键
    <div class="left">
      <h1>Left Side</h1>
      <p>我是左侧栏</p>
    </div>
    <div class="right">
      <h1>Right Side</h1>
      <p>我是右侧栏</p>
    </div>  
  </div>

    .box{
      display:flex; 
    }
    .left{
      width: 200px;
      background-color: antiquewhite;
    }
    .right{
      flex: 1; //关键
      background-color: cornflowerblue;
    }

flex:1

  • 当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%
  • 当 flex 取值为一个长度或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，（注意 0% 是一个百分比而不是一个非负数字）
  • 当 flex 取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%
  • 当 flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1

三栏布局

浮动定位法：float + margin

左栏左浮右栏右浮，中间不设宽度用左右margin值撑开距离，且布局中中间栏放最后

  <div class="left">
    <h1>Left</h1>
  </div>
  
  <div class="right">
    <h1>Right</h1>
  </div>
  
  <!--middle  在左右的后边-->
  <div class="middle">
    <h1>Middle</h1>
  </div>

    .left{
      width: 200px;
      height: 300px;
      background-color: darksalmon;

      float: left;
    }
    .middle{
     // 不设置宽度
      height: 300px;
      background-color: darkseagreen;

      margin: 0 200px;
    }
    .right{
      width: 200px;
      height: 300px;
      background-color: firebrick;

      float: right;
    }

绝对定位法：absolute + margin

左右两栏绝对定位，分别固定到页面的左右两侧，中间栏不设宽度，用左右margin撑开距离。

	<div class="left">左栏</div>
	<div class="middle">中间栏</div>
	<div class="right">右栏</div>

    .left {
      width: 200px;
      height: 300px;
      background-color: #DC698A;

      position: absolute;
      left: 0;
      top: 0;
    }

    .middle {
      height: 300px;
      background-color: #8CB08B;

      margin: 0 200px;
    }

    .right {
      width: 200px;
      height: 300px;
      background-color: #3EACDD;

      position: absolute;
      right: 0;
      top: 0;
    }

flex

  <div class="box">
    <div class="left">左边</div>
    <div class="middle">中间</div>
    <div class="right">右边</div>
  </div>


    .box{
      display: flex;
    }
    .left{
      background-color: lightcoral;
      width: 200px;
      height: 300px;
    }
    .right{
      background-color: lightseagreen;
      width: 200px;
      height: 300px;
    }
    .middle{
      background-color: mediumorchid;

      flex: 1 ;      
    }

水平居中

行内元素水平居中

    <p class="inLine">块级元素中的文字居中</p>

    <div class="inLine">
        <span>行内元素的水平居中需要将text-align加入到父级块元素上</span>
    </div>  
    
  <style>
    .inLine{
      text-align: center;
    }
  </style>

定宽块状元素水平居中

  <div class="blockHaveWidth">定宽块状元素水平居中</div>  
  <style>

    .blockHaveWidth{
      border:solid 1px black;
      width:200px;
      text-align: center;
      
      margin: 0 auto;
    }
  </style>

不定宽块状元素水平居中

  • 改变块状元素的display属性为inline, 然后给父级设置 text-aline：center 来实现水平居中， 这种方法的缺点是不能再给元素设置宽高了
  <div class="father">
    <div class="son">不定宽块状元素水平居中</div>
  </div>
  <style>
    .father {
      text-align: center;
    }
    .son{
      display: inline;
    }
  </style>
  • 利用绝对定位，让元素向右偏移50%，然后再向左偏移自身的50%
  <div class="noWidthBlock">不定宽块状元素水平居中</div>
  <style>
    .noWidthBlock {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
  </style>
  • flex
  <div class="box">
    <div class="inner">不定宽块状元素水平居中</div>
  </div>
  <style>
    .box {
      display: flex;
    }
    .inner{
      margin: 20px auto;
    }
     
 <!--或者-->
  .box {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
  • 利用CSS3的fit-content配合左右margin为auto实现水平居中方法
  <div class="son">不定宽块状元素水平居中</div>

  <style>
   .son{
      width: fit-content;
      margin-left: auto;
      margin-right: auto;
    }
  </style>

垂直居中

relative+absolute+margin-top(负值) 已知高度

  <div class="parent">
    <div class="child">
      这里被我垂直居中了。
    </div>
  </div>

  <style>
    .parent {
      height: 500px;
      border: 1px solid red;
      position: relative;
    }

    .child {
      border: 1px solid green;
      width: 300px;
      position: absolute;
      background: red;
      top: 50%;
      /* left: 50%; */
      height: 100px;
      /* margin-left: -150px; */
      margin-top: -50px;
    }
  </style>

relative+absolute+margin-top(负值) 未知高度

  <div class="parent">
    <div class="child">
      这里被我垂直居中了。
    </div>
  </div>

  <style>
    .parent {
      height: 600px;
      border: 1px solid red;
      position: relative;
    }

    .child {
      border: 1px solid green;
      position: absolute;
      background: red;
      top: 50%;
      transform: translate(-50% 0);
    }
  </style>

flex

  <div class="parent">
    <div class="child">
      这里被我垂直居中了。
    </div>
  </div>

  <style>
    .parent {
      height: 600px;
      border: 1px solid red;
      
      display: flex;
      align-items: center;
    }

    .child {
      border: 1px solid green;
      height: 200px;
    }
  </style>

水平垂直居中

绝对定位元素的居中

  <div class="center-vertical"></div>
  <style>
    .center-vertical {
      width: 100px;
      height: 100px;
      background: orange;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      /*高度的一半*/
      margin-left: -50px;
      /*宽度的一半*/
    }
  </style>

缺点：需要提前知道元素的尺寸。如果不知道元素尺寸，这个时候就需要JS获取了。

CSS3.0的兴起，使这个问题有了更好的解决方法，就是使用 transform 代替 margin 。

transform 中 translate 偏移的百分比是相对于自身大小而说的。

  <div class="center-vertical">水平竖直居中</div>
  <style>
    .center-vertical {
      background: orange;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50% ,-50%);
    }
  </style>

优点：无论绝对定位元素的尺寸是多少，它都是水平垂直居中显示的。

缺点：就是兼容性问题。

margin：auto；实现绝对定位元素居中

  <div class="center-vertical">水平竖直居中</div>
  <style>
    .center-vertical {
      width: 100px;
      height: 100px;
      background-color: aqua;
      
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }
  </style>

相对定位

  <div class="center-vertical">水平竖直居中</div>
  <style>
    html,body{
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    .center-vertical {
      width: 300px;
      height: 300px;
      background-color: aqua;
      
      margin: 0 auto;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    <!--或者-->
    .center-vertical {
        width: 300px;
        height: 300px;
        background-color: yellow;
        
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
  </style>

flex

  <div class="parent">
    <div class="center-vertical">水平竖直居中</div>
  </div>
  <style>
    html,body{
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    .parent{
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .center-vertical {
      background-color: aqua;
    }
面试题

本文是由"秘密武器开发者中心"本站原创整理，所有内容的版权归原作者所有。

相关专题