八、HTML+CSS 语言提升（H5+CSS3）

郁子大约 13 分钟约 4020 字

（一）布局

浮动：做文字环绕效果
弹性盒：单行或单列布局
网格：多行多列布局

1.弹性盒

1）生成弹性容器和弹性项目

默认情况下，弹性项目沿着主轴依次排列，侧轴拉伸

2）更改方向

通过 flex-direction 可更改主轴方向

3）主轴排列

通过 justify-content 属性，可以影响主轴的排列方式

4）侧轴排列

通过 align-items 属性，可以影响侧轴的排列方式

5）弹性项目伸缩

伸缩，指在主轴方向上
- 当弹性容器有额外空间时，是否需要拉伸
- 当空间不足时，是否需要压缩
在弹性项目上使用 flex 属性，可设置拉伸和压缩比例： flex: 拉伸比例压缩比例初始尺寸
默认： flex: 0 1 auto
拉伸示例：

压缩示例：

6）主轴换行

默认情况，当主轴剩余空间不足时，按照压缩比例进行压缩
如果设置了主轴换行，则不会压缩，直接换行显示
给弹性容器设置 flex-wrap: wrap 即可实现主轴换行

注意

尽管如此，多行多列仍然推荐使用网格布局，网格布局是多行多列布局的终极解决方案

2.网格

1）生成网格布局

容器生成网格布局后，其所有子元素为网格项目

2）定义行和列

grid-template-rows：定义行
grid-template-columns：定义列
二者语法相同

3）改变排列方向

使用属性 grid-auto-flow: column 可使子元素按列排放

4）单元格之间的间隙

row-gap: 10px; /* 行间隙为10px */
column-gap: 20px; /* 列间隙为20px */
gap: 10px 20px; /* 行间隙为10px，列间隙为20px */

5）单元格内部的对齐

默认情况下，网格项目在单元格内部水平和垂直拉伸，以撑满单元格
可以使用属性 justify-items 设置水平方向的排列方式
可以使用属性 align-items 设置垂直方向的排列方式
二者可取值相同

justify-items: start 左 | end 右 | center 中 | stretch 拉伸;
align-items: start 上 | end 下 | center 中 | stretch 拉伸;

可以使用速写属性 place-items: 垂直对齐方式水平对齐方式 同时设置这两个值

place-items: start center; /* 垂直靠上，水平居中 */

6）网格项目定位

默认情况下，网格项目依次排列到单元格中，每个网格占据一个单元格
可以对网格项目设置 grid-area 属性来改变这一行为

grid-area: 起始行线编号/起始列线编号/结束行线编号/结束列线编号;

（二）视觉

视觉类样式，是指不影响盒子位置、尺寸的样式
例如文字颜色、背景颜色、背景图片等

1.阴影

1）盒子阴影 `box-shadow`

http://mdrs.yuanjin.tech/html/css-manual/box-shadow.html?v=2open in new window

2）文字阴影 `text-shadow`

http://mdrs.yuanjin.tech/html/css-manual/text-shadow.html?v=3open in new window

2.圆角 `border-radius`

border-radius: 10px; /* 同时设置4个角的圆角，半径为10px */
border-radius: 50%; /* 同时设置4个角的圆角，圆的横向半径为宽度一半，纵向半径为高度一半 */
border-radius: 10px 20px 30px 40px; /* 分别设置左上、右上、右下、左下的圆角 */

http://mdrs.yuanjin.tech/html/css-manual/border-raduis.html?v=5open in new window

3.背景渐变 `linear-gradient()`

在设置背景图片时，除了可以使用 url() 加载一张背景图，还可以使用 linear-gradient() 函数设置背景渐变（用于创建一张渐变的图片）

/* 设置渐变背景，方向：从上到下，颜色：从#e66465渐变到#9198e5 */
background: linear-gradient(to bottom, #e66465, #9198e5);

4.变形 `transform`

translate：平移
scale：缩放
rotate：旋转

注意

无论是哪一种 transform，都只是视觉效果的变化，不会影响盒子的布局

transform 不会导致浏览器 reflow 和 rerender，因此效率极高

1）平移 `translate`

让盒子在原来位置上产生位移，类似于相对定位

2）缩放 `scale`

让盒子基于原来的尺寸发生缩放

3）旋转 `rotate`

让盒子在原图基础上进行旋转

/* 在原图的基础上，顺时针旋转45度角 */
transform: rotate(45deg);
/* 在原图的基础上，顺时针旋转半圈 */
transform: rotate(0.5turn);

http://mdrs.yuanjin.tech/html/css-manual/rotate.htmlopen in new window

4）改变变形原点 `transform-origin`

变形原点的位置，会影响到具体的变形行为
默认情况下，变形的原点在盒子中心

transform-origin: center; /* 设置原点在盒子中心 */
transform-origin: left top; /* 设置原点在盒子左上角 */
transform-origin: right bottom; /* 设置原点在盒子右下角 */
transform-origin: 30px 60px; /* 设置原点在盒子坐标 (30, 60) 位置 */

http://mdrs.yuanjin.tech/html/css-manual/transform-origin.html?v2open in new window

5）多种变形叠加

可以一次性设置多种变形效果

/* 先旋转45度，再平移(100,100) */
transform: rotate(45deg) translate(100px, 100px);
/* 先平移(100, 100)，再旋转45度 */
transform: translate(100px, 100px) rotate(45deg);

警告

旋转会导致坐标系也跟着旋转，从而可能影响到后续的变形效果

http://mdrs.yuanjin.tech/html/css-manual/multi-transform.html?v2open in new window

（三）过渡和动画

使用过渡和动画，可以让 css 属性变化更加丝滑
过渡和动画无法对所有的 CSS 属性产生影响，能够产生影响的只有数值类属性
例如：颜色、宽高、字体大小等等

1.过渡

transition: 过渡属性 持续时间 过渡函数 过渡延迟;

1）过渡属性

针对哪个 css 属性应用过渡。
例如填写 transform，则表示仅针对 transform 属性应用过渡
若填写 all 或不填写，则表示针对所有 css 属性都应用过渡

2）持续时间

css 属性变化所持续的时间，需要带上单位
例如 3s 表示 3 秒， 0.5s 或 500ms 均表示 500 毫秒

3）过渡函数

本质是 css 属性变化的贝塞尔曲线函数，通常直接使用预设值：
- ease-in-out：平滑开始，平滑结束
- linear：线性变化
- ease-in：仅平滑开始
- ease-out：仅平滑结束

4）过渡延迟

书写规则和持续时间一样，表示过渡效果延迟多久后触发，不填则无延迟
在 JS 中，可以监听元素的 transitionstart 和 transitionend 事件，从而在过渡开始和过渡结束时做一些别的事情

2.动画

动画的本质是预先定义的一套 css 变化规则，然后给该规则取个名字

其他元素即可使用这样的规则：

animation: 规则名 持续时间;

在应用规则时，还可以指定更多的信息

animation: 规则名 持续时间 重复次数 时间函数 动画方向 延迟时间;

定义规则时， 0% 可以书写为 from
定义规则时， 100% 可以书写为 to
重复次数为 infinite 时，表示无限重复
动画方向为 alternate 时，表示交替反向，第 1 次正向，第 2 次反向，第 3 次正向，第 4 次方向，以此类推
在 JS 中，可以监听元素的 animationstart 和 animationnend 事件，从而在动画开始和动画结束时做一些别的事情

（四）其他 CSS3 属性

1.box-sizing

使用 border-box 控制尺寸更加直观
因此，很多网站都会加入下面的代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

2.字体图标

css3 新增了 font-face 指令，可以加载网络字体
最常见的应用就是字体图标
字体图标本质上是文字，即通过 color 设置颜色，通过 font-size 设置尺寸
国内使用最多的字体图标平台是阿里巴巴矢量图标库open in new window

3.图像内容适应

css3 属性 object-fit 可以控制多媒体内容和与元素的适应方式
- 通常应用在 img 或 video 元素中
下图中的所有 img 元素均被固定了宽高，溢出的部分实际上均不会显示

4.视口单位

css3 支持使用 vw 和 vh 作为单位，分别表示视口宽度和视口高度
例如 1vh 表示视口高度的 1% ， 100vw 表示视口宽度的 100%

5.伪元素选择器

通过 ::before 和 ::after 选择器，可以通过 css 给元素生成两个子元素
使用伪元素可以避免在 HTML 中使用过多的空元素
伪元素必须要有 content 属性，否则不能生效，如果不需要有元素内容，设置 content:''

6.平滑滚动

使用 scroll-behavior: smooth，可以让滚动更加丝滑
滚动条在哪个元素上就加到哪个元素上

（五）HTML5 更新

HTML5 包含两个部分的更新，分别是 文档 和 Web API，这些标准都是由 W3C 组织发布的
JavaScript 由 EcmaScript 和 WebAPI 组成
- EcmaScript 是语言标准，定义关键字、语法规则、运算符、Array 方法等，与使用环境无关，由 ECMA 组织发布
- WebAPI 是浏览器环境专门提供的一些操作方法，如 DOM、BOM(setTimeout、setInterval)等

（六）HTML5 文档

1.元素语义化

每个 HTML 元素都代表着某种含义，在开发中应该根据元素含义选择元素
好处
- 利于 SEO（搜索引擎优化）
- 利于无障碍访问
- 利于浏览器的插件分析网页

2.新增元素

1）多媒体

可以使用 audio 元素表达一段音频
可以使用 video 元素表达一个视频
它们均具有以下属性

属性名	含义	类型
src	多媒体的文件路径	普通属性
controls	是否显示播放控件	布尔属性
autoplay	是否自动播放	布尔属性
loop	是否循环播放	布尔属性
muted	是否静音播放	布尔属性

注意

新版浏览器不允许「带声音的自动播放」，可能将来甚至不允许自动播放

浏览器希望播放行为由用户决定

2）文章结构

为了让搜索引擎和浏览器更好的理解文档内容，HTML5 新增了多个元素来表达内容的含义
下面的示例中，使用了 HTML5 的新增元素来表达一篇文章

<!-- article：一篇文章 -->
<article>
  <!-- header：文章头部信息 -->
  <header>
    <h1>文章标题</h1>
    <!-- blockquote：引用信息 -->
    <blockquote>此文章引用的文献：xxxx</blockquote>
  </header>
  <!-- aside: 文章的其他附加信息 -->
  <aside>
    <span>作者：xxxx</span>
    <span>发布日期：xxx</span>
    <span>浏览量：xxx</span>
  </aside>
  <!-- section：章节 -->
  <section>
    <h2>章节1</h2>
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
    <p>段落4</p>
  </section>
  <!-- section：章节 -->
  <section>
    <h2>章节2</h2>
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
    <p>段落4</p>
  </section>
  <!-- section：章节 -->
  <section>
    <h2>章节3</h2>
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
    <p>段落4</p>
  </section>
  <!-- 页脚 -->
  <footer>
    <p>参考资料</p>
    <!-- cite表示外部站点的引用 -->
    <cite>xxxxxxx</cite>
    <cite>xxxxxxx</cite>
    <cite>xxxxxxx</cite>
    <cite>xxxxxxx</cite>
    <cite>xxxxxxx</cite>
    <cite>xxxxxxx</cite>
  </footer>
</article>

3.新增属性

1）自定义数据属性

2）input 的新增属性

http://mdrs.yuanjin.tech/html/html-manual/input-property.html?v2open in new window

（七） HTML5 Web API

1.使用 css 选择器选中元素

// 使用css选择器选中匹配的第一个元素
document.querySelector("css选择器");
// 使用css选择器选中匹配的所有元素，返回伪数组
document.querySelectorAll("css选择器");

2.控制类样式

// 添加类样式
dom.classList.add("a"); // <div class="a"></div>
dom.classList.add("b"); // <div class="a b"></div>
dom.classList.add("c"); // <div class="a b c"></div>

// 是否包含某个类样式
dom.classList.contains("a"); // true

// 移除类样式
dom.classList.remove("a"); // <div class="b c"></div>

// 切换类样式
dom.classList.toggle("a"); // <div class="a b c"></div>
dom.classList.toggle("a"); // <div class="b c"></div>
dom.classList.toggle("a"); // <div class="a b c"></div>

3.本地存储

localStorage：永久保存到本地
sessionStorage：临时保存到本地，关闭浏览器后消失

// 保存一个键值对到本地，值必须是字符串
localStorage.setItem("key", "value");
// 根据键，读取本地保存的值
localStorage.getItem("key");
// 清除所有保存的内容
localStorage.clear();
// 根据键，清除指定的内容
localStorage.removeItem("key");

// 保存一个键值对到本地，值必须是字符串
sessionStorage.setItem("key", "value");
// 根据键，读取本地保存的值
sessionStorage.getItem("key");
// 清除所有保存的内容
sessionStorage.clear();
// 根据键，清除指定的内容
sessionStorage.removeItem("key");

注意

无论是 localStorage 还是 sessionStorage ，它们都只能保存字符串

如果需要保存对象或数组，可以先将对象和数组转换为 JSON 字符串再进行保存

JSON.stringify(obj); // 将对象或数组转换为JSON格式
JSON.parse(jsonString); // 将JSON格式的字符串转换为对象或数组

4.渲染帧

浏览器会不断的对网页进行渲染，通常情况下的速度为每秒渲染 60 次，每一次渲染称之为一帧
- 因此又可以说：浏览器的渲染速率是 60 帧
但这不是一定的，它会受到各种因素的影响
- 因此，帧率往往会有浮动

为了解决该问题，HTML5 新增 API requestAnimationFrame，用于在每一帧渲染之前做某些事

requestAnimationFrame(function () {
  // 传入一个回调函数，该函数在下一帧渲染之前自动运行
  // 通常，可以利用该回调函数，在下一帧渲染前改动元素的状态
});

raq 的回调函数仅执行一次
因此，要实现连贯的动画，通常使用下面的代码结构

// 该函数负责在下一帧渲染前，执行一次元素状态变化
function changeOnce() {
  requestAnimationFrame(function () {
    if (动画是否应该停止) {
      return;
    }
    改变元素状态;
    changeOnce(); // 改变完成后，继续注册下一帧的变化
  });
}
changeOnce();

5.音视频 API

针对 video 和 audio 元素，HTML5 新增了音视频的 API，让开发者可以使用 JS 控制它们

1）音视频属性

属性名	含义
currentTime	当前播放时间，单位为秒，为其赋值将会使媒体跳到一个新的时间
loop	对应 HTML 标签 `loop` 属性，决定该媒体是否循环播放
controls	对应 HTML 标签 `controls` 属性，控制是否显示用户播放界面的控制 HTML
src	对应 HTML 标签 `src` 属性，获取和设置播放地址
volume	表示音频的音量，值从 0.0（静音）到 1.0（最大音量）
playbackRate	播放倍速，1 为正常倍速
duration	总时长，单位为秒
paused	当前是否是暂停状态
muted	是否静音

2）音视频方法

方法名	含义
play()	开始播放
pause()	暂停播放

3）事件

事件名	含义
pause	暂停时触发
ended	结束时触发
play	开始播放时触发
timeupdate	属性 `currentTime` 变化时触发，会随着播放进度的变化不断触发
loadeddata	事件在第一帧数据加载完成后触发

八、HTML+CSS 语言提升（H5+CSS3）

# （一）布局

# 1.弹性盒

# 1）生成弹性容器和弹性项目

# 2）更改方向

# 3）主轴排列

# 4）侧轴排列

# 5）弹性项目伸缩

# 6）主轴换行

# 2.网格

# 1）生成网格布局

# 2）定义行和列

# 3）改变排列方向

# 4）单元格之间的间隙

# 5）单元格内部的对齐

# 6）网格项目定位

# （二）视觉

# 1.阴影

# 1）盒子阴影 box-shadow

# 2）文字阴影 text-shadow

# 2.圆角 border-radius

# 3.背景渐变 linear-gradient()

# 4.变形 transform

# 1）平移 translate

# 2）缩放 scale

# 3）旋转 rotate

# 4）改变变形原点 transform-origin

# 5）多种变形叠加

# （三）过渡和动画

# 1.过渡

# 1）过渡属性

# 2）持续时间

# 3）过渡函数

# 4）过渡延迟

# 2.动画

# （四）其他 CSS3 属性

# 1.box-sizing

# 2.字体图标

# 3.图像内容适应

# 4.视口单位

# 5.伪元素选择器

# 6.平滑滚动

# （五）HTML5 更新

# （六）HTML5 文档

# 1.元素语义化

# 2.新增元素

# 1）多媒体

# 2）文章结构

# 3.新增属性

# 1）自定义数据属性

# 2）input 的新增属性

# （七） HTML5 Web API

# 1.使用 css 选择器选中元素

# 2.控制类样式

# 3.本地存储

# 4.渲染帧

# 5.音视频 API

# 1）音视频属性

# 2）音视频方法

# 3）事件