浏览器、html、css面试题（一）

admin管理员组

文章数量:1547226

文章目录

• • 1.什么是盒模型
  • • • 盒模型
      • W3C的标准盒模型
      • IE的盒模型
      • css如何设置两种模型
  • 2.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？
  • 3.简述src和href的区别
  • 4.什么是css Hack
  • • • CSS Hack常见的有三种形式：
  • 5.什么叫优雅降级和渐进增强
  • 6.px和em的区别
  • 7.HTML5 为什么只写
  • 8.Http的状态码有哪些
  • 9.一次完整的HTTP事务是怎么一个过程
  • 10.HTTPS是如何实现加密
  • 11.浏览器是如何渲染页面的
  • • • 浏览器页面渲染流程
      • • 1、解析文档构建DOM树
        • 2、构建渲染树
        • 3、布局与绘制渲染树
  • 12.浏览器的内核有哪些？分别有什么代表的浏览器
  • 13.页面导入时，使用link和@import有什么区别
  • 14.如何优化图像，图像格式的区别
  • • • 优化图像
      • 图像格式区别
  • 15.列举你了解Html5. Css3 新特性
  • • • 1.html5的新特性？(记住有九大模块内容)
      • 2.CSS3中新添加的特性？（css3也有九大属性）
  • 16.可以通过哪些方法优化css3 animation渲染
  • • 1、尽可能多的利用硬件能力，如使用3D变形来开启GPU加速：
    • 2、尽可能少的使用box-shadows与gradients
  • 17.列举几个前端性能方面的优化
  • • • 网络方面
      • 渲染和DOM操作方面
      • 数据方面
      • 总结
  • 18.如何实现同一个浏览器多个标签页之间的通信
  • 19.浏览器的存储技术有哪些
  • • cookie
    • sessionStorage
    • localStorage
• Cookie，LocalStorage，SessionStorage
• • • • 1、Cookie
      • 2、LocalStorage
      • 3、SessionStorage
  • 20.css定位方式
  • • • **static**
      • **relative**
      • **absolute**
      • **fixed**
  • 21.尽可能多的写出浏览器兼容性问题
  • 22.垂直上下居中的方法
  • • • 第一种方法（知道元素的宽和高）
      • 第二种方法（不知道元素的宽和高）
      • 第三种方法（不知道元素的宽和高）
      • 第四种方法（flex布局）
  • 23.响应式布局原理
  • 首先我们应该遵循移动优先原则：
  • • **一、响应式布局**
    • **二、响应式内容**
  • 25.清除浮动的方法
  • • • 方式一:使用overflow属性来清除浮动
      • 方式二:使用额外标签法
    • 方法三:使用伪元素来清除浮动
    • 方法四:使用双伪元素清除浮动
  • 26.http协议和tcp协议
  • • • 1、TCP连接
      • 2、HTTP连接
  • 27.刷新页面，js请求一般会有哪些地方有缓存处理
  • 28.如何对网站的文件和资源进行优化
  • 29.你对网页标准和W3C重要性的理解
  • 30.Http和https的区别
  • • • **一、HTTP和HTTPS的基本概念**
      • **二、HTTP与HTTPS有什么区别？**
      • HTTPS和HTTP的区别主要如下：

1.什么是盒模型

盒模型

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

W3C的标准盒模型

在标准的盒子模型中，width指content部分的宽度

IE的盒模型

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

css如何设置两种模型

这里用到了CSS3 的属性 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是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。例如：

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

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

---

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开始就提供的一种非标准逻辑语句。比如针对所有IE：<!-[if IE]><!-您的代码-><![endif]>，针对IE6及以下版本：<!-[if it IE 7]><!-您的代码-><![endif]->，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

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

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

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

优雅降级（Graceful Degradation）：

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

6.px和em的区别

px像素（Pixel）

相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

em

是相对长度单位。相对于当前对象内文本的字体尺寸,多理解父级设定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.浏览器是如何渲染页面的

浏览器页面渲染流程

浏览器从HTTP服务器获取html文档，到呈现页面给用户，会经过以下几个步骤：

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）。

注意：
渲染树的节点，在Gecko中称为frame，而在webkit中称为renderer；
reflow和repaint是两个不同的概念，其区别会在后文进行探讨。

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.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。

基本上，内容图片多为照片之类的，适用于JPEG。

而修饰图片通常更适合用无损压缩的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,各种小图标icon

本文标签： 面试题浏览器htmlcss