BFC 详解

发表于 分类于
本文字数： 23k 阅读时长 ≈ 21 分钟

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 就是一个块级元素，块级元素会在垂直方向一个接一个的排列
  • 在 BFC 中上下相邻的两个容器的 margin 会重叠，创建新的 BFC 可以避免外边距重叠
  • 计算 BFC 的高度时，浮动元素也参与计算
  • BFC 区域不会与浮动的容器发生重叠
  • 每个元素的左 margin 值和容器的左 border 相接触

BFC 解决了什么问题

1.使用 Float 脱离文档流，高度塌陷

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高度塌陷</title>
    <style>
        .box {
            margin: 100px;
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }
        .container {
            background: #000;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

效果：

image-20220304003133319

可以看到上面效果给box设置完float结果脱离文档流，使container高度没有被撑开，从而背景颜色没有颜色出来，解决此问题可以给container触发BFC，上面我们所说到的触发BFC属性都可以设置。

修改代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高度塌陷</title>
    <style>
        .box {
            margin: 100px;
            width: 100px;
            height: 100px;
            background: red;
            float: left;
        }
        .container {
            background: #000;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

效果：

img

2.Margin 边距重叠

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            margin: 10px;
            width: 100px;
            height: 100px;
            background: #000;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

效果：

img

可以看到上面我们为两个盒子的margin外边距设置的是10px，可结果显示两个盒子之间只有10px的距离，这就导致了margin塌陷问题，这时margin边距的结果为最大值，而不是合，为了解决此问题可以使用BFC规则（为元素包裹一个盒子形成一个完全独立的空间，做到里面元素不受外面布局影响），或者简单粗暴方法一个设置margin，一个设置padding。

修改代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Margin边距重叠</title>
    <style>
        .box {
            margin: 10px;
            width: 100px;
            height: 100px;
            background: #000;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
        <p><div class="box"></div></p>
    </div>
</body>
</html>

效果：

img

3.两栏布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两栏布局</title>
    <style>
            div {
                 width: 200px;
                 height: 100px;
                 border: 1px solid red;
            }

    </style>
</head>
<body>
    <div style="float: left;">
        两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局
    </div>
    <div style="width: 300px;">
        我是蛙人，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭
    </div>
</body>
</html>

效果：

image-20220304003027435

可以看到上面元素，第二个div元素为300px宽度，但是被第一个div元素设置Float脱离文档流给覆盖上去了，解决此方法我们可以把第二个div元素设置为一个BFC。

修改代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两栏布局</title>
    <style>
            div {
                 width: 200px;
                 height: 100px;
                 border: 1px solid red;
            }

    </style>
</head>
<body>
    <div style="float: left;">
        两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局两栏布局
    </div>
    <div style="width: 300px;display:flex;">
        我是蛙人，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭，如有帮助请点个赞叭
    </div>
</body>
</html>

效果：

image-20220304002958423

  width: 100%;
  height: 7%;
  background-color: green;
}
main {
  height: calc(100vh - 7%);
  background-color: red;
}

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

但是我们必须要弄清楚 css 中子元素的百分比到底是相对谁的百分比。直接上结论吧：

子元素的`height`或`width`中使用百分比，是相对于子元素的直接父元素，`width`相对于父元素的`width`，`height`相对于父元素的`height`；子元素的`top`和`bottom`如果设置百分比，则相对于直接非`static`定位 (默认定位) 的父元素的高度，同样子元素的`left`和`right`如果设置百分比，则相对于直接非`static`定位 (默认定位的) 父元素的宽度；子元素的`padding`如果设置百分比，不论是垂直方向或者是水平方向，都相对于直接父亲元素的`width`，而与父元素的`height`无关。跟`padding`一样，`margin`也是如此，子元素的`margin`如果设置成百分比，不论是垂直方向还是水平方向，都相对于直接父元素的`width`；`border-radius`不一样，如果设置`border-radius`为百分比，则是相对于自身的宽度，除了`border-radius`外，还有比如`translate`、`background-size`等都是相对于自身的；

从上述对于百分比单位的介绍我们很容易看出如果全部使用百分比单位来实现响应式的布局，有明显的以下两个缺点：

- 计算困难，如果我们要定义一个元素的宽度和高度，按照设计稿，必须换算成百分比单位。
- 可以看出，各个属性中如果使用百分比，相对父元素的属性并不是唯一的。比如`width`和`height`相对于父元素的`width`和`height`，而`margin`、`padding`不管垂直还是水平方向都相对比父元素的宽度、`border-radius`则是相对于元素自身等等，造成我们使用百分比单位容易使布局问题变得复杂。

### 3.rem 布局

`REM`是`CSS3`新增的单位，并且移动端的支持度很高，Android2.x+,ios5+都支持。`rem`单位都是相对于根元素 html 的`font-size`来决定大小的，根元素的`font-size`相当于提供了一个基准，当页面的 size 发生变化时，只需要改变`font-size`的值，那么以`rem`为固定单位的元素的大小也会发生响应的变化。因此，如果通过`rem`来实现响应式的布局，只需要根据视图容器的大小，动态的改变`font-size`即可（而`em`是相对于父元素的）。

**rem 响应式的布局思想：**

- 一般不要给元素设置具体的宽度，但是对于一些小图标可以设定具体宽度值
- 高度值可以设置固定值，设计稿有多大，我们就严格有多大
- 所有设置的固定值都用`rem`做单位（首先在 HTML 总设置一个基准值：`px`和`rem`的对应比例，然后在效果图上获取`px`值，布局的时候转化为`rem`值)
- js 获取真实屏幕的宽度，让其除以设计稿的宽度，算出比例，把之前的基准值按照比例进行重新的设定，这样项目就可以在移动端自适应了

**rem 布局的缺点：**

在响应式布局中，必须通过 js 来动态控制根元素`font-size`的大小，也就是说 css 样式和 js 代码有一定的耦合性，且必须将改变`font-size`的代码放在`css`样式之前

/上述代码中将视图容器分为 10 份，font-size 用十分之一的宽度来表示，最后在 header 标签中执行这段代码，就可以动态定义 font-size 的大小，从而 1rem 在不同的视觉容器中表示不同的大小，用 rem 固定单位可以实现不同容器内布局的自适应。/
function refreshRem() {
var docEl = doc.documentElement;
var width = docEl.getBoundingClientRect().width;
var rem = width / 10;
docEl.style.fontSize = rem + ‘px’;
flexible.rem = win.rem = rem;
}
win.addEventListener(‘resize’, refreshRem);

1
2
3

`REM`布局也是目前多屏幕适配的最佳方式。默认情况下我们 html 标签的`font-size`为 16px，我们利用媒体查询，设置在不同设备下的字体大小。

/* pc width > 1100px /
html{ font-size: 100%;}
body {
background-color: yellow;
font-size: 1.5rem;
}
/ ipad pro /
@media screen and (max-width: 1024px) {
body {
background-color: #FF00FF;
font-size: 1.4rem;
}
}
/ ipad /
@media screen and (max-width: 768px) {
body {
background-color: green;
font-size: 1.3rem;
}
}
/ iphone6 7 8 plus /
@media screen and (max-width: 414px) {
body {
background-color: blue;
font-size: 1.25rem;
}
}
/ iphoneX /
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 3) {
body {
background-color: #0FF000;
font-size: 1.125rem;
}
}
/ iphone6 7 8 /
@media screen and (max-width: 375px) and (-webkit-device-pixel-ratio: 2) {
body {
background-color: #0FF000;
font-size: 1rem;
}
}
/ iphone5 */
@media screen and (max-width: 320px) {
body {
background-color: #0FF000;
font-size: 0.75rem;
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

### 4.视口单位

`css3`中引入了一个新的单位`vw/vh`，与视图窗口有关，`vw`表示相对于视图窗口的宽度，`vh`表示相对于视图窗口高度，除了`vw`和`vh`外，还有`vmin`和`vmax`两个相关的单位。各个单位具体的含义如下：

| 单位 | 含义                                                      |
| ---- | --------------------------------------------------------- |
| vw   | 相对于视窗的宽度，1vw 等于视口宽度的 1%，即视窗宽度是 100vw |
| vh   | 相对于视窗的高度，1vh 等于视口高度的 1%，即视窗高度是 100vh |
| vmin | vw 和 vh 中的较小值                                          |
| vmax | vw 和 vh 中的较大值                                          |



![img](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/4/8/169fb9d770ad1553~tplv-t2oaga2asx-watermark.awebp)



用视口单位度量，视口宽度为 100vw，高度为 100vh（左侧为竖屏情况，右侧为横屏情况）。例如，在桌面端浏览器视口尺寸为 650px，那么 1vw = 650 * 1% = 6.5px（这是理论推算的出，如果浏览器不支持 0.5px，那么实际渲染结果可能是 7px）。

那么 vw 或者 vh 很类似百分比单位。vw 和%的区别为：

| 单位  | 含义                                                         |
| ----- | ------------------------------------------------------------ |
| %     | 大部分相对于祖先元素，也有相对于自身的情况比如（border-radius、translate 等) |
| vw/vh | 相对于视窗的尺寸                                             |

从对比中我们可以发现，`vw`单位与百分比类似，单确有区别，前面我们介绍了百分比单位的换算困难，这里的`vw`更像"理想的百分比单位"。任意层级元素，在使用`vw`单位的情况下，1vw 都等于视图宽度的百分之一。

使用视口单位来实现响应式有两种做法：

##### 1.仅使用 vw 作为 CSS 单位

- 对于设计稿的尺寸转换为为单位，我们使用`Sass`函数编译

//iPhone 6 尺寸作为设计稿基准
$vm_base: 375;
@function vw($px) {
@return ($px / 375) * 100vw;
}

1
2
3

- 无论是文本还是布局宽度、间距等都使用`vw`作为单位


.mod_nav {
background-color: #fff;
&_list {
display: flex;
padding: vm(15) vm(10) vm(10); // 内间距
&_item {
flex: 1;
text-align: center;
font-size: vm(10); // 字体大小
&_logo {
display: block;
margin: 0 auto;
width: vm(40); // 宽度
height: vm(40); // 高度
img {
display: block;
margin: 0 auto;
max-width: 100%;
}
}
&_name {
margin-top: vm(2);
}
}
}
}
1
2
3

- 1 物理像素线（也就是普通屏幕下 1px，高清屏幕下 0.5px 的情况）采用`transform`属性`scale`实现


.mod_grid {
position: relative;
&::after {
// 实现1物理像素的下边框线
content: ‘’;
position: absolute;
z-index: 1;
pointer-events: none;
background-color: #ddd;
height: 1px;
left: 0;
right: 0;
top: 0;
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
-webkit-transform: scaleY(0.5);
-webkit-transform-origin: 50% 0%;
}
}
…
}
1
2
3

- 对于需要保持宽高比的图，应该用`padding-top`实现


.mod_banner {
position: relative;
padding-top: percentage(100/700); // 使用 padding-top
height: 0;
overflow: hidden;
img {
width: 100%;
height: auto;
position: absolute;
left: 0;
top: 0;
}
}
1
2
3
4
5
6
7
8
9

##### 2.搭配 vw 和 rem

虽然采用`vw`适配后的页面效果很好，但是它是利用视口单位实现的布局，依赖视口大小而自动缩放，无论视口过大还是过小，它也随着时候过大或者过小，失去了最大最小宽度的限制，此时我们可以结合`rem`来实现布局

- 给根元素大小设置随着视口变化而变化的`vw`单位，这样就可以实现动态改变其大小

- 限制根元素字体大小的最大最小值，配合`body`加上最大宽度和最小宽度


// rem 单位换算：定为 75px 只是方便运算，750px-75px、640-64px、1080px-108px，如此类推
$vm_fontsize: 75; // iPhone 6 尺寸的根元素大小基准值
@function rem($px) {
@return ($px / $vm_fontsize ) * 1rem;
}
// 根元素大小使用 vw 单位
$vm_design: 750;
html {
font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw;
// 同时，通过 Media Queries 限制根元素最大最小值
@media screen and (max-width: 320px) {
font-size: 64px;
}
@media screen and (min-width: 540px) {
font-size: 108px;
}
}
// body 也增加最大最小宽度限制，避免默认 100% 宽度的 block 元素跟随 body 而过大过小
body {
max-width: 540px;
min-width: 320px;
}
1
2
3
4
5
6
7
8
9

### 5.图片响应式

这里的图片响应式包括两个方面，一个就是大小自适应，这样能够保证图片在不同的屏幕分辨率下出现压缩、拉伸的情况；一个就是根据不同的屏幕分辨率和设备像素比来尽可能选择高分辨率的图片，也就是当在小屏幕上不需要高清图或大图，这样我们用小图代替，就可以减少网络带宽了。

##### 1.使用 max-width（图片自适应）:

图片自适应意思就是图片能随着容器的大小进行缩放，可以采用如下代码：


img {
display: inline-block;
max-width: 100%;
height: auto;
}

1
2
3
4
5
6
7

`inline-block` 元素相对于它周围的内容以内联形式呈现，但与内联不同的是，这种情况下我们可以设置宽度和高度。 `max-width`保证了图片能够随着容器的进行等宽扩充（即保证所有图片最大显示为其自身的 100%。此时，如果包含图片的元素比图片固有宽度小，图片会缩放占满最大可用空间），而`height`为`auto`可以保证图片进行等比缩放而不至于失真。如果是背景图片的话要灵活运用`background-size`属性。

那么为什么不能用`width：100%`呢？因为这条规则会导致它显示得跟它的容器一样宽。在容器比图片宽得多的情况下，图片会被无谓地拉伸。

##### 2.使用 srcset

1
2
3
4
5
6
7
8
9

如果屏幕的 dpi = 1 的话则加载 1 倍图，而 dpi = 2 则加载 2 倍图，手机和 mac 基本上 dpi 都达到了 2 以上，这样子对于普通屏幕来说不会浪费流量，而对于视网膜屏来说又有高清的体验。

如果浏览器不支持`srcset`，则默认加载 src 里面的图片。

但是你会发现实际情况并不是如此，在 Mac 上的 Chrome 它会同时加载`srcset`里面的那张 2x 的，还会再去加载 src 里面的那张，加载两张图片。顺序是先把所有`srcset`里面的加载完了，再去加载 src 的。这个策略比较奇怪，它居然会加载两张图片，如果不写 src，则不会加载两张，但是兼容性就没那么好。这个可能是因为浏览器认为，既然有`srcset`就不用写 src 了，如果写了 src，用户可能是有用的。而使用`picture`就不会加载两张

##### 3.使用 background-image

.banner{ background-image: url(/static/large.jpg); }

@media screen and (max-width: 767px){
background-image: url(/static/small.jpg);
}

1
2
3
4
5

##### 4.使用 picture 标签

[picturefill.min.js](https://link.juejin.im/?target=https%3A%2F%2Fscottjehl.github.io%2Fpicturefill%2F) ：解决 IE 等浏览器不支持 的问题

1
2
3
4
5

`picture`必须要写 img 标签，否则无法显示，对`pictur`e 的操作最后都是在 img 上面，例如 onload 事件是在 img 标签触发的，`picture`和`source`是不会进行 layout 的，它们的宽和高都是 0。

另外使用`source`，还可以对图片格式做一些兼容处理：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

**总结**：响应式布局的实现可以通过媒体查询+`px`,媒体查询 + 百分比，媒体查询+`rem`+`js`,`vm/vh`,`vm/vh` +`rem`这几种方式来实现。但每一种方式都是有缺点的，媒体查询需要选取主流设备宽度尺寸作为断点针对性写额外的样式进行适配，但这样做会比较麻烦，只能在选取的几个主流设备尺寸下呈现完美适配，另外用户体验也不友好，布局在响应断点范围内的分辨率下维持不变，而在响应断点切换的瞬间，布局带来断层式的切换变化，如同卡带的唱机般“咔咔咔”地一下又一下。通过百分比来适配首先是计算麻烦，第二各个属性中如果使用百分比，其相对的元素的属性并不是唯一的，这样就造成我们使用百分比单位容易使布局问题变得复杂。通过采用`rem`单位的动态计算的弹性布局，则是需要在头部内嵌一段脚本来进行监听分辨率的变化来动态改变根元素字体大小，使得`CSS`与`JS` 耦合了在一起。通过利用纯`css`视口单位实现适配的页面，是既能解决响应式断层问题，又能解决脚本依赖的问题的，但是兼容性还没有完全能结构接受。

## 响应式布局的成型方案

现在的 css，UI 框架等都已经考虑到了适配不同屏幕分辨率的问题，实际项目中我们可以直接使用这些新特性和框架来实现响应式布局。可以有以下选择方案：

- 利用上面的方法自己来实现，比如 CSS3 Media Query,rem，vw 等
- Flex 弹性布局，兼容性较差
- Grid 网格布局，兼容性较差
- Columns 栅格系统，往往需要依赖某个 UI 库，如 Bootstrap

## 响应式布局的要点

在实际项目中，我们可能需要综合上面的方案，比如用`rem`来做字体的适配，用`srcset`来做图片的响应式，宽度可以用`rem`，`flex`，栅格系统等来实现响应式，然后可能还需要利用媒体查询来作为响应式布局的基础，因此综合上面的实现方案，项目中实现响应式布局需要注意下面几点：

- 设置 viewport
- 媒体查询
- 字体的适配（字体单位）
- 百分比布局
- 图片的适配（图片的响应式）
- 结合 flex，grid，BFC，栅格系统等已经成型的方案

**参考文章：**

1. [响应式布局的常用解决方案对比 (媒体查询、百分比、rem 和 vw/vh）](https://juejin.cn/post/6844903630655471624#heading-0)
2. [纯 CSS3 使用 vw 和 vh 视口单位实现自适应](https://link.juejin.cn/?target=http%3A%2F%2Fcaibaojian.com%2Fvw-vh.html)
3. [你真的了解响应式布局吗？](https://juejin.cn/post/6844903654323929096#heading-9)
4. [移动端 H5 页面 iphone6 的适配技巧](https://link.juejin.cn/?target=http%3A%2F%2Fwww.ghugo.com%2Fmobile-h5-fluid-layout-for-iphone6%2F)
5. [响应式开发心得](https://juejin.cn/post/6844903479681499150)
6. [详解前端响应式布局、响应式图片，与自制栅格系统](https://juejin.cn/post/6844903513651150856#heading-10)
7. [基于媒体查询和 rem 的响应式布局实践](https://juejin.cn/post/6844903648099565576)
8. [从网易与淘宝的 font-size 思考前端设计稿与工作流](https://link.juejin.cn/?target=https%3A%2F%2Fwww.cnblogs.com%2Flyzg%2Fp%2F4877277.html)
9. [移动端前端适配方案对比](https://link.juejin.cn/?target=http%3A%2F%2Fwww.vsoui.com%2F2017%2F03%2F15%2Fmobile-FE-Adaptive%2F)
其中，`content` 参数有以下几种：
  • all：文件将被检索，且页面上的链接可以被查询；
  • none：文件将不被检索，且页面上的链接不可以被查询；
  • index：文件将被检索；
  • follow：页面上的链接可以被查询；
  • noindex：文件将不被检索；
  • nofollow：页面上的链接不可以被查询。

6. HTML5 有哪些更新

1. 语义化标签

  • header：定义文档的页眉（头部）；
  • nav：定义导航链接的部分；
  • footer：定义文档或节的页脚（底部）；
  • article：定义文章内容；
  • section：定义文档中的节（section、区段）；
  • aside：定义其所处内容之外的内容（侧边）；

2. 媒体标签

（1）audio：音频

1
<audio src='' controls autoplay loop='true'></audio>

属性：

  • controls 控制面板
  • autoplay 自动播放
  • loop=‘true’循环播放

（2）video 视频

1
<video src='' poster='imgs/aa.jpg' controls></video>

属性：

  • poster：指定视频还没有完全下载完毕，或者用户还没有点击播放前显示的封面。默认显示当前视频文件的第一针画面，当然通过 poster 也可以自己指定。
  • controls 控制面板
  • width
  • height

（3）source 标签 因为浏览器对视频格式支持程度不一样，为了能够兼容不同的浏览器，可以通过 source 来指定视频源。

1
2
3
4
<video>
 	<source src='aa.flv' type='video/flv'></source>
 	<source src='aa.mp4' type='video/mp4'></source>
</video>

3. 表单

表单类型：

  • email：能够验证当前输入的邮箱地址是否合法
  • url：验证 URL
  • number：只能输入数字，其他输入不了，而且自带上下增大减小箭头，max 属性可以设置为最大值，min 可以设置为最小值，value 为默认值。
  • search：输入框后面会给提供一个小叉，可以删除输入的内容，更加人性化。
  • range：可以提供给一个范围，其中可以设置 max 和 min 以及 value，其中 value 属性可以设置为默认值
  • color：提供了一个颜色拾取器
  • time：时分秒
  • data：日期选择年月日
  • datatime：时间和日期 (目前只有 Safari 支持)
  • datatime-local：日期时间控件
  • week：周控件
  • month：月控件

表单属性：

  • placeholder：提示信息
  • autofocus：自动获取焦点
  • autocomplete=“on”或者 autocomplete=“off”使用这个属性需要有两个前提：
    • 表单必须提交过
    • 必须有 name 属性。
  • required：要求输入框不能为空，必须有值才能够提交。
  • pattern=” “ 里面写入想要的正则模式，例如手机号 patte=”^(+86)?\d{10}$”
  • multiple：可以选择多个文件或者多个邮箱
  • form=” form 表单的 ID”

表单事件：

  • oninput 每当 input 里的输入框内容发生变化都会触发此事件。
  • oninvalid 当验证不通过时触发此事件。

4. 进度条、度量器

  • progress 标签：用来表示任务的进度（IE、Safari 不支持），max 用来表示任务的进度，value 表示已完成多少
  • meter 属性：用来显示剩余容量或剩余库存（IE、Safari 不支持）
    • high/low：规定被视作高/低的范围
    • max/min：规定最大/小值
    • value：规定当前度量值

设置规则：min < low < high < max

5.DOM查询操作

  • document.querySelector()
  • document.querySelectorAll()

它们选择的对象可以是标签，可以是类(需要加点)，可以是ID(需要加#)

6. Web存储

HTML5 提供了两种在客户端存储数据的新方法：

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储

7. 其他

  • 拖放：拖放是一种常见的特性，即抓取对象以后拖到另一个位置。设置元素可拖放：
1
<img draggable="true" />
  • 画布（canvas ）： canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
1
<canvas id="myCanvas" width="200" height="100"></canvas>
  • SVG：SVG 指可伸缩矢量图形，用于定义用于网络的基于矢量的图形，使用 XML 格式定义图形，图像在放大或改变尺寸的情况下其图形质量不会有损失，它是万维网联盟的标准
  • 地理定位：Geolocation（地理定位）用于定位用户的位置。‘

总结： （1）新增语义化标签：nav、header、footer、aside、section、article （2）音频、视频标签：audio、video （3）数据存储：localStorage、sessionStorage （4）canvas（画布）、Geolocation（地理定位）、websocket（通信协议） （5）input标签新增属性：placeholder、autocomplete、autofocus、required （6）history API：go、forward、back、pushstate

移除的元素有：

  • 纯表现的元素：basefont，big，center，font, s，strike，tt，u;
  • 对可用性产生负面影响的元素：frame，frameset，noframes；

7. img的srcset属性的作⽤？

响应式页面中经常用到根据屏幕密度设置不同的图片。这时就用到了 img 标签的srcset属性。srcset属性用于设置不同屏幕密度下，img 会自动加载不同的图片。用法如下：

1
<img src="image-128.png" srcset="image-256.png 2x" />

使用上面的代码，就能实现在屏幕密度为1x的情况下加载image-128.png, 屏幕密度为2x时加载image-256.png。

按照上面的实现，不同的屏幕密度都要设置图片地址，目前的屏幕密度有1x,2x,3x,4x四种，如果每一个图片都设置4张图片，加载就会很慢。所以就有了新的srcset标准。代码如下：

1
2
3
<img src="image-128.png"
     srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w"
     sizes="(max-width: 360px) 340px, 128px" />

其中srcset指定图片的地址和对应的图片质量。sizes用来设置图片的尺寸零界点。对于 srcset 中的 w 单位，可以理解成图片质量。如果可视区域小于这个质量的值，就可以使用。浏览器会自动选择一个最小的可用图片。

sizes语法如下：

1
sizes="[media query] [length], [media query] [length] ... "

sizes就是指默认显示128px, 如果视区宽度大于360px, 则显示340px。

8. 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

  • 行内元素有：a b span img input select strong；
  • 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；

空元素，即没有内容的HTML元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签：

  • 常见的有：<br>、<hr>、<img>、<input>、<link>、<meta>；
  • 鲜见的有：<area>、<base>、<col>、<colgroup>、<command>、<embed>、<keygen>、<param>、<source>、<track>、<wbr>。

9. 说一下 web worker

在 HTML 页面中，如果在执行脚本时，页面的状态是不可相应的，直到脚本执行完成后，页面才变成可相应。web worker 是运行在后台的 js，独立于其他脚本，不会影响页面的性能。 并且通过 postMessage 将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。

如何创建 web worker：

  1. 检测浏览器对于 web worker 的支持性
  2. 创建 web worker 文件（js，回传函数等）
  3. 创建 web worker 对象

10. HTML5的离线储存怎么使用，它的工作原理是什么

离线存储指的是：在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。

原理：HTML5的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示

使用方法： （1）创建一个和 html 同名的 manifest 文件，然后在页面头部加入 manifest 属性：

1
<html lang="en" manifest="index.manifest">

（2）在 cache.manifest 文件中编写需要离线存储的资源：

1
2
3
4
5
6
7
8
9
CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html
  • CACHE: 表示需要离线存储的资源列表，由于包含 manifest 文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
  • NETWORK: 表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在 CACHE 和 NETWORK 中有一个相同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高。
  • FALLBACK: 表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问 offline.html 。

（3）在离线状态时，操作 window.applicationCache 进行离线缓存的操作。

如何更新缓存：

（1）更新 manifest 文件

（2）通过 javascript 操作

（3）清除浏览器缓存

注意事项：

（1）浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。

（2）如果 manifest 文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存。

（3）引用 manifest 的 html 必须与 manifest 文件同源，在同一个域下。

（4）FALLBACK 中的资源必须和 manifest 文件同源。

（5）当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。

（6）站点中的其他页面即使没有设置 manifest 属性，请求的资源如果在缓存中也从缓存中访问。

（7）当 manifest 文件发生改变时，资源请求本身也会触发更新。

11. 浏览器是如何对 HTML5 的离线储存资源进行管理和加载？

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

12. title与h1的区别、b与strong的区别、i与em的区别？

  • strong标签有语义，是起到加重语气的效果，而b标签是没有的，b标签只是一个简单加粗标签。b标签之间的字符都设为粗体，strong标签加强字符的语气都是通过粗体来实现的，而搜索引擎更侧重strong标签。
  • title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取有很大的影响
  • i内容展示为斜体，em表示强调的文本

13. iframe 有那些优点和缺点？

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

优点：

  • 用来加载速度较慢的内容（如广告）
  • 可以使脚本可以并行下载
  • 可以实现跨子域通信

缺点：

  • iframe 会阻塞主页面的 onload 事件
  • 无法被一些搜索引擎索识别
  • 会产生很多页面，不容易管理

14. label 的作用是什么？如何使用？

label标签来定义表单控件的关系：当用户选择label标签时，浏览器会自动将焦点转到和label标签相关的表单控件上。

  • 使用方法1：
1
2
<label for="mobile">Number:</label>
<input type="text" id="mobile"/>
  • 使用方法2：
1
<label>Date:<input type="text"/></label>

15. Canvas 和 SVG 的区别

（1）SVG： SVG 可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言 XML 描述的 2D 图形的语言，SVG 基于 XML 就意味着 SVG DOM 中的每个元素都是可用的，可以为某个元素附加 Javascript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

其特点如下：

  • 不依赖分辨率
  • 支持事件处理器
  • 最适合带有大型渲染区域的应用程序（比如谷歌地图）
  • 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
  • 不适合游戏应用

（2）Canvas： Canvas 是画布，通过 Javascript 来绘制 2D 图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。

其特点如下：

  • 依赖分辨率
  • 不支持事件处理器
  • 弱的文本渲染能力
  • 能够以 .png 或 .jpg 格式保存结果图像
  • 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

注：矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。

16. head 标签有什么作用，其中什么标签必不可少？

标签用于定义文档的头部，它是所有头部元素的容器。中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, <title>。

其中 <title> 定义文档的标题，它是 head 部分中唯一必需的元素。

17. 文档声明（Doctype）和<!Doctype html>有何作用？严格模式与混杂模式如何区分？它们有何意义？

文档声明的作用： 文档声明是为了告诉浏览器，当前HTML文档使用什么版本的HTML来写的，这样浏览器才能按照声明的版本来正确的解析。

的作用：<!doctype html> 的作用就是让浏览器进入标准模式，使用最新的 HTML5 标准来解析渲染页面；如果不写，浏览器就会进入混杂模式，我们需要避免此类情况发生。

严格模式与混杂模式的区分：

  • 严格模式：又称为标准模式，指浏览器按照W3C标准解析代码；
  • 混杂模式：又称怪异模式、兼容模式，是指浏览器用自己的方式解析代码。混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作；

区分：网页中的DTD，直接影响到使用的是严格模式还是浏览模式，可以说DTD的使用与这两种方式的区别息息相关。

  • 如果文档包含严格的DOCTYPE ，那么它一般以严格模式呈现（严格 DTD ——严格模式）；
  • 包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式）；
  • DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现（DTD 不存在或者格式不正确——混杂模式）；
  • HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的 法，实现时，已经尽可能大的实现了向后兼容 (HTML5 没有严格和混杂之分)。

总之，严格模式让各个浏览器统一执行一套规范兼容模式保证了旧网站的正常运行。

18. 浏览器乱码的原因是什么？如何解决？

产生乱码的原因：

  • 网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码，反之也会出现乱码；
  • html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码；
  • 浏览器不能自动检测网页编码，造成网页乱码。

解决办法：

  • 使用软件编辑 HTML 网页内容；
  • 如果网页设置编码是gbk，而数据库储存数据编码格式是UTF-8，此时需要程序查询数据库数据显示数据前进程序转码；
  • 如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单进行转换。

19. 渐进增强和优雅降级之间的区别

（1）渐进增强（progressive enhancement）：主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果、交互等方面的改进和追加功能，以达到更好的用户体验。 （2）优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。

两者区别：

  • 优雅降级是从复杂的现状开始的，并试图减少用户体验的供给；而渐进增强是从一个非常基础的，能够起作用的版本开始的，并在此基础上不断扩充，以适应未来环境的需要；
  • 降级（功能衰竭）意味着往回看，而渐进增强则意味着往前看，同时保证其根基处于安全地带。

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)”的浏览体验。可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

“渐进增强”观点则认为应关注于内容本身。内容是建立网站的诱因，有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

20. 说一下 HTML5 drag API

  • dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
  • darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
  • dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。
  • dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。
  • dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。
  • drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
  • dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。

Stashed changes