Web前端面试题——HTML/CSS部分理解题 - 好文

1.盒子模型

（1）是什么：每个元素被表示为一个矩形的盒子，由四部分组成：内容（content）、内边距（padding）、边框（border）、外边距（margin）。它在页面中所占的实际大小（宽高）是content+padding+border+margin之和。

（2）盒模型有两种：标准盒模型（W3C盒模型）、IE盒模型。

（3）两种盒模型的区别：标准盒模型内容大小就是content大小，而IE盒模型内容大小则是content+padding+border总的大小。

（4）怎么设置两种盒模型：通过设置box-sizing属性为content-box（默认值，标准盒模型）、border-box（IE盒模型）。

（5）JS怎么获取和设置box的宽高 <http://www.jb51.net/article/61460.htm>

（6）box-sizing使用场景：若设置子元素的margin或border时可能会撑破父元素的尺寸，就需要使用box-sizing:border-box来将border包含进元素的尺寸中。

2.外边距重叠（collapsing margins）/margin坍塌

（1）是什么：相邻的两个或多个普通流中的块元素
，如果它们设置了外边距，那么在垂直方向上，外边距会发生重叠，以绝对值大的那个为最终结果显示在页面上，即最终的外边距等于发生层叠的外边距中绝对值较大者。

（2）最终外边距：margin全为正（取最大值）、margin全为负（取绝对值最大的负数）、margin有正有负（分别取正数最大值a，负数的最大绝对值b，a-b）

（3）外边距重叠的应用：几个段落一起布局，第一个段落的上外边距正常显示，下外边距与第二个段落的上外边距重叠。

（4）防止外边距重叠：创建BFC元素。

（5）不会发生外边距重叠的情况：行内元素、浮动元素、绝对定位元素之间的外边距都不会叠加。

3.BFC（Block Formatting Context，块级格式化上下文）

（1）是什么：决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。简言之，就是一个特殊的块，内部的元素和外部的元素不会相互影响。BFC内的盒子会在垂直方向上一个接一个地放置，垂直方向上也会发生外边距重叠。

（2）应用场景：自适应布局（BFC不与float box重叠）、清除浮动（计算BFC的高度时，内部的浮动元素也被计算在内）、防止外边距重叠

（3）如何触发BFC：float属性（不为none）、overflow属性（不为visible）、
position属性（absolute，fixed）、display属性（inline-block，table-cell，table-caption，flex，inline-flex）。

4.行内元素有哪些？块级元素有哪些？空元素（void）有哪些？

（1）行内元素：a，b，span，img，input，strong，label，button，select，textarea，em

（2）块级元素：div，ul（无序列表），ol，li，dl（自定义列表），dt（自定义列表项），dd（自定义列表项的定义），p，h1-h6，blockquote（块引用）

（3）空元素（void）：即没有内容的HTML元素。br（换行），hr（水平分割线），meta，link，input，img

5.元素的position属性

（1）定义：规定元素的定位类型。

（2）正常文档流：指的是没有用CSS样式去控制的HTML文档结构，代码的顺序就是网页展示的顺序。

（3）脱离文档流：指的是元素所显示的位置和文档代码不一致。

（4）static：默认值。没有定位，元素出现在正常的文档流中。

relative：生成相对定位的元素，相对于其在正常文档流中的位置进行定位（不脱离文档流）。

absolute：生成绝对定位的元素，相对于static定位以外的最近父级元素进行定位，即相对于其直接父级元素（脱离文档流）。absolute较少直接单独使用在正常的文档流中，主要运行于进行了相对定位的元素框架层里面，相对该层的左上点进行偏移。

fixed：生成固定定位元素，相对于浏览器窗口进行定位。

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

（5）z-index属性
：使用了relative、absolute、fixed三种定位后，都会使正常的文档流发生一定程度的改变，造成元素出现重叠的情形。为了能让重叠的元素有序的显示出来，需要在定位的相关元素加上z-index属性。其值是一个整数值，默认为0，数值越大表示拥有的优先级越高，该属性
只对使用了定位的元素有效。

6.元素的display属性

（1）定义：规定元素应该生成的框的类型

（2）常用属性值：

inline：默认值。元素会被显示为内联元素。

none：元素不会被显示。

  block：元素将显示为块级元素。

inline-block：行内块元素，即元素像行内元素一样显示，内容像块元素一样显示。

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

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

table-caption：元素会作为一个表格标题显示。

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

（3）display属性值inline和block的区别：

block元素会独占一行，默认情况下，block元素宽度自动填满父级元素的宽度；

  block元素可以设置width、height属性，即使设置了宽度，仍然是独占一行；

block元素可以设置margin和padding属性；

inline元素不会独占一行，多个相邻的行内元素会排列在同一行里面，其宽度随元素的内容而变化；

inline元素设置width、height无效；

inline元素的margin和padding属性在水平方向上能产生边距效果，垂直方向不会产生边距效果。

（4）display:inline-block元素显示间隙

A、inline-block水平呈现的元素之间，HTML元素标签换行显示或标签之间有空格的情况下会有间距

B、消除办法
<http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/>
：移除标签之间的空格；

    使用margin-left或margin-right取负值；

    对父元素设置font-size为0，然后对元素的font-size初始化；

    对父元素设置letter-spacing（字符间距）为负值，然后设置元素的letter-spacing为0；

    对父元素设置word-spacing（单词间距）为负值，然后设置元素的word-spacing为0。

7.CSS选择符，优先级

（1）选择符：id（ID）；class（类）；element（标签）；element element（后代）；element>element（子）；

element，element（群组）；element+element（相邻同胞）；伪类（:link,:visited,:active,:hover,:focus:first-child,:lang(language)）；

伪元素（:first-letter,:first-line,:before,:after）；属性选择器

（2）可继承的选择符：主要是文本方面的可继承，盒模型相关的属性基本没有继承特性。font-size，font-family，color，ul

（3）不可继承的选择符：border，padding，margin，width，height

（4）优先级：同权重下样式定义最近者高。！important>内联样式（即定义在HTML标签内的样式，1000）>id（100）>

class/伪类/属性（10）>伪元素/element（1）

（5）CSS引入伪类和伪元素的原因：用来修饰DOM树以外的部分。

* 伪类用于当已有元素处于某个状态时，为其添加对应的样式，这个状态根据用户行为而动态变化。伪类的操作对象是DOM树中已有的元素。
* 伪元素用于创建一些不在DOM树中的元素，并为其添加样式
* 伪类和伪元素的区别在于有没有创建一个DOM树之外的元素

8.页面导入样式时，使用link和@import有什么区别

（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS（简易信息聚合，是一种基于XML标准，在互联网上被广泛采用的

内容包装和投递协议），rel连接属性等作用；@import是CSS提供的，只能用于加载CSS

（2）页面被加载时，link会同时被加载；而@import引用的CSS会等到页面被加载完成后再加载

（3）link是XHTML标签，没有兼容问题；而@import只有在IE5以上才能被识别

（4）link支持使用JavaScript控制DOM修改样式；而@import不支持。

9.overflow属性

（1）定义：规定当内容溢出元素框时发生的事情

（2）visible：默认值。内容不会被修剪，会呈现在元素框之外

hidden：内容会被修剪，并且其余内容不可见

scroll：内容被修剪，但浏览器会显示滚动条以便查看其余内容

auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余内容

inherit：从父元素继承overflow属性的值

10.初始化CSS样式

（1）为什么要初始化CSS样式：因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没有对CSS初始化往往会

出现浏览器之间的页面显示差异。

（2）最简单的初始化方法：*{margin:0; padding:0;}

（3）初始化CSS的缺点：对SEO有一定的影响

（4）SEO：Search Engine Optimization，搜索引擎的优化。SEO具体是指通过网站结构调整、网站内容建设、网站代码优化以

及站外优化，使网站满足搜索引擎的收录排名需求，提高网站在搜索引擎中关键字的排名，从而吸引精准用户进入网站，获得免费

流量，产生直接销售或品牌推广

（5）什么是 CSS Hack：一般来说针对不同的浏览器写不同的CSS，就是CSSHack

11.src和href的区别

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

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

文档中。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕

12.为什么将CSS样式放在头部，将JS脚本放在底部

（1）浏览器为了更好的用户体验，渲染引擎会尝试尽快在屏幕上显示内容，不会等到所有的HTML元素解析之后再构建和布局DOM

树，所以部分内容将被解析并显示。

（2）前端一般主要关心首屏的渲染速度，这也是为什么要提倡“图片懒加载”的原因。

（3）其实外部的JS和CSS文件是并行下载的。随着JS技术的发展，JS也开始承担起页面的渲染工作了。如果JS加载需要很长时间，

会影响用户体验。所以需要将JS区分为承担页面渲染工作的JS和承担事件处理的JS。渲染页面的JS放在前面，事务处理的JS放在后面。

13.常用浏览器，内核

（1）Trident内核：（国产的绝大部分浏览器）IE，360，搜狗

Gecko内核：Firefox，NetScape6及以上

Presto内核：Opera7及以上

Webkit内核：（国产大部分双核浏览器其中一核）Safari（苹果），Chrome

（2）浏览器内核：主要分成两部分：渲染引擎和JS引擎。最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，

内核就倾向于只指渲染引擎

（3）渲染引擎：负责取得网页内容（HTML，XML，图像等）、整理讯息（加入CSS等），以及计算网页的显示方式，后会输出至

显示器或打印机。

（4）JS引擎：解析和执行JavaScript来实现网页的动态效果。

14.DOCTYPE作用？严格模式与混杂模式，标准模式和怪异模式

（1）<!DOCTYPE>声明位于HTML文档中的第一行，处于<html>标签之前，告知浏览器的解析器用什么文档标准解析这个文档。

（2）严格模式下，排版和JS以浏览器支持的最高标准运行；混杂模式下，页面以宽松向后兼容的方式显示

（3）如何触发混杂模式：DOCTYPE不存在或格式不正确，会导致文档以混合模式呈现

（4）标准模式（standards mode）是指浏览器按照W3C标准解析执行代码；怪异模式（quirks mode）则是使用浏览器自己的方式

解析执行代码。

（5）浏览器解析时到底使用何种模式，与网页中的DTD声明（文档类型定义，DOCTYPE相关）有关，忽略DTD声明，将使网页进入

怪异模式。

15.优雅降级和渐进增强

（1）渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行

效果、交互等改进和追加功能达到更好的用户体验。

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

（3）区别：

a.优雅降级是从复杂的现状开始，并试图减少用户体验的供给；渐进增强则是从一个非常基础的，能够起作用的版本开始，并不

断扩充，以适应未来环境的需要。

b.渐进增强观点认为应该关注于内容本身，这使得渐进增强成为一种更为合理的设计范例；优雅降级观点认为应该针对那些最高

级、最完善的浏览器来设计网站。

16.HTML5新特性

（1）HTML5新特性：主要是关于图像、位置、存储、多任务等功能的增加。包括：

a.绘画canvas（通过脚本实现绘画）

b.用于媒介回放的video和audio元素

c.本地离线存储localStorage、sessionStorage

d.语义化更好的内容元素：article、footer、header、nav、section

e.表单元素：datalist（规定输入域的选项列表）、output（用于不同元素的输出）、keygen（提供一种验证用户的可靠方法）

f.input类型：color、date、month、week、number、email（检测是否为一个email格式的地址）、range（滑动条）、

search、url、tel（输入电话号码，-time选择时间）

（2） HTML5新标签的浏览器兼容问题：当在页面中使用HTML5新标签时，可能会得到三种不同的结果：

a.新标签被当做错误处理并被忽略，在DOM构建时会当做这个标签不存在

b.新标签被当做错误处理，在DOM构建时，这个新标签会被构造成行内元素

c.新标签被识别成HTML5标签，然后用DOM节点对齐进行替换

（3）解决兼容性问题：

a.实现标签被识别。通过document.createElement(tagName)即可让浏览器识别新标签，浏览器支持新标签后，还可以为其

添加CSS样式

b.JavaScript解决方案：

1）使用html5shim。在<head>中调用以下代码（也可下载到本地后调用）：


2）使用kill IE6


（4）如何区分HTML和HTML5：

a.DOCTYPE声明

b.新增的元素

（5）HTML5移除的元素：

a.纯表现的元素：big，center，font，strike（删除线），u（下划线），s（删除线）

b.对可用性产生负面影响的元素：frame，frameset，noframes

（6）iframe的缺点

a.会阻塞主页面的onload事件

b.搜索引擎的检索程序无法解读这种页面，不利于SEO

17.cookie和localStorage的区别

（1）共同点：cookie、sessionStorage和localStorage都是由浏览器存储在本地的数据。

（2）区别：

a.cookie是网站为了标识用户身份而存储在用户本地终端上的数据（通常经过加密），数据始终在同源的http请求中携带，即在

浏览器和服务器之间来回传递；localStorage不会自动把数据发给服务器，尽在本地保存

b.cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下，存储大小也不同，cookie数据不能超过4K，同时

因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据（如会话标识）；localStorage也有存储大小的限制，但比

cookie大很多，可以达到5M或更大。

c.cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭；localStorage始终有效，窗口或浏览器关闭也一直

保存，因此用作持久数据；sessionStorage在当前浏览器窗口关闭之后自动删除

d.localStorage支持事件通知机制，可以将数据更新的通知发送给监听者，API接口使用更方便；cookie的原生接口不友好，需

要程序员自己封装

（3）localStorage如何删除数据：localStorage对象可以将数据长期保存在客户端，除非人为清除，提供了以下几个方法：

a.存储：localStorage.setItem(key,value) 如果key存在，更新value

b.获取：localStorage.getItem(key) 如果key不存在，则返回null

c.删除：localStorage.removeItem(key) 一旦删除，key对应的数据将会全部删除

d.全部清除：localStorage.clear()使用removeItem逐个删除太麻烦，可以使用clear，执行的结果是清除所有的localStorage对

象保存的数据

（4）localStorage存储的数据是不能跨浏览器共用的，一个浏览器只能读取各自浏览器的数据。

18.CSS3新特性

（1）新特性：

a.边框：border-radius（圆角）、box-shadow（阴影）、border-image（边框图片）

b.背景：background-size（背景图片的尺寸）、background-origin（背景图片的定位区域）

c.文本效果：text-shadow（文本阴影）、word-wrap（文本换行）

d.转换和变形：transform（包括2D，3D转换，rotate(angle)，translate(x,y)，scale(x,y)）

e.过渡：transition

f.动画：animation

g.多列：column-count（元素被分隔的列数）、column-gap（列之间的间隔）、column-rule（洌之间的宽度，样式，颜色规则）

h.用户界面：resize（规定是否可由用户调整元素尺寸）、box-sizing（以确切的方式适应某个区域的具体内容）、outline-offset（对轮廓进行偏移）

（2）新增伪类：

a.element:before（在元素之前添加内容） element:after（在元素之后添加内容）

b.element:first-of-type、element:last-of-type、element:only-of-type、element:only-child、element:nth-child(n)（第

n个）

c. :checked、:disabled、:enabled

（3）四个锚点伪类的设置问题：

a.问题描述：超链接访问后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active

b.解决办法：爱恨原则LoVe/HAte。改变CSS属性的排列顺序，L-V-H-A 即a:link{} a:visited() a:hover{}
a:active{}

（4）transition、transform和animation的区别

a.transform是指转换，可以将元素移动、旋转、倾斜、拉伸。没有变化的过程。而transition和animation都加上了时间属性，

所以能产生动画效果

b.transition是指过渡，一般由行为（hover等）触发；而animation则是自动触发

c.transition只能设置头尾，所有样式属性一起变化；animation可以设定每一帧的样式和时间，且可以循环播放。

19.对HTML语义化的理解

（1）用正确的标签做正确的事情

（2）HTML语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析

（3）即使在没有样式CSS情况下也以一种文档格式显示，并且是易于阅读的

（4）搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO

（5）使阅读源代码的人更容易将网站分块，便于阅读维护理解

20.清除浮动的方法

（1）父级div定义height

（2）结尾处加空div标签，样式clear:both

（3）父级div定义伪类:after和zoom

（4）父级div定义overflow:hidden（同时还要定义width或zoom:1，不能定义height）

（5）父级div定义overflow:auto（同时还要定义width或zoom:1，不能定义height）

（6）父级也浮动，需要定义width（不推荐）

（7）父级div定义display：table（不推荐）

（8）结尾处加br标签，样式clear:both（父元素div定义zoom:1，不推荐）

21.属性clear取值

（1）定义：规定元素的那一侧不允许其它浮动元素

（2）取值：

a.none：（默认值）。允许浮动元素

b.left：在左侧不允许浮动元素

c.right：在右侧不允许浮动元素

d.both：在左右侧均不允许浮动元素

e.inherit：从父元素继承clear属性

22.属性zoom取值

（1）定义：设置或检索对象的缩放比例

（2）取值：

a.normal：（默认值），使用对象的实际尺寸

b.<number>：用浮点数来定义缩放比例，不允许负值

c.<percentage>：用百分比来定义缩放比例，不允许负值

23.重排（reflow）与重绘（repaint）

（1）浏览器从下载文档到显示页面的过程是个复杂的过程，这里包含了重绘和重排

（2）重绘是一个元素外观的改变所触发的浏览器行为（例如改变visibility，outline，background等属性），浏览器会根据元素的新

属性重新绘制，是元素呈现新的外观。

（3）重排时更明显的一种改变，可以理解为渲染树需要重新计算。常见的触发重排的操作：

a.DOM元素的几何属性变化

b.DOM树的结构变化（例如节点的增减、移动）

c.获取某些属性（例如offsetTop，offsetLeft，offsetHeight，offsetWidth，clientWidth，clientHeight等）

d.改变元素的一些样式（例如调整浏览器窗口大小）

（4）重绘不会带来重新布局，并不一定伴随着重排。

（5）在实践中，应该尽量减少重排次数和缩小重排的影响范围。有以下几种方法：

a.将多次改变样式属性的操作合并成一次操作

b.将需要多次重排的元素，position属性设为absolute或fixed，使其脱离文档流，这样它的变化就不会影响到其他元素

c.在内存中多次操作节点，完成后再添加到文档中去

d.如果要对一个元素进行复杂的操作，可以将其display属性设置为none使其隐藏，待操作完成后再显示

e.在需要经常获取那些引起浏览器重排的属性值时，要缓存到变量

24.如何在网页中添加空格？

在HTML代码中输入

25.如何在网页中显示代码？

（1）对于单行代码，使用标签<code>代码</code>

（2）对于多行代码，使用标签<pre></pre> （被包围在pre元素中的文本通常会保留空格和换行符）

26.使用mailto在网页中链接Email地址？

（1）a标签有一个作用是可以链接Email地址，使用mailto能让访问者便捷想网站管理者发送电子邮件

（2）如果mailto后面同时又多个参数的话，第一个参数必须以?开头，后面的参数每一个都以&分隔

27.form表单当前页面无刷新提交？

* 使用target属性取值为iframe元素的name属性值。具体如下：
* 在当前页面建一个iframe并隐藏（display:none）
* 给这个iframe取名（name="id_iframe"）
* 设置form表单的target属性（target="id_iframe"）
* 提交表单，就是无刷新
28.iframe标签

（1）优点

* iframe能够把嵌入的页面展示出来，如果有多个网页引用iframe，只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷
* 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用
* 重载页面时不需要重载整个页面，只需要重载页面中的一个框架页，减少了数据的传输，增加了网页的下载速度
* 方便制作导航栏
（2）缺点

* 会产生很多页面，不利于管理
* 浏览器的前进/后退按钮无效
* 无法被一些搜索引擎索引到，现在搜索引擎爬虫还不能很好的处理iframe中的内容，所以不利于SEO
* 多数小型的移动设备无法显示框架，兼容性差
* 多框架的页面会增加服务器的http请求，对于大型网站是不可取的
（3）综上，目前框架中的所有优点完全可以使用Ajax实现，因此不推荐使用框架

29.ES6的Promise对象？

总的来说，Promise是一个让开发者更合理、更规范地用于处理异步操作的对象。它有三种状态：初始化（pending），操作成功（fulfilled），操作异常（rejected）。使用实例方法：then()和catch()用于绑定处理程序，还有all()和race()方法。
点我具体讲解 <http://mp.blog.csdn.net/postedit>。

30.rgba和opacity的区别？

（1）rgba和opacity都能实现透明效果，但最大的不同在于opacity作用于元素本身以及元素内的所有内容，而rgba只作用于元素本身，子元素不会继承透明效果。

（2）rgba是CSS3的属性，用法说明：rgba(R,G,B,A)，参数说明R（红色值。正整数|百分数），G（绿色值。正整数|百分数），B（蓝色值。正整数|百分比），A（Alpha透明度。0（透明）~1）。IE6-8不支持rgba模式，可以使用IE滤镜处理：

filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#AARRGGBBAA,endColorstr=#AARRGGBBAA);
其中AA，RR，GG，BB分别表示Alpha，R，G，B，取值为00-FF。

（3）opacity也是CSS3的属性，用法说明：opacity:value 其中value取值0（透明）~1。对于IE6-8，可以用IE滤镜处理：

filter:alpha(opacity=50); /*对应于opacity:0.5;*/
31.CSS属性cursor？

（1）cursor属性规定要显示的鼠标的光标类型。

（2）常用取值：pointer（手），crosshair（十字线），default（箭头），auto（浏览器设置的光标）

热门工具换一换