前端面试题之html css篇

1.什么是盒模型

CSS3中的盒模型有以下两种：标准盒子模型，IE盒子模型。
盒模型都是由四个部分组成的，分别是margin、border、padding、content。
标准盒模型和iE盒模型的区别在于设置width和height时，所对应的范围不同：
标准盒模型的width和height属性的范围只包含了content
IE盒模型的width和height属性的范围包含了border padding 和content
可以通过修改元素的box-sizing属性来改变元素的盒模型：
box-sizing：content-box表示标准盒模型（默认值）
box-sizing：border-box表示IE盒子模型（怪异盒模型）

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

行内元素有：a 、br、img、span、input、label、select、textarea、i、b、
块级元素有：p h1-h6 ul ol li dl dt dd hr div th tr td table
空元素：br hr img input link meta

行内元素和块级元素的区别？

1.块级元素默认占一行高度，默认情况下宽度自动填满其父元素宽度；
行内元素不会独占一行，相邻的行内元素会排在同一行，其宽度随内容的变化而变化。
2.块级元素可以设置宽高；
行内元素不可以设置宽高。
3.块级元素可以设置 margin、padding；
行内元素水平方向的 margin-left、margin-right、padding-left、padding-right 属性设置可以生效；
行内元素竖直方向的 margin-bottom、margin-top、padding-top、padding-bottom 属性设置是无效的；
行内元素的 padding-top、padding-bottom 从显示的效果上是增加的，但其实设置是无效的，并不会对它周围的元素产生影响。
4.块级元素转行内元素：display:inline；
行内元素转块级元素：display:block；
行内元素或块级元素转行内块元素：display:inline-block。

3.简述src和href的区别

src用于替换当前元素，href用于当前文档和引用资源之间确立联系
（1）src
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置，在请求src资源时会将其指向的资源下载并且应用到文档内，例如js脚本，img图片和frame等元素，当浏览器解析到该元素时，会暂停其他资源的下载和处理，知道将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指资源嵌入当前标签内。这也是将js脚本放在底部而不是头部
（2）href
href指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果在文档中添加一个css文件，那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理，这也是为什么建议使用link方式来加载css，而不是使用@important方式

4.什么是css Hack

css hack是通过在css样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号都是有标准的，css hack就是让你记住这个标准），以达到不同的css样式的目的
常见有三种形式：
1.属性级Hack：比如IE6能识别下划线-和星号*，，IE7能识别星号但不能识别下划线。而firefox两个都不认识
2.选择符级Hack：比如IE6能识别html.class{}，IE7能识别*+html.class{}或者*：first-child+html.class{}
3.IE条件注释Hack：IE条件注释是微软IE5开始就提供的一种非标准逻辑语句，这类Hack不仅对css生效，对写在判断语句里面的所有代码都会生效

ps：条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览器下被当作注释视而不见。可以通过IE条件下载入不同的css，js，html和服务器代码

5.什么叫优雅降级和渐进增强

1.优雅降级：在网页开发中，优雅降级指的是一开始针对一个高版本的浏览器构建页面，先完善所有的功能，然后在针对低版本浏览器进行兼容
2.渐进增强：在网页开发中，渐进增强任务应该专注于内容本身，针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
区别：
优雅降级和渐进增强都关注于同一网站在不同设备里不同浏览器下的表现程度。优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要
选择：
根据所使用的客户端的版本来做决定，因为本质上渐进增强和优雅降级的概念是软件开

发过程中低版本软件与高版本软件面对新功能的兼容问题，所以低版本用户居多，当然优先采用渐

进增强的开发流程；如果高版本用户居多，为了提高大多数用户的使用体验，那当然优先采用优雅

降级的开发流程。不过大多数情况下都是采用渐进增强的方式，因为它更加合理。

6.px 、 em和rem的区别

px，中文翻译是像素的意思，我没一般用来设置元素的宽高、字体大小，px是一张图片中最小的点，一张图就是由这些点构成的，我们可以称之为”分辨率“，像素的大小是会变的，也成为相对长度

em，em也是css中的相对单位，是相对于父元素的字体大小来定的，会随着浏览器的大小改变而改变

rem，是root em的缩写，在页面中只有一个html是根元素，所以是根据html来定的，，会随着浏览器的大小改变而改变

7.HTML5为什么只写

HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。
而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为。
其中，SGML是标准通用标记语言,简单的说，就是比HTML,XML更老的标准，这两者都是由SGML发展而来的。
BUT，HTML5不是的。

8.Http的状态码有哪些

一、1开头的状态码（信息类）
100 接受的请求正在处理，信息类状态码
二、2开头的状态码（成功类）
2xx（成功）表示成功处理了请求的状态码
200（成功）服务器已成功处理了请求
三、3开头的状态码（重定向）
3xx（重定向）表示要完成请求，需要进一步操作，通常这些状态代码用来重定向
301，永久性重定向，表示资源已被分配了新的url
302，临时性重定向，表示资源临时被分配了新的url
303，表示资源存在另一个url，用get方法获取资源
304，（未修改）自从上次请求后，请求网页未修改过。服务器返回此响应时，不会返回网页内容
四、4开头的状态码（客户端错误）
4xx（请求错误）这些状态码表示请求可能出错，妨碍了服务器的处理
400（错误请求）服务器不理解请求的语法
401表示发送的请求需要通过HTTP认证的认证信息
403（禁止）服务器拒绝请求
404（未找到）服务器找不到请求网页
五、1开头的状态码（服务器错误）
5xx（服务器错误）这些状态码表示服务器在尝试处理请求时发生内部错误，这些错误可能是服务器本身的错误，而不是请求的错误
500，（服务器内部错误）服务器遇到错误，无法完成请求
503，表示服务器处于停机维护或超负载，无法处理请求

9.一次完整的HTTP事务是怎么一个过程

1.输入url（协议，网络地址，资源路径）
2.查看浏览器中是否有缓存，如果有缓存，看是否过期，如果没有过期，直接返回缓存页面，如果没有缓存或者缓存过期，发送一个请求
3.浏览器解析url地址，获取协议，主机名，端口号和路径
4.获取主机ip地址过程
（1）浏览器缓存
（2）主机缓存
（3）hosts文件
（4）路由器缓存
（5）DNS缓存
（6）DNS递归查询
5.浏览器发起和服务器TCP连接欸，执行三次握手
6.三次握手连接后，浏览器发送一个http请求
7.服务器收到请求后，可以进行操作，比如get post请求
8.服务器是否需要缓存，服务器处理完请求后，发出一个响应
9.服务器并根据请求头包含信息决定是否需要关闭TCP连接（如需关闭，则需要四次挥手过程）
10.浏览器解析html代码并请求html代码中的资源

10.HTTPS是如何实现加密的

什么是网络协议

网络协议：是计算机网络中为了进行数据交换而指定的规则，收发双方必须采用同一套协议才能进行传输，也是规定了信息传输时必须采用的格式和这些格式代表的意义

HTTP和HTTPS的基本概念

http：超文本传输协议，是互联网上最广泛的一种网络协议，传输文本信息时是明文的，信息是不安全的，如果传输过程中黑客拦截了浏览器和服务器之间的传输报文，就可以直接获取信息，所以在支付之类的应用中，是不用http协议传输的
https：以安全为目标的http通道，是http协议的升级版，安全版，即在http协议下加入了SSL协议，所以https的安全基础就是SSL。SSL协议位于TCP/IP协议与各种应用层协议之间，为数据通讯提供安全支持。SSL协议分为两层：SSL记录协议。建立在可靠的传输协议之上，为高层协议提供数据封装，压缩，加密等基本功能的支持。SSL握手协议，它建立在SSL记录协议之上，用于在实际的数据传输开始前，通讯双方进行身份认证，协商加密算法，交换加密密钥等。

HTTPS的优缺点

优点
1，使用https协议可以认证用户和服务器，确保数据正确发送到客户机和服务器。
2，https是由ssl+http构建的可以进行加密传输、身份认证的网络协议，比http协议安全，可以防止数据在传输过程中不被盗取、修改等等，保证数据的完整性、安全性。
3，https是现行架构下最安全的解决方案，虽然不是绝对的安全，但是它增加了中间人攻击的成本。

缺点
1，https协议握手比较费时，会使页面的加载时间延长。
2，https的连接缓存不如http高效，增加数据的开销，甚至已有的安全措施也会因此而受到影响。
3，ssl证书需要绑定ip，不能在同一个ip上绑定多个域名，IPv4资源不可能支撑这个消耗。

11.浏览器是如何渲染页面的

浏览器的核心部分是渲染引擎，也成为浏览器的内核
大概可以分为以下几个步骤：
1.渲染引擎首先通过网络获得所请求文档的内容
2.解析html文件，构建dom树
3.解析CSS，构建CSS OM Tree
4.将DOM Tree 和CSSOM Tree合并，构建Render Tree
5.reflow(重排)：根据RenderTree进行节点信息计算
6.repaint（重绘）：根据计算好的信息绘制整个页面

回流和重绘

我们都知道HTML默认是流式布局的，但CSS和JS会打破这种布局，改变DOM的外观样式以及大小和位置。因此我们就需要知道两个概念：replaint和reflow。

重绘（repaint）： 渲染树节点发生改变，但不影响该节点在页面当中的空间位置及大小。譬如某个div标签节点的背景颜色、字体颜色等等发生改变，但是该div标签节点的宽、高、内外边距并不发生变化，此时触发浏览器重绘（repaint）。

重排（reflow）： 也有称回流，当渲染树节点发生改变，影响了节点的几何属性（如宽、高、内边距、外边距、或是float、position、display：none;等等），导致节点位置发生变化，此时触发浏览器重排（reflow），需要重新生成渲染树。譬如JS为某个p标签节点添加新的样式：“display:none;”。导致该p标签被隐藏起来，该p标签之后的所有节点位置都会发生改变。此时浏览器需要重新生成渲染树，重新布局，即重排（reflow）。

理论上，每一次的dom更改或者css几何属性更改，都会引起一次浏览器的重排/重绘过程，而如果是css的非几何属性更改，则只会引起重绘过程。所以说重排一定会引起重绘，而重绘不一定会引起重排。

何时引起重排

（1）页面首次渲染。
（2）元素尺寸改变——边距、填充、边框、宽度和高度
（3）元素位置改变——display、float、position、overflow等等；
（4）内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；
（5）操作DOM时；

减少重排，优化性能

(1）不要一个个的修改 DOM 的样式，应通过 class 来修改。
（2）实现元素的动画，它的position属性，最好是设为absoulte或fixed，这样不会影响其他元素的布局
（3）使用DocumentFragment将需要多次修改的DOM元素缓存，最后一次性append到真实DOM中渲染
（4）可以将需要多次修改的DOM元素设置display:none，操作完再显示。（因为隐藏元素不在render树内，因此修改隐藏元素不会触发回流重绘）

以上六个步骤不一定一次性顺序完成，比如DOM和CSSOM被修改时，亦或是哪个过程重复执行，这样才能计算出哪些像素要在屏幕上进行重新渲染。而在实际情况中，js和css的某些操作往往会很多次修改dom或者css om
这个过程是逐步完成的，为了更好的用户体验，渲染引擎尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局渲染树，他是解析一部分就显示一部分，同时，还可能在通过网络下载其余内容

12.浏览器的内核有哪些？分别有什么代表的浏览器

IE浏览器：Trident内核，也就是俗称的IE内核
Chrome浏览器：统称为Chromium内核或者Chrome内核，以前是Webkit内核，现在是Blink内核
Firefox浏览器：Gecko内核，俗称Firefox内核
Safari浏览器：苹果官方浏览器，webkit内核
Opera浏览器：挪威公司制作的支持多页面标签式浏览的网络浏览器，可以跨平台运行。最初是自己的Presto内核，后来是Kebkit，现在是Blink内核
360浏览器、猎豹浏览器：IE+Chrome双内核
搜狗、遨游、QQ浏览器：Trident（兼容模式）+Webkit（高速模式）
百度浏览器、世界之窗浏览器：IE内核
2345浏览器：以前是IE内核，现在也是IE+Chrome双内核

13.页面导入时，使用link和@important有什么区别

link：建议使用
属于HTML标签
加载页面的同时，加载link
不光可以引入css文件，还可以定义href、rel等属性
无兼容性问题
使用DOM控制样式的时候，只能通过css文件
权重更大
@important：慎用
属于css的语法规则，只能导入样式表
页面全部加载完成之后加载
只能在IE5以上支持

14.如何优化图像，图像格式的区别

1.不用图片，尽量用css3代替，比如说要实现修饰效果，如半透明、边框、圆角、等，在当前主流浏览器中都可以用css达成
2.使用矢量图SVG替代位图，对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。
3.使用恰当的图片格式，内容图片多为照片之类的，适合用JPEG、GIF、等
4.按照HTTP协议设置合理的缓存
5.使用字体图标webfont、css Sprites等
6.用CSS或JavaScipt实现预加载
图像格式的区别：
1.gif：是一种无损，8位图片格式。具有支持动画，索引透明，压缩等特性，适合做色彩简单色调少的图片
2.JPEG：是一种大小和质量相平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片，不适合做色彩简单色调少的图片
3.png：可以细分为PNG8 24 32.后面的数字代表这种格式最多可以索引和存储的颜色值。关于透明：PNG8支持索引透明，24不支持，32在24位的基础上增加了8位的alpha通道透明
优点：能在保证最不失真的情况下尽可能压缩图像文件的大小 缺点：对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上

15.列举你了解html5，css3新特性

h5新特性

1. 语义化标签：header、footer、section、nav、aside、article

2. 增强型表单：input 的多个 type

3. 新增表单属性：placehoder、required、min 和 max

4. 音频视频：audio、video

5. canvas 画布

6. 地理定位

7. 拖拽

8. 本地存储：
   localStorage 没有时间限制的数据存储；
   sessionStorage， session 的数据存储，当用户关闭浏览器窗口后，数据会被删除

9. 新事件：onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
   WebSocket：建立持久通信协议
   css3

10. 选择器

11. 背景和边框

12. 文本效果

13. 2D/3D 转换 — 变形（transform）、过渡(transtion)、动画(animation)

16.可以通过哪些方法优化css3 animation渲染

1、尽可能多的利用硬件能力，如使用3D变形来开启GPU加速：
一个元素通过translate3d右移500px的动画流畅度会明显优于使用left属性；
原因： CSS动画属性会触发整个页面的重排relayout、重绘repaint、重组recomposite Paint通常是其中最花费性能的，尽可能避免使用触发paint的CSS动画属性，这也是为什么我们推荐在CSS动画中使用webkit-transform: translateX(3em)的方案代替使用left: 3em，因为left会额外触发layout与paint，而webkit-transform只触发整个页面composite（这也是为什么推荐在CSS动画中使用webkit-transform: translateX(500px)的方案代替使用left: 500px）
2、尽可能少的使用box-shadows与gradients
ox-shadows与gradients往往都是页面的性能杀手，尤其是在一个元素同时都使用了它们. 尽可能的让动画元素不在文档流中，以减少重排
position: fixed;position: absolute;

17.列举几个前端性能方面的优化

1.降低请求量
​ ① 合并资源，减少http请求数量。

​ ② lazyLoad，如图片懒加载。分批加载，每次只加载一部分。

​ ③ 使用字体图标或CSS绘制，来代替部分图片。
2、加快请求速度
​ ① 预解析DNS

​ ② 使用HTTP2.0

​ ③ 并行加载

​ ④ CDN 分发

​ ⑤ webP，对图片进行压缩，减少图片体积。

​ ⑥ minify/gzip 压缩，对css、js等文件进行压缩（去除空格、回车等），减少文件体积
3、缓存
4、渲染
​ ① JS优化，如防抖、节流、事件委托、减少重排重绘等。

​ ② CSS优化，如提取公共样式减少代码量、减少选择器嵌套层数、精灵图等。

​ ③ 服务器端渲染

​ ④ 使用Web Workers

​ ⑤ CSS写在文件头部，JS写在文件底部。

18.如何实现同一个浏览器多个标签页之间的通信

一、cookie+setInterval方式
要想在多个窗口中通信，通信的内容一定不能放在window对象中，因为window是当前窗口的作用域，里面的内容只属于当前窗口。而cookie是浏览器的本地存储机制，和窗口无关。
将要发送的信息写入cookie，在另一个页面读取cookie，但是由于仅仅从cookie读取信息不能实时更新，需要手动刷新，因此采用setInterval定时器解决，将读取信息的代码封装成一个函数，在定时器内调用即可
缺点：
1）cookie空间有限，容量4k
2）每次http请求都会把当前域的cookie发送到服务器上，浪费带宽
3）setInterval评率设置过大会影响浏览器性能，过小会影响时效性
优点：每个浏览器都兼容

二、websocket协议
websocket是一种网络通信协议，因为http有缺陷，通信只可以由客户端发起，服务器无法主动向客户端发送消息，但如果这时服务器有连续变化的状态，那么就只能使用轮询（每个一段时间，就发出一个询问）的方式来询问。因为websocket拥有全双工（full-duplex）通信自然可以实现多个标签页之间的通信。
发送方先发送消息到WebSocketServer，然后服务端再实时把消息发给接收方
缺点：需要服务端的支持才能完成任务，如果socket数据量比较大的话，会严重消耗服务器的资源；必须要在服务端项目中写服务端监听程序才能支持。
优点：使用简单，功能灵活，强大，如果部署了WebSocket服务器，可以实现很多实时的功能。

三、localstorage
localStorage比cookie好在它在setItem存东西时会自动触发整个浏览器的storage事件，除了当前页面之外，所有打开的标签窗口都会受影响。
缺点：localStorage是h5属性，高版本浏览器才支持，而且不同浏览器的localStorage大小限制不统一；localStorage只能监听非己页面的数据变化
优点：解决了cookie容量小和时效性问题

四、html5浏览器新特性——SharedWorker

19.浏览器的存储技术有哪些

1.cookie：最开始是服务器端用于记录用户状态的一种方式，由服务器设置，在客户端存储，然后每次发起同源请求时，发送给服务器端。cookie最多能存储4k数据，它的生存时间由expires属性指定，并且cookie只能被同源的页面访问共享。

2.sessionStorage：是html5提供的一种浏览器本地存储的方法，它借鉴了服务器端session的概念，代表的是一次会话中所保存的数据 ，他一般能够存储5M或者更大的数据，它在当前窗口关闭后就失效了，并且sessionStorage只能被同一个窗口的同源页面所访问共享。

3.localStorage:也是html5提供的一种浏览器本地存储的方法，它一般也能够存储5M或者更大的数据，它和sessionStorage不同的是，除非手工删除它，否则它不会失效，并且localStorage也只能被同源页面所访问共享。

4.UserData、GlobalStorage、Google Gear：这三者使用都有局限性

5、Flash ShareObject：需要安装flash

20.css定位方式

1.静态定位：
设置方式为position: static;静态定位的盒子是标准流状态，用于取消定位。静态定位的盒子处于网页的最底层，并且top、left、bottom、right属性都不起作用。
2.相对定位：
设置方式为position: relative;相对定位的盒子没有脱离标准流，在页面中占据位置，盒子的层级高于标准流和浮动的盒子，top、left、bottom、right属性都会起作用。
3.绝对定位：
设置方式为position: absolute;绝对定位的盒子脱离了标准流，在页面中不占位置，盒子的层级高于标准流和浮动的盒子，top、left、bottom、right属性都会起作用。
3.固定定位：
设置方式为position: fixed;固定定位的盒子脱离了标准流，在页面中不占位置，盒子的层级高于标准流和浮动的盒子，top、left、bottom、right属性都会起作用。