1. HTML5

meta标签

 <meta name="keywords" content="HTML5,前端,CSS3">
 <meta name="description" content="这是一个非常不错的网站">

语义化标签

<!-- 
  标题标签:
 <h1>一级标题</h1>
 <h2>二级标题</h2>
 <h3>三级标题</h3>
 <h4>四级标题</h4>
 <h5>五级标题</h5>
 <h6>六级标题</h6>
 -->
<!-- 
    块元素（block element）
        - 在网页中一般通过块元素来对页面进行布局
    行内元素（inline element）
        - 行内元素主要用来包裹文字 <p></p>
 -->
 <!-- 
    布局标签（结构化语义标签）：

    header 表示网页的头部
    main 表示网页的主体部分(一个页面中只会有一个main)
    footer 表示网页的底部
    nav 表示网页中的导航
    aside 和主体相关的其他内容（侧边栏）
    article 表示一个独立的文章
    section 表示一个独立的区块，上边的标签都不能表示时使用section

    div 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素
    span 行内元素，没有任何的语义，一般用于在网页中选中文字

  -->

三种html列表

    1、有序列表 
    2、无序列表
    3、定义列表

 <ul>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ul>

    <ol>
        <li>结构</li>
        <li>表现</li>
        <li>行为</li>
    </ol>

    <dl>
        <dt>结构</dt>
        <dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
    </dl>

超链接、图片、内联框架、音视频

     <a href="https://www.baidu.com">超链接</a>
     <img src="./img/1.gif" alt="松鼠">
    <iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>
<!-- 除了通过src来指定外部文件的路径以外，还可以通过source来指定文件的路径 -->
    <audio controls>
        <!-- 对不起，您的浏览器不支持播放音频！请升级浏览器！ -->
        <source src="./source/audio.mp3">
        <source src="./source/audio.ogg">
        <embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
    </audio>

实体（转义字符）

    &nbsp；   空格
    &gt ；  >
    &lt ；  <
    &copy ；  版权符号

2. CSS3

1 CSS3新增属性：

border-radius(圆角边框)

box-shadow(阴影效果) :用来设置元素的阴影效果，阴影不会影响页面布局

opacity(不透明度)

比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

display: none (不占空间，不能点击)（场景，显示出原来这里不存在的结构）
visibility: hidden（占据空间，不能点击）（场景：显示不会导致页面结构发生变动，不会撑开）
opacity: 0（占据空间，可以点击）（场景：可以跟 transition 搭配）

box-sizing(控制盒模型的组成模式):border-box、content-box

盒模型

CSS将页面中的所有元素都设置为了一个矩形的盒子

一个盒子包括：

内容区（content）
内边距（padding）
边框（border）
外边距（margin）

box-sizing

默认情况下 ，即box-sizing: border-box;，在怪异模式下的盒模型下`：

怪异盒总宽度 =width + margin

怪异盒内容区 width = padding + border + content;

在标准模式下的盒模型：box-sizing: content-box;:

盒子总宽度=width+padding+border+margin

border : border-style border-width border-color
如果给元素设置背景，背景（盒子的可见框）的区域是：内容，内边距和边框。

内边距（padding）：

内边距的设置会影响到盒子的大小
背景颜色会延伸到内边距上

4.外边距（margin），会影响盒子的位置

  margin也可以设置负值，会向相反的方向移动

  元素在页面中是按照自左向右的顺序排列的，  所以默认情况下如果我们设置的左和上外边距则会移动元素自身 而设置下和右外边距会移动其他元素

5 元素的水平方向的布局：

一个元素在其父元素中，水平布局必须要满足以下的等式

margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度

- 调整的情况：

如果这七个值中没有为 auto 的情况，则浏览器会自动调整margin-right值以使等式满足
如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0
如果将三个值都设置为auto，则外边距都是0，宽度最大
如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值

所以我们经常利用这个特点来使一个元素在其父元素中水平居中


width:xxxpx;

margin:0 auto;

overflow（元素的垂直方向的布局）

元素的垂直方向的布局：默认情况下父元素的高度被内容撑开，如果子元素的大小超过了父元素，则子元素会从父元素中溢出

使用 overflow 属性来设置父元素如何处理溢出的子元素。可选值：

垂直外边距的重叠（折叠）

相邻的垂直方向外边距会发生重叠现象
兄弟元素:
- 兄弟元素间的相邻垂直外边距会取两者之间的较大值（两者都是正值）
- 兄弟元素之间的外边距的重叠，对于开发是有利的，所以我们不需要进行处理
特殊情况：
- 如果相邻的外边距一正一负，则取两者的和
- 如果相邻的外边距都是负值，则取两者中绝对值较大的
父子元素
- 父子元素间相邻外边距，子元素的会传递给父元素（上外边距）
- 父子外边距的折叠会影响到页面的布局，必须要进行处理

行内元素的盒模型：

- 行内元素不支持设置宽度和高度

行内元素可以设置padding，border，margin，但是垂直方向padding，border，margin，不会影响页面的布局

background(为一个元素指定多个背景)

background-origin(指定背景图片从哪里开始显示)

background-clip(指定背景图片从什么位置开始裁切)

border-colors(为边框设置多种颜色)

boder-image(图片边框)

text-shadow(文本阴影)

text-overflow(文本截断)

boxes接壤

resize(元素缩放):指定一个div元素，允许用户调整大小

outline(外边框)

2 改样式（3种方法）：

1.内联样式（ 注意：开发时绝对不要使用内联样式）

 <p style="color:red; font-size: 60px;">少小离家老大回，乡音无改鬓毛衰</p>

2.内部样式表

<style>
    p{
      color: blue;
      font-size: 20px;
    }
  </style>
  <body>
  <p> 会当临绝顶，一览众山小</p>
</body>

3.外部样式表（最佳实践）

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

2 选择器

选择器的权重

         内联样式        1,0,0,0  
         id选择器        0,1,0,0  |#id名{}
         类和伪类选择器   0,0,1,0   |.class{}
         元素选择器       0,0,0,1  | p{} h1{}
         通配选择器       0,0,0,0  |*{}
         继承的样式       没有优先级

可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先级，甚至超过内联样式，注意：在开发中这个玩意一定要慎用！

class 是一个标签的属性，它和id类似，不同的是class可以重复使用

复合选择器

  交集选择器：选择器1选择器2选择器3选择器n{} #b1.p1h1.red{}
  并集选择器：选择器1,选择器2,选择器3,选择器n{} #b1,.p1,h1,span,div.red{}

关系选择器

  子元素选择器 ：父元素 > 子元素{}
  后代元素选择器：祖先 后代{}
  选择下一个兄弟：前一个 + 下一个{}
  选择下边所有的兄弟：兄 ~ 弟{}

伪类选择器 a伪类

:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child() 选中第n个子元素
:nth-child(even){} 选中偶数子元素
:nth-child(odd){}选中奇数子元素
:not() 否定伪类

a:link{} 
a:visited{} 
a:hover{}
a:active{} 点击

伪元素，表示页面中一些特殊的并不真实的存在的元素（特殊的位置）

伪元素使用 ::before 元素的开始 ::after 元素的最后
- before 和 after 必须结合content属性来使用

        div::before{
            content: 'abc';
            color: red;
        }

3 float 浮动

通过浮动可以使一个元素向其父元素的左侧或右侧移动。

float 属性可选值：

                            none

                            left

                            right

浮动的特点：

1、浮动元素会完全脱离文档流，不再占据文档流中的位置
2、设置浮动以后元素会向父元素的左侧或右侧移动，不会从父元素中移出，不会超过它前边的其他浮动元素
1. 浮动元素不会盖住文字，有文字环绕图片的效果

3 脱离文档流的特点：

块元素：

  1、块元素不在独占页面的一行

  2、脱离文档流以后，块元素的宽度和高度默认都被内容撑开

行内元素：

  1 行内元素脱离文档流以后会变成块元素，特点和块元素一样
  
  2 脱离文档流以后，不需要再区分块和行内了

BFC /高度塌陷

在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失。

父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱，所以高度塌陷

BFC(Block Formatting Context) 块级格式化环境

开启BFC该元素会变成一个独立的布局区域

为元素设置 overflow:hidden 开启其BFC 以使其可以包含浮动元素

clear clear: both;

作用：清除浮动元素对当前元素所产生的影响

原理：设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响

                    - 可选值：

                        left 清除左侧浮动元素对当前元素的影响

                        right 清除右侧浮动元素对当前元素的影响

                        both 清除两侧中最大影响的那侧

cleanfix 高度塌陷解决方案：

clearfix 这个样式可以同时解决高度塌陷和外边距重叠的问题，当你在遇到这些问题时，直接使用clearfix这个类即可

.clearfix::before,

.clearfix::after{

            content: '';

            display: table;

            clear: both;

        }

左侧固定右侧自适应 :BFC规则

<body>
<div class="warp">
  <div class="all_left">固定区域</div>
  <div class="all_right">自适应区域</div>
</div>
</body>

方法1.首先举例一种最简单的方法，利用浮动（或者绝对定位）的元素脱离文档属性，加上margin外边距方法实现左右并排列

 .left{
  float: left;
  width: 200px;
  height: 100px;
  background-color: #bbffaa;
}
.right {
  height: 100px;
  margin-left: 200px;
  background-color: paleturquoise;
}

方法2：使用float+块状元素的BFC特性

 .left{
  float: left;
  width: 200px;
  height: 100px;
  background-color: #bbffaa;
}
.right {
  height: 100px;
  overflow: hidden;
  background-color: paleturquoise;
}
/*清除浮动*/
.wrap:after{
  content: "";
  height: 0;
  line-height: 0;
  display: block;
  visibility: hidden;
  clear: both;
}

方法3：flex布局 flex-grow flex-shrink flex-basis;

flex-grow 属性用于设置或检索弹性盒子的扩展比率。属性值number 一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。

flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

flex-basis 属性用于设置或检索弹性盒伸缩基准值。属性值number 一个长度单位或者一个百分比，规定灵活项目的初始长度。

.wrap{
  display: flex;
}
 .left{
  width: 200px;
  height: 100px;
  background-color: #bbffaa;
}
.right {
  flex-grow: 1;
  background-color: pink;
}
```      

```js

4 flex

弹性盒

- 是CSS中的又一种布局手段，它主要用来代替浮动来完成页面的布局

- flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变

弹性容器

要使用弹性盒，必须先将一个元素设置为弹性容器，- 我们通过 display 来设置弹性容器

                    display:flex  设置为块级弹性容器

                    display:inline-flex 设置为行内的弹性容器

justify-content: 元素在主轴上如何对齐

align-items: 元素在辅轴上如何对齐

 display:flex
 
justify-content: center;
align-items: center;

flex和box的区别

display：box 是老规范，要兼顾古董机子就加上它；
- 父级元素有display:box属性之后他的子元素里面加上box-flex属性。可以让子元素按照父元素的宽度进行一定比例的分占空间。
flex是最新的；
- 父元素设置display:flex后，子元素宽度会随父元素宽度的改变而改变，而display:box不会。
Android UC浏览器只支持display: box语法；而iOS UC浏览器则支持两种方式。

5 定位（position）

                        可选值：

                            static 默认值，元素是静止的没有开启定位

                            relative :参照于元素在**文档流**中的位置

                            absolute :相对于**其包含块**进行定位的

                            fixed :参照于**浏览器的视口**进行定位

                            sticky :元素**到达某个位置**时将其固定

- 固定定位：position: fixed;

- 固定定位也是一种**绝对定位**，所以固定定位的大部分特点都和绝对定位一样，   
- 唯一不同的是固定定位永远参照于**浏览器的视口**进行定位
- 固定定位的元素不会随网页的滚动条滚动

粘滞定位：position: sticky;
- 粘滞定位和相对定位的特点基本一，不同的是粘滞定位可以在元素到达某个位置时将其固定
相对定位：position: relative;

相对定位的特点：

                            1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化

                            2.相对定位是参照于元素在文档流中的位置进行定位的

                            3.相对定位会提升元素的层级

                            4.相对定位不会使元素脱离文档流

                            5.相对定位不会改变元素的性质块还是块，行内还是行内

绝对定位 position: absolute;

- 绝对定位的特点：

                    1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化

                    2.开启绝对定位后，元素会从文档流中脱离

                    3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开

                    4.绝对定位会使元素提升一个层级

                    5.绝对定位元素是**相对于其包含块进行定位的**

绝对定位布局
- 水平布局：布局等式就需要添加left 和 right 两个值。 left + margin-left/right + border-left/right + padding-left/right + width + right = 包含块的内容区的宽度
- 垂直方向布局的等式的也必须要满足 top+ margin-top/bottom + padding-top/bottom + border-top/bottom + height +bottom= 包含块的高度
```
当发生过度约束：如果9个值中没有 auto 则自动调整right值以使等式满足；如果有auto，则自动调整auto的值以使等式满足

可设置auto的值：margin width left right

因为left 和 right的值默认是auto，所以如果不指定left和right； 则等式不满足时，会自动调整这两个值
```

元素的层级

对于开启了定位元素，可以通过z-index属性来指定元素的层级。z-index需要一个整数作为参数，值越大元素的层级越高；元素的层级越高越优先显示

                    如果元素的层级一样，则优先显示靠下的元素

                    祖先的元素的层级再高也不会盖住后代元素

包含块( containing block )

- 正常情况下：  包含块就是离当前元素最近的祖先块元素

- 绝对定位的包含块:  包含块就是离它最近的开启了定位的祖先元素， 如果所有的祖先元素都没有开启定位则根元素就是它的包含块

- html（根元素、初始包含块）

 left: 100px;

 top: -200px;

偏移量（offset）

当元素开启了定位以后，可以通过偏移量来设置元素的位置

  top - 定位元素和定位位置上边的距离

   bottom - 定位元素和定位位置下边的距离

  - 定位元素垂直方向的位置由top和bottom两个属性来控制；通常情况下我们只会使用其中一


  left - 定位元素和定位位置的左侧距离

  right - 定位元素和定位位置的右侧距离

  - 定位元素水平方向的位置由left和right两个属性控制， 通常情况下只会使用一个。

6 垂直居中、水平居中、垂直水平居中

1 行内元素居中方案

<div class="box1">
  <span class="box2">content</span>
</div>

水平居中设置：

第一种方法：外盒加 text-align:center；

.box1{
  background-color: red;
  text-align:center
}

第二种方法：外盒加 display:flex; justify-content: center;

.box1{
  display: flex;
  justify-content: center;
}

第三种方法：外盒加 width: fit-content ； margin: auto;

.box1{
  width: fit-content;
  margin: auto;
}

.box2{
  background-color: white;
}

垂直居中设置：

父元素高度确定的单行文本（内联元素）设置：height = line-height；

父元素高度确定的多行文本（内联元素）：

· 插入 table （插入方法和水平居中一样），然后设置 vertical-align:middle；

· 先设置 display:table-cell 再设置 vertical-align:middle；

2 块级元素居中方案：

<div class="box1">
  <div class="box2" >content</div>
</div>

水平居中设置：
- 定宽块状元素设置左右 margin 值为 auto；
```
  .box1{
    background-color: burlywood;
  }
  .box2{
    width: 100px;
    margin: 0 auto;/*margin 左右自适应*/
    background-color: yellow;
  }
```
- 不定宽块状元素 :
  
  ·在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为 auto；
  
  ·给该元素设置 display:inline 方法；
  
  · 父元素设置 position:relative 和 left:50%，子元素设置 position:absolute 和 left:50%；
垂直居中设置

<div class='box'>
    <div class='content'>
        垂直居中
    </div>
</div>

1. Flex布局;

.box{
  height: 200px;
  background-color: pink;
  display: flex;
  justify-content: center;
  align-items: center;
}

2.使用position:absolute（fixed），外层宽高未知;

.content{
  height: 100px;
  width: 100px;
  background-color: gold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
    }

3.# 脱离文档流元素的居中，利用position:relative/absolute属性，margin:auto

.box{
  height: 200px;
  background-color: pink;
  position: relative;
}
.content{
  height: 100px;
  width: 100px;
  background-color: gold;
  position: absolute;
  margin: auto;
  top: 0;
  bottom:0;
  left: 0;
  right: 0;
    }

4.最高大上的一种，使用before，after伪元素;

.box {
  width: 300px;
  height: 300px;
  background-color: pink;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
}

.box:after {
  display: inline-block;
  content: '';
  width: 0;
  height: 100%;
  vertical-align: middle;
}

.content {
  display: inline-block;
  vertical-align: middle;
}

5 table-cell 未脱离文档流元素的居中

.box{
  width: 300px;
  height: 230px;
  background-color: pink;
  display: table-cell;   /*未脱离文档流元素的居中*/
  vertical-align: middle;
  text-align: center;
}
.center{
  vertical-align: middle;
}

7 布局

双飞翼布局

<style>
  *{padding: 0;margin: 0}
  body{min-width: 700px}
  .contain{
    float: left;
    width: 100%;
  }
  .main{
    height: 200px;
    margin-left: 110px;
    margin-right: 210px;
    background-color: palegreen;
  }
  .left{
    float: left;
    height: 200px;
    width: 100px;
    margin-left: -100%;
    /*使用负margin上移一个元素，所有跟随的元素都会被上移。*/
    background-color: antiquewhite;
  }
  .right{
    float: right;
    height: 200px;
    width: 200px;
    margin-left: -200px
  ;
    background-color: palevioletred;
  }
</style>
<body>
  <div class="contain">
    <div class="main"></div>
  </div>
  <div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>

圣杯布局

圣杯布局: 左(200px) 右(220px) 宽度固定，中间自适应，container部分高度保持一致


.body{
    min-width: 700px;
  }
  .header,.footer{
    border: 1px solid #333;
    background-color: #aaa;
    text-align: center;
  }
  .left, .middle, .right{
    position: relative;
    float: left;
    min-width: 130px;
  }
  .container{
    padding: 0 220px 0 200px;
    overflow: hidden; /* 父级div定义, 清除浮动*/
  }
  .left{
    margin-left: -100%;
    left: -200px;
    width: 200px;
    background-color: palegreen;
  }
  .right{
    margin-left: -220px;
    right: -220px;
    width: 220px;
    background-color: palevioletred;
  }
  .middle{
    width: 100%;
    background-color: antiquewhite;
    word-break: break-all;
  }
  .footer{
    clear: both;
  }

</style>

<body>
</div>
<div class="header">head</div>

<div class="container">
  <div class="middle">middle</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>

<div class="footer">foot</div>
</body>

流体布局

<style>
  *{margin: 0;padding: 0;}
  body{min-width: 700px;}
.left{
  float: left;
  height: 200px;
  width: 200px;
  background-color: antiquewhite;
}
  .right{
    float: right;
    width: 300px;
    height: 200px;
    background-color: palegreen;
  }
  .main{
    margin-left: 120px;
    margin-right: 220px;
    height: 200px;
    background-color: palevioletred;
  }
</style>
<body>
<div class="container">
  <div class="left"> </div>
  <div class="right"> </div>
  <div class="main"> </div>
</div>
</body>

BFC 三栏布局

BFC 规则有这样的描述：BFC 区域，不会与浮动元素重叠。因此我们可以利用这一点来实现 3 列布局。缺点跟方法一类似，主要内容模块无法最先加载，当页面中内容较多时会影响用户体验。因此为了解决这个问题，有了下面要介绍的布局方案双飞翼布局。

<style>
  *{
    padding: 0;
    margin: 0;
  }
  body{ min-width: 700px}
  .left{
    float: left;
    height: 200px;
    width: 100px;
    min-width: 20px;
    background-color: palevioletred;
  }
  .right{
    float: right;
    height: 200px;
    width: 200px;
    /*margin-left: 20px;*/
    background-color: palegreen;
  }
  .main{
    height: 200px;
    background-color: antiquewhite;
    overflow: hidden;
  }
</style>
<body>
  <div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="main"></div>
  </div>
</body>

flex 布局

<style>
  .contain{
    display: flex;
  }
  .main{
    flex-grow: 1;
    height: 300px;
    background-color: palevioletred;
  }
  .left{
    order: -1;
    flex: 0 1 200px;
    margin-right: 20px;
    height: 300px;
    background-color: antiquewhite;
  }
  .right{
    flex: 0 1 100px;
    margin-left: 20px;
    height: 300px;
    background-color: palegreen;
  }
</style>
<body>
  <div class="contain">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>

绝对定位布局


<style>
  .container {
    position: relative;
  }
  .main {
    height: 300px;
    margin: 0 120px;
    background-color: green;
  }
  .left {
    position: absolute;
    width: 100px;
    height: 300px;
    left: 0;
    top: 0;
    background-color: red;
  }
  .right {
    position: absolute;
    width: 100px;
    height: 300px;
    background-color: blue;
    right: 0;
    top: 0;
  }
</style>

<body>
<div class="container">
  <div class="main"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>
</body>

8 animation

transition 过渡

通过过渡可以指定一个属性发生变化时的切换方式

transition-property: 指定要执行过渡的属性

如果所有属性都需要过渡，则使用all关键字transition-property: all;

transition-duration: 指定过渡效果的持续时间transition-duration: 100ms;

transition-timing-function: 过渡的时序函数: 指定过渡的执行的方式

              可选值：

                  ease 默认值，慢速开始，先加速，再减速

                  linear 匀速运动

                  ease-in 加速运动

                  ease-out 减速运动

                  ease-in-out 先加速 后减速

                  cubic-bezier() 来指定时序函数
                  
                  steps() 分步执行过渡效果:end :在时间结束时执行过渡(默认值);start: 在时间开始时执行过渡

transition-timing-function: cubic-bezier(.24,.95,.82,-0.88);

transition-timing-function: steps(2, start);

transition-delay: 过渡效果的延迟transition-delay: 2s;
transition 可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟

transition:2s margin-left 1s cubic-bezier(.24,.95,.82,-0.88);

animation 动画

Animation:作用于元素本身而不是样式属性,属于关键帧动画的范畴，它本身被用来替代一些纯粹表现的javascript代码而实现动画,可以通过 @keyframe 显式控制当前帧的属性值

下面是对应的属性的介绍

 animation-name        规定需要绑定到选择器的 keyframe 名称。



animation-duration        规定完成动画所花费的时间，以秒或毫秒计。



animation-timing-function        规定动画的速度曲线。



animation-delay        规定在动画的延迟。



animation-iteration-count        规定动画应该播放的次数。



 animation-direction        规定是否应该轮流反向播放动画。



 animation-play-state: 设置动画的执行状态 running   |   paused

 /* 创建小球下落的动画 */
   @keyframes ball {
           from{
                margin-top: 0;
            }
            to{
                margin-top: 400px;
            }

animation 水平循环移动


<style>
  *{
    margin: 0;
    padding: 0;}
  #wrap{
  height: 200px;
  width: 100%;
  background-color:papayawhip;
  display: flex;
  /*justify-content: center;*/
  align-items: center;
  }
   .box{
    width: 50px;
    height: 50px;
    border-radius:50%;
    background-color: yellowgreen;
     animation: test 2s 0s infinite linear alternate;
/*   animation: animation-name
  animation-duration
  animation-delay
  animation-timing-function
  animation-iteration-count 动画执行的次数 infinite 次数
  animation-direction :alternate 从 from 向 to运行 重复执行动画时反向执行 */
}
   #wrap:hover div{
     animation-play-state: paused;
   }
/*动画 设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行每一个步骤*/
  @keyframes test {
    /* from表示动画的开始位置 也可以使用 0% */
    from{
      margin-left: 0%;
    }
    /* to动画的结束位置 也可以使用100%*/
    to{
      /*background-color: red;*/
      margin-left: 100%;
    }
  }
</style>
<body>
<div id="wrap">
  <div class="box"></div>
</div>
</body>

transform 变形

Transform:指通过CSS来改变元素的形状或位置

变形不会影响到页面的布局layout
transform 用来设置元素的变形效果

translateX() 沿着x轴方向平移

translateY() 沿着y轴方向平移

translateZ() 沿着z轴方向平移

平移元素，百分比是相对于自身计算的

z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果必须要设置网页的视距

body:hover .box1{
            transform: translateZ(800px);
        }

使用css3的新属性transform:translate(x,y)属性;设置块级元素垂直居中

.box{

    position: absolute;

    top:50%;

    left:50%;

    transform: translate(-50%,-50%);

    -webkit-transform:translate(-50%,-50%);

    -moz-transform:translate(-50%,-50%);

    -ms-transform:translate(-50%,-50%);

}

-webkit 是表示针对 Safari 和 Chrome 浏览器支持，

-moz  /* Firefox */；

-ms表示针对 IE 浏览器支持。

-o  /* Opera */

rotate 旋转

通过旋转可以使元素沿着x y 或 z旋转指定的角度

                    rotateX()

                    rotateY()

                    rotateZ()

scale 缩放

变形的原点默认值 center

                对元素进行缩放的函数：

                    scaleX() 水平方向缩放

                    scaleY() 垂直方向缩放

                    scale() 双方向的缩放

9 长度单位 px，%，em，rem，vw,vh,vm

    像素
        - 屏幕（显示器）实际上是由一个一个的小点点构成的
        - 不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
        - 所以同样的200px在不同的设备下显示效果不一样

    百分比
        - 也可以将属性值设置为相对于其父元素属性的百分比
        - 设置百分比可以使子元素跟随父元素的改变而改变

    em
        - em是相对于元素的字体大小来计算的
        - 1em = 1font-size
        - em会根据字体大小的改变而改变

    rem
        - rem是相对于根元素的字体大小来计算
    vw  
        - 相对于视口的宽度。视口被均分为100单位的vw,即 100vw = 浏览器可视区宽度

    vh  
        - 相对于视口的高度。视口被均分为100单位的vh，即100vh  = 浏览器可视区高度
        
    vmin/vm 
        - 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin（即vm）

结论：vw, vh视区大小相关单位只适用于非定位元素的高度相关属性上！

// 高度相关属性如 – height/min-height/max-height/line-height/padding-top/padding-bottom等

很重要的运用场景是：

1.手机适应屏幕尺寸时，如需订列表缩略图的宽高时，如（1:1）且可自适应，

.img-wrap{
width: 20vw;
height: 20vw;
}

2.活动页，分享等单页面

body{
height:100vh;
}

10 字体和背景

字体

字体相关的样式

color 用来设置字体颜色

font-size 字体的大小

                    em 相当于当前元素的一个font-size：**em是相对字体大小的**

                    rem 相对于根元素的一个font-size

**行高（line height）line-height: 200px;

- 行高指的是文字占有的实际高度

font 可以设置字体相关的所有属性

font-weight: bold;

font: bold italic 50px/2 微软雅黑, 'Times New Roman', Times, serif;

图标字体（iconfont）

通过伪元素来设置图标字体

 i::before{/*找到要设置图标的元素通过before或after选中*/

            content: '\f1b0';/*在content中设置字体的编码*/
            
            font-family: 'Font Awesome 5 Free';

            font-weight: 900;

            color: blue;

            margin-right: 10px;

        }

text-align 文本的水平对齐

可选值：

left 左侧对齐

right 右对齐

center 居中对齐

justify 两端对齐

vertical-align 设置元素垂直对齐的方式

可选值：

baseline 默认值基线对齐

top 顶部对齐

bottom 底部对齐

middle 居中对齐

text-decoration 设置文本修饰

可选值：

none

underline 下划线

line-through 删除线

overline 上划线

white-space 设置网页如何处理空白

可选值：

normal 正常

nowrap 不换行

pre 保留空白**

背景

1 background-color 设置背景颜色:background-color: #bfa;

2 background-image 设置背景图片 background-image: url("./img/1.png");

                  - 可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色

                  - 如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满

                  - 如果背景的图片大于元素，将会一个部分背景无法完全显示

                  - 如果背景图片和元素一样大，则会直接正常显示

3 background-repeat 用来设置背景的重复方式 background-repeat: no-repeat;

                  可选值：

                      repeat 默认值 ， 背景会沿着x轴 y轴双方向重复

                      repeat-x 沿着x轴方向重复

                      repeat-y 沿着y轴方向重复

                      no-repeat 背景图片不重复

4 background-position 用来设置背景图片的位置background-position: center;

·通过 top left right bottom center 设置背景图片的位置；

`使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是center

·通过偏移量来指定背景图片的位置：水平方向的偏移量 垂直方向变量

5 background-clip 设置背景的范围

  可选值：

   border-box 默认值，背景会出现在边框的下边

  padding-box 背景不会出现在边框，只出现在内容区和内边距

  content-box 背景只会出现在内容区

   background-origin 背景图片的偏移量计算的原点

   padding-box 默认值，background-position从内边距处开始计算

   content-box 背景图片的偏移量从内容区处计算

   border-box 背景图片的变量从边框处开始计算

    background-origin: border-box;

    background-clip: content-box;

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

                  第一个值表示宽度

                  第二个值表示高度

                  - 如果只写一个，则第二个值默认是 auto



                  cover 图片的比例不变，将元素铺满

                  contain 图片比例不变，将图片在元素中完整显示

设置渐变的属性

！！渐变是图片，需要通过background-image来设置

- **linear-gradient() 线性渐变，** 颜色沿着一条直线发生变化

background-image: repeating-linear-gradient(to right ,red, yellow 50px);

- **radial-gradient() 径向渐变**(放射性的效果)

background-image: radial-gradient(farthest-corner at 100px 100px, red , #bfa)

Border-image : 图形化边框

CSS sprites

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

这样可以减少很多图片请求的开销，因为请求耗时比较长；

请求虽然可以并发，但是也有限制，一般浏览器都是6个。

基础HTML+CSS3 知识总结

1. HTML5

meta标签

语义化标签

三种html列表

超链接、图片、内联框架、音视频

实体（转义字符）

2. CSS3

1 CSS3新增属性：

比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

盒模型

box-sizing

overflow（元素的垂直方向的布局）

行内元素的盒模型：

2 改样式（3种方法）：

2 选择器

3 float 浮动

BFC /高度塌陷

左侧固定 右侧自适应 :BFC规则

4 flex

弹性盒

flex和box的区别

5 定位（position）

6 垂直居中、水平居中 、垂直水平居中

1 行内元素居中方案

2 块级元素居中方案：

7 布局

双飞翼布局

圣杯布局

流体布局

BFC 三栏布局

flex 布局

绝对定位布局

8 animation

transition 过渡

animation 动画

animation 水平循环移动

transform 变形

rotate 旋转

scale 缩放

9 长度单位 px，%，em，rem，vw,vh,vm

10 字体和背景

字体

背景

设置渐变的属性

CSS sprites

左侧固定右侧自适应 :BFC规则

6 垂直居中、水平居中、垂直水平居中