轻松学习HTML5和CSS3基础知识

web的组成

html:超文本标记语言
css:层叠样式表
Javascript：轻量级的脚本编程语言（行为和动态）

HTML的标签规则

关键字由尖括号包裹，
成对出现，又开始标签和结束标签（结束标签多了一个反斜杠）

<p>段落</p>

基本上都是双标签，但是有一类及特殊是单标签（空标签或自闭和标签）

<img src="" />
<meta />
<input type="text"  placeholder="用户名"/> 输入框
<input type="password"  placeholder="请输入密码"/>

快速生产html

新建一个xxx.html的文件
输入法为英文状态
在编辑区按！+enter

html的基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

标签的关系

包含（html包含head、body）
并列(head和body)

属性

代表一定的功能和特征，属性可以分为内置属性和自定义属性，注意：

一个标签可以多个属性
属性与属性之间要有空格
没有顺序

<img src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=300576690,152345561&fm=26&gp=0.jpg" alt="萌萌哒" title="哈哈哈哈" width="300" index="2">

a标签href的几个值

href="baidu.com "普通网址
href="#" 回到顶部
href=" " 重新加载空
href="javascript:; 禁止跳转
锚点跳转：点击某个链接文字，想要跳转到对应模块，给每一个模块用id起一个名字，a标签里面的href=" id="#xx""（别忘记加#）

字符实体

字符实体有字符编号和字符名称 ##新增的标签 ###1） iframe 内嵌网页

 <iframe src="1.html" frameborder="0" width="500" height="600"></iframe>

2）div

大盒子标签，用来划分区域的（块级）

3）span

小盒子标签，用来划分小区域的（行内）

4）格式化标签

标签自带一定样式
斜体：i 、em
加粗：b、strong
删除线：del、s
下划线：u、ins i、em都表示斜体，b、strong表象上都是加粗，但是从优化的程度上em和strong(语义化更强烈些)比i、b更重要

5）预格式化标签pre

会按照你编辑区写的格式显示

<pre>【】
        （） （）
    </pre>

6）音频标签audio

src: 资源路径
loop:循环播发
autoplay：自动播放

<!--     loop：循环播放
         controls：控制器 
         autoplay:自动播放 -->
<audio src="qt.mp3" controls loop></audio>

7） video视频

<video src="212.mp4" controls></video>

三大列表

无序列表：

ul、li，这个是固定格式，ul里面紧邻着的一定是li，不能是其它标签，但是可以在li里面继续嵌套其它标签。

<ul>
    <li>最新珠峰动态视频 ：珠峰十周年纪录片</li>
</ul>

有序列表：

ol 、li，这个是固定格式，ul里面紧邻着的一定是li，不能是其它标签，但是可以在li里面继续嵌套其它标签。

<ol>
<li>上班</li>
<li>吃饭</li>
<li>打豆豆</li>
</ol>

自定义列表

dl里面紧邻着的只能是dt或者dd，但是在dt或者是dd里面还可以写其它的标签

<h3>一日三餐</h3>
<dl>
<dt>早餐</dt>
<dd>豆浆</dd>
<dd>包子</dd>
<dt>午餐</dt>
<dd>盖饭</dd>
<dd>鸡蛋面</dd>
<dt>晚餐</dt>
<dd>小龙虾</dd>
<dd>饮料</dd>
</dl>

注意：三大列表都是固定格式，ul和ol紧邻li，如果有其他标签放到li中。dl紧邻dt和dd

css的几种引入方式

1)行内式

<div style="width: 100px;height: 100px;background: yellow;">box</div>

2)内嵌式

  <title>内嵌式</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div>box</div>
</body>

###3）外链式

  <title>外链式</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div>box</div>

4）导入式

 <style>
        @import url(index.css);
    </style>

标签的划分

块级元素
- 独占一行
- 设置宽高可以起作用
- 排列方式：上下排列
行内元素
- 共占一行
- 设置宽高不起作用
- 排列方式：左右排列
- 大小由内容决定
行内块
- 共占一行
- 排列方式：左右排列
- 设置宽高可以起作用

标签汇总

标题h1~h6
段落p
图片img
超链接a
格式化标签
- 加粗 b、strong
- 斜体i、em
- 删除del、s
- 下划线ins、u
音频 audio
视频 video
大盒子div
小盒子span
三大了表
- ul li
- ol li
- dl dt dd

标签的分类

块级元素
- h1~h6
- p
- div
- ul li
- ol li
- dl dt dd
行内元素
- a
- span
- b、strong
- i、em
- del、s
- ins、u
行内块
- img
- video
- audio

diaplay的几个值

display:block；转换为块级元素
display:inline-block;转换为行内块
display:inline;转换为行内元素
display:none;让元素消失

让元素消失的几种方式（面试题）

display:none
opacity:0(透明度为0)
visibility:hidden（可见性为隐藏）
定位的元素，通过改变z-index
通过margin为一个较大的负值，调到屏幕外侧

前三种的区别

display:none;是彻底消失
opacity:0(透明度为0)、 visibility:hidden（可见性为隐藏）虽然消失但是占了位置。

css的样式

清除页面中元素默认自带的margin值和padding值

是通配符选择器，代表选中页面中所有的元素，

*{
margin:0;
padding:0;
}

列表的前清除默认样式

ul,ol{
list-style: none;
}

清除a标签的下划线

a{
text-decoration:none;
}

给元素设置宽、高、背景颜色

<style>
div{
widtn:200px;
height:200px;
background-color:red;
}
</style>

文字缩进text-indent

text-indent后面可以跟具体的像素值，也可以跟em，如果是2em的时候代表缩进2个字的距离。

<style>
    p{
        /* text-indent: 10px; */
        text-indent:2em;        
    }
</style>

文字大小：font-size(默认16px)

p{
font-size:26px;
}

文字字体：font-family

如果是中文字体，或者是英文字体由多个单词组成需要加单引号或者双引号,有顺序的

font-family:"宋体","Times New Roman",Georgia,Serif;

文字的粗细

400 正常粗细===normal
700 ===bold
900 ===bolder 如果用了b、strong，我不想让文字加粗，font-weight：normal(400);

<style>
    p{
        font-weight: bold;
    }
    b{  
        /* 400 */
        font-weight: normal;
    }
</style>

控制文字倾斜font-style

font-style:italic; 让文字倾斜
font-style:normal; 让文字正常

让块级元素水平居中

div{
width:100px;
height:100px;
background:green;
margin:0 auto;
}

行高line-height

让文字垂直居中时，height=line-height

li{
height:35px;
line-height:35px;
}

边框：boder

dashed:虚线 solid:实线

<style>
  div{
      width:200px;
      height:200px;
      border:2px dashed darkturquoise; 
        }
</style>

选择器

通配符选择器

权重：0

*{
   margin:0;
   padding:0;
   }

标签选择器

权重：1

<style>
   div{
		backgroung-color:red;
      }
</style>

类选择器

权重:10 类名可以复用，用. 表示；

<style>
.main{
width:100px;
height:100px;
}
<style>
<div class="main"></div>

id选择器

权重：100 用#表示，一个html网页id名是唯一的，不可复用；

<style>
#main{
width:100px;
}
</style>
<div id="main"></div>

属性选择器

权重:10 用法： • [属性]{},把具有这个属性的所有标签选中 • [属性=“属性值”]，把不仅具有这个属性，而且必须是属性值也是规定的这一类标签选中选中所有具有index属性的一类元素

<style>
[index]{
        background-color: red; 
        }
/* 属性选择器:选中所有具有index属性的元素,并且属性值为a的一类元素
           权重为10
        */
[index="a"]{
         background-color: blue;
          }
 </style>      
<div index="a">box2</div>
<div index="b"> box3</div>

子代选择器

权重子：所选的选择器组合之和（连接符没有权重）连接符：>

<style>
      div>h1{
          background:green;
      }
</style>
<div class="main">
<p>p1</p>
<h1>h1</h1>
<div>
<span>span</span>
</div>
</div>

后代选择器

权重：组合的选择器权重之和连接符：空格

<style>
      div span{
          background:green;
      }
</style>
<div class="main">
<div>
<span>span</span>
</div>
<span>span</span>
</div>

分组选择器

权重：组合选择器之和连接符：逗号，

.box1>p1,.box2{
           color:darkorange;
           width:100px;
           height:100px;
           background:green;
}
<div class="box1">
<p>p1</p>
</div>
<p class="box2">box2</p>

交集选择器

权重：组合的选择器之和符号：没有意思：有多个选择器组成

<style>
    .box1.current{
        background:green;
    }
</style>
<div class="box1 current" >box1</div>最后浏览器选中显示的样式
<div class="box1">box1</div>
<p class="current">p1</p>

相邻兄弟选择器

权重：组合选择器之和连接符号：+ 代表的意思：以下面为例，h1+p 代表的是选中>与h1相邻的p标签

<style>
      h1+p{
          background:green;
      }
</style>
<p>p1</p>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<h1>h1</h1>
<div>div1</div>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>

相邻通用选择器

权重：组合选择器之和连接符号：~ 代表的意思：以下面为例，h1~p 代表的是选中h1下面所有的兄弟p标签

<style>
      h1~p{
          background:green;
      }
</style>
<p>p1</p>
<h1>h1</h1>
<p>p1</p>
<div>box1</div>
<p>p2</p>
<h1>h1</h1>
<div>div1</div>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>

伪类选择器

a标签的四种状态，它这四种状态有一定的顺序，在网络上被称为“爱恨原则”。重点记住：hover 即可，其它几个不兼容。

<style>
        a{
            font-weight: bold;
            font-size:100px;
        }
        /* 默认链接的文字颜色 */
       a:link{
           color:green;
       }
       /* 访问过后的文字颜色 */
       a:visited{
           color:gold;
       }
       /* 鼠标滑上 */
       a:hover{
           color:hotpink;
       }
       /* 点击链接时候的 */
       a:active{
           color:darkcyan;
       }
</style>

表格

<style>
        table{
            margin: 0 auto;
            text-align: center;
            /* 合并边框线 */
            border-collapse: collapse;
            /* 让每一列宽度均分 */
            table-layout: fixed;
        }
    </style>
<body>
    <!-- cellpadding:单元格内容与边框的距离
         cellspacing:单元格与单元格之间的距离 
    -->
    <table border="1" width="500" height="300"  >
         <!-- 表格的标题 -->
        <caption>成绩表</caption>
        <tr>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
        </tr>
        <!-- 
            td常用的属性：
             +跨行：rowspan
             +跨列: colspan
         -->
        <tr>
            <td colspan="2">100</td>
            <td>100</td>
        </tr>
        <tr>
            <td>100</td>
            <td>100</td>
            <td rowspan="2">100</td>
        </tr>
        <tr>
            <td>100</td>
            <td>100</td>
        </tr>
    </table>
</body>

路径

绝对路径

+ 就是你的主页上的文件或目录在硬盘上真正的路径，(URL和物理路径)例如：
	>• C:\xyz\test.txt 代表了test.txt文件的绝对路径。
	>• http://www.sun.com/index.htm也代表了一个URL绝对路径。

相对路径

+ 同级目录：直接写名字即可，
+ 下一级目录：找到同级文件，然后找下一级，"/" 表示，例如：img/1.pang
+ 上一级目录：用" ../ "

CSS的三大特性

继承性
层叠性
优先级

1) 继承性

具有继承性的属性

并不是所有的属性都可以继承, 以color/font-/text-/line-开头的属性、元素可见性：visibility 、以及普通文档流中的宽度是可继承的

2) 层叠性

层叠性就是CSS处理冲突的一种能力。通俗的说就是多种选择器选中了同一个元素，又对相同的属性设置了不同的属性值，这个时候就会发生层叠性。如何处理：

1、如果权重相同的话，就看css代码的顺序，后面的会把前面的属性覆盖 2、如果权重不相同的话，谁权重大就听谁的。

3)优先级

如果权重相同，看代码顺序，下面的会把上面覆盖
如果权重不同，按权重大的显示（行内的权重特别高）

3.1)权重顺序

！important>内联样式(行内式)>id>类>标签>通配符>继承>浏览器默认

表单（标签form）

表单常用元素

input
- type： text 文本输入框
- type：password 密码输入框
- type：reset 重置
- type：submit 提交
- type: button 按钮
- type：radio 单选
- type: checkbox 多选
- 属性：placeholder 提示文字
- 属性：autofocus 自动获取焦点
- 属性：required 校验（非空）
- 属性：checked （input的默认选中）
button:按钮(默认也有提交表单的功能，想要禁止，添加type=“button”这个属性便可以禁止)
textarea 文本域（评论框）
select:下拉框
- selected 默认选中某项
- disabled 禁止选中

<style>
input,textarea{
//  去除蓝色线
         outline: none;
// 禁止改变textarea的 尺寸
         resize: none;
}
</style>

<form action="">
<!-- 文本输入框 -->
<input type="text" placeholder="请输入用户名" autofocus required>
<!-- 密码输入框 -->
<input type="password" placeholder="请输入密码" required>
<!-- 提交 -->
<input type="submit">
<!-- 重置 -->
<input type="reset">
<!-- 按钮 -->
<input type="button" value="重置">
<!-- 单选 -->
<input type="radio">
<!-- 多选 -->
<input type="checkbox">
<!-- 按钮 -->
<button type="button">支付</button>
<!-- 文本域 -->
<textarea name="" id="" cols="30" rows="10"></textarea>
<select name="" id="">
<option value="">请选择你来自的城市</option>
<option value="">郑州</option>
<option value="" disabled>河北</option>
<option value="">湖北</option>
<option value="" selected>湖南</option>
</select>
</form>

单选

 <!-- 想要单选就要给一组单选元素设置相同的name值 -->
    <h2>请选择性别</h2>
    <input type="radio" name="sex" id="man">
    <label for="man">男</label>
    <input type="radio" name="sex" id="woman">
    <label for="woman">女</label>

多选

<h2>请选择兴趣爱好</h2>
    <form action="">
    <input type="checkbox" name="aihao" id="book" >
    <label for="book">看书</label>
    <input type="checkbox" name="aihao" id="music" >
    <label for="bmusic">音乐</label>
    <input type="checkbox" name="aihao" id="swim" >
    <label for="swim">游泳</label>
    <input type="checkbox" name="aihao" id="run" >
    <label for="run">跑步</label>  
    <!-- 重置（前提写在form里） -->
    <input type="reset" name="aihao"> 
</form>

盒子模型

盒子模型的组成

content 主要内容区
padding 内填充
border 边框
margin 元素与元素之间的距离

盒子大小的计算

盒子总高度=content的高度+上下padding+上下border
盒子总宽度=content的宽度+左右padding+左右border

盒子模型的分类

标准盒子模型：box-sizing：content-box
ie盒子模型： box-sizing：border-box

两者的区别？标准盒子模型的话，代码中设置的宽、高指的是content部分的宽和高 ie模型的话，代码中设置的宽、高指的是盒子的宽高；

padding的顺序规律（margin同理）

<style>
      span{
          background:green;
          /*  上、右、下、左 顺时针方向 */
          /* padding:10px 50px 100px 200px; */
          /* 上、左右、下 */
          /* padding:10px 50px 100px; */
          /* 上下、左右 */
          /* padding:10px 50px; */
          /* 四个方向 */
          padding:50px;
          display:inline-block;
          border:5px solid gold;
      }
</style>

面试题一

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .main{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* transparent透明色 */
            /* border: 1px solid transparent;
            box-sizing: border-box; */
            /* overflow: hidden; */
            padding: 30px;
            box-sizing: border-box;
        }
        /* 一个大盒子里面有一个小盒子，给小盒子设置一个margin-top,造成了大盒子跟着一起下掉，这种现象被称作"margin 穿透 "
        解决方法：1、给大盒子加padding；2、加一个边框border；3、溢出隐藏overflow：hidden；
         */
        .box{
            width: 100px;
            height: 100px;
            background-color: orange;
            /* margin-top: 30px; */
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="box"></div>
    </div>
</body>

面试题二

<style>
        *{
            margin: 0;
            padding: 0;
        }
        /* “margin在垂直方向合并”：两个兄弟元素，上下排列，box1 设置一个向下的margin-bottom: 50px，box2设置一个向上margin-top：100px;按理说，它们两个垂直方向上的距离150px,但是并非如此，它会按照最大的那个margin距离呈现（100px） */
        .box1,.box2{
            width: 100px;
            height: 100px;
            background-color: violet;
            margin-bottom: 100px;
        }
        .box2{
            background-color: yellowgreen;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</body>

缝隙的产生：换行符造成的（特殊文字）

解决方法： 1、消除换行 2、给父级元素设置font: size 0;

如果一个里面设置文字，另一个没有设置，默认是基线对齐，会产生下掉的情况。具体的办法，改变对齐的方式。

/* 顶线对齐 */
vertical-align: top;
/* 中线对齐 */
vertical-align: middle;
/* 底线对齐 */
vertical-align: bottom;
/* 默认基线对齐 */
vertical-align: baseline;

浮动

浮动的值

float:left; 左浮动
float:right;右浮动
float:none; (默认的，没有浮动)

浮动的特点

脱离正常文档流（不占位置）
左浮动，右浮动的方向针对的是父级
正常文档流中，宽度是可继承的，但是一旦浮动，宽度不能再继承父级的，而是由自身内容大小决定。
行内元素本来写宽、高是不起作用的，但是一旦设置浮动，设置宽、高也可以起作用。
浮动的本质：最初的时候是为了实现图文混排，场景：有一张图片，一些文字，如果给图片设置浮动，文字就会环绕图片进行排列。

面试题浮动造成的父级”盒子塌陷”问题如何解决

解决的3种方法

<style>
        /* 在普通文档流中，一个大盒子不设置高度，可以由内容撑开，但是小盒子设置了浮动，脱离文档流，造成大盒子高度塌陷   
            解决方法：
            1、给父级设置高度
            2、 overflow: hidden;溢出隐藏
            3、谁浮动，就给浮动元素的父级结构的末尾（里面）添加一个块级元素，并且给块级元素设置clear：both；*/
        .main{
            width: 500px;
            /* height: 100px;  解决方法一 */
            border: 1px solid blue;
            /* overflow: hidden; 解决方法二 */
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            float: left;
        }
        /* .last{
            clear: left;
            clear: right;
            /* 清除浮动造成的影响   解决方法三 
            clear: both;
        } */
    </style>
</head>
<body>
    <div class="main">
        <div class="box"></div>
        <!-- <div class="last"></div> -->
    </div>
</body>

解决方法四

在项目中，直接把下面的clearfix样式粘贴到你的css中，哪个元素浮动，就给赶紧给父级增加clearfix这个类名。（它的本质和第三种方法是一样的）

.clearfix:after{
content:"";
font-size:0;
display:block;
height:0;
visibility: hidden;
clear: both;
}
.clearfix{
*zoom:1;
}

面试题写一个三角形

<style>
    *{
        margin:0;padding:0;
    }
    .box{
        border:50px solid darkcyan;
        border-color: transparent   transparent lightblue transparent;
        width:0;
    }
</style>
<div class="box"></div>

overflow 常用的几个值

overflow:hidden；超出隐藏
overflow：auto；根据情况，自动添加滚动条
overflow:scroll; 添加滚动条（不管你内容是否超出）

<style>
    .box{
        width:200px;
        height:200px;
        border:1px solid red;
        /* 超出隐藏 */
        /* overflow:hidden; */
        /* 根据你内容大小来自动添加滚动条，如果宽度大于你设置的盒子的宽，x轴方向自动添加滚动条，如果是高度亦如此（y轴添加滚动条） */
        /* overflow:auto; */
        /* 不管你内容是否超出盒子的大小都会增加一个滚动条 */
        overflow:scroll;
    }
</style>

使用语法

• background-color 背景颜色 • background-image:url(“图片的路径”)

background-position：水平垂直;(背景图片的位置)
- 英文：水平方向：left、center、right；垂直方向：top、center、bottom
- 具体的像素值例如：background-position:50px 50px;
- 还可以是百分比
background-repeat:(控制图片是否平铺，以及平铺的方向)
- no-repeat：不平铺
- repeat-x ：水平方向平铺
- repeat-y:垂直方向平铺
background-attachment:设置背景图像是否固定或者随着页面的其余部分滚动。
- fixed
- scroll （默认）
background-size:x y；（控制背景图片的大小，x代表的背景图片的宽，y代表的是背景图片高）
- 可以是具体的像素值，例如：background-size:100px 100px;
- 还可以是百分比，例如：background-size:100% 100%;
- cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。有可能造成背景图像的某些部分也许无法显示在背景定位区域中。
- contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。（背景图片放大的时候，只要宽度或者高度，一边铺满了容器，就停止放大。）

css3选择器

nth-child

nth-of-type

nth-child 这个代表的是选中所有儿子元素中的第几个；nth-of-type 是选中儿子元素中特定类型中的第几个

定位position

static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位

相对定位

没有脱离文档流，位置还在
层级高于普通文档流
给绝对定位的元素做参照物
相对自身

绝对定位

脱离文档流
层级高于普通文档流的层级
绝对定位的元素在设置参照物的时候，必须是包含关系的上级元素
浏览器在寻找参照物的时候是按照就近原则进行查找，如果都没有设置，那它的参照物就是body
原本宽度可以继承，但是定位的元素，宽度不再继承了，是由自身内容决定的。如果是行内元素，定位之后，宽、高也可以起作用。
如果给绝对定位元素的宽度设置百分比的时候，那它是相对你参照物来说的，并不是父级。绝对定位的参照物：position：relative或者position:absolute、position:fixed ,只要是三者之一即可。

固定定位

固定定位是相对于整个窗口的。

精灵图

把多张图片合并成一张，这样的图片就叫做“精灵图”或者是“雪碧图”。作用：正常的，有几张图片，网页在加载的时候，就得发送多少次http请求，但是如果做成精灵图，就能减少请求的次数，优化了加载速度。注意：但是并非所有的图都适合做精灵图，一般只用小图。规律：凡是精灵图，在写位置（background-position）的时候，这个值一定都是负的。

变成圆

.box{ width:300px; height:300px; background:gold; border-radius: 50%; }

transform常用的几个值

1、位移：translate

水平位移：transform：translateX(100px);
垂直位移：transform:translateY(100px);
复合位移：transform：translate(100px,200px);

2、scale 缩放

transform:scale(x,y),x代表的是缩放宽度的x倍，y代表的是缩放高度的y倍
transform:scale(n);代表的同时缩放宽度和高度的n倍

3、rotate:代表旋转多少度，可以是负值,单位是deg

transform:rotateX(45deg);代表的是围绕着x轴旋转45deg;
transform:rotateY(45deg)；代表的是围绕着y轴进行旋转45deg;
transform:rotateZ(45deg);代表围绕着z轴进行旋转45deg；

4、skew:倾斜

 transform：skewX（45deg）沿着X轴倾斜
 transform：skewY（45deg）；沿着y轴倾斜
 transform：skew（10deg，15deg），沿着x轴和y轴倾斜转换

5、transform-origin：x,y; 改变元素变形时候的作用原点。

水平方向：left、 center、 right；
垂直方向：top、center、bottom；

6、transform-style:

flat 默认值（平面的）;
preserve-3d;代表的是三维空间，立体的；

7、perspective 给父级元素增加这个属性，它的子元素会有近大远小的效果。代表观察者距离舞蹈的距离，通俗可以理解为照相机的景深。例如：perspective:1000px; 它下面的元素会有一个透视的效果。

过渡动画

transition

动画的属性： transition-property:height;

动画执行的时间： transition-duration: 2s;

运动曲线： transition-timing-function: linear;

延迟： transition-delay: 1s;

简写：transition:all 2s linear 1s;

animation

animation-name 指定要绑定到选择器的关键帧的名称
animation-duration 动画指定需要多少秒或毫秒完成
animation-timing-function 设置动画将如何完成一个周期
animation-delay 设置动画在启动前的延迟间隔。
动画执行的次数：animation-iteration-count ，可以是具体的数字，比如3代表就是执行3次；还可以设置成无限循环 infinite;
设置动画的状态：animation-fill-mode；
forwards:当动画结束，停留在最后一帧
backwards:在动画中有延迟的时候，设置backwards，会迅速的跑到第一桢开始执行动画
both:当设置的有延迟的时候，动画迅速以第一桢开始，当动画结束的时候，停留在最后一帧。

flex布局

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。flex 布局有两个值：

display:flex; 代表的是块级
display:inline-flex; 代表的是行内块

flex 布局的基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

5、容器的属性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

5.1 flex-direction属性: 设置主轴的方向

row：主轴的方向是水平，从从左到右
column：主轴的方向是垂直的，从上到下
row-reverse：主轴的方向是水平，从右到左
column-reverse：主轴的方向是垂直的，从下到上

5.2 flex-wrap:

wrap: 换行
nowrap: 不换行（默认）
wrap-reverse：换行，不过第一行在最下面

5.3 flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

5.4 justify-content属性定义了项目在主轴上的对齐方式。

5.5 align-items属性：align-items属性定义项目在交叉轴上如何对齐。

align-items: flex-start | flex-end | center | baseline | stretch; stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

5.6 align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。（也就是说得有项目换行）

.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }

六、项目的属性

以下6个属性设置在项目上。

order

flex-grow

flex-shrink

flex-basis

flex

align-self