html&css&浏览器相关面试题大全（一）

1.什么是盒模型

盒模型

margin(外边距)- 清除边框外的区域，外边距是透明的。
border(边框)- 围绕在内边距和内容外的边框。
padding(内边距)- 清除内容周围的区域，内边距是透明的。
content(内容)- 盒子的内容，显示文本和图像。

分为两大类：

W3C的标准盒模型：在标准的盒子模型中，width指content部分的宽度
IE的盒模型：在IE盒子模型中，width表示content+padding+border这三个部分的宽度

例如：使用css中的 box-sizing

/* 标准模型 */
box-sizing:content-box;
 /*IE模型*/
box-sizing:border-box;

2.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？

行内元素有：a b span img input select strong

块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

空元素：br、 hr img input link meta

行内元素不可以设置宽高，不独占一行

块级元素可以设置宽高，独占一行

3.简述src和href的区别

href

href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。例如

<link href="reset.css" rel=”stylesheet“/>

浏览器会识别该文档为css文档，并行下载该文档，并且不会停止对当前文档的处理。这也是建议使用link，而不采用@import加载css的原因。

src

src是source的缩写，src的内容是页面必不可少的一部分，是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe。例如

<script src="script.js"></script>

当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。

小结

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

4.什么是css Hack

CSS hack

是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的。

CSS hack

由于不同厂商的浏览器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一厂商的浏览器的不同版本，如IE6和IE7，对CSS的解析认识不完全一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

简单的说，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

CSS Hack常见的有三种形式：

CSS属性Hack、CSS选择符Hack以及IE条件注释Hack， Hack主要针对IE浏览器。

1、属性级Hack：比如IE6能识别下划线“”和星号“”，IE7能识别星号“”，但不能识别下划线””，而firefox两个都不能认识。

2、选择符级Hack：比如IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。

3、IE条件注释Hack：IE条件注释是微软IE5开始就提供的一种非标准逻辑语句。

PS：条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等

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

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

其实渐进增强和优雅降级并非什么新概念，只是旧的概念换了一个新的说法。在传统软件开发中，经常会提到向上兼容和向下兼容的概念。渐进增强相当于向上兼容，而优雅降级相当于向下兼容

6.px和em，rem的区别？

px，绝对长度单位，像素px是相对于显示器屏幕分辨率来说的

em，相对长度单位，相对于当前对象内文本的font-size，em的值并不是固定的，em会继承父级元素的font-size（参考物是父元素的font-size）

rem，相对于html根元素的font-size。

7.HTML5 为什么只写？

html5不基于SGML,因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照他们应该的方式来运行）

而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

8.Http的状态码有哪些

一、临时响应

100——客户必须继续发出请求

101——客户要求服务器根据请求转换HTTP协议版本

二、成功

200——服务器成功返回网页

201——提示知道新文件的URL

202——接受和处理、但处理未完成

203——返回信息不确定或不完整

204——请求收到，但返回信息为空

205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件

206——服务器已经完成了部分用户的GET请求

三、重定向

300——请求的资源可在多处得到

301——删除请求数据

302——在其他地址发现了请求数据

303——建议客户访问其他URL或访问方式

304——客户端已经执行了GET，但文件未变化

305——请求的资源必须从服务器指定的地址得到

306——前一版本HTTP中使用的代码，现行版本中不再使用

307——申明请求的资源临时性删除

四、请求错误

400——错误请求，如语法错误

401——请求授权失败

402——保留有效ChargeTo头响应

403——请求不允许

404——请求的网页不存在

405——用户在Request-Line字段定义的方法不允许

406——根据用户发送的Accept拖，请求资源不可访问

407——类似401，用户必须首先在代理服务器上得到授权

408——客户端没有在用户指定的饿时间内完成请求

409——对当前资源状态，请求不能完成

410——服务器上不再有此资源且无进一步的参考地址

411——服务器拒绝用户定义的Content-Length属性请求

412——一个或多个请求头字段在当前请求中错误

413——请求的资源大于服务器允许的大小

414——请求的资源URL长于服务器允许的长度

415——请求资源不支持请求项目格式

416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段

417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求

五、服务器错误

500——服务器产生内部错误

501——服务器不支持请求的函数

502——服务器暂时不可用，有时是为了防止发生系统过载

503——服务器超时过载或暂停维修

504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长

505——服务器不支持或拒绝支请求头中指定的HTTP版本

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

过程如下：

1、域名解析
2、发起TCP的三次握手
3、建立TCP连接后发起http请求
4、服务器端响应http请求，浏览器得到html码
5、浏览器解析html代码，并请求html代码中的资源
6、浏览器对页面进行渲染并呈现给客户

10.HTTPS是如何实现加密？

HTTPS在传输数据之前需要客户端（浏览器）与服务端（网站）之间进行一次握手，在握手过程中将确立双方加密传输数据的密码信息。TLS/SSL协议不仅仅是一套加密传输的协议，更是一件经过艺术家精心设计的艺术品，TLS/SSL中使用了非对称加密，对称加密以及HASH算法。

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

浏览器渲染页面，会经过以下几个步骤：

1、解析文档构建DOM树

浏览器的解析内容可以分为三个部分：

HTML/XHTML/SVG：解析这三种文件后，会生成DOM树（DOM Tree）

CSS：解析样式表，生成CSS规则树（CSS Rule Tree）

JavaScript：解析脚本，通过DOM API和CSSOM API操作DOM Tree和CSS Rule Tree，与用户进行交互。

以上三类文件的执行顺序会根据其在文档中的位置及其标签属性的不同而有异同，具体在后文进行讨论。

2、构建渲染树

解析文档完成后，浏览器引擎会将 CSS Rule Tree 附着到DOM Tree 上，并根据DOM Tree 和 CSS Rule Tree构造 Rendering Tree（渲染树）。此处需要注意：

Render Tree和DOM Tree的区别在于，类似Head或display：node之类的东西不会放在渲染树中；

将CSS Rule Tree匹配到DOM Tree需要解析CSS的选择器，为了提高该过程的性能，DOM树应该尽量小，CSS Selector应该尽量使用id和class，避免过度层叠。

3、布局与绘制渲染树

解析position, overflow, z-index等等属性，计算每一个渲染树节点的位置和大小，此过程被称为reflow。最后调用操作系统的Native GUI API完成绘制（repain）。

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

浏览器的内核分类

1、Trident内核：代表作品是IE

2、Gecko内核：代表作品是Firefox，即火狐浏览器。

3、Webkit内核：代表作品是Safari Chromewebkit、曾经的Chrome，是开源的项目。

4、Presto内核：代表作品是Opera ，Presto是由Opera Software开发的浏览器排版引擎，它是世界公认最快的渲染速度的引擎。在13年之后，Opera宣布加入谷歌阵营，弃用了 Presto

5、Blink内核：由Google和Opera Software开发的浏览器排版引擎，2013年4月发布。现在Chrome内核是Blink。谷歌还开发了自己的JS引擎，V8，使JS运行速度极大地提高了

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

1- 基本区别

1- 属性区别: link是XHTM标签,除了加载css代码外,还可以定义Rss等其它的事物,@import是css提供的,只能加载css代码

2- 加载区别: link引用的css是在页面加载的时候,同时引入, @import需要页面加载完以后加载

3- 权重区别: link导入的方式权重高于@import权重

4- 兼容问题: link不存在兼容问题, @import是在css2.1提出来的,所以低版本的IE5浏览器是不兼容的

5- DOM可控性: link支持使用JavaScript去控制DOM去修改样式,@import则不支持

2- 使用方式区别

1- 使用link的方式导入

<link href="xxx.css" rel='stykesheet' type='text/css'>

2- 使用@import关键字导入

<style type='css'>
@import url('xxx.css')
</style>

简略回答：

1.ink属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;

2.页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

3.import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题

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

优化图像

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

图像格式区别

矢量图：图标字体，如 font-awesome；svg
位图：gif,jpg(jpeg),png

区别：

　　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渲染

1、尽可能多的利用硬件能力，如使用3D变形来开启GPU加速：

-webkit\-transform: translate3d(0,0,0);
  -moz\-transform: translate3d(0,0,0);
  -ms\-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);

一个元素通过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）；

如动画过程有闪烁（通常发生在动画开始的时候），可以尝试下面的Hack：

-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden; 
 -webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;

2、尽可能少的使用box-shadows与gradients

box-shadows与gradients往往都是页面的性能杀手，尤其是在一个元素同时都使用了它们.

尽可能的让动画元素不在文档流中，以减少重排。

position: fixed;position: absolute;