HTML、CSS 前端面试题收集

HTML

1、 HTML5新特性，语义化

根据内容的结构化（内容语义化），选择合适的标签（代码语义化），去掉或样式丢失的时候能让页面呈现清晰的结构；
便于团队开发和维护；
让浏览器的爬虫和机器很好地解析；
使用语义标记可以确保这些设备以一种有意义的方式来渲染网页；例如，一部手机可以选择使一段标记了标题的文字以粗体显示，而iPad可能会以比较大的字体来显示，无论哪种方式，一旦你对一段文本标记为了标题，你就可以确信读取设备将根据其自身的条件来合适地显示页面。
section article aside header footer video audio

2、浏览器的标准模式和怪异模式

在标准模式下，浏览器按照HTML与CSS标准对文档进行解析和渲染；在怪异模式下，浏览器则按照旧有的非标准的实现方式对文档进行解析和渲染；
对于旧有的网页，浏览器启动怪异模式，就能够使得旧网页正常显示；对于新的网页，则可以启动标准模式，使得新网页能够使用HTML与CSS的标准特性；
对于没有文档类型声明（DOCTYPE）或者文档类型声明不正确的文档，浏览器就会使用怪异模式解析和渲染该文档。
在标准模式下，设置行内元素的高宽是无效的；而在怪异模式下是有效的；
使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。

3、标准盒模型与怪异盒模型

标准CSS盒模型的宽度和高度等于内容区的高度和宽度，不包含内边距和边框；
IE6之前的浏览器实现的盒模型的宽高计算方式是包含内边距和边框的；

4、行内元素的垂直对齐：

标准模式下，在标准模式下，图片与父元素的下边框距离3px。
而怪异模式下，则不存在这个问题

5、xhtml和html的区别

XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。

6、使用data-的好处 (用于存储页面或应用程序的私有自定义数据)

自定义属性，可以被js很好的操作
H5的新属性
通过js的element.dataset.或jQuery的data(’’)拿到，*可以为url等字符
框架的数据绑定，例如data-ng-if=“cs==1”

7、meta标签

它不会显示在页面上，但是对于机器是可读的。
可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
viewport charset

8、canvas

getContext()

有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。

9、HTML废弃的标签

, , , <s>，

= :定义重要性强调的文字

= ：定义强调的文字

<ins>=：定义插入的文字

<del>=<s>：定义删除的文字

10、IE6 bug，和一些定位写法

双倍边距bug：使用float浮动时,在该元素中加入display:inline 或 display:block；
3像素问题: 使用float浮动后，元素与相邻的元素之间会产生3px的间隙；需要使布局在同一行的元素都加上float浮动；
图片链接的下方有间隙：将img标签定义为display:block 或定义vertical-align对应的属性。也可以为img对应的样式写入font-size:0；

11、从输入URL到页面加载的全过程

主干流程：浏览器构建HTTP Request请求、网络传输、服务器构建HTTP Response请求、网络传输、浏览器渲染页面。

一、构建请求

应用层进行DNS解析
- 这里使用DNS预解析，可以根据浏览器定义的规则，提前解析之后可能会用到的域名，使解析结果缓存到系统缓存中，缩短DNS解析时间，来提高网站的访问速度
应用层生成http请求报文
- HTTP请求报文包括起始行、首部和主体部分
- 起始行可能：GET https://baidu.com/ HTTP/1.1
- 首部包括：HOST keep-alive Accpet-Encoding Accept-Language User-Agent Cookie等
- 首部和主体内容之间有一个回车换行(CRLF)，主体内容即要传输的内容。如果是get请求，则主体内容为空
传输层建立TCP连接（建立三次握手）

传输协议主要有UDP（无连接的协议、不可靠）和TCP（有连接、可靠）两种

TCP可靠主要表现在：
- 接收方会对接收到的数据进行确认
- 发送方会重传接收方未确认的数据
- 接收方会对接收到的数据按照正确的顺序进行重新排列，并删除重复的数据
- 提供了控制拥挤的机制
- 三次握手：
  - 第一次握手：主机A发往主机B，主机A初始序号是X，设置SYN（同步）位，未设置ACK（确认）位
  - 第二次握手：主机B发往主机A，主机B初始序号是Y，ACK（确认号）是X+1，X+1暗示已经收到主机A发来主机B的同步序号。设置ACK位和SYN位
  - 第三次握手：主机A发往主机B，主机A初始序号是X+1，ACK是Y+1，Y+1暗示已经收到主机A发来主机B的同步序号。设置ACK位，未设置SYN位。
  三次握手解决的不仅仅有序号问题，还解决了包括窗口大小、MTU(Maximum Transmission Unit,最大传输单元)，以及所期望的网络延时等其他问题。
- 构建TCP请求会增加大量的网络时延，常用的优化方式如下所示
  - 资源打包，合并请求
  - 多使用缓存，减少网络传输
  - 使用keep-alive建立持久连接
  - 使用多个域名，增加浏览器的资源并发加载数，或者使用HTTP2的管道化连接的多路复用技术
网络层使用IP协议来选择路线
数据链路层实现网络相邻节点间的可靠的数据通信
物理层传输数据

二、网络传输

从客户机到服务器需要通过许多网络设备，一般地，包括集线器、交换器、路由器等

三、服务器处理及反向传输

四、浏览器渲染

首先浏览器从服务器接收到html代码，然后开始解析html
根据html代码自顶向下构建DOM树，并且同时构建渲染树
遇到js文件加载执行，将阻塞DOM树的构建
遇到css文件，将阻塞渲染树的构建
script标签中的defer属性：构建DOM树的过程和js文件的加载异步（并行）进行，但是js文件执行需要在DOM树构建完成之后
script标签中的async属性：构建DOM树、渲染树的过程和js文件的加载和执行异步（并行）进行
所以script标签最好放在标签的前面，因为放在所有body中的标签后面就不会出现网页加载时出现空白的情况，可以持续的给用户提供视觉反馈，同时在有些情况下，会降低错误的发生。
而css标签应该放在标签之间，因为如果放在标签的前面，那么当DOM树构建完成了，渲染树才构建，那么当渲染树构建完成，浏览器不得不再重新渲染整个页面，这样造成了资源的浪费。效率也不高。如果放在之间，浏览器边构建边渲染，效率要高的多。总的来说，就是提高性能，提高网页的可读性。

五、重绘和回流

页面生成以后，脚本操作、样式表变更，以及用户操作都可能触发重绘和回流
- 回流是指窗口尺寸被修改、发生滚动操作，或者元素位置相关属性被更新时会触发布局过程，也就是重新进行流式布局的过程。发生在Render树上，常说的脱离文档流，就是指脱离渲染树Render Tree
- 重绘是指当与视觉相关的样式属性值被更新时会触发绘制过程，在绘制过程中要重新计算元素的视觉信息，使元素呈现新的外观。是发生在渲染层 render layer上
减少回流次数的方法
- 不要一条一条地修改DOM样式，而是修改className或者修改style.cssText
- 在内存中多次操作节点，完成后再添加到文档中去
- 对于一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示
- 在需要经常获取那些引起浏览器回流的属性值时，要缓存到变量中
- 不要使用table布局，因为一个小改动可能会造成整个table重新布局。而且table渲染通常要3倍于同等元素时间
减少重绘范围的方法
- 将需要多次重绘的元素独立为render layer渲染层，如设置absolute，可以减少重绘范围
- 对于一些进行动画的元素，可以进行硬件渲染，从而避免重绘和回流

12、什么是渐进式渲染

在首次渲染的时候，只加载首屏的内容，随着用户滑动或者说时间的推移，才进行后面的加载。

这样做的好处是：提高网页的性能，不会造成资源的浪费，按需加载。

13、html模板语言

模板包含：HTML的静态部分，动态插入内容部分

14、meta viewport原理

主要是影响移动端页面布局的

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />width viewport 宽度(数值/device-width)
height viewport 高度(数值/device-height)
initial-scale 初始缩放比例
maximum-scale 最大缩放比例
minimum-scale 最小缩放比例
user-scalable 是否允许用户缩放(yes/no)

15、重构、回流

浏览器的重构（重绘）指的是改变每个元素外观时所触发的浏览器行为，比如颜色，背景等样式发生了改变而进行的重新构造新外观的过程，重构不会引发页面的重新布局，不一定伴随着回流。
回流（重排）指的是浏览器为了重新渲染页面的需要而进行的重新计算元素的几何大小和位置。他的开销是非常大的，回流可以理解为渲染树需要重新进行计算。
一般最好触发元素的重构，避免元素的回流；
比如通过添加类来添加css样式，而不是直接在DOM上设置，当需要操作某一块元素时候，最好使其脱离文档流，这样就不会引起回流了。比如设置position：absolute或者fixed，或者display：none，等操作结束后在显示。

16、前端优化（提高网页的加载速度）

1、使用css sprites，可以有效的减少http请求数
2、使用缓存
3、压缩js，css文件，减小文件体积
4、使用cdn，减小服务器负担
5、懒加载图片
6、预加载css，js文件
7、避免dom结构的深层次嵌套
8、减少 DOM 元素数量，减少 DOM 操作
9、减少重构，回流
10、使用外部 JavaScript 和 CSS
11、使用 iconfont

17、Vue router 跳转和 location.href 有什么区别？

router 是 hash 改变
location.href 是页面跳转，刷新页面

18、说说svg和canvas各自的优缺点？

共同点：都是有效的图形工具，对于数据较小的情况下，都很又高的性能，它们都使用 JavaScript 和 HTML；它们都遵守万维网联合会 (W3C) 标准。

svg
- 优点：
  - 矢量图，不依赖于像素，无限放大后不会失真。
  - 以dom的形式表示，事件绑定由浏览器直接分发到节点上。
- 缺点：
  - dom形式，涉及到动画时候需要更新dom，性能较低。
canvas
- 优点：
  - 定制型更强，可以绘制绘制自己想要的东西。
  - 非dom结构形式，用JavaScript进行绘制，涉及到动画性能较高
- 缺点：
  - 事件分发由canvas处理，绘制的内容的事件需要自己做处理。
  - 依赖于像素，无法高效保真，画布较大时候性能较低。

var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';  //设置属性
ctx.fillRect(0,0,80,100);//根据坐标画出正方形

19、渐进增强与优雅降级

渐进增强：一开始针对低版本浏览器进行构建基本功能，然后再针对高版本浏览器进行交互、效果和追加功能达到良好的交互体验
优雅降级：一开始保证了功能的全面性，然后再针对低版本浏览器进行兼容

20、为什么利用多个域名来存储网站资源会更有效？

CDN缓存更方便
突破浏览器并发限制
节约cookie带宽
节约主域名的连接数，优化页面响应速度
防止不必要的安全问题

21、简述一下src与href的区别

src用于替换当前元素，href用于在当前文档和引用资源之间建立联系。

src是source的缩写，指向外部资源的位置。
- 指向的内容将会被嵌入到文档中当前标签所在位置；
- 在请求src资源时，会将其指向的资源下载并应用到文档内。例如js脚本，img图片和frame等元素。
- 当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源下载、编译、执行完毕。
- 这也是为什么将js脚本放在底部而不是头部。
href是Hypertext Reference的缩写，指向网络资源所在位置。
- 建立与当前元素（锚点）或当前文档（链接）直接的链接
- 若添加，则浏览器会识别该文档为css文件，就会并行下载并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

CSS

1、盒模型，box-sizing

IE盒子模型和W3C盒子模型：计算width和height时，IE盒子模型包含padding和border, W3C盒子模型则不包括；
box-sizing: content-box; //指定盒子模型为W3C
box-sizing: border-box; //指定盒子模型为IE盒子模型

2、CSS3新特性，伪类，伪元素，锚伪类

单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。
CSS伪类：用于向某些选择器添加特殊的效果。（:hover :active :visited）
CSS伪元素：用于将特殊的效果添加到某些选择器。伪元素代表了某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中。（::before ::after）

3、CSS实现隐藏页面的方式

opacity: 0;
visibility: hidden;
display: none;position: absolute;top: -9999px;left: -9999px

4、如何实现水平居中和垂直居中。

margin和width实现水平居中；
inline-block,并且在元素的父容器中设置text-align的属性为“center”；
position: absolute; width: 宽度值; left: 50%; margin-left: -(宽度值/2);
flex

5、说说position，display

static、relative、absolute、fixed
none、inline、block、inline-block

6、请解释*{box-sizing:border-box;}的作用，并说明使用它的好处

设置以后，相当于以怪异模式解析，border和padding全会在你设置的宽度内部。

比如手机端设置两行并列的布局，宽度各为50%,如果不用这个属性，设置border后右边的div会下来错位，设置这个属性，宽度还是50%而不是50%+*px,两行可以并列显示

7、浮动元素引起的问题和解决办法？绝对定位和相对定位，元素浮动后的display值

问题：

由于浮动元素已脱离文档流，所以父元素无法被撑开，影响与父级元素同级的元素
与浮动元素同级的非浮动元素（内联元素）会跟随其后，也是由于浮动元素脱离文档流，不占据文档流中的位置。
如果该浮动元素不是同级第一个浮动的元素，则它之前的元素也应该浮动，否则容易影响页面的结构显示。

解决方法：

clear：both；// 解决2。3

给父元素添加clearfix样式 //解决1

.clearfix:after{content: ".";       display: block;  height: 0;  clear: both;  visibility: hidden;
}

overflow为hidden或者auto

8、link和@import引入css的区别

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

9、解释一下css3的flexbox，以及适用场景

一个用于页面布局的全新CSS3功能，Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。

常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流可以很方便的用来做局中，能对不同屏幕大小自适应。

10、grid布局

网格布局

11、table布局的作用

用于显示批量的数据

12、实现两栏布局有哪些方法？

absolute + padding + %
float + BFC
.left{float: left; width: 200px;}.right{overflow: hidden;}
flex
.container{display: flex;}.left{width: 200px;}.right{flex: 1;}

13、你知道attribute和property的区别么

property是DOM中的属性，是JavaScript里的对象；
attribute是HTML标签上的特性，它的值只能够是字符串；

HTML标签中定义的属性和值会保存该DOM对象的attributes属性里面；

attribute和property之间的数据绑定是单向的，attribute->property；
更改property和attribute上的任意值，都会将更新反映到HTML页面中；

14、css布局问题？css实现三列布局怎么做？如果中间是自适应又怎么做？

flex

15、流式布局如何实现，响应式布局如何实现

流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）

设计方法：使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。

响应式设计的目标是确保一个页面在所有终端上都能显示出令人满意的效果；

设计方法：媒体查询+流式布局。通常使用 @media 媒体查询和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。

16、移动端布局方案

静态布局
流式布局
自适应布局
响应式布局
弹性布局

em是相对其父元素
rem是始终相对于html大小，即页面根元素

17、实现三栏布局（圣杯布局，双飞翼布局，flex布局）

圣杯布局

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>实现三栏水平布局之圣杯布局</title><style type="text/css">.container {padding: 0 300px 0 200px;}.left, .main, .right {position: relative;min-height: 130px;float: left;}.left {left: -200px;margin-left: -100%;background: green;width: 200px;}.right {right: -300px;margin-left: -300px;background-color: red;width: 300px;}.main {background-color: blue;width: 100%;}</style>
</head>
<body>
<div class="container"> <div class="main">main</div> <div class="left">left</div> <div class="right">right</div>
</div>
</body>
</html>

双飞翼布局

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>实现三栏水平布局之双飞翼布局</title><style type="text/css">.left, .main, .right {float: left;min-height: 130px;text-align: center;}.left {margin-left: -100%;background: green;width: 200px;}.right {margin-left: -300px;background-color: red;width: 300px;}.main {background-color: blue;width: 100%;}.content{margin: 0 300px 0 200px;}</style>
</head>
<body>
<div class="container"> <div class="main"><div class="content">main</div> </div><div class="left">left</div> <div class="right">right</div>
</div>
</body>
</html>

flex布局

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>实现三栏水平布局之Flex布局</title><style type="text/css">.container{display: flex;min-height: 130px;}.main{flex-grow: 1;background-color: blue;}.left{order: -1;flex-basis: 200px;background-color: green;}.right{flex-basis: 300px;background-color: red;}</style>
</head>
<body>
<div class="container"> <div class="main">main</div> <div class="left">left</div> <div class="right">right</div>
</div>
</body>
</html>

18、清除浮动的原理

当元素设置了overflow样式，且值不为visible时，该元素就建构了一个BFC, BFC的高度是要包括浮动元素的，所以浮动元素的高度被撑起来，达到了清除浮动影响的目的

19、overflow:hidden有什么缺点？

当父元素的高度是靠子元素撑开的时候，子元素浮动时，则在父元素使用overflow: hidden可以清除浮动，使得父元素的高度依旧是靠子元素撑开。

当父元素自身设置了height属性值，则在父元素使用overflow: hidden可以使子元素超出父元素的那部分隐藏。

20、padding百分比是相对于父级宽度还是自身的宽度

父级宽度

21、css3动画，transition和animation的区别，animation的属性，加速度，重力的模拟实现

transition用于设置四个过渡属性，定义了动画的属性、时间、速度曲线以及延迟时间；通常和hover等事件配合使用，由事件触发。tranistion 只能设定头尾

.one1{transition: width 3s linear 2s;
}
.one1:hover{width:300px;
}

animation的使用必须结合@keyframes animation-name使用；可以设定每一帧的样式和时间

 @keyframes  move{form{ left:0px;}   to{ left:200px;}}

在需要动画的元素上面添加动画 div{animation:move 5s infinite;}
animation: name duration timing-function delay iteration-count direction;（动画名称，动画执行时间，速度曲线，动画延迟时间，播放次数，是否反向播放）

22、CSS 3 如何实现旋转图片（transform: rotate）

@-webkit-keyframes rotation{from {-webkit-transform: rotate(0deg);}to {-webkit-transform: rotate(360deg);}
}.rotation{-webkit-transform: rotate(360deg);animation: rotation 3s linear infinite;-moz-animation: rotation 3s linear infinite;-webkit-animation: rotation 3s linear infinite;-o-animation: rotation 3s linear infinite;
}

23、sass less

Sass是对CSS（层叠样式表）的语法的一种扩充，诞生于2007年，最早也是最成熟的一款CSS预处理器语言，它可以使用变量、常量、嵌套、混入、函数等功能，可以更有效有弹性的写出CSS

24、对移动端开发了解多少？

响应式设计、Zepto；@media、viewport、JavaScript 正则表达式判断平台。

25、什么是bfc，如何创建bfc？解决什么问题？

块级格式化上下文;
浮动元素会形成BFC

高度塌陷问题;
div浮动兄弟遮盖问题;
margin塌陷问题

26、CSS中的长度单位（px,pt,rem,em,ex,vw,vh,vh,vmin,vmax）

27、CSS 选择器的优先级是怎样的？

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

28、常遇到的浏览器兼容性问题有哪些？常用的hack的技巧

margin 和padding差异较大: 通配符*来设置各个标签的内外补丁是0
块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大: 在float的标签样式控制中加入 display:inline;
设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度: 给超出高度的标签设置overflow:hidden;
图片默认有间距: 使用float属性为img布局

29、外边距合并

两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠
解决方法：在写的时候尽量用同一方向的margin，比如都设置为top或者bottom
折叠结果遵循下列计算规则：
1. 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
2. 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
3. 两个外边距一正一负时，折叠结果是两者的相加的和。

30、解释一下“::before”和“:after”中的双冒号和单冒号的区别-

都是CSS伪元素
单冒号是CSS2中提出来的，所以兼容性可能到IE8；
双冒号是CSS3中的写法，为了将伪类和伪元素区分开；

31、超链接访问过后hover样式就不出现的问题是什么？如何解决？

被点击访问过的超链接就不再具有hover和active了，解决方法是改变CSS属性的排列顺序: L-V-H-A（link,visited,hover,active）