2018最全前端面试题总结之HTML-CSS篇

墨蓝 2022-05-19 03:38 318阅读 0赞

--------------------

### 事件代理 ###

**是什么？**事件代理也叫事件委托，其原理是基于事件冒泡机制。  
**优缺点？**  
*优点：*大量节省内存占用，减少事件注册、可以实现当新增子对象时，无需再对其进行事件绑定，对动态内容部分尤为合适。优化性能。  
*缺点：*事件代理有可能会出现事件误判，就是本不该触发的事件被绑定上了。

--------------------

### 标准模式和怪异模式的区别 ###

*标准模式：*浏览器按W3C标准解析执行代码  
*怪异模式：*浏览器按旧有的非标准的实现方式对文档进行解析和渲染  
**最主要的区别：**  
1. 盒模型尺寸的计算方式不同：标准模式的宽度就是内容的宽度、怪异模式的宽度就是内容宽度加上内边距和边框的宽度  
2. 行内元素宽高：标准模式下行内元素设定宽高不起效果、怪异模式下设定宽高是有效果的  
3. 字体样式继承：标准模式下字体样式可以继承、怪异模式下table元素的字体样式不能继承

--------------------

### viewport ###

*设备像素：*设备屏幕的物理像素，设备能控制显示的最小单位，可以把这些像素看成显示器上一个个的点。  
\*Css像素：\*css样式代码中使用的逻辑像素。1个CSS像素在不同设备上可能对应不同的物理像素，这个比值是设备的（Device Pixel Ratio，设备像素比）。  
分辨率一般表示屏幕上显示的物理像素总和。  
*设备像素比：*表示1个CSS像素（宽度）等于几个物理像素（宽度）。  
DPR = 物理像素数 / 逻辑像素数  
比如dpr=2时，1个CSS像素由4个物理像素点组成。  
**Viewport原理解析：**  
简单的理解，viewport是严格等于浏览器的窗口。在桌面浏览器中，viewport就是浏览器窗口的宽度，但是在移动设备上就有点复杂。移动端浏览器通常都在一个比屏幕更宽的虚拟窗口中渲染页面，这个虚拟窗口就是viewport，目的是正常展示没有做移动端适配的网页，可以让他们完整的展现给用户。我们有时用移动设备访问桌面版网页就会看到一个横向滚动条，这里可显示区域的宽度就是viewport的宽度。  
**有三种视口：**

*  布局视口viewport：如果把移动设备上浏览器的可视区域设为viewport的话，某些网站会因为viewport太窄而显示错乱，所以这些浏览器就默认会把viewport设为一个较宽的值使得即使是那些为PC浏览器设计的网站也能在移动设备浏览器上正常显示。这个浏览器默认的viewport叫做 layout viewport。layout viewport的宽度可以通过 document.documentElement.clientWidth来获取。
 *  视觉视口:layout viewport的宽度是大于浏览器可视区域的宽度的，所以还需要一个viewport来代表浏览器可视区域的大小，这个viewport叫做 visual viewport。visual viewport的宽度可以通过 document.documentElement.innerWidth来获取。
 *  理想视口:ideal viewport是一个能完美适配移动设备的viewport。首先，不需要缩放和横向滚动条就能正常查看网站的所有内容；其次，显示的文字、图片大小合适，无论是在何种密度屏幕，何种分辨率下，显示出来的大小都差不多。这个viewport叫做 ideal viewport。  
      
    **指定了布局视口=理想视口，并且禁止缩放。所以添上width=device-width的viewport meta后页面变大了（一开始页面内容小得看不清），实际上是布局视口变小了。**

--------------------

### 简述一下你对HTML语义化的理解？ ###

1.  用正确的标签做正确的事情。
2.  html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
3.  即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
4.  搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;
5.  使阅读源代码的人对网站更容易将网站分块，便于阅读维护

--------------------

### HTML5 为什么只需要写 ？ ###

HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行），而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

--------------------

### 介绍一下你对浏览器内核的理解？ ###

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎  
**渲染引擎：**负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。  
**JS引擎：**解析和执行javascript来实现网页的动态效果  
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

--------------------

### 网页验证码是干嘛的，是为了解决什么安全问题 ###

1.  区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水
2.  有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试

--------------------

### 常见的浏览器内核有哪些？ ###

Blink内核：新版 Chrome、新版 Opera  
Webkit内核：Safari、原Chrome  
Gecko内核：FireFox、Netscape6及以上版本  
Trident内核（又称MSHTML内核）：IE、国产浏览器  
Presto内核：原Opera7及以下

--------------------

### 浏览器是怎么对HTML5的离线储存资源进行管理和加载的？ ###

1.  在线的情况下，浏览器发现 html 标签有 manifest 属性，它会请求 manifest 文件；
2.  如果是第一次访问app，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储；
3.  如果已经访问过app且资源已经离线存储了，浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作。如果文件改变了，那么就会重新下载文件中的资源并进行离线存储；
4.  线的情况下，浏览器就直接使用离线存储的资源。

--------------------

### iframe 有那些优点和缺点？ ###

**优点：**用来加载速度较慢的内容（如广告）、使脚本可以并行下载、实现跨子域通信  
\*\*缺点：\*\*iframe 会阻塞主页面的 onload 事件、iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载、无法被一些搜索引擎索识别、会产生很多页面，不容易管理。  
**如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值。**

--------------------

### 对标签有什么理解 ###

标签提供关于 HTML 文档的元数据。它不会显示在页面上，但是对于机器是可读的。可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

--------------------

### 说说你对HTML5认识? ###

**是什么：*\*HTML5指的是包括 HTML 、 CSS 和 JavaScript 在内的一套技术组合。它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务，例如： AdobeFlash 、 Microsoft Silverlight 与 Oracle JavaFX 的需求，并且***提供更多能有效加强网络应用的标准集\*。 HTML5 是 HTML 最新版本， 以期能在互联网应用迅速发展的时候，使网络标准达到匹配当代的网络需求。  
\*\*为什么：\*\*HTML4陈旧不能满足日益发展的互联网需要，特别是移动互联网。为了增强浏览器功能 Flash 被广泛使用，但安全与稳定堪忧，不适合在移动端。使用（耗电、触摸、不开放）。HTML5增强了浏览器的原生功能，符合 HTML5 规范的浏览器功能将更加强大，减少了 Web 应用对插件的依赖，让用户体验更好，让开发更加方便，另外 W3C 从推出 HTML4.0 到 5.0 之间共经历了 17 年， HTML 的变化很小，这并不符合一个好产品的演进规则。

### HTML5的优点与缺点、作用？ ###

**优点：**  
a、网络标准统一；  
b、多设备、跨平台；  
c、即时更新；  
d、提高可用性和改进用户的友好体验；  
e、有几个新的标签，这将有助于开发人员定义重要的内容；  
f、可以给站点带来更多的多媒体元素(视频和音频)；  
g、可以很好的替代Flash和Silverlight；  
h、涉及到网站的抓取和索引的时候，对于SEO很友好；  
i、被大量应用于移动应用程序和游戏。  
**缺点：**  
a、安全：像之前Firefox4的web socket和透明代理的实现存在严重的安全问题，同时web storage、web socket 这样的功能很容易被黑客利用，来盗取用户的信息和资料。  
b、完善性：许多特性各浏览器的支持程度也不一样。  
c、技术门槛：HTML5简化开发者工作的同时代表了有许多新的属性和API需要开发者学习，像web worker、web socket、web storage 等新特性，后台甚至浏览器原理的知识，机遇的同时也是巨大的挑战  
d、性能：某些平台上的引擎问题导致HTML5性能低下。  
e、浏览器兼容性：最大缺点，IE9以下浏览器几乎全军覆没。

**作用：**使Web页面的内容更加有序和规范、使搜索引擎更加容易按照HTML5规则识别出有效的内容、使Web页面更接近于一种数据字段和表

--------------------

### Doctype作用? 严格模式与混杂模式如何区分？它们有何意义 ###

1.  声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的HTML 文档。
2.  严格模式的排版和JS 运作模式是以该浏览器支持的最高标准运行。
3.  在混杂模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。
4.  DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

### HTML5有哪些新特性、移除了哪些元素？ ###

Html5新增了 27 个元素，废弃了 16 个元素，根据现有的标准规范，把 HTML5 的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素 4 大类。  
**结构性元素**主要负责web上下文结构的定义  
section：在 web 页面应用中，该元素也可以用于区域的章节描述。  
header：页面主体上的头部， header 元素往往在一对 body 元素中。  
footer：页面的底部（页脚），通常会标出网站的相关信息。  
nav：专门用于菜单导航、链接导航的元素，是 navigator 的缩写。  
article：用于表现一篇文章的主体内容，一般为文字集中显示的区域。  
**级块性元素**主要完成web页面区域的划分，确保内容的有效分割。  
aside：用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。  
figure：是对多个元素进行组合并展示的元素，通常与 ficaption 联合使用。  
code：表示一段代码块。  
dialog：用于表达人与人之间的对话，该元素包含 dt 和 dd 这两个组合元素， dt 用于表示说话者，而 dd 用来表示说话内容。  
**行内语义性**元素主要完成web页面具体内容的引用和描述，是丰富内容展示的基础。  
meter：表示特定范围内的数值，可用于工资、数量、百分比等。  
time：表示时间值。  
progress：用来表示进度条，可通过对其 max 、 min 、 step 等属性进行控制，完成对进度的表示和监事。  
video：视频元素，用于支持和实现视频文件的直接播放，支持缓冲预载和多种视频媒体格式。  
audio：音频元素，用于支持和实现音频文件的直接播放，支持缓冲预载和多种音频媒体格式。  
**交互性元素**主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础。  
details：用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如单击）与 legend 交互才会显示出来。  
datagrid：用来控制客户端数据与显示，可以由动态脚本及时更新。  
menu：主要用于交互菜单（曾被废弃又被重新启用的元素）。  
command：用来处理命令按钮。  
HTML5 废弃了一些过时的，不合理的HTML 标签：frame、 frameset、noframe、applet、big、center、basefront

--------------------

### 对WEB标准以及W3C的理解与认识? ###

标签闭合、标签小写、不乱嵌套、提高搜索引擎搜索几率、使用外链css和 js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

--------------------

### link和@import的区别? ###

两者都是外部引用CSS的方式，但是存在一定的区别：  
区别1： link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务； @import 属于 CSS 范畴，只能加载 CSS 。  
区别2： link 引用 CSS 时，在页面载入时同时加载； @import 需要页面网页完全载入以后加载。  
区别3： link 是 XHTML 标签，无兼容问题； @import 是在 CSS2.1 提出的，低版本的浏览器不支持。  
区别4： link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持。

--------------------

### 简述一下src与href的区别？ ###

1.  src用于替换当前元素， href 用于在当前文档和引用资源之间确立联系。  
    src是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内  
    当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。
2.  href是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加  
    ，那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。

--------------------

### “nth-child”和”nth-of-type”的区别 ###

nth-child”选择的是父元素的子元素，这个子元素并没有指定确切类型，同时满足两个条件时方能有效果：其一是子元素，其二是子元素刚好处在那个位置；“nth-of-type”选择的是某父元素的子元素，而且这个子元素是指定类型。

--------------------

### 渐进增强和优雅降级 ###

关键的区别是他们所侧重的内容，以及这种不同造成的工作流程的差异。  
\* 优雅降级一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。。  
\* 渐进增强针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。  
**区别：**  
\* 优雅降级是从复杂的现状开始，并试图减少用户体验的供给  
\* 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要  
\* 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

--------------------

### 请列举几种清除浮动的方法 ###

**原理：**浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。  
**浮动的特性：**  
1. 浮动元素会从普通文档流中脱离，但浮动元素影响的不仅是自己，它会影响周围的元素对齐进行环绕。  
2. 不管一个元素是行内元素还是块级元素，如果被设置了浮动，那浮动元素会生成一个块级框，可以设置它的width和height，因此float常常用于制作横向配列的菜单，可以设置大小并且横向排列。  
**问题：**父元素的高度无法被撑开，影响与父元素同级的元素、与浮动元素同级的非浮动元素会跟随其后、若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。  
1. 父级div定义 height  
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。  
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题  
2. 结尾处加空div标签 clear:both  
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度  
优点：简单、代码少、浏览器支持好、不容易出现怪问题  
缺点：增加很多空div，让人感觉很不好  
3. 父级div定义 伪类:after 和 zoom  
原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题  
优点：浏览器支持好、不容易出现怪问题  
缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。  
4. 父级div定义 overflow:hidden  
原理：这个方法的关键在于触发了BFC。必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度  
优点：简单、代码少、浏览器支持好  
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。  
5. 父级div定义 overflow:auto  
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度  
优点：简单、代码少、浏览器支持好  
缺点：内部宽高超过父级div时，会出现滚动条。

--------------------

### px，em，rem 的区别 ###

**px 像素(Pixel)**：绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度 DPI。  
**em 是**相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置， 则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。  
**rem** 是 CSS3 新增的一个相对单位(root em，根 em)，使用 rem 为元素设定字体大小时，仍然是相对大小， 但相对的只是 HTML 根元素。

--------------------

### 页面布局的方式有哪些？ ###

1.  圣杯、双飞翼布局  
    经典三列布局，也叫做圣杯布局，它的布局要求有几点：  
    在不增加额外标签的情况下，圣杯布局已经非常完美，圣杯布局使用了相对定位，以后布局是有局限性的，而且宽度控制要改的地方也多。双飞翼布局增加多一个div就可以不用相对布局了，只用到了浮动和负边距。
2.  多栏布局  
    a、栏栅格系统：就是利用浮动实现的多栏布局，bootstrap。  
    b、多列布局：栅格系统并没有真正实现分栏效果（如word中的分栏），CSS3为了满足这个要求增加了多列布局模块
3.  弹性布局（Flexbox）  
    CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box）。Flexbox布局常用于设计比较复杂的页面，可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。Flexbox布局在定义伸缩项目大小时伸缩容器会预留一些可用空间，让你可以调节伸缩项目的相对大小和位置。
4.  流式布局（Fluid）  
    固定布局和流式布局在网页设计中最常用的两种布局方式。固定布局能呈现网页的原始设计效果，流式布局则不受窗口宽度影响，流式布局使用百分比宽度来限定布局元素，这样可以根据客户端分辨率的大小来进行合理的显示。
5.  瀑布流布局  
    瀑布流布局是流式布局的一种。视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。  
    优点：有效的降低了界面复杂度，节省了空间【我们不再需要臃肿复杂的页码导航链接或按钮了】；对触屏设备来说，交互方式更符合直觉；  
    缺点：无限滚动的方式只适用于某些特定类型产品当中一部分特定类型的内容。
6.  响应式布局  
    响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。  
    优点：面对不同分辨率设备灵活性强、能够快捷解决多设备显示适应问题  
    缺点：兼容各种设备工作量大，效率低下；代码累赘，会出现隐藏无用的元素，加载时间加长

--------------------

### CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？ ###

**CSS 选择符：** id选择器(\# myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器(ul > li)、后代选择器(li a)、通配符选择器( \* )、属性选择器(a\[rel = “external”\])、伪类选择器(a: hover, li:nth-child)  
**可继承的样式：** font-size、font-family、color、text-indent  
**不可继承的样式：** border、padding、margin、width、height  
**优先级算法：**  
1.优先级就近原则，同权重情况下样式定义最近者为准;  
2.载入样式以最后载入的定位为准;  
3.!important > id > class > tag  
4.important 比 内联优先级高，但内联比 id 要高  
**!important > 内嵌 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符**