标签：CSS3 flex color box width HTML HTML5 background 属性

HTML5

一、新增的语义化标签

标签名	语义	单/双标签
header	整个页面，或者分区域的头部	双
footer	整个页面，或者部分区域的底部	双
nav	导航	双
article	文章、帖子、杂志、新闻、博客、评论	双
section	页面中的某段文字，或者文章中某段文字	双
aside	侧边栏	双

关于article和section

1. article里面可以有多个section
2. section强调分段或者分块，如果将一块内容分成几段时候，可以用section
3. article比section更强调独立性，一块内容如果比较独立完整，应该用article

二、新增表单功能

1. 表单控件新属性

属性名	功能
placeholder	默认情况下展位内容，无需删除，放入光标自动清空
required	强制要求输入内容，否则引起报错
autofocus	自动对焦
autocomplete	是否展示输入历史记录 属性值： on 和 off
pattern	正则匹配

三、新增多媒体标签

属性名	功能
video	视频标签
audio	音频标签

video

属性值：

controls 给视频添加操作栏，例如播放，下载等

muted 静音

autoplay 视频自动播放

loop 视频循环播放

poster 视频封面，要链接到一个图片

preload 视频预加载

none 不预先加载

auto 根据网速设置预先加载

metadata 只加载视频元信息，例如长度，大小等

audio

属性值：

controls

autoplay

loop

preload

四、新增全局属性

属性名	功能
contenteditable	修改元素为是否可以修改(true 可以编辑, false 不可以编辑)
draggable	修改元素是否可以拖动(true 可以拖动, false 不可以拖动)
hidden	隐藏元素(除了这种方法，也可以设置对应的display=none或者visibility为hidden)
spellcheck	拼写检查(true 检查, false 不检查)
conetxtmenu	设置在某个元素上鼠标右键的弹出内容
data-*	通过js可以批量取出标签中的data-*的自定义属性值

五、HTML5兼容

head加入一些兼容信息

<!-- 1.引入Chrome的兼容插件(并不是所有标签都可以处理) -->

<!--[if lt ie 9]>
<script src="../static/plugins/js/html5shiv.min.js"></script>
<![endif]-->

<!-- 2.让IE浏览器处于一个最优的渲染模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!-- 3.针对一些国产双核浏览器，让浏览器优先使用webkit内核 -->
<meta name="render" content="webkit">

CSS3

一、私有前缀

W3C提出某个CSS特性的时候，浏览器厂商会根据自身浏览器讷河使用私有前缀来测试该属性

查看兼容性的网站：www.caniuse.com

1. 常见浏览器私有前缀

Chrome -webkit-

Safari -webkit-

Firfox -moz-

Edge -webkit-

（旧）Opera -o-

（旧）IE -ms-

2. 书写例子

div {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
}

实际上并不需要单独为每一个兼容性样式添加前缀，可以借助现代工具（webpack）去快速添加前缀

二、新增内容

1. CSS新增长度单位

rem 根据根元素的字体大小倍数设置

vw 视口宽度的百分比

vh 视口高度的百分比

vmax 视口宽高中最大的一方的百分之多少

vmin 视口宽高中最小那个的百分之多少

2. CSS3新增颜色设置方式

CSS3新增了三种颜色的设置方式，分别是rgba，hsl，hsla

3. CSS3新增选择器

CSS3中新增的选择器有：动态伪类、目标伪类、语言伪类、UI伪类、结构伪类、否定伪类、伪元素

4. 新增盒子模型

box-sizing

box-sizing 怪异盒模型，更改width和height所匹配的内容

属性值

content-box 默认值，设置的是content的宽高

border-box 设置的是包括border以内的宽高（即最终的大小包含content, padding, border）

resizing

resizing 设置盒子可以手动调整大小

属性值

horizontal 水平方向上调整

vertical 垂直方向上调整

both 两个方向上都可以

注意：

使用resizing必须给对应的元素添加overflow的值，且不可以是visible

box-shadow

box-shadow 设置盒子的阴影

box-shadow 写两个值 含义：水平偏移 垂直偏移 
box-shadow: 3px 3px; 

box-shadow 写三个值 含义：水平偏移 垂直偏移 阴影颜色 
box-shadow: 3px 3px #0000ff; 

box-shadow 写三个值 含义：水平偏移 垂直偏移 阴影模糊 
box-shadow: 3px 3px 5px; 

box-shadow 写四个值 含义：水平偏移 垂直偏移 阴影模糊 阴影颜色 
box-shadow: 3px 3px 5px #0000ff; 

box-shadow 写五个值 含义：水平偏移 垂直偏移 阴影模糊 阴影的大小 阴影颜色 
box-shadow: 3px 3px 3px 10px #39c5bb; 

box-shadow 写六个值 含义：水平偏移 垂直偏移 阴影模糊 阴影的大小 阴影颜色 内部阴影 
box-shadow: 3px 3px 3px 3px #f00 inset; 

opacity

opacity 调整盒子的透明度(整个元素，包括文字和边框)

属性值

0 ~ 1（可以是小数）

注意：
设置background-color和color的时候，只是针对该种颜色添加透明度，而opacity是全部内容，包括添加在内部的图片和视频

5. 新增背景属性

在一个盒子模型中，如果背景是图片，则图片默认是从盒子的padding的左上角开始渲染，渲染的区域是border + padding + content

background-orgin

background-origin 设置背景渲染的原点

属性值

padding-box 默认值，从盒子左上角的padding开始渲染

content-box 从content的左上角开始渲染

border-box 从border的左上角开始渲染

注意：

无论是从哪个顶点开始渲染，如果没有开启no-repeat，最终背景图都会占满除了margin以外的盒子部分，即渲染的区域始终是border + padding + content

background-clip

background-clip 修剪背景图，设置背景图不可见的区域

属性值：

border-box 设置border区域以外背景不可见，即margin区域不可见（默认）

padding-box 设置padding区域以外的背景不可见，即border + marigin区域不可见

content-box 设置content区域以外的背景不可见，即padding + border + margin区域不可见

text（实验性） 将背景只呈现在文字上，要将文字的颜色设置为transparent

注意：

不可见的内容包括设置的background-color和background-image，也就是说如果这个区域被排除，则是透明背景

background-position

background-position 背景图片的位置

属性值

background-position 写一个值 含义：距离左边和顶部
background-position: 50px;

background-position 写一个值 含义：位于左边、右边、上边、下边或者中间
background-position: center;

background-position 写两个值 含义：距离左边 距离顶部
background-position: 50px 100px;

background-position 写两个值 含义：左边或者右边 上边或者下边
background-position: lef bottom;

background-position 写三个值 含义：左边或者右边 上边或者下边 对应的距离(x和y一样)
background-position: lef bottom 20%;

background-position 写四个值 含义：左边或者右边 对应的距离 上边或者下边 对应的距离

background-size

background-size 设置背景图片的大小

属性值

auto 默认，截取图片上元素大小的部分（从图片左上角开始）

width height 第一个属性值是图片的宽，第二个是图片的高，可以是百分比或者像素值

contain 以图片的比例缩放到元素区域大小，空余的地方重复（可以通过background-repeat更改）

cover 让图片的某一侧（宽或者高）与元素大小相等，剩余多的部分截掉

background（不推荐）

background 综合了所有background的复合属性

属性值（从上到下代表先后顺序）

1. -color

2. -image

3. -repeat

4. position（可以直接写left top表示左上角）

   / （必须加一个/才能继续写后面的）

5. size

6. origin

7. clip

div {
    background: #f00 url(图片.ong) no-repeat 10px 10px / contain border-box content-box;
}

注意：

1. size一定要在position后面，并且用/分开
2. 若origin和clip一致，写一个即可
3. 真正使用的时候一般不会用到所有的属性，使用 background-* 即可

6. 新增边框属性

border-radius

border-radius 设置边框圆角的半径

属性值

注意不必先有边框才能设置边框圆角

1. 可以为每一个角设置一样的值（最常用）

border-radius: 5px;

当圆角的半径达到元素（正方形）的一般的时候，这个正方形的元素就会呈现圆形

width: 400px;
height: 400px;
border-radius: 200px;

或者可以使用百分比，默认会按照宽和高的值来进行设置

width: 200px;
height: 100px;
border-radius: 20%;/* 设置的边缘是一个椭圆的圆角，且半径分别为100px和50px */

同理，如果将对应的百分比设置为50%就能得到一个圆或者椭圆形的元素

width: 200px;
height: 200px;
border-radius: 50%;

2. 可以直接给每个角设置不同的值

border-top-left-radius: 50px;
border-bottom-right-radius: 50px;

3. 可以给圆角设置不同的水平半径和垂直半径

border-radius: 10px 20px;

4. 复合属性

分别表示从左上角沿着顺时针到左下角的x半径和y半径（如果不含/则x和y半径相同）

border-radius: 50px 100px 150px 200px / 50px 100px 150px 200px;

outline

CSS3新增了一个盒子区域，即外轮廓，介于border和margin之间，但不参与盒模型大小的运算，也就是不具有实际上意义的大小，可以理解成一个虚影，如果有轮廓的一侧紧贴其他元素，则会盖住其他元素的内容

outline 外轮廓

大小 outline-width

颜色 outline-color

样式 outline-style

偏移 outline-offset（可以是负数，即变成内部轮廓）

复合属性 outline: 大小 样式 颜色;

注意：

outline-offset不是outline的子属性，即不参与到复合属性当中

7. 新增文本属性

text-shadow

text-shadow 文本阴影

属性值

与box-shadow一致

/* 可以做出霓虹灯的效果 */
font-size: 80px;
background-color: black;
color: white;
text-shadow: 0px 0px 50px red;

white-space

white-space 文本换行

属性值

normal 超出边界自动换行，不读取文本中的换行

pre 按原文显示

pre-wrap 按原文显示-超出一行的内容自动换行

pre-line 删除每一句话前后的空格，即只保留换行的空格和文字之间的空格

nowrap 强制不换行（最常用）

text-overflow

text-overflow 设置文本溢出方式

属性值

clip 截掉

ellipsis 超出部分显示...

注意：

如果想让text-overflow属性生效，包裹的容器必须设置overflow，且不可以是visible，并且还要设置white-spac为nowrap

text-decoration

text-decoration 文本修饰

属性值

none 默认

underline 下划线

overline 上划线

line-thorogh 删除线

注意：

text-decoration单独设置线的类型是CSS2的内容，在CSS3中，其也可以当作一个复合属性来使用，即从左到右依次是line, style, color

text-decoration: overline dashed blue;

text-decoration-line

text-decoration-line 单独设置线

text-decoration-style

text-decoration-style 单独设置线的样式

属性值

dashed 虚线

dotted 点线

solid 实线

double 双实线

wavy 波浪线

text-decoration-color

text-decoration-color 单独设置线的颜色

text-stroke（实验性，仅限于webkit内核）

text-stroke 文本描边

设置宽度

-wdbkit-text-stroke-width: 2px;

设置颜色

-wdbkit-text-stroke-color: red;

复合属性

-webkit-text-stroke: 2px red;

8.新增渐变

8.1 线性渐变

线性渐变是属于background-image的一个属性值

background-image: linear-gradient(red, yellow, green)

也可以设置多个方向，甚至是具体的角度

/* 默认格式，从上到下 */
.box > div:nth-child(1) {
    background-image: linear-gradient(red, yellow, red);
}
/* 设置方向, to right 表示从左到右, 同理to left也可以从右到左 */
.box > div:nth-child(2) {
    background-image: linear-gradient(to right, red, yellow);
}
/* 设置多个方向 */
.box > div:nth-child(3) {
    background-image: linear-gradient(to right top, red, yellow);
}
/* 设置角度 */
.box > div:nth-child(4) {
    background-image: linear-gradient(20deg, red, yellow, red);
}

设置发生渐变的位置

.box > div:nth-child(5) {
    /* 颜色后的像素表示从起点到该位置是该种颜色 */
    background-image: linear-gradient(red 80px, yellow 100px, red 120px);
}

8.2径向渐变

径向渐变是属于background-image的一个属性值，与线性渐变相似

/* 默认以中心点为圆心向周围扩散 */
.box div:nth-child(1) {
    background-image: radial-gradient(red, yellow, green);
}
/* 通过关键词调整径向渐变圆心 */
.box div:nth-child(2) {
    background-image: radial-gradient(at left top, red, yellow, green);
}
/* 通过像素值调整径向渐变圆心 */
.box div:nth-child(3) {
    background-image: radial-gradient(at 50px 50px, red, yellow, green);
}
/* 通过circle关键字调整为正圆 */
.box div:nth-child(4) {
    background-image: radial-gradient(circle, red, yellow, green);
}
/* 通过像素值调整为正圆 */
.box div:nth-child(5) {
    background-image: radial-gradient(100px 100px, #FF6384, #FBA500, #FFFF00);
}
/* 通过像素值调整为正圆 */
.box div:nth-child(6) {
    background-image: radial-gradient(#FF6384 10px, #FBA500 100px, #FFFF00 150px);
}

8.3 重复渐变

重复渐变必须基于前两种其中一种渐变，在正常渐变前面加上一个repeating-，如果整个区域包含纯色区域（即设置了渐变的区间没有前置颜色和后继颜色，纯色的区域），会将渐变的区域重复在这些区域

.box {
    background-image: repeating-linear-gradient(red 50px, yellow 150px, red 200px);
}

同理，径向渐变也可以重复

.box {
    background-image: repeating-radial-gradient(red 50px, yellow 150px, red 200px);
}

9.新增Web字体

@font-face {
    font-family: "monaco";
    src: url(./font1/Monaco.ttf);
}
p {
    font-size: 100px;
    font-family: "monaco";
}

但如果是中文字体，往往一个ttf文件会达到1MB以上，严重拖慢服务器，如何解决呢？

答：定制字体，输入想要使用的字，选择字体，就会生成对应的定制字体文件，然后根据下载文件中的demo.html配置兼容性即可

10.字体图标

通过将一个字体改为图片的方式呈现一张图片（一般是一些标志），可以让图片更为灵活，且不容易失真

定义字体图标库iconfont-阿里巴巴矢量图标库

下载后的demo文件中一般会提供三种方式：

1. 使用unicod，和web字体使用方式一样，使用时候类似 的方式，仅支持黑白，且易读性差，但兼容性最好
2. （最常用）使用font-css，引入下载的文件夹中的.css文件，易读性好，兼容性好，但是仅支持黑白，但注意使用的时候不要用元素选择器，否则会被默认样式中的类选择器覆盖，从而导致添加的样式无法显示，例如font-size
3. 使用js创建矢量图，然后使用xlink来链接对应的矢量图，支持彩色，且易读性好，但是稍微有点复杂，且兼容性最差，除此之外，浏览器渲染SVG图片需要消耗一定资源，且能力比较差

除了下载demo文件，也可以生成链接在线引用（推荐）

方式一、

@font-face {
font-family: 'font4';  /* Project id 4495084 */
src: url('//at.alicdn.com/t/c/font_4495084_8li8xnuq76.woff2?t=1712251955213') format('woff2'),
    url('//at.alicdn.com/t/c/font_4495084_8li8xnuq76.woff?t=1712251955213') format('woff'),
    url('//at.alicdn.com/t/c/font_4495084_8li8xnuq76.ttf?t=1712251955213') format('truetype');
}
.font4 {
    font-family: "font4" !important;
    font-size: 100px;
    font-style: normal
}

使用

<i class="font4">&#xe6fb;</i>

方式二、

<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4495084_8li8xnuq76.css">

使用

<i class="icon-zhuanjia"></i>

方式三、

<script src="//at.alicdn.com/t/c/font_4495084_8li8xnuq76.js"></script>

使用

<svg class="icon" aria-hidden="true">
	<use xlink:href="#icon-zhishiku"></use>
</svg>

aria-hidden 标记元素是否应该被呈现给用户

作用：使得屏幕阅读器和其他辅助技术能够更有效地向残障用户提供信息

属性值

true hidden

在上述的例子中，元素中的图标将不会被屏幕阅读器读出，因为它被标记为隐藏的。

此外，在阿里巴巴的字符库中，还可以在图标的编辑页面自定义图标的编码

11.2D变换

11.1 2D位移

2D位移可以改变元素的位置，具体使用方式如下

1. 先给元素添加转换属性transform

2. 编写transform的具体值，相关可选值如下

   值	含义
   translateX	水平方向上的位移，可以指定值和百分比，注意百分比参考的是自身宽度
   translateY	垂直方向上的位移，可以指定值和百分比，注意百分比参考的是自身高度
   translate	一个值代表水平方向，两个值代表水平和垂直方向

3. 注意：

   1. 位移和相对定位相似，都不脱离文档流

   2. 相对定位的top参考的是父元素的百分比，而位移参考的是自身

   3. transform支持链式编写

      transform: translateX(30px) translate(40px);
      

   4. 位移对行内元素无效

   5. 位移配合定位可以不通过计算直接实现元素水平垂直居中

      .outer {
          width: 200px;
          height: 100px;
          position: relative;
      }
      .inner {
          width: 50px;
          height: 30px;
          background-color: orange;
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%)
      }
      

   6. 浏览器对位移有优化，浏览器处理的效率更高，因此都可以实现的效果首选位移

11.2 2D缩放

2D缩放是指让元素放大或者缩小

值	含义
scaleX	设置水平方向的缩放比例，小于1是缩小，大于1是放大，负数表示镜像翻转
sacleY	设置垂直方向的缩放比例，小于1是缩小，大于1是放大，负数表示镜像翻转
scale	一个参数表示总体放大和缩小，两个参数一个对应x轴，另一个对应y轴

11.3 2D旋转

2D旋转是让元素在二维平面中绕着中心旋转

值	含义
rotate	设置旋转的角度，指定一个deg

11.4 2D扭曲

2D扭曲

值	含义
skew	正数：元素沿着左上角和右下角沿着X或者Y方向延长；负数：元素沿着右上角和左下角沿着X或者Y方向延长；

11.5 复合效果

注意在多个复合的变换效果时候，其参考点是不同的，例如位移参考的是元素原始的左上角和宽高，而缩放和旋转参考的是当前元素的中心

,inner {
	width: 200px;
    height: 200px;
    background-color: skyblue;
    
    transform: scale(0.5) translate(50%, 50%);
}

,inner {
	width: 200px;
    height: 200px;
    background-color: skyblue;
    
    transform: translate(50%, 50%) scale(0.5);
}

这两段代码的运行结果是不一样的

注意：旋转会改变元素的位移参考点，如果给元素添加30度倾角度，再添加位移，元素会沿着倾角的方向移动（即元素不再按照原始的xy方向，可以理解成坐标系也跟着进行了旋转），为了避免这一点，尽量将rotate放在最后一个位置写

11.6 变换原点

transform-orgin

transform-orgin 变换原点

属性值

两个值

关键字 transform-origin: left top

像素值 transform-origin: 50px 50px

百分比 transform-origin: 50% 50%

也可以只给一个值

关键字 另一个值取对应轴的50%

像素值 表示x轴的位置，另一个值取y轴中间

百分比 与像素值同理

注意：

变换原点只对旋转和缩放有影响，而位移始终参考的是原始元素的原点，除非先通过旋转修改元素的坐标系倾角

12.3D变换

12.1 3D空间与景深

transform-style

transform-style 调整父元素的空间格式

属性值

flat 2D空间（默认）

preserve-3d 3D空间

perspective

perspective 景深

景深是调整人眼到z=0平面的距离，默认是无穷大，即正视图，没有近大远小的效果，通过设置景深，可以获得3D透视图的效果

属性值

(500 ~ 1000)，大概给到元素高的一半多，是一个比较合适的值

12.2 透视点的位置

perspective-origin

perspective-origin 透视点的位置

属性值

默认在元素中心，通过像素值可以修改从哪一侧看

12.3 3D位移

元素沿着Z轴位移

值	含义
translateZ	设置z轴，指定长度，正数表示向屏幕外，负数表示向屏幕里，不可以写百分比
translate3d	必须设置三个参数，且分别对应x轴，y轴以及z轴

12.4 3D旋转

元素在3D空间中旋转

值	含义
rotateX、rotateY	设置元素绕着X轴或者Y轴旋转的角度
rotate3d	必须设置四个参数，前三个是布尔值表示是否旋转，第四个设置旋转的角度

12.5 3D缩放

元素在3D空间中进行缩放

值	含义
scaleZ	调整景深
scale3d	必须设置三个参数，且分别对应x轴，y轴以及z轴

12.6 复合效果&变换原点

transform 复合效果（注意属性值之间没有逗号）

transform-origin 调整原点

12.7 显示背部

backface-visibility

backface-visibility 背部可见性

属性值

visible 可见

hidden 不可见

13. 过渡

过渡可以让元素在不使用js和flash的情况下，实现元素从一种样式平滑过渡到另一种样式

transition-property

transition-property 过渡属性

属性值

可以发生过渡的属性（可以用数值作为属性值的属性，例如width，left等等，使用逗号隔开）

all 选择所有可以发生过渡的属性

transition-duration

transition-duration 过渡时间

属性值

以s和ms作为单位的数值

支持过渡的属性通常有

颜色，长度值，百分比，z-index，opacity，2D变换属性，3D变换属性，阴影等。

transition-delay

transition-delay 过渡延迟

属性值

以s和ms作为单位的数值

transition-timing-function

transition-timing-function 过渡速度曲线

属性值

ease 平滑过渡（默认）慢-快-慢

linear 匀速

ease-in 慢-快

ease-out 快-慢

ease-in-out 慢-快-慢（相比平滑变化小一些）

step-start 在过渡时间开始时候发生（无过渡）

step-end 在过渡时间结束时候发生（无过渡）

step(20) 分成二十段(可以调整)，每一段执行一次step-start和step-end

step(20, start) / step(20, end) 设置第一段是由step-start开始的还是由step-end开始的

cubic-bezier(.1,.71,.13,1.69) 贝塞尔曲线

可视化设置贝塞尔曲线https://cubic-bezier.com

transition

transition 复合属性

属性值

四个，从左到右依次是：时间、过渡的属性、过渡的延迟、过渡方式

transition: 0.5s all 0.1s linear;

除了时间和过渡的属性值，其他可以任意缺少，但要注意顺序

小案例：使用过渡实现一个悬浮动画

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02_过渡使用小案例</title>
    <style>
        .outer {
            width: 800px;
            height: 450px;
            background-color: orange;
            border: 2px solid gray;
            margin: 0 auto;
            margin-top: 50px;
            overflow: hidden;
        }
        .inner {
            width: 100%;
            height: 100%;         
            background-image: url(CyberPunk.jpg);
            background-repeat: no-repeat;
            background-size: 100%;

            transition: 1s all ease-out;
        }
        .outer:hover .inner {
            transform: translate(-20%, -20%) scale(1.7);
            /* background-size: 180%;
            background-position: 70% 70%; */
        }
        .mask {
            width: 100%;
            height: 100%;       
            background-color: black;
            font-size: 50px;
            color: white;
            text-align: center;
            line-height: 450px;
            opacity: 0;
            transform: translate(0, -100%);

            transition: 1s all ease-out;
        }
        .outer:hover .mask {
            opacity: 0.7;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
        <div class="mask">你好！夜之城</div>
    </div>
</body>
</html>

14. 动画

过渡与动画的不同之处：

过渡：

1. 需要有触发条件
2. 不能调整中间状态

动画：

1. 无需触发条件
2. 可以按照百分比设置各个阶段的形状颜色位置等

14.1 动画的基本使用

• 第一步：定义关键帧

  1. 简单定义方式

     /* 定义一个动画（一组关键帧）——方式1 */
     @keyframes move-to-right {  
         /* 第一帧 */
         from {
     
         }
         /* 最后一帧 */
         to {
             transform: translate(900px);
             background-color: red;
         }
     }
     

  2. 完整定义方式

     /* 定义一个动画（一组关键帧）——方式2 */
     @keyframes move-to-right2 {
         0%{
     
         }
         50%{
             background-color: green;  
         }
         100%{
             transform: translate(900px);
             background-color: red;   
             border-radius: 50%;             
         }
     }
     

     from和to本身就代表0%和100%，可以相互代替着用

• 第二步：给元素应用动画，用到的属性如下

  1. animation-name：给元素指定具体的动画

  2. animation-duration：设置动画所需要的时间

  3. animation-delay：设置动画延迟

     .inner {
         width: 100px;
         height: 100px;
         background-color: deepskyblue;
         /* 应用动画元素 */
         animation-name: move-to-right2;
         /* 动画持续的时间 */
         animation-duration: 5s;
         /* 动画延迟时间 */
         animation-delay: 1s;
     } 
     

  4. animation-timing-function：设置动画方式（和过渡一样，linear线性，ease滑动等）

  5. animation-iteration-count：设置动画播放次数（infinite无限次数）

  6. animation-direction：动画的方向（reserve反向，alternate往返(至少要有两次播放)）

  7. animation-fill-mode：动画以外的状态，即当动画停止播放或者还未开始播放时候的状态（forwards停在最后一帧）

  8. animation-play-state：动画播放的状态（paused暂停，running正常 - 一般搭配动态伪类使用）

14.2 动画的复合属性

使用animation作为复合属性使用，从左到右依次是：

名称、时常、延迟、方式、次数、方向、以外状态和播放状态（这个一般不写）

animation: atguigu 3s 0.5s linear infinite forwards;

14.3 小案例：使用动画实现一个帧序列动画

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03_动画使用小案例</title>
    <style>
        .walk {
            width: 115.75px;
            height: 204px;
            background-image: url(./动画序列帧.jpg);
            margin: 0 auto;
            margin-top: 100px;

            animation: walk 1s steps(8) infinite;
        }
        @keyframes walk {
            from{}
            to{
                background-position: -926px 0;
            }
        }
    </style>
</head>
<body>
    <div class="walk"></div>
    <div class="run"></div>
</body>
</html>

15. 多列布局

column-count

column-count 多列布局列数

属性值

数值（列数）

获得该样式的元素中的字自动分为对应的列数

column-width

column-width 指定每一列的宽度，若未设定列数则自动分列

属性值

数值（列宽）

column（不推荐使用）

column 复合属性

属性值

列数 列宽

column: 3 220px;

column-gap

column-gap 列间距

属性值

数值（列间距，最小是0，但不会真的设置编距为0像素）

column-rule-width

column-rule-width 每一列边框的宽度

属性值

数值（边框宽度）

column-rule-style

column-rule-style 每一列边框的风格

属性值

dashed、solid、dotted、double

column-rule-color

column-rule-color 每一列边框的颜色

属性值

颜色

column-rule

column-rule 每一列边框的复合属性

属性值

从左到右：边框宽度、边框样式、边框颜色

column-span

column-span 跨列

属性值

none 不跨列（默认）

all 跨越所有列

注意：不能单独设置跨域某几列

16. 多列图片

如果想要做出类似图片瀑布的格式，只需要对多个图片的父元素设置column-count然后设置列数即可

.outer {
    column-count: 5;
    background-color: gray;
}
img {
    width: 100%;
    position: relative;
    top: 0;
    transition: 0.2s all linear;

}
img:hover {
    box-shadow: 0 0 20px black;
    top: -3px;
    transform: scale(1.01);
}

17. 伸缩盒模型

1. 传统布局：display + position + float 传统盒模型主要用于PC端
2. flex布局：在移动端应用比较广泛

17.1 伸缩容器、伸缩项目

• 伸缩容器：开启了flex
• 伸缩项目：伸缩容器的所有子元素自动成为伸缩项目

17.2 主轴方向

• 主轴：伸缩项目默认沿着主轴方向排列，主轴默认水平从左到右
• 侧轴：与主轴垂直的是侧轴

flex-direction

flex-direction 主轴方向

属性值

row 默认水平左到右

row-reverse 从右到左

column 从上到下

column-reverse 从下到上

17.4 主轴换行方式

flex-wrap

flex-wrap 换行方式

属性值

no-wrap 默认不换行

wrap 自动换行

wrap-reverse 反向换行

注意：

使用换行的时候，如果伸缩项目的高度不能占满剩下的空间，伸缩项目会在剩余的空间中垂直居中

flex-flow（不建议）

flex-flow 复合属性（direction和wrap）

flex-flow: column wrap;

17.5 主轴对齐方式

justify-content

justify-content 主轴对齐

属性值

flex-start 主轴开始的位置

flex-end 主轴结束的位置

center 中间对齐

space-around 均匀分布在一行中，设置相同的边距（相邻项目不会合并间距）

space-between 均匀分布在一行中，项目之间距离相等，且两端项目紧贴边缘

space-evenly 项目均匀分布在一行中，项目之间的边距会合并

17.6 侧轴对齐方式

①只有一行

align-items

align-items 只有一行的侧轴对齐

属性值

stretch 占满整个容器的高度（默认值，有高度则与flex-start效果一致）

flex-start 侧轴起点对齐

flex-end 侧轴终点对齐
center 侧重中点对齐

baseline 伸缩项目的第一行文字的基线对齐

没有设置高度的情况下flex-start和stretch的效果

②多行情况

align-content

align-content 多行调整侧轴对齐

属性值

stretch 占满整个侧轴（默认）

flex-start 与侧轴的起点对齐

flex-end 与侧轴的终点对齐

center 与侧轴的两端对齐，中间平均分布

space-between 与侧轴两端对齐，中间平均分布

space-around 伸缩项目的距离相等，比距边缘大一倍

space-evenly 在侧轴上完全平分

17.7 元素水平垂直居中方法

方案一、弹性盒子沿主轴和侧轴居中

.outer {
    width: 400px;
    height: 400px;
    background-color: #888;
    display: flex;
    
    justify-content: center;
   	align-items: ceter;
}
.inner {
    width: 100px;
    height: 100px;
    background-color: orange;
}

方案二、弹性盒子设置自动的边距

.outer {
    width: 400px;
    height: 400px;
    background-color: #888;
    display: flex;
}
.inner {
    width: 100px;
    height: 100px;
    background-color: orange;
    
    margin: auto;
}

方案三、定位设置子元素左上角位于父元素中心，然后通过translate参考自身宽高，分别移动-50%

.outer {
    width: 400px;
    height: 400px;
    background-color: #888;
    position: relative;
}
.inner {
    width: 100px;
    height: 100px;
    background-color: orange;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

方案三、通过margin计算上下边距设置垂直居中，然后用auto实现水平居中

.outer {
    width: 400px;
    height: 400px;
    background-color: #888;
}
.inner {
    width: 100px;
    height: 100px;
    background-color: orange;
	margin: 150px auto;
}

方案四、类似方案二，设置上下左右距离都是0，然后设置auto的边距

.outer {
    width: 400px;
    height: 400px;
    background-color: #888;
    position: relative;
}
.inner {
    width: 100px;
    height: 100px;
    background-color: orange;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

方案五、类似方案三，先将子元素左上角定位到父元素中心，然后利用margin参考自身宽高，分别左移和上移50%

.outer {
    width: 400px;
    height: 400px;
    background-color: #888;
    position: relative;
}
.inner {
    width: 100px;
    height: 100px;
    background-color: orange;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

17.8 项目在主轴上的基准长度

flex-basis

flex-basis 设置主轴方向的基准长度，会让宽度或者高度失效

注意：

主轴横向，项目宽度会被覆盖，同理，主轴纵向，项目高度会被覆盖

作用：浏览器根据这个属性设置值，计算主轴上是否有多余空间，默认值auto，即：伸缩项目的宽或高

17.9 伸缩项目

flex-grow

flex-grow 伸长项目权重

属性值

数值

当容器在主轴方向上有富余空间，为所有项目设置相同的flex-grow，则表示所有项目都获得均分的剩余空间

同理，设置不同的，则每个项目分到自己的flex-grow所占全部比例的剩余空间

flex-shrink

flex-shrink 收缩项目权重

属性值

数值

当容器在主轴方向上被压缩（设置flex-shur: nowrap）则按照设置的压缩权重，计算每个项目的收缩比

收缩比：该项目要收缩原来的百分之多少

计算方式：收缩比 = ( 该项目长度 × 该项目收缩权重 )/每一个项目乘以自己项目收缩权重之和、

得到的结果即为收缩的比例，用该比例乘以该项目的宽（高），得到的就是该项目要减少的宽（高）

收缩的极限是内容的宽度，例如某个项目中有一个100px的盒子，则该项目至少收缩到100px

flex（用于项目）

flex 复合属性

属性值

从左到右依次： 拉伸权重 收缩权重 基准长度

.inner {
    flex: 1 1 100px;
}

常用格式(flex-grow和flex-shrink设置为1和0分别表示允许拉伸（压缩）和不允许拉伸（压缩）

auto参考元素的宽高， 0默认不设置主轴方向基准长度，即会覆盖对应宽高，变为0)

.inner {
    flex: 1 1 auto;/*可以拉伸压缩，基准长度参考对应项目宽高*/
}
.inner {
    flex: 1 1 0;/*可以拉伸压缩，基准长度为0，即项目等宽*/
}
.inner {
    flex: 0 0 auto;/*不可以拉伸压缩，基准长度参考对饮项目宽高*/
}

分别可以简写为

flex: auto;

flex: 1;

flex: none;

17.10 项目排序

order

order 定义项目顺序

属性值：

数值

可以是负数，默认都是0，之后项目会按照order从小到大进行排列

17.11 单独对齐

algin-self

algin-self 单独调整某个伸缩项目的对齐方式（在侧轴上的对齐方式）

属性值

auto 默认继承父元素的align-items属性

stretch 占满整个容器的高度（默认值，有高度则与flex-start效果一致）

flex-start 侧轴起点对齐

flex-end 侧轴终点对齐
center 侧重中点对齐

baseline 伸缩项目的第一行文字的基线对齐

17.12 小案例：使用弹性盒子创建一个主页面

当宽度或者高度等数值的属性值，无法用单一的单位用来描述，例如案例中的page-content的高度是视口的高度再减去page-header的高度，应该如何呈现呢？

答：使用calc()函数，其会根据计算的结果动态返回给页面，修改对应的属性值，例如可以写calc(100% - 30vw +10em -10px)等等

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹性盒子案例</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        a {text-decoration: none;}
        ul {list-style: none;}

        /* 设置body的背景，要先给宽高，使用百分比，其参考的是父元素html的宽高，因此都要设置为100% */
        html, body {
            width: 100%;
            height: 100%;
        }
        body {
            background-image: url(./image/bkg.jpg);
            background-repeat: no-repeat;
            background-size: cover;
        }
        .page-header {
            height: 70px;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }
        .logo {
            height: 70px;
            width: 70px;
            background-image: url(./image/logo.png);
            background-repeat: no-repeat;
            background-size: 380px;
            background-position: -155px -82px;
            opacity: 0.7;
        }
        .header-nav {
            display: flex;
        }
        .header-nav a {
            color: aliceblue;
            font-size: 20px;
            border: 1px solid aliceblue;
            border-radius: 8px;
            padding: 10px;
            margin-left: 20px;
            opacity: 0.6;
            position: relative;
            transition: 0.2s ease all;
            box-shadow: 1px 1px 2px white;
        }
        .header-nav  a:hover {
            top:-3px;
            box-shadow: 0 0 10px;
        }
        .page-content {
            width: 100vw;
            height: calc(100vh - 70px);
            display: flex;
        }
        .content-nav {
            width: 1000px;
            height: 300px;
            margin:auto;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }
        .content-nav .item {
            width: 180px;
            height: 200px;
            display: flex;
            flex-direction: column;
            /* 调整侧轴的对齐方式，因为默认是stretch，如果图片没有设置宽高就会被拉伸 */
            align-items: center;
            justify-content: space-evenly;
            border-radius: 15px;
            transition: 0.2s all linear;
            position: relative;
            cursor: pointer;
        }
        .content-nav .item:hover {
            box-shadow: 0 0 20px black;
            top: -2px;
        }

        .content-nav .item span {
            font-size: 20px;
            color: aliceblue;
        }
        .content-nav .item:nth-child(1) {
            background-color: #595ca8;
        }
        .content-nav .item:nth-child(2) {
            background-color: #ff9d2e;
        }
        .content-nav .item:nth-child(3) {
            background-color: #01a6de;
        }
        .content-nav .item:nth-child(4) {
            background-color: #015e91;
        }
        .content-nav .item:nth-child(5) {
            background-color: #1dc128;
        }
    </style>
</head>
<body>
    <header class="page-header">
        <a href="#" class="logo"></a>
        <ul class="header-nav">            
            <li><a href="#">首页</a></li>
            <li><a href="#">图书预约</a></li>
            <li><a href="#">借阅记录</a></li>
            <li><a href="#">违约记录</a></li>
        </ul>
    </header>
    <div class="page-content">
        <div class="content-nav">
            <div class="item">
                <img src="https://picsum.photos/90/75" alt="">
                <span>查看馆藏</span>
            </div>
            <div class="item">
                <img src="https://picsum.photos/90/75" alt="">
                <span>本馆历史</span>
            </div>
            <div class="item">
                <img src="https://picsum.photos/90/75" alt="">
                <span>今日推荐</span>
            </div>
            <div class="item">
                <img src="https://picsum.photos/90/75" alt="">
                <span>微信公众号</span>
            </div>
            <div class="item">
                <img src="https://picsum.photos/90/75" alt="">
                <span>关注我们</span>
            </div>

        </div>
    </div>
</body>
</html>

18. 媒体查询

18.1 媒体类型

使用媒体查询可以更改在不同设备上的显示样式，例如百度文库的文字，当使用Ctrl + P之后文字并不会显示出来

使用方法

/* 只有在打印机和打印预览中才会呈现的样式 */
@media print {
    h1{
        background-image: none;
    }
}

注意：

媒体查询中的样式并不会提高任何优先级，只是在这些内容只有在对应的设备上才会正常显示，而其他设备则默认屏蔽，所以如果上述的代码写在正常h1的前面，那么对应的样式仍然可以在后面的样式中被覆盖掉

18.2 媒体特性

使用媒体特性可以根据视口的大小或者用户计算机的分辨率添加不同的样式

/* 检测到视口的宽度为800时候应用样式 */
@media (width:800px) {
    h1 {
        background-color: green;
    }
}

/* 检测到视口的宽度为小于等于700时候应用样式 */
@media (max-width:700px) {
    h1 {
        background-color: pink;
    }
}

/* 检测到视口的宽度为大于等于900时候应用样式 */
@media (min-width:900px) {
    h1 {
        background-color: azure;
    }
}
/* 也可以检测高度但一般不用 */

/* 检测到设备的宽度大于900px时候应用的样式 */
@media (device-width:1920px) {
    h1 {
        background-color: blue;
    }
}

值	含义
width	检测视口宽度
max-width	检测视口最大宽度
min-width	检测视口最小宽度
height	检测视口高度
max-height	-
min-height	-
device-width	检测设备屏幕的宽度
max-device-width	-
min-device-width	-
orientation	检测视口的旋转方向
	1. portrait：视口处于纵向，即高度大于宽度
	2. landscape：视口处于横向，即宽度大于高度

18.3 媒体查询运算符

当媒体特性的条件不是单纯的大于或者小于某个值，可以用运算符进行进一步调整

and 且

@media (min-width:700px) and (max-width:800px) {
    h1 {
        background-color: green;
    }
}

@media screen (min-width:700px) and (max-width:800px) {
    h1 {
        background-color: green;
    }
}

, or 或

@media (max-width: 700px), (min-width: 800px) {
    h1 {
        background: black;
    }
}

@media (max-width: 700px) or (min-width: 800px) {
    h1 {
        background: black;
    }
}

not 否定

@media not screen {
    h1 {
        background: black;
    }
}

only 肯定（仅在条件成立的时候执行，为了避免一些浏览器无法读取后面的内容而导致条件不全，例如IE）

@media only screen {
    h1 {
        background: black;
    }
}

18.4 常用阈值

媒体查询的应用方式

方式一、

写在style里面

<style>
    @media screen and (min-width: 1200px) {
        h1 {
			color: blue;
        }
    }
</style>

方式二、写在css文件里面

<link rel="stylesheet" href="./css/huge.css">

@media screen and (min-width: 1200px) {
    h1 {
        color: blue;
    }
}

方式三、在link标签中添加媒体样式

<link rel="stylesheet" media="screen amd (min-widht: 1200px)" href="./css/huge.css">

h1 {
    color: blue;
}

19. BFC(Block Formatting Context)

19.1 什么是BFC

块级格式上下文，是元素的一种隐藏的属性，满足一定条件后该功能就会被激活

19.2 BFC功能的效果

1. 开启BFC的元素，子元素不会发生margin塌陷问题（overflow: hidden）

2. 开启BFC的元素，自己不会被其他浮动元素所覆盖（z-index: +∞）

3. 开启BFC的元素，子元素浮动自身高度也不会塌陷（clearfix）

19.3 如何开启BFC

• 根元素
• 浮动元素
• 绝对定位、固定定位的元素
• 行内块元素
• 表格单元格
• overflow不为visible的块元素
• 伸缩项目，注意不是display: flex，该元素应该是flex的子元素
• column-count
• column-span为all的元素
• display为flow-root（生成一个块级元素盒）

标签：CSS3,flex,color,box,width,HTML,HTML5,background,属性
From： https://www.cnblogs.com/gin49sz/p/18133854