前端常见面试题总结（HTML&&CSS部分）HTML&CSS 介绍一下你对浏览器内核的理解？浏览器最重要或者说核心的部

其它章节：

HTML&&CSS部分

Javascript部分（一）

Javascript部分（二）

Vue部分

React部分

网络部分

性能部分

HTML&CSS

介绍一下你对浏览器内核的理解？

浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页。所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

常见的浏览器内核有哪些？

Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等。
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]
EdgeHTML内核：Microsoft Edge。 [此内核其实是从MSHTML fork而来，删掉了几乎所有的IE私有特性]

请描述一个网页从开始请求道最终显示的完整过程

一个网页从请求到最终显示的完整过程一般可以分为如下7个步骤：（1）在浏览器中输入网址；（2）发送至DNS服务器并获得域名对应的WEB服务器IP地址；（3）与WEB服务器建立TCP连接；（4）浏览器向WEB服务器的IP地址发送相应的HTTP请求；（5）WEB服务器响应请求并返回指定URL的数据，或错误信息，如果设定重定向，则重定向到新的URL地址；（6）浏览器下载数据后解析HTML源文件，解析的过程中实现对页面的排版，解析完成后在浏览器中显示基础页面；（7）分析页面中的超链接并显示在当前页面，重复以上过程直至无超链接需要发送，完成全部数据显示。

HTML语义化的理解

用正确的标签做正确的事情。
html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
及时在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

HTML5离线储存

在线情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线情况下，浏览器就直接使用离线存储的资源。

请描述一下 cookies，sessionStorage 和 localStorage 的区别？

Web Storage有两种形式：LocalStorage（本地存储）和sessionStorage（会话存储）。这两种方式都允许开发者使用js设置的键值对进行操作，在在重新加载不同的页面的时候读出它们。这一点与cookie类似。
（1）与cookie不同的是：Web Storage数据完全存储在客户端，不需要通过浏览器的请求将数据传给服务器，因此x相比cookie来说能够存储更多的数据，大概5M左右。
（2）LocalStorage和sessionStorage功能上是一样的，但是存储持久时间不一样。
LocalStorage：浏览器关闭了数据仍然可以保存下来，并可用于所有同源（相同的域名、协议和端口）窗口（或标签页）；
sessionStorage：数据存储在窗口对象中，窗口关闭后对应的窗口对象消失，存储的数据也会丢失。
注意：sessionStorage 都可以用localStorage 来代替，但需要记住的是，在窗口或者标签页关闭时，使用sessionStorage 存储的数据会丢失。
（3）使用 local storage和session storage主要通过在js中操作这两个对象来实现，分别为window.localStorage和window.sessionStorage. 这两个对象均是Storage类的两个实例，自然也具有Storage类的属性和方法。

介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

每个HTML元素都是长方形盒子。
（1）盒子模型有两种：IE盒子模型、标准W3C盒子模型；IE的content部分包含了border和pading。
（2）标准W3C盒模型包含：内容(content)、填充(padding)、边界(margin)、边框(border)。

display有哪些值？说明他们的作用?

block         象块类型元素一样显示。
none          缺省值。象行内元素类型一样显示。
inline-block  象行内元素一样显示，但其内容象块类型元素一样显示。
list-item     象块类型元素一样显示，并添加样式列表标记。
table         此元素会作为块级表格来显示
inherit       规定应该从父元素继承 display 属性的值

position定位

absolute
    生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。
fixed （老IE不支持）
    生成绝对定位的元素，相对于浏览器窗口进行定位。
relative
    生成相对定位的元素，相对于其正常位置进行定位。
static
    默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
inherit
    规定从父元素继承 position 属性的值。

Flex

容器的属性

// 主轴的方向
flex-direction: row | row-reverse | column | column-reverse;
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

// 换行属性
flex-wrap: nowrap | wrap | wrap-reverse;
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

// 简写：方向 + 换行
flex-flow: <flex-direction> || <flex-wrap>;

// 主轴对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

// 交叉轴对齐方式
align-items: flex-start | flex-end | center | baseline | stretch;
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

// 多根轴线对齐方式
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

项目的属性

// 排列顺序，数值越小，排列越靠前，默认为0。
order: <integer>;

// 项目的放大比例,默认为0，即如果存在剩余空间，也不放大。
flex-grow: <number>; /* default 0 */

// 项目的缩小比例,默认为1，即如果空间不足，该项目将缩小。
flex-shrink: <number>; /* default 1 */

// 项目占据的空间,默认值为auto，即项目的本来大小
flex-basis: <length> | auto; /* default auto */

// 简写：flex-grow, flex-shrink 和 flex-basis
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

// 独立的对齐方式
align-self: auto | flex-start | flex-end | center | baseline | stretch;

关于项目属性flex的理解：

简写形式	完整形式
简写形式	flex : 0 1 auto;
flex : 1	flex : 1 1 0%;
flex: auto	flex : 1 1 auto;
flex : none	flex: 0 0 auto;
flex : 0%	flex : 1 1 0%;
flex : 2 3	flex : 2 3 0%;
flex : 2 3px	flex : 2 1 3px;

注意：

1.重点理解flex:1跟flex:auto的区别，本质上是flex-basis的理解。

2.flexbox在分配剩余空间时，需要计算剩余空间的大小，这依赖于flex-basis。

3.flex:1时flex-basis是0%，也就是元素就算设置了width也不会起作用，基准宽度为0，元素的最终宽度是分配了剩余宽度后得到的尺寸。

4.flex:auto时，flex-basis是auto，基准宽度为元素设置的width，最终宽度等于基准宽度+剩余宽度分配后的宽度。

如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？如何让一个元素垂直水平居中？

(1) 如何居中div，如何居中一个浮动元素？

//给div设置一个宽度，然后添加margin:0 auto属性   
	div{
        width:200px;
        margin:0 auto;
     }

(2) 如何居中一个浮动元素

// 确定容器的宽高，如宽500、高 300的层，设置层的外边距
     .div { 
      Width:500px ; height:300px;//高度可以不设
      Margin: -150px 0 0 -250px;
      position:relative;相对定位
      background-color:pink;//方便看效果
      left:50%;
      top:50%;
    }

(3) 元素水平垂直居中

方案1：position 元素已知宽度

父元素设置为：position: relative; 子元素设置为：position: absolute; 距上50%，据左50%，然后减去元素自身宽度的距离就可以实现


<div class="box">
    <div class="content">
    </div>
</div>

.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    position: relative;
}
.content {
    background-color: #F00;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -50px;
}

方案2：position transform 元素未知宽度

如果元素未知宽度，只需将上面例子中的margin: -50px 0 0 -50px;替换为：transform: translate(-50%,-50%); 效果如上！

<div class="box">
    <div class="content">
    </div>
</div>

.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    position: relative;
}
.content {
    background-color: #F00;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

方案3：flex布局

<div class="box">
    <div class="content">
    </div>
</div>

.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    display: flex;//flex布局
    justify-content: center;//使子项目水平居中
    align-items: center;//使子项目垂直居中
}
.content {
    background-color: #F00;
    width: 100px;
    height: 100px;
}

方案4：table-cell布局

因为table-cell相当与表格的td，td为行内元素，无法设置宽和高，所以嵌套一层，嵌套一层必须设置display: inline-block;td的背景覆盖了橘黄色，不推荐使用

<div class="box">
    <div class="content">
        <div class="inner">
        </div>
    </div>
</div>

.box {
    background-color: #FF8C00;//橘黄色
    width: 300px;
    height: 300px;
    display: table;
}
.content {
    background-color: #F00;//红色
    display: table-cell;
    vertical-align: middle;//使子元素垂直居中
    text-align: center;//使子元素水平居中
}
.inner {
    background-color: #000;//黑色
    display: inline-block;
    width: 20%;
    height: 20%;
}

为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

浮动元素碰到包含它的边框或者浮动元素的边框停留。由于浮动元素不在文档流中，所以文档流的块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流的块框上。浮动带来的问题：

父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素（内联元素）会跟随其后
若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。

清除浮动的方式：

父级div定义height
最后一个浮动元素后加空div标签并添加样式clear:both。
包含浮动元素的父标签添加样式overflow为hidden或auto。
父级div定义zoom

BFC

BFC到底是什么东西

BFC 全称：Block Formatting Context，名为 "块级格式化上下文"。

W3C官方解释为：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。

简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢，BFC可以看做是一个CSS元素属性

怎样触发BFC

这里简单列举几个触发BFC使用的CSS属性

overflow: hidden
display: inline-block
position: absolute
position: fixed
display: table-cell
display: flex

BFC的规则

BFC就是一个块级元素，块级元素会在垂直方向一个接一个的排列
BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签
垂直方向的距离由margin决定，属于同一个BFC的两个相邻的标签外边距会发生重叠
计算BFC的高度时，浮动元素也参与计算

BFC解决了什么问题

使用Float脱离文档流，高度塌陷
Margin边距重叠
两栏布局

上下margin重合的问题(margin塌陷问题)

一个父盒子里面套了一个小盒子，如果这个父盒子里面没有文字，也没有边框（border），也没有padding-top （这三个条件中没有一个满足的），当我们给小盒子设置margin-top的时候，会发现父盒子会跟着一起往下掉，这个现象就叫做margin值穿透。

原理：

父子嵌套元素在垂直方向的margin,父子元素是结合在一起的,他们两个的margi会取其中最大的值

margin塌陷解决方法

1.给父级设置边框或内边距(不建议使用)

2.触发bfc(块级格式上下文),改变父级的渲染规则