【前端面试题——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、什么叫优雅降级和渐进增强

优雅降级：在网页开发中，优雅降级指的是一开始针对一个高版本的浏览器构建页面，先完善所有的功能，然后在针对低版本浏览器进行兼容

渐进增强：在网页开发中，渐进增强任务应该专注于内容本身，针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验

区别：

优雅降级和渐进增强都关注于同一网站在不同设备里不同浏览器下的表现程度。优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要

选择：

根据所使用的客户端的版本来做决定，因为本质上渐进增强和优雅降级的概念是软件开

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

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

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

6、px和em的区别

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（重绘）：根据计算好的信息绘制整个页面

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和@import有什么区别

link：建议使用

属于HTML标签

加载页面的同时，加载link

不光可以引入css文件，还可以定义href、rel等属性

无兼容性问题

使用DOM控制样式的时候，只能通过css文件

权重更大

@important：慎用

属于css的语法规则，只能导入样式表

页面全部加载完成之后加载

只能在IE5以上支持

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

• 不用图片，尽量用css3代替。比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用CSS达成。
• 使用矢量图SVG替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！
• 使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG；修饰图片通常更适合用无损压缩的PNG。
• GIF基本上除了GIF动画外不要使用。且动画的话，也更建议用video元素和视频格式，或用SVG动画取代。
• 按照HTTP协议设置合理的缓存。
• 使用字体图标webfont、CSS Sprites等。
• 用CSS或JavaScript实现预加载。
• WebP图片格式能给前端带来的优化。WebP支持无损、有损压缩，动态、静态图片，压缩比率优于GIF、JPEG、JPEG2000、PG等格式，非常适合用于网络等图片传输。

区别：

 1、gif:是是一种无损，8位图片格式。具有支持动画，索引透明，压缩等特性。适用于做色彩简单(色调少)的图片，如logo,各种小图标icons等。

 2、JPEG格式是一种大小与质量相平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片，不适合做色彩简单(色调少)的图片，如logo,各种小图标icons等。

 3、png:PNG可以细分为三种格式:PNG8，PNG24，PNG32。后面的数字代表这种PNG格式最多可以索引和存储的颜色值。

关于透明：PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基础上增加了8位（256阶）的alpha通道透明;

优缺点：

1、能在保证最不失真的情况下尽可能压缩图像文件的大小。

2、对于需要高保真的较复杂的图像，PNG虽然能无损压缩，但图片文件较大，不适合应用在Web页面上。

15、列举你了解Html5. Css3 新特性

Html5

添加了video，radio标签

添加了canvas画布和svg,渲染矢量图片

添加了一些列语义化标签header,footer,main,section,aside,nav等

input的type值新添加了很多属性（email，url，number，range，Date pickers (date, month, week, time, datetime, datetime-local)，search，color）

添加了地理位置定位功能 Geolocation API

添加了web存储功能，localStorage和sessionStorage

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

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

服务端事件推送（EventSource 对象用于接收服务器发送事件通知），所有主流浏览器均支持服务器发送事件，除了 Internet Explorer

CSS3

媒体查询（可以查询设备的物理像素然后进行自适应操作）

transform，transition，translate,scale,skelw，rotate等相关动画效果

box-shadow,text-shadow等特效

CSS3 @font-face 规则,设计师可以引入任意的字体了

CSS3 @keyframes 规则，可以自己创建一些动画等

2D、3D转换

添加了border-radius，border-image等属性

CSS3 创建多列（column-count规定文本可以以几列的方式布局）

CSS3 用户界面（resize，box-sizing，outline-offset）

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

CSS动画属性会触发整个页面的重排，重绘,box-shadow和gradients的性能杀手

在使用css3 transtion做动画效果时，优先选择transform，尽量不要使用height，width，margin和padding

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容量小和时效性问题

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属性都会起作用。