CSS学习笔记_在进行嵌套时,如果不继承原始合成项目的分辨率,那么在对被嵌套合成制作scale(缩放-CSDN博客

CSS

为了使HTML文档(网页)中，各个标签的属性不那么混乱，我们通常将渲染标签的属性加在CSS文件中

文章目录

插入样式表(CSS)

插入样式表有三种方法：

外部样式表
内部样式表
内联样式

外部样式表

外部样式表是我们最常用的插入方法，主要是创建一个CSS文件，然后将HTML文件与CSS文件链接，达到使用样式表的目的(下面用HTML5的基本格式举例HTML文件的链接)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--在head中，链接CSS样式表-->
    <link rel="stylesheet" type="text/css" href="CSS文件名.css">
    <title>test</title>
</head>
<body>
	<p>我是段落</p>
</body>
</html>

随后在CSS文件中写CSS：

p {
    color:blue;
}

得到网址结果：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

内部样式表

内部样式表写的比较方便，在HTML代码的head标签中，写入style标签，在style标签中写CSS代码，它是本笔记写CSS笔记的主要方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <!--style标签中写CSS代码-->
    <style>
        p {
            color:blue;
        }
    </style>
</head>
<body>
    <p>我是段落</p>
</body>
</html>

会得到和外部样式表一样的结果

内敛样式表

内敛样式表是在HTML标签中写CSS的相应属性，不太推荐使用，因为这样会使HTML代码变得更加复杂，且样式少

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
</head>
<body>
    <p color="blue">我是段落</p>
</body>
</html>

不会得到上面两个表的结果，不会变色，但是是因为p标签中没有color属性是去修饰文本的

选择器及基础语法

基础语法

基本格式：

选择器

标签选择器

标签选择器可以选择整个HTML文本的同一标签，修饰一类标签的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
	/*标签选择器，选择了p标签的样式*/
        p {
            color:blue;
        }
    </style>
</head>
<body>
    <p>我是段落</p>
</body>
</html>

类选择器

类选择器可以选择多个标签，去修饰多个标签的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
	/*类选择器，选择了p标签的样式*/
        .p-class {
            color:blue;
        }
    </style>
</head>
<body>
    <p class="p-class">我是段落</p>
</body>
</html>

id选择器

id选择器和类选择器唯一的不同是，id是整个HTML文本唯一的，而class不是

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
	/*id选择器，选择了p标签的样式*/
        #p-id {
            color:blue;
        }
    </style>
</head>
<body>
    <p id="p-id">我是段落</p>
</body>
</html>

通配符选择器*

通配符选择器*，一般用来初始化清除标签样式，会选择全部的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
	/*通配符选择器，选择全部的标签*/
        * {
            color:blue;
        }
    </style>
</head>
<body>
    <p id="p-id">我是段落</p>
</body>
</html>

伪类选择器：

伪类选择器用于向某些选择器添加特殊效果，例如选择某选择器的第n个元素

链接伪类选择器

链接伪类选择器用来选择链接，当链接状态为伪类选择器的修饰状态时，应用伪类选择器的样式

:link 未访问的链接
:visited 已访问的链接
:hover 鼠标移动到链接上
:active 鼠标长按的链接

<!--链接伪类选择器例子-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
       a:link {
           color:red;
       }
       a:visited {
            color:blue
       }
       a:hover {
           color:green;
       }
    </style>
</head>
<body>
    <div><a href="#">我本来是红色，鼠标覆盖我变绿色，点完我变蓝色</a></div>
</body>
</html>

得到结果：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

结构(位置)伪类选择器

用于选取第n个元素，或多个元素

:first-child 选取属于其父类元素的首个子元素的指定选择器
:last-child 选取属于其父类元素的最后一个子元素的指定选择器
:nth-child(n) 选取属于父类元素的第n个子元素，无论元素的类型(n从0开始，odd为偶数，even为奇数)
:nth-last-child(n) 选取属于父类元素的倒数第n个子元素，无论元素类型

其中n，可以是数字，可以是关键词，又或者是公式(例如:2n表示选取偶数，2n+1表示选取1，3，5，…)

结构伪类选择器是CSS3的内容，注意兼容性问题

<!--结构伪类选择器例子,选择列表中的偶数孩子-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
       li:nth-child(2n) {
           color:red;
       }
    </style>
</head>
<body>
    <ul>
        <li>第1个孩子</li>
        <li>第2个孩子</li>
        <li>第3个孩子</li>
        <li>第4个孩子</li>
        <li>第5个孩子</li>
        <li>第6个孩子</li>
        <li>第7个孩子</li>
    </ul>
</body>
</html>

得到结果：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

目标伪类选择器:target

:target为目标伪类选择器，用于选取页面当前活动的目标元素

<!--目标伪类选择器例子-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
       :target {
           color:red;
       }
    </style>
</head>
<body>
    <a href="#a锚点">跳到a锚点</a>
    <p id="a锚点">锚点</p>
</body>
</html>

得到结果：

复合选择器

复合选择器是由两个或多个基础选择器的选择器，目的为了可以选择更准确且精细的目标元素标签

交集选择器

交集选择器选择两个选择器同时选中的目标(注意：不要有空格)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
       .red {
           color:red;
       }
       /* 交集选择器，只选中2，不选中1 */
       p.red {
           font-size: 30px;/*变大*/
       }
    </style>
</head>
<body>
    <div class="red">1</div>
    <p class="red">2</p>
</body>
</html>

得到结果：

并集选择器

并集选择器选择各个选择器中的所有对象(注意：用逗号隔开)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
        /* 并集选择器，选中全部目标 */
       .a , .b {
           color:red;
       }
    </style>
</head>
<body>
    <div class="a">1</div>
    <p class="b">2</p>
</body>
</html>

得到结果：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

后代选择器

后代选择器，又称包含选择器，用来选中元素或元素组的后代(当标签发生嵌套时，内层标签就称为外层标签后代)

注意：用空格隔开表示后代

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
        /* 后代选择器，代表选中d类标签下面的p标签 */
        .d p {
            color:red;
        }
    </style>
</head>
<body>
    <div class="d"><p>1</p></div>
    <p>2</p>
</body>
</html>

得到结果：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

子元素选择器

子元素选择器用来选取某标签的子标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
        /*子元素选择器*/
        .a > li {
            color:red;
        }
        
    </style>
</head>
<body>
    <ul class="a">
        <li>一级
            <ul>
                <li>二级</li>
                <li>二级</li>
                <li>二级</li>
            </ul> 
        </li>
         
    </ul>
</body>
</html>

得到结果：

属性选择器

属性选择器用来选择具有某个属性的标签

**选择器	**含义
E[attr]	选择存在attr属性的标签
E[attr=val]	选择存在attr属性且attr属性等于val的标签
E[attr*=val]	选择存在attr属性的标签且attr属性中存在val字符在任意位置的标签
E[attr^=val]	选择存在attr属性的标签且attr属性中存在val字符在开始位置的标签
E[attr$=val]	选择存在attr属性的标签且attr属性中存在val字符在结束位置的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
        /*属性选择器，使title末尾有bai的变黑，开头有baidu的变粉，是baidu的变红*/
         a[title$="bai"] {
            color:black;
        }
        a[title^="baidu"] {
            color:pink;
        }
        a[title="baidu"] {
            color:red;
        }
       
    </style>
</head>
<body>
    <a href="#" title="baidu">我是百度</a>
    <a href="#" title="xilang-bai">我是新浪</a>
    <a href="#" title="baidu-x">搜狐</a>
</body>
</html>

得到结果：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

伪元素选择器

::伪元素选择器用来选择标签的文本内容中复合要求的元素

E::first-letter 选择标签E文本的第一个单词或字(如：中文，日文，韩文等)
E::first-line 选择标签E文本的第一行
E::selection 选中用户选中的文本
E::before 在标签E 内部的开始位置插入一个元素
E::after 在标签E 内部的结束位置插入一个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
        p::first-letter { /*第一个字变色*/
            color:red;
        }
        p::selection {   /*用户选中文本变色*/
            color:pink;
        }
        div::before {
            content:"在";  /*content插入内容*/
        }
        div::after {
            content:"了";
        }
    </style>
</head>
<body>
    <p>HTML，全称“Hyper Text Markup Language（超文本标记语言）”，简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，
        是一门非常容易入门的语言。CSS，全称“（层叠样式表）”。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。</p>
    <div>我的前面插入"在"字，我的后面插入"了"字</div>    
</body>
</html>

得到结果：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

标签的显示模式

HTML的标签一般分为块标签和行内标签，也称块元素和行内元素

块级元素`<div>`

每个块级元素会独占一行或多行，可以对它设置宽度，高度，对齐等属性，常用来网页布局和网页结构的搭建

/*常见的块级元素:<h1>~<h6>，<p>，<div>，<ul>，<ol>，<li>等，其中<div>是最典型的块级元素*/

块级元素特点：

总从新的一行开始
高度，行高，外边距以及内边距都可以控制
宽度默认是容器的100%
可以容纳内联元素和其他块级元素

行内元素`<span>`

行内元素(内联元素)不占用独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑其结构，一般不可以设置宽度，高度，对齐等属性，常用来控制页面的文本样式

/*常见的行内元素:<a>，<strong>，<b>，<em>，<i>，<del>，<s>，<ins>，<u>，<span>等，其中<span>是最典型的行内元素*/

行内元素特点：

和相邻的行内元素在同一行上
高，宽无效，但水平方向的padding和margin是可以设置的，垂直方向的无效
默认宽度就是它本身容器的宽度
行内元素只能容纳文本或者其他行内元素(<a>特殊)

注意：

1.只有文字才能组成段落，所以p标签内不能放块级元素，同理还有<h1>~<h6>，它们都是文字类块元素，不能放其他块元素

2.链接中不能放链接

行内块元素`<img/><input/>`

在行内元素中，有几个特殊的标签，它们可以设置宽高和对齐属性，称它们为行内块元素

/*eg：<img/>，<input/>，<td>标签，都是行内块元素*/

行内块元素特点：

和相邻行内元素或者行内块元素在同一行上，但中间会有空白的缝隙
默认宽度就是它本身内容的宽度
高度，行高，外边距以及内边距都可以控制

显示模式之前的转换display

块转行内：display:inline

行内转块：display:block

块，行内元素转行内块元素：display:inline-block

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
        div {
            background-color: pink;
            display:inline;
        }
        a {
            height: 50px;
            width: 60px;
            background-color: skyblue;
            /* display:inline-block; a标签的高和宽本来是无效的！但更改了模式后有效了!*/
        } 
    </style>
</head>
<body>
    <div>123</div>
    <div>456</div>
    <div>789</div><br>
    <a href="#">a1</a>&nbsp;<a href="#">a2</a>   
</body>
</html>

得到结果：

CSS的三大特性

三大特性：层叠性，继承性，优先级

层叠性

层叠性指的是多种样式的叠加，当一个标签被多种样式修饰时，后面修饰的样式会覆盖前面的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
        div {
            background-color: pink;
            font-size: 50px;  /*这个样式不会被下面的修饰覆盖，因为下面的样式没有指定背景颜色 */
        }
        div {
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div>123</div>
</body>
</html>

得到结果：

继承性

继承性是指，子标签会继承父标签的某些样式，如文本色号和字号，即子承父业

注意：恰当使用继承性能减少CSS样式的复杂性，继承性体现的标签有：text-,font-,line-这些元素属性，及color属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
        div {
            background-color: skyblue;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div>123
        <p>456</p> <!--p没有指定样式，但继承了div的样式-->
    </div>
</body>
</html>

得到结果：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

优先级

优先级也是为了解决层叠性中的相关问题，在定义样式时，常出现两个或多个规则应用在同一元素上的情况

/*
优先级大小：
!importent样式 > 行内样式表 > id样式 > 类，属性，伪元素和伪类样式 > 标签样式 > 通用选择器样式 > 继承来的样式
注意：
优先级永远不会变！当两个样式在同一优先级时，用层叠性来应用样式
复合选择时，依然照这个标准选择
*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
        div {
            background-color: skyblue !important;
            font-size: 30px;
        }
        .a {
            background-color: black;
            font-size: 60px
        }
    </style>
</head>
<body>
    <div class="a" id="b">123</div>
</body>
</html>

得到结果：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

CSS中的两个轴

CSS中有两个方向对应两个轴，水平方向x轴，垂直方向y轴，可以为负

3D显示：平面是网页，其中z轴在3D变形中用到

CSS角度

字体样式属性font

font-family: "Microsoft YaHei",arial;
/*字体样式 可写多个 若机器没有第一个字体会用下一个 以此类推到默认字体*/
font-size: 30px; 
/* 字号大小，常用14px+ */
font-weight: normal;
/*字体粗细，属性值：normal=400正常，bold=700粗体，bolder，lighter，100-900(100的整数)*/
font-style: normal;
/*字体样式，属性值：normal，italic斜体，oblique倾斜体*/
/* 
字体简写：font: font-style font-weight font-size/line-height font-family;
注意：其中不需要的值可以省略(取默认值)，但font-size和font-family属性必须保留，否则font不起作用
*/
eg：font:30px normal normal arial;

文字样式属性text

 text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
/*文字阴影 text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;前两个必要，附：rgba()设置颜色，最后一个参数是透明度*/
text-overflow: clip;
/*
规定文本溢出包含元素作的处理，属性值：clip 修剪文本，ellipsis 显示省略号表示多余文本，string 用给定字符串表示多余文本
使用text-overflow:ellipsis时要注意一下两点： 
1.overflow: hidden; text-overflow:ellipsis; white-space:nowrap;
这三个一定要一起用，如果少了white-space:nowrap，文字会把撑高容器的高度，导致替换字符显示不出来；
如果少了overflow: hidden，文字会横向撑到容器的外面； 
2.一定要给容器定义宽度
*/
text-align: center;
/*文本水平对齐的方式，属性值：center中间，left左边，right右边，justif两端对齐，*/
text-decoration: solid;
/*文本修饰，属性值：none无，underline文本下一条线，overline文本上一条线，line-through穿过文本一条线，blink闪烁文本*/
text-indent:1px;
/*设置首行开头的缩进，向后多少，可为负值，2em为两个汉字的宽度*/

line-height:行间距

用于设置文本行间距，注意：当行间距等于盒子高度时，为居中对齐

latter-space:字间距

字和字之间的间距

object-fit:控制图片展示状态

object-fit一共有五个对应值，分别是：

fill: “填充”。默认值。使图片拉伸填满整个容器, 不保证保持原有的比例。
contain: “包含”。保持原有尺寸比例缩放。保证整个图片都可以出现在容器中。因此，此参数可能会在容器内留下空白。
cover: “覆盖”。保持原有尺寸比例缩放。宽度和高度至少有一个和容器一致（尺寸小的一致）。因此，此参数可能会让图片部分区域不可见。
none: “无”。保持原有尺寸比例。同时保持图片原始尺寸大小。多出的部分隐藏。
scale-down: “降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

world-space:单词间距

英文单词和单词之间的间距，中文无效

justify文本居中控制

justify-content:center;

justify 可以使文本的两端都对齐在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等，如下例：

opacity/transparent透明

/*
透明度：
opacity:透明度(0-1之间)
透明色：(boder-color属性也能用，用于画san'jiao'x)
color:transparent
*/

background背景设置

背景属性:

background-color: 背景颜色
background-image:url(‘图片地址’): 背景图像(图像会盖住颜色)
background-repeat: 背景是否重复平铺
background-attachment: 背景是否固定，或随页面滚动
background-position: 背景位置(精灵图的主要属性)
background-size: 背景大小，等比例缩放，用百分比

background-repeat:no-repeat;
/*设置背景图像不重复平铺*/
background-attachment:scroll;
/*
设置背景图片随页面滚动而滚动(默认)，属性值：fixed 设置背景固定，local 背景图片会随着元素内容的滚动而滚动
*/
background-position:right top;
/*
设置背景位置在右上方，right center left bottom，可以指定两个值
也可以设置background-position: 0% 0%;(默认0%)
两个参数分别为水平位置(↑↓)，垂直位置(←→)
*/
bckground:rgba(0,0,0,0.5);
/*背景透明 最后一个参数是透明度，0-1之间*/
background:linear-gradient(200deg,red,blue)
/*渐变背景 第一个参数是角度，也可以是'top right'等，第二个参数是渐变开始颜色，第三个参数是结束渐变颜色*/
background-size:50%;
/*
等比例缩放到图片的一半大小
属性值：
cover，自动调整缩放比例，保证图片始终占满盒子，多余部分会删除
contain，自动调整缩放比例，当图片有一个边碰到盒子边时，停止缩放，保证图片不会被切割
*/
/*
background的简写形式
background: 背景颜色 url('背景图片地址') 背景平铺 背景滚动 背景位置;
*/

盒子模型

所有的HTML元素都可以看成一个盒子：

不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

border边框

边框分为上边框，右边框，下边框，左边框

 border-style: solid;
/*设置边框类型，默认透明，soli为实线，double为两个边框，dashed虚线，dotted点线，inset为3D嵌入边框，outset为3D突出边框*/
border-width: 10px;
/*设置边框大小，就是边框宽度*/
border-color:black;
/*设置边框颜色*/
border-raduis: 1px 1px 1px 1px;
/*设置边框四个角(左上，右上，右下，坐下)的弧度(顺时针)*/
/* 
边框简写:border:border-width border-style border-color
border:10px solid red;
上边框top，下边框bottom，右边框right，左边框left对应样式设置(上边框为例子)
eg: border-top:1px; 
*/

margin外边距和padding内边距

外边距和内边距的属性几乎相同，我们放到一起来讲

它们都是用来控制距离的属性，可能的值有(以margin为例)：

/*margin可以自己设置距离，可以用百分比的形式，也可以自动*/
margin:1px;
margin:auto;/*padding的值不能为auto，但其他可以*/
margin:50%;
/*
当margin的宽为auto时，盒子会在网页的正中间，贼jb好用!
*/

各个方向名称(和border类似)：

它们的简写方式：

margin:1px 2px 3px 4px;
/*距离分别对应上边距，右边距，下边距，左边距，padding也是一样的*/

margin外边框的合并

两个盒子之间的外边框会合并在一起，两个盒子之间的距离是两个盒子中最大的外边框距离

如兄弟关系的元素：

如父子关系的元素：

会发现它们的外边框会合并在一起，这是一个特性，需要特别注意

解决方法：

/*为父级元素添加*/
overflow:hidden;

padding影响盒子大小问题

盒子大小=margin+border+padding+content

解决方案：

若添加padding会撑开盒子，若我们要保证盒子大小，应在盒子本来的大小上减去padding的大小，或者加入属性：

box-sizing:border-box;/*CSS3盒子模型 将pading和boder都包含到width中*/

盒子阴影box-shadow

box-shadow:1px 1px 1px 1px rgba(0,0,0,0.5) inset;
box-shandow:水平阴影 垂直阴影 模糊距离 阴影大小 阴影颜色 内/外阴影;
/*
其中，前两个是必写，其他可选写，默认outset(不可写)外阴影，写inset改为内阴影
*/

小tip

/*在写CSS时，我们首先用通配选择器对全部对象去除margin和padding，方便样式设置*/
* {
	margin:0;
	padding:0;
}
/*li标签常去除style的点*/
li {
    list-style:none;
}
/*HTML初始化时，可以只写!然后用tab键自动生成HTML5的基本格式*/
/*
tab可以自动生成多个标签
eg:
div*3 --生成--> <div></div><div></div><div></div>(3个div)
div>a --生成--> <div><a></a></div>
div*2+a --生成--> <div></div><div></div><div> <a></a>
*/

浮动

设置浮动float

因为行内块元素之间总有一个间隔，不好处理，所以我们不好用行内块元素来全局布局，引入浮动概念

浮动在页面布局中十分重要，设置浮动会使元素脱离标准普通流的控制，移动到指定的位置完成布局

/*
形式：float: 浮动类型;
浮动类型：left 左浮动，right 有浮动，none 不浮动
*/

浮动元素的盒子是漂浮的，漂浮在其他的标准流盒子上方，为了不让浮动影响布局

所以在使用浮动时，我们常 先使用一个标准流的块级父元素来包含浮动元素 ，目的为了占住元素的位置

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

元素添加浮动后，元素会具有行内块的特性，元素盒子大小取决于内容大小

清除浮动

由于浮动元素的盒子是没有高度和宽度的，而浮动元素的父级块元素也不好固定高度(因为不知道内容大小)，从而导致下面情况：

这里写图片描述

所以我们需要清除浮动在父级元素的末尾

清除方法：

clear清除法(额外添加法)

/*
`clear:清除类型;`
`清除类型：left 清除左浮动，right 清除右浮动，both 左右都清除(推荐)`
*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>
    <style>
        .box1{ /*父盒子*/
            width: 400px;
            background-color: red;
        }
        .box2 { /*父盒子下面的盒子*/
            height: 500px;
            width: 500px;
            background-color: pink;
        }
        .son1 { /*浮动元素1*/
            height: 50px;
            width: 50px;
            float: right;
            background-color: blue;
        }
        .son2 { /*浮动元素2*/
            height: 50px;
            width: 50px;
            float: left;
            background-color: blue;
        }
        .clearfix {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="son1"></div>
        <div class="son2"></div>
        <!--额外添加个dev清除浮动，就可以看到父盒子了-->
        <div class="clearfix"></div>
    </div>
    <div class="box2"></div>
</body>
</html>

缺点：破坏结构，创造了一个div只用来清除浮动

父级添加overflow法

.box1{ /*父盒子*/
	width: 400px;
	background-color: red;
	overflow: hidden;/*触发BFC 清除浮动 hidden/auto/scroll都可以*/
}

缺点：内容增多会被隐藏，无法显示溢出元素

after伪元素法

.clearfix::after {
	content:'.';/*after在末尾添加个.*/
	clear: both;/*清除浮动！*/
	display: block;/*块级元素代替div*/
	/*隐藏.*/
	height:0;
	visibility:hidden;
}
/*IE6-7不支持after，用这个来出发hasLayout*/
.clearfix {
    *zoom:1; /*IE6-7通过zoom清除浮动，*表示只有IE6-7才执行*/
}

随后在父标签中引用这个类就可以

before/after双伪元素清除

.clearfix::before,.clearfix::after {
    content:'.';
    display:table;/*触发BFC*/
}
.clearfix:after {
    clear:both;
}
.clearfix {
    *zoom:1;
}

定位position

定位也是一种排版方式，和浮动不同的是，定位在浮动之上

定位=边偏移+定位模式

边偏移

/*
形式：偏移方式:偏移量;
偏移方式：top 上偏移,bottom 下偏移，left 左偏移，right 右偏移
eg:top:100px;上偏移加100px，默认为0
*/

定位模式position

/*
形式：定位模式
定位模式：static 自动定位(默认，标准定位方式)，relation 相对定位，absolute 绝对定位，fixed 固定定位 
*/

static自动定位

static定位就是所有元素默认的定位方式，在静态定位下，无法通过边偏移来改变元素位置

relation相对定位

相对定位会 继续占用原来的位置，然后对盒子进行边偏移，移动的位置是相对自己原来的位置进行边偏移

absolute绝对定位

绝对定位 不会占用原来的位置，直接对盒子进行边偏移，移动的位置是相对自己有定位的父亲的位置进行边偏移

若该元素父亲没有定位，就找父亲的父亲，直到找到有定位的祖先(或者找到body标签，body标签默认有定位)

所以，我们一般基于需要绝对定位的元素的父亲一个相对定位，来确定一个稳定的定位对象(子绝父相！)

绝对定位盒子的水平/垂直居中：

普通盒子是左右改为auto就可以水平垂直居中，但对于绝对定位就无效了

步骤(以水平居中为例)：

首先左偏移50%: left:50%;
利用外边距偏移元素自己宽的-50%：margin-left:-50%(最好用px);

fixed固定定位

固定定位 不会占用原来的位置，直接对盒子进行边偏移，移动的位置是相对整个页面的位置进行边偏移

注意：固定定位时，页面滚动，盒子是不动的！固定在你看到的地方

伸缩弹性布局Flex布局

为了解决父盒子内若宽度固定，子元素填满父盒子后，再为子元素增加宽度的margin或者padding时，会有元素溢出父盒子，或者用户将浏览器放大缩小时，元素排列会混乱的问题，引入了Flex布局。

主轴：Flex容器的主轴主要用来配置Flex项目，默认水平

侧轴：与主轴垂直的方向称为幅轴，默认垂直

方向：默认主轴的从左到右方向为正方向，默认侧轴从上到下为正方向

附：主轴侧轴不是固定的，通过flex-direction可以互换

/*
.father {
	display: flex; 在父盒子中设置flex，使其子元素以伸缩的方式布局
}
.son1 {
	flex: 1; 在子元素中设置该元素的flex值，注意flex值不能带单位！
}
随后，浏览器会计算整个父盒子中所有元素的flex总和，用各个子元素的flex值占比来为每个子元素在父盒子中排版(按设置的主轴方向排版)
.son2 {
	flex: 2;
}
.son3 {
	flex:1;
}
*/

得到结果：

可以看出整个是父盒子，主轴是x轴方向，侧轴是y轴方向，且各个子元素按flex值占比排列，最大的优点是这个缩放比是一直保持的！

盒子不同flex值的不同结果：

容器(父盒子)属性

flex-direction 控制主轴的方向，默认为row
flex-wrap 定义一条轴线放不下如何换行，默认为nowrap
flex-flow flex-direction和flex-wrap的综合属性，用一个属性来设置主轴和换行方式
justify-content 定义项目在主轴上的对齐方式
align-items 定义项目在副轴上的对齐方式
align-content 定义多跟轴线的对齐方式，若只有一根轴线则不起作用

控制主轴方向direction

flex-direction: row | row-reverse | column | column-reverse;
/*
column：主轴为垂直方向，起点在上沿
column-reverse：主轴为垂直方向，起点在下沿
row（默认值）：主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端
*/

定义换行方式flex-wrap

flex-wrap: nowrap | wrap | wrap-reverse;
/*
nowrap（默认）：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方
*/

nowrap:

wrap:

wrap-reverse:

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

项目在主轴上的对齐方式justify-content

justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

项目在副轴上对齐方式align-items

align-items: flex-start | flex-end | center | baseline | stretch;

flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline: 项目的第一行文字的基线对齐
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

定义多跟轴线的对齐方式align-content

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

flex-start：与交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
center：与交叉轴的中点对齐
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch（默认值）：轴线占满整个交叉轴

项目属性

order 定义项目的排列顺序，默认为0(了解)
flex 定义flex值
align-self 定义单独对齐属性

定义排列顺序order

order: x; 
/*
设置项目的order值为x，整数，不带单位！
数值越小，排列越靠前
*/

定义项目占比和缩放flex

flex: flex-grow flex-shink flex-basis;
/*
flex是 flex-grow || flex-shink|| flex-basis 的简写，默认值为 0 1 auto
1.容器有多余空间时，项目的flex-grow值越大，占比越大，就是flex中的放大原理
2.容器空间不足时，项目flex-shrink值为0时不缩小，为1时会缩小
3.flex-basis控制项目在主轴的占比大小
*/

设置单独对齐方式align-self

align-self: auto | flex-start | flex-end | center | baseline | stretch;

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

grid布局

grid布局是目前CSS中较为强大的布局，他可以说是flex布局的升级版，但它是一个二维的基于网格的布局系统

grid的基本概念：

间距(gap)：有行间距和列间距
项目(item)：每一个单元格就是一个项目
内容(content)：父盒子包含的所有内容
区域(area)：可设置一个或多个单元格为一个区域，为区域赋予内容

每个项目之间都有隐形的网格线：

/*
添加grid布局的方法：为父盒子添加display:grid;
display: grid(块级网络)|inline-grid(行级网络);
grid和inline-grid的区别就是容器(父盒子)是决定块级元素还是行级元素
*/

容器(父盒子)属性

grid-template-columns/grid-template-rows设置网格列/行的大小，默认列，行等份分隔
grid-template-areas 设置网格区域，将整个网格划分为几个部分，可看做网格的可视化结构
grid-template 属性1，2的简写
grid-column-gap/grid-row-gap 设置网格列和行的间距
grid-gap 设置网格间距的简写:grid-gap: <row-gap> <column-gap>;
justify-items/align-items 设置各个项目行/列轴的对齐方式
place-items 设置项目对齐方式的简写:palce-items:<align-items><jusify-items>;
justify-content/align-content 设置网格在容器(父盒子)内的对齐方式
place-content 设置网格对齐方式的简写:place-content:<align-items><jusify-items>;
grid-auto-columns/grid-auto-rows 设置指定自动生成的网格轨道(又名隐式网格轨道)的大小
grid-auto-flow 设置自动放置网格项目的方式
grid 设置网格大小划分或自动划分简写方式

grid-template-columns/grid-template-rows属性

这两个属性用来设置网格样板(template)，默认auto等比分隔

/*
grid-template-columns: [网格线名] 网格列大小 [网格线名] 网格列大小 [网格线名] ... ;
grid-template-rows: [网格线名] 网格行大小 [网格线名] 网格行大小 [网格线名] ... ;
网格线名可以省略，网格大小之间仅有空格时，网格线会被自动分配数字名称(上图)
网格大小可以填：百分比，具体值，特殊单位fr(在剩余空间为fr对象分配对应空间)，auto(为百分比，fr对象和具体值分配完空间后，auto的对象等比分隔)
*/
.cotainer{
   grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
   grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

示意图

.container{
	grid-complate-columns: 1fr 1fr 1fr;
}/*每个网格项设置为网格容器宽度的三分之一*/

若定义中有重复的部分可以用repeat():

/*repeat(重复次数 重复线名 重复网格大小);*/
.container{
	grid-template-columns: [col-start] 20px [col-start] 20px [col-start] 20px;
}
/*可简写以上代码为如下代码*/
.container{
	grid-template-columns: repeat(3 [col-start] 20px);
}

grid-template-areas属性

设置网格样板的另一种方式，划分区域，属性值只有3个：

<grid-area-name>：由网格项grid-area指定的网格区域名称
.点号：代表一个空的网格单元
none：不定义网格区域

.container{
	grid-template-columns: 50px 50px 50px 50px;
	grid-template-rows: auto;
	grid-template-areas:
		"header header header header"
		"main main . sidebar"
		"footer footer footer footer";
}
/*
为区域填充内容的方法：在子元素的css样式中添加属性 grid-area：对应的区域名;
*/
.item-a{
	grid-area: header;
}

注意事项：

1.声明中的每一行都需要有相同数量的单元格，可以使用任意数量的.来声明单个空单元格

2.使用这个语法时，区域两端的网格线是自动命名的

比如，如果网格区域的名称是foo，那么区域的起始的行网格线和列网格线名称是 foo-start，并且区域终点的行网格线和列网格线名称是 foo-end。这意味着某些网格线可能有多个名称，如上面的例子中最左边的一条网格线有三个名字：header-start，main-start 和 footer-start

grid-column-gap/grid-row-gap属性

指定网格线的大小，可以想象为设置列/行之间的间距宽度

.container{
	grid-template-columns: 100px 50px 100px;
	grid-template-rows: 80px auto 80px;
	grid-column-gap: 10px;
	grid-rows-gap: 15px;
}

效果图（注意：只能在列/行之间创建缝隙，而不是在外部边缘创建）：

justify-items/align-items属性

沿着行(justify行排列)/列(align列排列)对齐网格内的内容，适用于容器内的所有的项目

justify-items/align-items: start | end | center | stretch;

start：项目内容与网格区域的左端/顶端对齐
end：项目内容与网格区域的右端/底部对齐
center：项目内容位于网格区域的中间/垂直中心位置
stretch(默认)：项目内容宽度/高度占据整个网格区域空间

示意图

justify-content/align-content属性

justify-content/align-content: start | end | center | stretch | space-around | space-between | space-ecenly;

start：网格与容器的左端/顶端对齐
end：网格与容器的右端/底部对齐
center：网格位于容器的中间/垂直中心位置
stretch(默认)：网格的宽度/高度占据整个容器
space-around：在 grid item 之间设置均等宽度/高度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半
space-between：在 grid item 之间设置均等宽度/高度空白间隙，其外边缘无间隙
space-evenly：在每个 grid item 之间设置均等宽度/高度的空白间隙，包括外边缘

grid-auto-columns/grid-auto-rows属性

隐式网格轨道在你显式的定位超出指定网格范围的行或列时被创建，可以是一个长度值、一个百分比值或一个自由空间的一部分（fr）

.container {/*创建一个2*2的网格*/
	grid-template-columns: 60px 60px;
	grid-template-rows: 90px 90px
}
.item-a{/*定义item-a区域的位置*/
	grid-column: 1 / 2;   /*从第一条列线到第二条列线的区域*/
	grid-row: 2 / 3;      /*从第二条横线到第三条横线的区域*/
}
.item-b{/*定义item-2区域的位置*/
	grid-column: 5 / 6;
	grid-row: 2 / 3;
}

我们只定义了2*2的网格，但区域给定时超出了网格范围，这时会生成隐式网格，其中有两条宽度为0的隐式网格用来填补间隙，而我们可以用 grid-auto-columns 和 grid-auto-rows属性来指定这些隐式轨道的宽度

.container{
	grid-auto-columns: 60px;
}

grid-auto-flow属性

如果有一些没有明确放置在网格上的项目(grid item)，自动放置算法会自动放置这些网格项，该属性则用于控制自动布局算法的工作方式，属性值有3个：

row（默认值）：告诉自动布局算法依次填充每行，根据需要添加新行
column：告诉自动布局算法依次填充每列，根据需要添加新列
dense：告诉自动布局算法，如果后面出现较小的 grid item，则尝试填充在网格中较早的空缺

注意：dense只会更改网格项的可视顺序，并可能导致它们出现乱序，这对可访问性不利

grid属性

在单个属性中设置所有以下属性的简写：grid-template-rows，grid-template-columns，grid-template-areas，grid-auto-rows，grid-auto-columns和grid-auto-flow（注意：只能在单个网格声明中指定显式或隐式网格属性）

属性值：

none：将所有子属性设置为其初始值
：显示网格属性
[ [ / ] ]：隐式网格属性

接受所有与grid-auto-flow，grid-auto-rows和grid-auto-columns相同的值。，如果省略grid-auto-columns，则将其设置为为grid-auto-rows指定的值，如果两者都被省略，则它们被设置为它们的初始值

/*无区域划分*/
.container {
	grid-template-rows: 1fr auto 1fr;
	grid-template-columns: 200px auto;
	grid-template-areas: none;
}
/*等价于↓*/
.container {/*  ↓行排列    ↓列排列    */
	grid: 1fr auto 1fr / 200px auto;  /* 先定义行后定义列 */
}

/*有区域划分*/
.container {
	grid-template-areas: 
		"header header header"
		"footer footer footer";
	grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
	grid-template-columns: auto 50px auto;    
}
/*等价于↓*/
.container {
	grid: /* 行线名 区域名 行大小 行线名 */
	[row1-start] "header header head-right" 1fr [row1-end]   /*先定义行后定义列*/
 	[row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto; /* 列线名 区域名 列大小 列线名 */
}
/*
下图由于没有指定区域，所以系统自动按每个网格放一个项目为我们放置
其中，蓝色和黑色占了header区域，粉色占了head-right区域，黄色绿色和白色占了footer区域
*/

项目(子盒子)属性

grid-column-start/grid-column-end/grid-row-start /grid-row-end 设置项目的起始和结束线，确定网格位置
grid-column/grid-row 属性1的简写形式grid-column/row:<start-line>/<end-line>
grid-area 设置项目在哪个区域，可作为属性1，2的简写形式
justify-self/align-self 设置项目内容的对齐方式
place-self 属性4的简写形式place-content: <align-self> <justify-self> | auto;

grid-column-start/grid-column-end/grid-row-start /grid-row-end属性

属性值有：

<line>：可以是一个数字来指代相应编号的网格线，也可以使用名称指代相应命名的网格线
span 跨越几条网格线：网格项将跨越指定数量的网格轨道(span是跨越的意思)
span 跨越到哪一条网格线停止跨越：网格项将跨越一些轨道，直到碰到指定命名的网格线
auto：自动布局，或者自动跨越，或者跨越一个默认的轨道

.item-b{
	grid-column-start: 1;
	grid-column-end: span col4-start;
	grid-row-start: 2;
	grid-row-end: span 2;
}

注意：

如果没有声明 grid-column-end / grid-row-end，默认情况下，该网格项将跨越1个轨道
网格项可以相互重叠，可以使用z-index来控制它们的堆叠顺序

grid-column/grid-row属性

属性值为<start-line> / <end-line>

.item-c{
grid-column: 3 / span 2;
grid-row: third-line / 4;
}

grid-area属性

属性值有：

<name>：对区域的命名
<row-start> / <column-start>/<row-end> / <column-end>：可以是数字，也可以是网格线的名字

.item-d{
	grid-area: 1 / col4-start / last-line / 6;
}

justify-self/align-self属性

沿着行/列轴对齐项目(grid item)里的内容，此属性对单个网格项内的内容生效，属性值：

start：将内容对齐到网格区域的左端/顶部
end：将内容对齐到网格区域的右端/底部
center：将内容对齐到网格区域的中间
stretch（默认值）：填充网格区域的宽度/高度

CSS过渡transition

在CSS3中使用transition可以实现补间动画(过渡效果)，只要元素有属性的变化，就可以添加transition过渡动画效果，通常在鼠标hover时使用。

/*
transition: 要过渡的属性 过渡花费时间 运动轨迹 何时开始;
若有多种属性可以逗号隔开，可以省略属性
*/

属性	描述
transition	简写属性，用于在一个属性中设置四种过渡属性
transition-property	规定应用过渡的属性的名称
transition-duration	规定过渡效果花费的时间，默认是0s，必须加单位s(秒)或者ms(毫秒)
transition-timing-function	规定过渡效果的时间运动曲线，默认"ease"
transition-delay	规定过渡效果的延时时间，默认是0

时间曲线：

2D变形transform

transform可以实现元素的位移，旋转，倾斜，缩放，甚至支持矩阵方式，配合过渡和动画

位移translate()

/*
transform: translate(x,y); 水平方向移动x个单位和垂直方向移动y个单位(x,y轴同时移动)
transform: translate(x); x轴移动x个单位
transform: translate(0,y); y轴移动y个单位
*/

缩放scale()

/*
transform: scale(x,y); 使元素水平方向缩放x个单位，垂直方向缩放y个单位
transform: scale(x); 使元素水平方向缩放x个单位
transform: scale(0,y); 使元素垂直方向缩放y个单位
*/

旋转rotate()

/*
transform: rotate(x deg); 使元素旋转x度
deg是单位：度数
*/

设置旋转中心点transform-origin

默认的旋转中心点在元素的正中间，但我们可以设置中心点，比如让元素以左上角为中心点旋转

/*
transform-origin: top left; 设置旋转中心点在左上角
transform-origin: 10px 10px; 也可以用具体的数值，来设置新的中心点在老的中心点的哪个方向
*/

倾斜skew()

/*
transform: skew(x deg,y deg); 设置水平方向倾斜x度，垂直方向倾斜y度
transform: skew(x deg); 设置水平方向倾斜x度
transform: skew(0 deg,y deg); 设置垂直方向倾斜y度
*/

多组变形

若有多组变形，用空格隔开！不要重复写transform

/*
transform: 变形属性1 变形属性2;
eg:
*/
transform: translate3d(10px,0,0) roateY(180deg);

3D变形transform

3D的变形也用到transform

绕轴旋转rotateX(),rotateY(),rotateZ()

绕轴旋转一般使用在图片的hover属性上

/*
transform: rotateX(x deg); 元素绕x轴旋转x度
transform: rotateY(y deg); 元素绕y轴旋转y度
transform: rotateZ(z deg); 元素绕z轴旋转z度
*/

透视perspective

透视属性主要用来展现元素绕轴旋转时的近大远小效果

/*
perspective: x px; 元素的透视效果 x越大近大远小越不明显，x越小效果越明显
*/

移动translateX(),translateY(),translateZ(),translate3d()

/*
transform: translateX(x); 元素靠x轴移动x个单位，相当于调整水平位置
transform: translateY(y); 元素靠y轴移动y个单位，相当于调整垂直位置
transform: translateZ(z); 元素靠z轴移动z个单位，大于0相当于放大，小于0相当于减小
transform: translate3d(x,y,z); 元素靠x轴移动x个单位，靠y轴移动y个单位，靠z轴移动z个单位
*/

动画animation

animation可通过控制多个结点来精确控制一个或一组动画，常用来实现动画效果

/*
animation:动画名称 动画时间 动画时间运动曲线 动画延时 播放次数 是否在下一个周期逆方向播放;
这几个值，除了动画名称，动画时间，延时有严格的顺序要求，必须按照动画名称，动画时间，延时的顺序，其他随意
*/

属性	描述
@keyframes	规定动画
animation	所有动画的简写属性，除了animation-play-state属性
animation-name	规定动画名称
animation-duration	规定动画一个周期的时间，默认0s，要带单位s(秒)或ms(毫秒)
animation-timing-fuction	规定动画的时间运动曲线，默认ease
animation-delay	规定动画何时开始(动画延时)，默认0
animation-itetation-count	规定动画的播放次数，默认1,无限循环播放:infinite
animation-direction	规定动画是否在下一个周期逆向播放，默认是normal正常方向，属性值还有：reverse 反方向，alternate 先正常方向再反方向，交替循环，alternate-reverse 先反方向后正方向，交替循环
animation-play-state	规定动画是否正在运行或暂停，默认是running，pause暂停动画
animation-fill-mode	规定动画时间之外的状态

/*
定义动画：
1.两结点的动画，from相当于0%，to相当于100%
@keyframes 动画名{
	from{
		动画起始状态
	}
	to{
		动画结束状态
	}
}
2.自定义的结点动画
@keyframes 动画名{
	0%{
		动画起始状态
	}
	25%{
		动画结束状态
	}
	30%{
		动画结束状态
	}
	100%{
		动画结束状态
	}
}
*/

gradients渐变

CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

线性渐变

background-image: linear-gradient(/*渐变方向或者角度*/,/*颜色1*/,/*颜色2*/,/*...*/);
/*
渐变方向默认从上到下
渐变方向：to right/bottom/top/left right/bottom/top/left(后一个可以省略)
渐变角度：x deg(x度)
*/

径向渐变

background-image: radial-gradient(/*渐变形状或大小*/,/*颜色1*/,/*颜色2*/,/*...*/);
/*
渐变形状：circle 圆，elipse 椭圆(默认)
大小：closest-side farthest-side closest-corner farthest-corner
*/