Lyk-Blog

九、HTML5新增元素，浏览器前缀，CSS常见函数扩展及BFC的深入了解

2022/5/29 HTMLCSSHTML5新增元素video元素audio元素input元素扩展HTML5全局属性data-white-space属性text-overflow属性CSS函数浏览器前缀BFC

# 1、HTML5新增元素

# 1.1.HTML5语义化元素

  • 在HMTL5之前，我们的网站分布层级通常包括哪些部分呢？

    • header、nav、main、footer

  • 但是这样做有一个弊端：

    • 我们往往过多的使用div, 通过id或class来区分元素；
    • 对于浏览器来说这些元素不够语义化；
    • 对于搜索引擎来说, 不利于SEO的优化；

  • HTML5新增了语义化的元素：

    • <header>：头部元素
    • <nav>：导航元素
    • <section>：定义文档某个区域的元素
    • <article>：内容元素
    • <aside>：侧边栏元素
    • <footer>：尾部元素

XMAZwD.png

# 1.2.HTML5其他新增元素

  • Web端事实上一直希望可以更好的嵌入音频和视频, 特别是21世纪以来, 用户带宽的不断提高, 浏览器因为和视频变得非常容易.

    • 在HTML5之前是通过flash或者其他插件实现的, 但是会有很多问题;
    • 比如无法很好的支持HTML/CSS特性, 兼容性问题等等;

  • HTML5增加了对媒体类型的支持：

    • 音频：<audio>
    • 视频：<video>

  • Video和Audio使用方式有两个：

    • 一方面我们可以直接通过元素使用video和autio；
    • 另一方面我们可以通过JavaScript的API对其进行控制；

# 1.3.HTML5新增元素 - video

  • HTML <video> 元素 用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放。
<video src-"../video/xxxx.mp4" controls></video>
1
  • video常见的属性
常见属性 值的方式 属性作用
src URL地址 视频播放的URL地址
width pixels(像素) 设置video宽度
height pixels(像素) 设置video高度
controls Boolean类型 是否显示控制栏,包括音量，跨帧，暂停/恢复播放。
autoplay Boolean类型 是否视频自动播放(某些浏览器需要添加muted, 比如Chrome)
muted Boolean类型 是否静音播放
preload none/metadata/auto 是否需要预加载视频. metadata表示预加载元数据(比如视频时长等)
poster URL地址 一海报帧的URL（相当于设置视频未播放时的封面）
  • video支持的视频格式
    • 每个视频都会有自己的格式, 浏览器的video并非支持所有的视频格式

XMAqtH.png

  • video的兼容性写法

    • 在<video>元素中间的内容，是针对浏览器不支持此元素时候的降级处理。

      • 内容一：通过<source>元素指定更多视频格式的源;

      • 内容二：通过p/div等元素指定在浏览器不支持video元素的情况, 显示的内容;

<video src-"../video/xxxx.mp4" controls width="500" autoplay muted>
  <source src="./video/xxxx.webm"></source>
  <source src="./video/xxxx.ogg"></source>
  <p>你的浏览器不支持HTML5的video元素，请更换浏览器查看</p>
</video>
1
2
3
4
5

# 1.4.HTML5新增元素 - audio

  • HTML <audio>元素用于在文档中嵌入音频内容, 和video的用法非常类似
  • 常见属性
常见属性 值的方式 属性作用
src URL地址 音频播放的URL地址
controls Boolean类型 是否显示控制栏,包括音量，进度，暂停/恢复播放
autoplay Boolean类型 是否视频自动播放(某些浏览器需要添加muted, 比如Chrome)
muted Boolean类型 是否静音播放
preload none/metadata/auto 是否需要预加载视频. metadata表示预加载元数据(比如视频时长等)
Codec name (short) Full codec name Container support
AAC (opens new window) Advanced Audio Coding MP4 (opens new window), ADTS (opens new window), 3GP (opens new window)
ALAC (opens new window) Apple Lossless Audio Codec MP4 (opens new window), QuickTime (opens new window) (MOV)
AMR (opens new window) Adaptive Multi-Rate 3GP (opens new window)
FLAC (opens new window) Free Lossless Audio Codec MP4 (opens new window), Ogg (opens new window), FLAC (opens new window)
G.711 (opens new window) Pulse Code Modulation (PCM) of Voice Frequencies RTP (opens new window) / WebRTC (opens new window)
G.722 (opens new window) 7 kHz Audio Coding Within 64 kbps (for telephony/VoIP (opens new window)) RTP (opens new window) / WebRTC (opens new window)
MP3 (opens new window) MPEG-1 Audio Layer III MP4 (opens new window), ADTS (opens new window), MPEG (opens new window), 3GP (opens new window)When MPEG-1 Audio Layer III codec data is stored in an MPEG file, and there is no video track on the file, the file is typically referred to as an MP3 file, even though it's still an MPEG format file.
Opus (opens new window) Opus WebM (opens new window), MP4 (opens new window), Ogg (opens new window)
Vorbis (opens new window) Vorbis WebM (opens new window), Ogg (opens new window)

补充：在<audio>元素中间的内容，是针对浏览器不支持此元素时候的降级处理。

<audio src="../media/逍遥叹.mp3" controls autoplay muted>
  <source src="../media/逍遥叹.ogg"></source>
  <p>你的浏览器不支持HTML5的audio元素，请更换浏览器查看</p>
</audio>
1
2
3
4

# 2、input元素的扩展内容和新增全局属性 data-*

# 2.1.input元素的扩展内容

  • HTML5对input元素也进行了扩展，在之前我们已经学习过的其中几个属性也是HTML5的特性：

    • placeholder：输入框的占位文字
    • multiple：多个值
    • autofocus：最多输入的内容

  • 另外对于input的type值也有很多扩展：

    • date
    • time
    • number
    • tel
    • color
    • email
    • 等等…

  • 查看MDN文档: input的type的更多扩展 (opens new window)

# 2.2.新增全局属性 data-*

  • 在HTML5中, 新增一种全局属性的格式 data-*, 用于自定义数据属性:
    • data设置的属性可以在JavaScript的DOM操作中通过dataset轻松获取到；
    • 通常用于HTML和JavaScript数据之间的传递；
<div class="box" title="abc" data-name="lyk" data-age="23">
  box
</div>
<script>
  const boxEl = document.querySelector(".box")
  console.log(boxEl.dataset) //DOMStringMap {name: 'lyk', age: '23'}
</script>
1
2
3
4
5
6
7
  • 在小程序中, 就是通过data-来传递数据的, 所以该全局属性必须要掌握

# 3、CSS属性 - white-space和text-overflow

# 3.1.CSS属性 - white-space

  • white-space用于设置空白处理和换行规则
    • normal：合并所有连续的空白，允许单词超屏时自动换行
    • nowrap：合并所有连续的空白，不允许单词超屏时自动换行
    • pre：阻止合并所有连续的空白，不允许单词超屏时自动换行
    • pre-wrap：阻止合并所有连续的空白，允许单词超屏时自动换行
    • pre-line：合并所有连续的空白（但保留换行），允许单词超屏时自动换行

XMZX9J.png

# 3.2.CSS属性 - text-overflow

  • text-overflow通常用来设置文字溢出时的行为

    • clip：溢出的内容直接裁剪掉（字符可能会显示不完整）
    • ellipsis：溢出那行的结尾处用省略号表示

  • text-overflow生效的前提是overflow不为visible

  • 常见的是将white-space、text-overflow、overflow一起使用：实现单行文字超出显示省略号

.nowrap-ellipsis {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
1
2
3
4
5

# 4、CSS中常用的函数扩展

# 4.1.CSS中的函数var、calc、blur、gradient

  • 我们有使用过很多个CSS函数:

    • 比如rgb/rgba/translate/rotate/scale等;
    • CSS函数通常可以帮助我们更加灵活的来编写样式的值；

  • 下面我们再学习几个非常好用的CSS函数:

    • var: 使用CSS定义的变量;
    • calc: 计算CSS值, 通常用于计算元素的大小或位置;
    • blur: 毛玻璃(高斯模糊)效果;
    • gradient：颜色渐变函数

# 4.2.CSS函数 - var

  • CSS中可以自定义属性
    • 属性名需要以两个减号（--）开始;
    • 属性值则可以是任何有效的CSS值;
div {
  --more-color:red;
}
1
2
3
  • 我们可以通过var函数来使用: （前提span是div的子元素）
span {
  color:var(--more-color)
}
1
2
3
  • 规则集定义的选择器, 是自定义属性的可见作用域(只在选择器内部有效)
    • 所以推荐将自定义属性定义在html中，也可以使用 :root选择器;
:root {
  --moreColor:pink; /* 在:root里面定义变量，这样所有的元素都可以使用该变量了 */
}
1
2
3

# 4.3.CSS函数 - calc

  • calc() 函数允许在声明 CSS 属性值时执行一些计算。

    • 计算支持加减乘除的运算：+ 和 - 运算符的两边必须要有空白字符。

  • 通常用来设置一些元素的尺寸或者位置

.box .bar {
  display:inline-block;
  width:calc(100% - 70px)
  height:100px;
  background-color:#ffoooo;
}
1
2
3
4
5
6

# 4.4.CSS函数 - blur

  • blur() 函数将高斯模糊应用于输出图片或者元素;

    • blur(radius)
    • radius, 模糊的半径, 用于定义高斯函数的偏差值, 偏差值越大, 图片越模糊;

  • 通常会和两个属性一起使用：

    • filter: 将模糊或颜色偏移等图形效果应用于元素;
    • backdrop-filter: 为元素后面的区域添加模糊或者其他效果;
<style>
  img {
    /* filter: blur(5px); */
  }
  .box {
    display: inline-block;
    position: relative;
    /* filter: blur(5px); */
  }
  .cover {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.2);
    backdrop-filter: blur(10px);
  }
</style>
<div class="box">
  <img src="./kobe01.jpg" alt="">
  <div class="cover"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 4.5.CSS函数 - gradient

  • <gradient> 是一种<image>CSS数据类型的子类型，用于表现两种或多种颜色的过渡转变。

    • CSS的<image>数据类型描述的是2D图形；
    • 比如background-image、list-style-image、border-image、content等；
    • <image>常见的方式是通过url来引入一个图片资源；
    • 它也可以通过CSS的<gradient>函数来设置颜色的渐变；

  • <gradient>常见的函数实现有下面几种：

    • linear-gradient()：创建一个表示两种或多种颜色线性渐变的图片；默认：上到下进行颜色渐变
    • radial-gradient()：创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成；
    • repeating-linear-gradient()：创建一个由重复线性渐变组成的<image>；
    • repeating-radial-gradient()：创建一个重复的原点触发渐变组成的<image>；
    • 等等；
<style>
  .box {
    width: 200px;
    height: 100px;

    /* background-color: orange; */
    /* background-image: linear-gradient(red, blue); */
    /* 改变方向 */
    /* background-image: linear-gradient(to right, red, blue); */
    /* background-image: linear-gradient(to right top, red, blue); */
    /* background-image: linear-gradient(-45deg, red, blue); */
    /* background-image: linear-gradient(to right, red, blue 40px, orange 60%, purple 100%); */
    /* radial-gradient */
    /* background-image: radial-gradient(red, blue); */
    background-image: radial-gradient(at 0% 50%, red, blue);
  }
</style>

<div class="box"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 5、浏览器前缀

  • 有时候可能会看到有些CSS属性名前面带有：-o-、-xv-、-ms-、mso-、-moz-、-webkit-

  • 官方文档专业术语叫做：vendor-specific extensions（供应商特定扩展）

  • 为什么需要浏览器前缀了？

    • CSS属性刚开始并没有成为标准，浏览器为了防止后续会修改名字给新的属性添加了浏览器前缀；

  • 上述前缀叫做浏览器私有前缀，只有对应的浏览器才能解析使用

    • -o-、-xv-：Opera等
    • -ms-、mso-：IE等
    • -moz-：Firefox等
    • -webkit-：Safari、Chrome等

  • 注意：不需要手动添加，后面学习了模块化打包工具会自动添加浏览器前缀

# 6、BFC的深入了解

# 6.1.了解FC – Formatting Context(设置上下文格式)

  • FC的全称是Formatting Context，元素在标准流里面都是属于一个FC的；

  • 块级元素的布局属于Block Formatting Context（BFC）

    • 也就是block level box都是在BFC中布局的；

  • 行内级元素的布局属于Inline Formatting Context（IFC）

    • 而inline level box都是在IFC中布局的

# 6.2.了解BFC – Block Formatting Context(块格式上下文)

  • block level box都是在BFC中布局的，那么这个BFC在哪里呢？拿出来给我看看。

    • W3C解释：Floats, absolutely positioned elements,block containers(such as inline-blocks,table-cells,and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible'(except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.（浮动、绝对定位元素、不是块框的块容器（如内联块、表格单元格和表格标题）以及具有“溢出”而不是“可见”的块框（除非该值已传播到视口）为其内容建立新的块格式上下文。）

  • MDN上有整理出在哪些具体的情况下会创建BFC：

    • 根元素（<html>）
    • 浮动元素（元素的 float 不是 none）
    • 绝对定位元素（元素的 position 为 absolute 或 fixed）
    • 行内块元素（元素的 display 为 inline-block）
    • 表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值），表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
    • 匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot 的默认属性）或 inline-table）
    • overflow 计算值(Computed)不为 visible 的块元素
    • 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
    • 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
    • display 值为 flow-root 的元素

# 6.3.BFC有什么作用呢？

  • 我们来看一下官方文档对BFC作用的描述：

    • In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse

      In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edgestouch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

      【在块格式上下文中，从包含块的顶部开始，垂直地一个接一个地布置框。两个同级框之间的垂直距离由“边距”属性确定。块格式上下文中相邻块级别框之间的垂直边距折叠

      在块格式上下文中，每个框的左外边缘都与包含块的左边缘接触（对于从右到左的格式，为右边缘接触）。即使存在浮点数（尽管方框的线框可能会因浮点数而缩小），也会出现这种情况，除非方框建立了新的块格式上下文（在这种情况下，方框本身可能会因浮点数而变窄）。】

  • 简单概况如下：

    • 在BFC中，box会在垂直方向上一个挨着一个的排布；
    • 垂直方向的间距由margin属性决定；
    • 在同一个BFC中，相邻两个box之间的margin会折叠（collapse）；
    • 在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的；

  • 那么这个东西有什么用呢？

    • 解决margin的折叠问题；
    • 解决浮动高度塌陷问题；

# 6.4.BFC的作用一：解决折叠问题（权威）

  • 在同一个BFC中，相邻两个box之间的margin会折叠（collapse）
    • 官方文档明确的有说：The vertical distance between two sibling boxes is determined by the 'margin' properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.【两个同级框之间的垂直距离由“边距”属性确定。块格式上下文中相邻块级别框之间的垂直边距折叠。】
    • 那么如果我们让两个box是不同的BFC呢？那么就可以解决折叠问题。
<!-- 最终box和bar上下的间距为50px，出现了折叠 -->
<style>
  .box {
    width: 100px;
    height: 100px;
    background-color: red;
    margin-bottom: 30px;
  }
  .bar {
    width: 100px;
    height: 100px;
    background-color: pink;
    margin-top: 50px;
  }
</style>
<div class="box"></div>
<div class="bar"></div>


<!-- 解决折叠：让他们处于不同的bfc 上面6.2有讲如何创建一个新的bfc -->
<!--方法1：给box设置：display：inline-block 创建新的bfc-->
<!--方法2：给box套一层父元素contain；然后让父元素创建新的bfc，导致box在新的bfc中布局；
          即可解决垂直方向上外边距的折叠问题，及父子元素之间的margin传递问题-->
<style>
  .contain {
    /* border: 1px solid transparent;*/  /*防止box的margin传递给父元素*/

    /* 触发BFC 如下 */
    overflow: auto;
    /* display: inline-block; */
    /* display: flow-root; */
    /* display: table-cell; */
    /* display: flex; */
    /* display: grid; */
    /* display: table; */
    background-color: yellow;
  }

  .contain .box {
    width: 100px;
    height: 100px;
    background-color: red;
    margin-bottom: 30px;
  }

  .bar {
    width: 200px;
    height: 100px;
    background-color: pink;
    margin-top: 50px;
  }
</style>
<div class="contain">
  <div class="box"></div>
</div>
<div class="bar"></div>
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

# 6.5.BFC的作用二：解决浮动高度塌陷（权威）

  • 网上有很多说法，BFC可以解决浮动高度塌陷，可以实现清除浮动的效果。

    • 但是从来没有给出过BFC可以解决高度塌陷的原理或者权威的文档说明；
    • 他们也压根没有办法解释，为什么可以解决浮动高度的塌陷问题，但是不能解决绝对定位元素的高度塌陷问题呢？

  • 事实上，BFC解决高度塌陷需要满足两个条件：

    • 浮动元素的父元素触发BFC，形成独立的块级格式化上下文（Block Formatting Context）；
    • 浮动元素的父元素的高度是auto的；（即浮动元素的父元素没有设置height，默认为：auto）
<style>
  .contain {
    border: 1px solid #000;
    /* 在父元素contain没有设置高度的情况下，即height:auto; 
    触发BFC;即可解决由于子元素浮动导致父元素高度塌陷的情况；
    触发父元素bfc的方法如下 */
    overflow: auto;
    /* display: inline-block; */
    /* display: flow-root; */
    /* display: table-cell; */
    /* display: flex; */
    /* display: grid; */
    /* display: table; */
    background-color: yellow;
  }

  .contain .box {
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
    margin-bottom: 30px;
  }

  .bar {
    width: 200px;
    height: 100px;
    background-color: pink;
    margin-top: 50px;
  }
</style>
<div class="contain">
  <div class="box"></div>
</div>
<div class="bar"></div>
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
  • BFC的高度是auto的情况下，是如下方法计算高度的
    • 1.如果只有inline-level，是行高的顶部和底部的距离；
    • 2.如果有block-level，是由最底层的块上边缘和最底层块盒子的下边缘之间的距离
    • 3.如果有绝对定位元素，将被忽略；
    • 4.如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘
最后更新时间: 2022/07/03, 14:46:19

十、响应式布局（自适应布局）和移动端适配方案及less、Scss(Sass)的深入学习

彩虹
周杰伦