HTML5 + CSS3布局弹性布局生成弹性容器和弹性项目将元素的display属性设置为flex后，该元素就成为

布局

弹性布局

弹性盒小游戏

生成弹性容器和弹性项目

将元素的display属性设置为flex后，该元素就成为了弹性容器，弹性容器的所有直接子代元素，就成为了弹性项目

弹性容器会存在两个轴，分别是主轴和侧轴，主轴默认水平向右，侧轴默认垂直向下

默认情况下，弹性项目会沿着弹性容器的主轴依次排列，并且在没有设置高度的情况下在侧轴方向上自动拉伸（至高度占满弹性容器）

更改主轴方向

在弹性容器中，通过flex-direction可更改主轴方向

主轴排列

在弹性容器中，通过justify-content属性，可以影响弹性项目在主轴方向上的排列方式

侧轴排列

在弹性容器中，通过align-items属性，可以影响弹性项目在侧轴方向上的排列方式

弹性项目伸缩

伸缩是指在主轴方向上，当弹性容器有额外空间时，是否需要将弹性项目进行拉伸；当空间不足时，是否需要让弹性项目进行压缩

在弹性项目上使用flex属性，可设置弹性项目的拉伸和压缩比例：flex: 拉伸比例压缩比例初始尺寸

默认情况下，flex: 0 1 auto

主轴换行

默认情况，当主轴剩余空间不足时，按照压缩比例对弹性项目进行压缩，因此弹性项目不会换行显示

但如果设置了主轴换行，则不会对弹性项目压缩，而直接让超出的项目进行换行显示

给弹性容器设置flex-wrap: wrap，即可实现主轴换行

网格布局

网格布局小游戏

生成网格布局

将元素的display属性设置为grid后，该元素就成为了网格容器，网格容器的所有直接子代元素，就成为了网格项目

定义行和列

在网格容器中使用下面的css属性：

grid-template-rows：定义行
grid-template-columns：定义列

改变排列方向

在网格容器中使用属性grid-auto-flow: column，可使网格项目按列的方向进行排列

单元格之间的间隙

在网格容器中使用下面的属性

/* 行间隙为10px */
row-gap: 10px;

/* 列间隙为20px */
column-gap: 20px;

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

单元格内部的对齐

默认情况下，网格项目会在单元格内部水平和垂直拉伸，最终会撑满单元格

可以在网格容器中使用属性justify-items设置网格项目在单元格的水平方向的排列方式

可以在网格容器中使用属性align-items设置网格项目在单元格的垂直方向的排列方式

它们的可取值是相同的：

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

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

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

网格项目定位

默认情况下，网格项目依次排列到单元格中，每个网格占据一个单元格

可以在网格项目中设置grid-area属性来改变这一行为

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

视觉

阴影

盒子阴影

通过box-shadow属性可以设置整个盒子的阴影

文字阴影

通过text-shadow可以设置文字阴影

圆角

通过设置border-radius，可以设置盒子的圆角

/* 同时设置4个角的圆角，半径为10px */
border-radius: 10px;

/* 同时设置4个角的圆角，圆的横向半径为宽度一半，纵向半径为高度一半 */
border-radius: 50%;

/* 分别设置左上、右上、右下、左下的圆角 */
border-radius: 10px 20px 30px 40px;

背景渐变

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

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

渐变.png

变形

平移

使用translate可以让盒子在原来位置上产生位移，类似于相对定位

缩放

使用scale可以让盒子在基于原来的尺寸发生缩放

旋转

使用rotate属性可以在原图基础上进行旋转

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

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

改变变形原点

变形原点的位置，会影响到具体的变形行为

默认情况下，变形的原点在盒子中心，可以通过transform-origin来改变变形原点

/* 设置原点在盒子中心 */
transform-origin: center;

/* 设置原点在盒子左上角 */
transform-origin: left top;

/* 设置原点在盒子右下角 */
transform-origin: right bottom;

/* 设置原点在盒子坐标 (30, 60) 位置 */
transform-origin: 30px 60px;

变形效果叠加

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

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

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

过渡和动画

过渡和动画可以让css属性的变化更加平滑

过渡和动画无法对所有的CSS属性产生影响，能够产生影响的只有数值类属性，例如：颜色、宽高、字体大小等等

过渡

通过transition属性可以在元素中使用过渡

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

过渡属性

针对哪个css属性应用过渡，例如：填写transform，则表示仅针对transform属性应用过渡

若填写all或不填写，则表示针对所有css属性都应用过渡
持续时间

css属性变化所持续的时间，需要带上单位

例如：3s表示3秒，0.5s或500ms均表示500毫秒
过渡函数

本质是css属性变化的贝塞尔曲线函数，通常直接使用预设值：

ease-in-out：平滑开始，平滑结束

linear：线性变化

ease-in：仅平滑开始

ease-out：仅平滑结束
过渡延迟

书写规则和持续时间一样，表示过渡效果延迟多久后触发，不填则无延迟

在JS中，可以监听元素的transitionstart和transitionend事件，从而在过渡的开始和过渡结束时做一些别的事情

动画

动画的本质是一套css属性的平滑变化，通过@keyframes规则可以定义动画

通过animation属性可以在元素中使用动画

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

细节：

定义规则时，0%可以书写为from
定义规则时，100%可以书写为to
重复次数为infinite时，表示无限重复
动画方向为alternate时，表示交替反向，第1次正向，第2次反向，第3次正向，第4次方向，以此类推

在JS中，可以监听元素的animationstart和animationnend事件，从而在动画的开始和动画结束时做一些别的事情

其它

box-sizing

box-sizing的默认值为content-box，表示设置盒子宽高时，设置的是元素的内容盒区域的宽高

将box-sizing设置为border-box后，设置的宽高就是元素的边框盒区域的宽高，这更有利于对元素的尺寸进行控制

图像内容适应

css属性object-fit可以控制多媒体内容和与元素的适应方式，通常应用在img或video元素中

object-fit的默认值为fill

视口单位

css3支持使用vw和vh作为单位，分别表示视口宽度和视口高度

例如：1vh表示视口高度的1%，100vw表示视口宽度的100%

平滑滚动

使用scroll-behavior: smooth，可以让滚动条的滚动更加平滑

字体图标

css3新增了font-face指令，通过该指令可以在页面上加载网络字体，利用这个功能可以制作字体图标

字体图标本质上是文字，通过color属性可以设置颜色，通过font-size属性可以设置尺寸

文档

元素语义化

元素语义化是指：每个HTML元素都代表着某种含义，在开发中应该根据元素含义选择元素

元素语义化的好处：

利于SEO（搜索引擎优化）
利于无障碍访问
利于浏览器的插件分析网页

新增元素

多媒体

音频元素：audio，视频元素：video

可以使用video元素表达一个视频

多媒体元素均具有以下属性：

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

文章结构

为了让搜索引擎和浏览器更好的理解文档内容，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>

新增属性

自定义数据属性

web api

选中元素

// 使用css选择器选中匹配的第一个元素
document.querySelector('css选择器');

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

控制类样式

// 添加类样式
dom.classList.add('a');

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

// 移除类样式
dom.classList.remove('a');

// 切换类样式
dom.classList.toggle('a');

本地存储

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格式
JSON.stringify(obj);

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

渲染帧

浏览器会不断的对网页进行渲染，通常情况下的速度为每秒渲染60次，每一次渲染称之为一帧，因此又可以说：浏览器的渲染速率是60帧

但这不是一定的，它会受到各种因素的影响，因此，帧率往往会有浮动

在制作自定义动画时，往往会希望在下一帧的渲染前中改变一下元素的状态，因为这能让动画更加流畅

HTML5新增APIrequestAnimationFrame，它的回调函数会在下一帧的渲染开始之前被执行

requestAnimationFrame(function(){
    // 传入一个回调函数，该函数在下一帧渲染之前自动运行
})

该API中的回调函数仅会执行一次，如果想实现连贯的帧操作，通常会使用下面的模式：

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

changeOnce();

音视频API

针对video和audio元素，HTML5新增了关于它们的API，方便开发者使用JS控制它们

音视频属性：

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

音视频方法：

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

事件：

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

File API

File API是H5新增的WebAPI，它提供给JS读取本地文件的能力，但这依赖于用户的行为，当用户通过<input type="file">选择了一个文件后，JS才可以获取到该文件的相关信息

File API中具体包含以下几个API：

File：单个文件对象
FileList：文件对象集合，是一个伪数组
FileReader：读取文件的接口
Blob：文件对象的二进制数据

File和FileList

File对象代表一个文件，继承自Blob对象，包含了文件的名称、尺寸、mime类型、最近修改时间等只读属性

FileList是File对象的集合，通过type为file的input元素的files属性就可以得到用户所选择文件对应的FileList

<input type="file" name="" id="input" multiple>
<script>
    input.onchange = ()=>{
        console.log(input.files);
    }
</script>

浏览器提供了File构造函数，利用该构造函数也可以创建File对象

File构造函数可以传递三个参数：

第一个参数是一个数组，数组成员可以是ArrayBuffer或字符串，表示文件的内容
第二个参数是一个字符串，表示文件的路径和文件名称
第三个参数是一个配置对象，可以设置生成的File对象的属性，包括type（字符串，MIME类型）和lastModified（时间戳，默认为Date.now()）

const file = new File(["Hello"], "test.txt", {
    lastNodified: Date.now(),
    type: "text/plain"
});

FileReader

FileReader是一个构造函数，利用该构造函数的实例可以读取file对象或blob对象的内容

属性名	含义
error	读取文件时产生的错误对象
result	读取文件完成后的结果，结果的类型取决于调用何种方法进行的读取
readyState	当前读取文件时的状态，0表示实例被创建但尚未调用任何读取方法，1表示正在读取文件数据且未发生错误，2表示读取操作完成，可能是已经读取成功，或文件读取发生错误，或调用了abort方法

方法	含义
abort()	终止读取操作
readAsBinaryString(blob)	读取文件内容，结果以二进制字符串形式返回
readAsArrayBuffer(blob)	读取文件内容，结果以ArrayBuffer形式返回
readAsDataURL(blob)	读取文件内容，结果以Base64字符串形式返回
readAsText(blob, encoding)	读取文件内容，结果以字符串形式返回，默认使用的编码方式为utf-8

事件名
abort	读取文件操作被终止时触发
error	读取文件错误时触发
load	读取操作成功时触发
loadstart	读取操作开始时触发
loadend	读取操作结束时触发（可能读取成功，也可能读取失败）
progress	读取操作正在进行时触发

<input type="file" id="input">
<script>
input.onchange = (e)=>{
    const file = e.target.files[0];
    const fr = new FileReader();
    fr.onload = (e)=>{
        console.log(e.target.result);
    }
    fr.readAsText(file);
}
</script>