前端面试题之html css篇

1.什么是盒模型

当我们对一个文档进行布局的时候，浏览器的渲染引擎会根据标准之一的css基础的盒模型，将所有的元素表示为一个个的矩形的盒子

一个盒子有四个部分组成，content（实际内容，显示文本和图像）、padding（内边距）、border（边框）、margin（外边距）

盒模型有两种：分别是标准盒模型和怪异盒模型(IE盒模型)

标准盒模型的总宽度：width= content部分的宽度

怪异盒模型的总宽度：width=content+padding+border

可以通过修改元素的box-sizing属性来改变元素的盒模型：
box-sizing：content-box表示标准盒模型（默认值）
box-sizing：border-box表示IE盒子模型（怪异盒模型）

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

1. 行内元素：a，b，span，img，input，strong，label，button，select，textarea，em

2. 块级元素：div，ul（无序列表），ol，li，dl（自定义列表），dt（自定义列表项），dd（自定义列表项的定义），p，h1-h6，blockquote（块引用）

3. 空元素（void）：即没有内容的HTML元素。br（换行），hr（水平分割线），meta，link，input，img

4. 区别：

   1. 行内元素与块级函数可以相互转换，通过修改display属性值来切换块级元素和行内元素，行内元素display：inline，块级元素display：block。

   2. 行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的；
      　块级元素却总是会在新的一行开始排列，各个块级元素独占一行，垂直向下排列，若想使其水平方向排序，可使用左右浮动（float：left/right）让其水平方向排列。

   3. 行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置外边距margin上下无效，左右有效，内填充padding上下无效，左右有效；
      　块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。

   4. 块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素；
      　行内元素不能包含块级元素，只能容纳文本或者其他行内元素。

意思就是说：行内元素不可以设置宽高，不独占一行
块级元素可以设置宽高，独占一行

3.简述src和href的区别

作用结果不同、浏览器解析方式不同、请求资源类型不同。

1. 作用结果不同
   href 用于在当前文档和引用资源之间确立联系；
   src 用于替换当前内容。

2. 浏览器解析方式不同
   若在文档中添加href ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。

   当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

3. 请求资源类型不同
   href 表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。
   请求 src 资源时会将其指向的资源下载并应用到文档中。常用的有script，img 、iframe。

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

4.什么是css Hack

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

CSS Hack大致有三种形式，分别是CSS类中、选择器的Hack和HTML头引用(IF IE)的Hack。CSS Hack主要是针对类中的Hack:比如IE6可以识别下划线’ _ ‘和星号’ * ‘，IE7可以识别星号’ * ‘，但是不能识别下划线’ _ '，firefox也不能识别。

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

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

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

6.px和em的区别

px 和 em 都是⻓度单位，区别是， px 的值是固定的，指定是多少就是多少，
计算⽐较 容易。 em 得值不是固定的，并且 em 会继承⽗级元素的字体⼤⼩。

浏览器的默认字体⾼都是 16px 。所以未经调整的浏览器都符合: 1em=16px 。
那么 12px=0.75em , 10px=0.625em 。

7.HTML5 为什么只写< !DOCTYPE HTML>

1. HTML5 不基于 SGML（标准通用标记语言） ，因此不需要对 DTD ( 文档类型定义 ) 进⾏引⽤，但是需要 doctype 来规范浏览器 的⾏为

2. HTML4.01 基于 SGML ,所以需要对 DTD 进⾏引⽤，才能告知浏览器⽂档所使⽤的⽂档 类型

8.Http的状态码有哪些

1. 1xx
   100,接收的请求正在处理，信息类状态码
2. 2xx，成功
   2xx(成功)表示成功处理了请求的状态码
   200(成功)服务器已成功处理了请求。
3. 3xx 重定向
   301，永久性重定向，表示资源已被分配了新的 URL
   302，临时性重定向，表示资源临时被分配了新的 URL
   303，表示资源存在另一个URL，用GET方法获取资源
   304，(未修改)自从上次请求后，请求网页未修改过。服务器返回此响应时，不会返回网页内容
4. 4xx 客户端错误
   400(错误请求)服务器不理解请求的语法
   401表示发送的请求需要有通过HTTP认证的认证信息
   403(禁止)服务器拒绝请求
   404(未找到)服务器找不到请求网页
5. 5xx 服务器端错误
   500，(服务器内部错误)服务器遇到错误，无法完成请求
   503，表示服务器处于停机维护或超负载，无法处理请求

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

1、域名解析

2、发起TCP的三次握手

3、建立TCP连接后发起http请求

4、服务器端响应http请求，浏览器得到html码

5、浏览器解析html代码，并请求html代码中的资源

6、浏览器对页面进行渲染并呈现给客户

HTTP事务有以下四个部分组成：

1. 客户端与服务器建立连接。HTTP是基于TCP协议，这里的连接可以理解为TCP连接；如果我们只知道服务器的域名，还需要在建立连接前发起DNS解析，TCP的Socket通信需要服务器的IP地址；建立连接的过程需要三次握手。
2. 客户端向服务器发送请求。在建立TCP连接之后，客户端给服务器发送一个HTTP请求报文，请求报文中包含有客户端需要的资源等信息，例如最简单的HTML文档。
3. 服务器给客户端一个响应。服务器收到客户端的请求后，可以拒绝客户端的请求，也可以向客户端发送一个HTTP响应报文；这个响应中包含了客户端请求的HTML文档。
4. 客户端与服务器断开连接。在客户端收到服务器响应后，可以选择与服务器断开连接，也可以选择继续保持连接（HTTP持续连接），以供下一个HTTP事务使用；客户端和服务器都可以发起关闭连接，关闭TCP连接需要四次挥手。
   

10.HTTPS是如何实现加密

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

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

1. 解析html代码，生成DOM tree

2. 解析css代码，生成CSSOM tree

3. 通过DOM tree 和 CSSOM tree 生成 Render tree

4. Layout（布局），计算Render tree中各个节点的位置及精确大小

5. Painting（绘制），将render tree渲染到页面上

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

1、IE浏览器内核：Trident内核，也是俗称的IE内核；

2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；

3、Firefox浏览器内核：Gecko内核，俗称Firefox内核；

4、Safari浏览器内核：Webkit内核；

5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；

6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；

7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；

8、百度浏览器、世界之窗内核：IE内核；

9、2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；

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

1. 从属差异：link是XHTML标签，不仅可以加载css，还可以加载其他的；@import属于css，是css提供的，只能加载css
2. 加载差异：用link引用css时，在页面加载时同时加载，而@import是在页面加载完成后再加载
3. 兼容性：link是XHTML标签，无兼容问题，而@import不兼容ie5以下的浏览器
4. 可操作性：link可以通过js控制DOM去改变样式，而@import不能

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

优化图像

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

图像格式区别

1. gif:是是一种无损，8位图片格式。具有支持动画，索引透明，压缩等特性。适用于做色彩简单(色调少)的图片，如logo,各种小图标icons等。
2. JPEG格式是一种大小与质量相平衡的压缩图片格式。适用于允许轻微失真的色彩丰富的照片，不适合做色彩简单(色调少)的图片，如logo,各种小图标icons等。
3. png:PNG可以细分为三种格式:PNG8，PNG24，PNG32。后面的数字代表这种PNG格式最多可以索引和存储的颜色值。

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

html5新特性

1. 语义化标签：文档头部:header、文档尾部:footer、文档中的节点:section、导航:nav、侧边栏:aside、独立内容区域:article

2. 增强型表单：HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证

3. 新增表单属性：

   • placeholder：输入框的默认提示
   • required：是一个 boolean 属性。要求填写的输入域不能为空
   • pattern：描述了一个正则表达式用于验证input元素的值
     min和max设置元素最小值和最大值
   • 音频视频：（audio、video、canvas ）
   • 画布、地理定位、拖拽

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

5. 新事件:

   • onresize 当调整窗口大小时触发
   • ondrag 当拖动元素时触发
   • onscroll 当滚动元素滚动元素的滚动条时触发
   • onmousewheel 当转动鼠标滚轮时触发
   • onerror 当错误发生时触发
   • onplay 当媒介数据将要开始播放时触发
   • onpause 当媒介数据暂停时触发

css3新特性

1. 选择器，
   :last-child /* 选择元素最后一个孩子 */
   :first-child / 选择元素第一个孩子 /
2. 背景和边框属性，
   border-radius: 圆角
   border-shadow/text-shadow: 阴影
   border-image: 边框图片
3. 文本效果，
   text-shadow 向文本添加阴影
4. 2D/3D转换
   变形transform：
   有rotate旋转、scale缩放、translate位移、skew倾斜
   过渡transition：
   transition是一个复合属性，可以同时定义transition-property、transition-duration、transition-timing-function、transition-delay子属性值

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

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

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

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

1. 加载优化（减少http请求数）
   1. 合并图片：当图片较多时，像精灵图，雪碧图可以合并为一张大图，从而减少http请求数。经常变化的图片可能不太合适，变化相对稳定的就可以考虑。合并大图除了能减少http 请求数外，还可以充分利用缓存来提升性能。
   2. 合并压缩css样式表和js脚本，他们的共同目的都是为了减少http连接数。
   3. 去掉不必要的请求，开发写代码或者系统升级之后残留的无效请求连接。
   4. 首屏加载：首屏快速显示可大大的提升用户对页面速度的感知，应尽量针对首屏的快速显示做出相应的优化。
   5. 充分利用缓存：来减少向服务器发送的请求数，节省网络资源，所有静态资源都要放在服务器端并设置缓存，并且要尽量使用长缓存。
   6. 预加载：大型资源页面可使用Loading，资源加载完成后再显示页面，但是加载时间过长，会造成负体验。
   7. 异步加载第三方资源：第三方资源不可控，会影响页面加载，所以要异步加载第三方资源。
2. 图片优化
   1. 尽可能的使用PNG格式的图片，它相对来说体积较小，可以使用工具压缩，在上线之前最好进行一定的优化。
   2. 同时在代码中进行图片的延迟加载，也叫做赖加载。
   3. 避免img、iframe等标签的src属性为空：空src会重新加载当前页面，影响速度和效率。
   4. 图像尽量避免使用DataURL：DataURL图像没有使用图像压缩算法，文件会变大，并且要解码后再渲染，加载慢耗时长。
3. 使用CDN
   CDN：实现把内容从中心媒体服务器分发到边缘服务器的网络体系即内容分发网络，CDN具有更低的网络延迟和丢包率，能够分配负载，节省带宽提高网站的性能，可以使用户就近取得所需内容，解决网络拥挤的状况，提高用户访问网站的响应速度。
4. 开启Gzip（代码压缩）
   Gzip即数据压缩，前端生产环境中将js、css、图片等文件进行压缩，通过减少数据传输量减小传输时间，节省服务器网络带宽，提高前端性能。
5. 样式表和JS文件的优化
   一般我们会把css样式表文件放到文件的头部使用link引入，这样可以让CSS样式表尽早地完成下载。
6. 减少不必要的Cookie
   Cookie存储在客户端，伴随着HTTP请求在浏览器和服务器之间传递，由于cookie在访问对应域名下的资源时都会通过HTTP请求发送到服务器，从而会影响加载速度，所以尽量减少不必要的Cookie。
7. 脚本优化
   1. 尽量使用id选择器：id选择器选择元素是最快的，具有唯一性，灵活性和优先性的优点。
   2. 复杂动画效果，使用绝对定位让其脱离文档流，避免循环DOM元素，用transform:translate 代替 position left、right…以此来尽量减少回流和重绘。
8. 前端代码结构的优化
   1. 减少DOM结点：DOM结点太多会影响页面的渲染。
   2. 尽量使用css3动画
   3. …
9. SEO优化

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

1. localStorage实现通信
   • 同域共享存储空间
   • 持久化将数据存储来浏览器
   • 提供事件监听localStorage变化
2. 使用websocket
   • 保持连接状态，HTTP协议是无状态连接，即请求完毕后就会关闭连接。
   • 全双工通信，客户端和服务端平等对待，可以互相通信。
   • 建立在TCP协议之上
   • 没有同源共享策略，即可实现跨域共享
3. SharedWorker
   • 跨域不共享，即多个标签页不能跨域
   • 使用port发送和接收消息
   • 如果url相同，且是同一个js，那么只会创建一个sharedWorker，多个页面共享这个sharedWorker

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

1. cookie:
   cookie能存储的数据容量有限，根据浏览器类型不同而不同，IE6大约只能存储2K。

2. localStorage:
   localStorage是Web Storage互联网存储规范中的一部分，现在在Firefox 3.5、Safari 4和IE8中得到支持。
   缺点：低版本浏览器不支持。

3. sessionStorage:
   同一个窗口（或者Tab）页面刷新或者跳转，都能获取到本地存储的数据，当新开窗口或者页面时，原来的数据就失效了。
   缺点：IE不支持、不能实现数据的持久保存。

4. globalStorage:
   使用于Firefox2+的火狐浏览器，类似于IE的userData。
   缺点：IE不支持。

5. userData:
   IE浏览器可以使用userData来存储数据，容量可达到640K，这种方案是很可靠的，不需要安装额外的插件。
   缺点：它仅在IE下有效。

6. Google Gear:
   Google开发出的一种本地存储技术。
   缺点：需要安装Gear组件。

7. Flash ShareObject:
   这种方式能能解决上面提到的cookie存储的两个弊端，而且能够跨浏览器，应该说是目前最好的本地存储方案。不过，需要在页面中插入一个Flash，当浏览器没有安装Flash控件时就不能用了。所幸的是，没有安装Flash的用户极少。
   缺点：需要安装Flash插件。

20.css定位方式

1. 静态定位：
   设置方式为position: static;静态定位的盒子是标准流状态，用于取消定位。静态定位的盒子处于网页的最底层，并且top、left、bottom、right属性都不起作用。
2. 相对定位
   设置方式为position: relative;相对定位的盒子没有脱离标准流，在页面中占据位置，盒子的层级高于标准流和浮动的盒子，top、left、bottom、right属性都会起作用。
   如果想让第一个盒子覆盖第二个盒子，可以通过设置z-index属性实现
3. 绝对定位
   设置方式为position: absolute;绝对定位的盒子脱离了标准流，在页面中不占位置，盒子的层级高于标准流和浮动的盒子，top、left、bottom、right属性都会起作用。
4. 固定定位
   设置方式为position: fixed;固定定位的盒子脱离了标准流，在页面中不占位置，盒子的层级高于标准流和浮动的盒子，top、left、bottom、right属性都会起作用。