HTML基础

# html总结

## 一、标签种类

1. ### 标题标签 h标签

双标签 块级元素 自己独占一行 有1-6级 h1 -h6

2. ### 段落标签 p标签

双标签 块级元素 在浏览器中独占一行的标签3

3. ### 分隔符 <hr>

   单标签 块级元素 自占一行的标签

4. ### 格式化文本标签

```html
<!-- 粗体 -->
  <b>樊某某被安排了了</b>
  <strong>被杨某安排了</strong>
  <!-- 斜体 -->
  <i>朗驰科技就是好</i>
  <em>美女老师少不了</em>
  <u>前端开发 下划线</u>
  <del>开发岗 删除线</del>
  <sup>上标</sup>
  <sub>下标</sub>
  <mark>高亮</mark>
```

双标签 内联元素，不自占一行

5. ###  按钮标签 button

普通的按钮标签，不具备任何功能，可以自主赋予功能具有自己的样式，可以自定义修改。

\- 双标签，按钮内部可以包裹文本。“特殊的”内联元素，可以设置宽度高度，不自占一行

 双标签 特殊的”内联元素 不自占一行

6. ### 分区标签 div

双标签 块级元素

分区标签往往没有自带样式 可以说没有任何样式 目的包裹其他标签使用 或者需要单独指定样式

7. ### span标签

 双标签 元素是内联元素，可用作文本的容器

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

8. ### 换行标签 br

   单标签 块级标签 自占一行的标签

9. ### 预格式化标签pre

可定义预格式化的文本，浏览器会完整保留设计者在源文件中所定义的格式，包括各种空格、缩进以及其他特殊格式。

双标签 块级元素  自占一行的标签

10. ### 超链接标签

\- `<a></a>`标签，定义超链接，用于从一个页面链接到另一个页面。

\- 最重要的属性是 `href` 属性是必填属性，它指示链接的目标。href 属性可以填写多种路径和其他目标方式。

\- a 标签是双标签，可以包含文字等，`<a href=""></a>`是内联元素,不自一行

```html
<body>
    <ul>
        <li><a href="#a1">第一章</a></li>
        <li><a href="#a2">第二章</a></li>
        <li><a href="#a3">第三章</a></li>
    </ul>

    <a id="a1">第一章内容</a>
    <p style="width: 500px;height: 1000px;">孙悟空三大白骨精</p>

    <a id="a2">第二章内容</a>
    <p style="width: 500px;height: 1000px;">孙悟空怒锤红孩儿</p>

    <a id="a3">第三章内容</a>
    <p style="width: 500px;height: 1000px;">孙悟空大脑天宫</p>

    <a href="#">回到顶部</a>
</body>
```

11. ### img标签

    单标签，为“特殊的”内联元素

```html
<!-- img 单独调整width和height 可以随着比例放大缩小 如果同时指定 可能会失真 title="设置图片提示 -->

<a href="标签种类_2.html">
    <img src="图片路径" width="200px" height="200px" title="设置图片提示">
</a>
```

12. ### 有序列表标签

\- `<ol></ol>`有序列表标签，**双标签**，第一层嵌套内只能包含`<li></li>`列表项标签，单独存在没有意义，块级元素可以**自占一行**显示

\- `<li></li>`列表项标签，为双标签可以包裹任何标签和文本，**块级元素**。d
|

\- 列表项前有数字顺序，type 类型 1、A、a、i、I 

13. ### 无序列表标签

\- `<ul></ul>`无序列表标签，**双标签**，第一层嵌套内只能包含`<li></li>`列表项标签，单独存在没有意义，块级元素可以**自占一行**显示

\- `<li></li>`列表项标签，为双标签可以包裹任何标签和文本，**块级元素。**

\- type 类型 disc、square、circle 用来更改列表项的形状。type属性可以设置：

\- `type="disc"` 默认的

\- `type="circle"` 空心圆点

\- `type="square"` 小正方形（实心的）

14. ### 自定义列表

\- `<dl></dl>`自定义列表不仅仅是一列项目，而是项目及其注释的组合。双标签，块级元素。

\- 每个自定义列表项可以指定 `<dt></dt>` 列表标题，只能包裹文本。

\- 每个自定义列表项使用`<dd></dd>`双标签包裹文本和元素。

15. ### table表格标签

`<table></table>`表格标签。**双标签**可以包裹表格系列的标签，**块级元素，自占一行**

\- `<caption></caption>`表格标题标签，双标签，只可以包裹文本。块级元素，自占一行，可以指定表格的标题，只能有一个，可以省略不写。如书写一定在`<table></table>`标签内嵌套的第一行出现。

\- `<thead></thead>`表头标签，可以指定表格的列表表头，可不写

\- `<tbody></tbody>`表体标签，可以指定表格的主体部分，可不写

\- `<tfoot></tfoot>`表尾标签，可以指定表格的尾部说明，可不写。`<tfoot>` 标签必须被用在以下情境中：作为 `<table> `元素的子元素，出现在 `<caption>`和 `<thead> `元素之后，`<tbody>` 和 `<tr>` 元素之前。



\- `<tr></tr>`行标签，双标签只能包裹列标签和加粗列标签，可存在在表头、表体和表尾中，属于结构，代表一行的范围。

\- `<th></th>`加粗列标签，一般放在表头，当作列标题使用。

\- `<td></td>`表格单元列标签，放置内容如文本和其他标签。

16. ### form表单标签

\- `<form></form>` 表单标签是 HTML 表单用于搜集不同类型的用户输入

\- **双标签**，一般情况下不能单独使用，需要在 form 元素中加入 input 等标签共同使用

17. ### input 标签

\- `<input/>`元素是最重要的表单元素。它有很多形态，根据不同的 type 属性。

\- input 标签是**单标签**，主要依靠控件，input 的 type 类型就是用于书写控件的属性。它的控件有很多种类，从而达到我们要的需求。

\- input 标签是内联元素，但属于特殊的内联元素，可以定义宽度高度，**不自占一行**



文本框

```html
<input type="text" placeholder="输⼊⽤户名" name="username" maxlength="10" /> 
```

密码框

```html
<input type="password" placeholder="输⼊密码" name="pwd" />
```

复选框

```html
<input type="checkbox" name="eat" checked />吃⾯ 
<input type="checkbox" name="eat" />吃饭 
<input type="checkbox" name="eat" checked />吃⼟ 

```

按钮

```html
<input type="submit" /> 
<input type="reset" />
<input type="button" value="普通按钮" /> 

```

文件上传

```html
<input type="file" /> 
<!-- 多⽂件上传 --> 
<input type="file" multiple /> 

```

18. ### label标记标签

    `<label></label>` 标记标签标签不会向用户呈现任何特殊效果。**双标签，内联元素，不自占一行**

19. select菜单标签

\- `<select></select>` 下拉菜单标签,**双标签，但不能单独存在**，只能包裹`<option></option>` 标签是选项标签

\- `<option></option>`的`value`属性是可以获取并且得到该下拉菜单用户选择的是哪一项

\- `multiple`属性代表该下拉菜单可以多选。

20. ### textarea文本域

文本域标签具有滚动条的多行文本输入控件，与单行文本框 text 控件不同

\- 它不能通过 maxlength 属性来限制字数，为此必须寻求其他方法来加以限制以达到预设的需求。

\- 文本域禁止缩放的样式`resize:none;`

21. ### iframe标签

\- `<iframe></iframe>`标签是一个内联框架，即用来在当前 HTML 页面中嵌入另一个文档的，且所有主流浏览器都支持 iframe 标签

\- 简单用法的属性

 \- `src` iframe 页面地址，有同域跨域之分

 \- `height` iframe 高度

 \- `width` iframe 宽度

 \- `name` iframe 命名

 \- `scrolling`用来设置框架是否需要滚动条，取值可以是`yes,no,auto`

  \- `auto`在需要的情况下出现滚动条（默认值）

  \- `yes`始终显示滚动条（即使不需要）

  \- `no`从不显示滚动条（即使需要）

\- 优势和劣势

 \- 程序调入静态页面比较方便;

 \- iframe 有不好之处：样式/脚本需要额外链入，会增加请求

 \- 有同步和异步之分

 \- 样式不好控制

 

<iframe name="Iframe1" src="https://www.taobao.com"  width="100%"  height="200"  



scrolling="yes"> 

 您的浏览器不⽀持嵌⼊式框架，或者当前配置为不显示嵌⼊式框架。 

</iframe> 

![image-20220928112714139](HTML基础/image-20220928112714139.png)

## 二、属性

1. ### style属性

规定元素的行内样式（inline style）

```html
- `color: red;` 字体颜色，色值可以是英文（部分生效）
- `background-color: green; `背景颜色，色值可以是英文（部分生效）
- `font-size: 20px;`字体大小，px 是像素单位
- `text-align: center;`块级标签中的文字和图片居中显示
- `width: 100%;`设置元素的宽度，百分比单位是参照父级元素的
- `height: 100px;`设置元素的高度
```

2. ###  id 属性

定义唯一标识符（ID），在该页面上一个标签只能有一个不重复的 id 名，它具有唯一性。

 id 属性的值不能是数字开头，不建议写中文

3. ###  class 属性

可以将元素进行分类后给予相同的样式，减少了代码的书写量

\- 该页面上可以有多个元素拥有此类名，一个元素也可以有多个类。

\- class 选择器名称不能是数字开头，不建议写中文，可以是多个类名用空格隔开。

\- 值的书写规范与 id 相同

4. ###  data-*⾃定义属性

是自定义数据属性，可以通过 JavaScript 与 HTML 之间进行专有数据的交换

`data-*` 这里的`*`可以替换为自定义的有意义的字母或单词,如：`data-buy`

5. ###  title 标题属性

包含表示与其所属元素相关信息的文本。

\- 这些信息通常可以作为提示呈现给用户,但不是必须的。

6. ### href 属性**''<a标签>'** 

```html
	<!-- target 为_self本页面跳转 -->
    <a href="./标签种类_2.html" target="_self">点我1</a>
    <!-- target 为 _blank新页面跳转 -->
    <a href="http://www.baidu.com" target="_blank">点我2</a>
    <!-- 刷新页面 -->
    <a href="">点我3</a>
    <!-- 不刷新页面 -->
    <a href="#">点我4</a>
    <!-- 把要下载的数据放到a链接的href属性中 -->
    <a href="下载路径">下载</a>
```

7. ### target 属性 **''<a标签>'** 

```html
<!-- target 为_self本页面跳转 -->
<a href="./标签种类_2.html" target="_self">点我1</a>
<!-- target 为 _blank新页面跳转 -->
<a href="http://www.baidu.com" target="_blank">点我2</a>
<!-- 刷新页面 -->
<a href="">点我3</a>
<!-- 不刷新页面 -->
<a href="#">点我4</a>
<!-- 把要下载的数据放到a链接的href属性中 -->
<a href="下载路径">下载</a>
```

8. table表格标签的相关属性

![image-20220927163337657](HTML基础/image-20220927163337657.png)

9. form标签常用属性

\- 常用属性

     \- name属性主要是对这个form进行标记

     **\- methood=”get/post”，** get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限。get安全性非常低，post安全性较高。但是执行效率get安全性非常低，post安全性较高。但是执行效率却比post方法好。

     **\- action，**处理表单提交的 URL（可以为node中的路由接口地址）。

     \- enctype属性，当method属性值为post时，enctype 就是将表单的内容提交给服务器的媒体类型。application/x-www-form-urlencoded：未指定属性时的默认值。

 

## 三、选择器

1. ### 基础选择器 + 关系选择器

```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>Document</title>
    <style>
        /* 基础选择器 */
        /* 通用选择器 */
        *
        /* 元素选择器（标签选择器） */
        h1{
            color: #000;
        }
        p{

        }
        /* 类选择器 */
        .class{
            color: #000;
        }
        /* id选择器 */
        #id{
            color: #000;
        }
        /* 组合选择器 */
        h1,h2,,h3,h4{
            color: #000;
        }
        h1, .class{
            color: #000;
        }
        
        
        
    /* 关系选择器 */
    /* html 结构中存在三种关系，“兄弟关系”、“父子关系”、“后代关系” */

    /* 父子选择器 可延伸*/
    ol>li{
        color:red;
    }
    /* 后代选择器 可延伸*/
        ol li:first-child{
            color: aqua;
        }
    /* 兄弟选择器 兄弟选择器可以选到该元素后面的兄弟，而选不到之前的 */
        .f1~li{
            color: blue;
        }
    /* 邻里选择器 相邻兄弟选择器只能选中“紧紧相邻”的一个兄弟*/
        .f2+li{
            color: purple;
        }
    </style>
</head>
<body>
    <ol>
        <li>天龙人</li>
        <li>北京人</li>
        <li>广东人</li>
        <li>山西人</li>
    </ol>

    <ul>
        <li class="f1">天龙人</li>
        <li class="f2">北京人</li>
        <li>广东人</li>
        <li>山西人</li>
    </ul>

</body>
</html>
```

2. ### 伪类选择器

```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>伪选择器</title>
    <style>
        /* 网址没有被打开之前，或者没被打开过 */
        h1>a:link{
            color: aqua;
        }
        /* 访问过后 */
        h2>a:visited{
            color: aqua;
        }
        /* 鼠标悬停 */
        h3>a:hover{
            color: aqua;
        }
        /* 点击激活 */
        h4>a:active {
            color: aqua;
        }
        /* 标签获取焦点的样式 */
        #i1:focus{
            color: aqua;
        }
        #i2:checked{
            color: red;
        }

        /* befor after */
        p::after{
            content: "之后";
            color:aqua;
        }
        p::before{
            content: "你好,";
            color: red;
        }
        
    </style>
</head>
<body>
    <!-- 伪类选择器 -->
    <!-- 网址没有被打开之前，或者没被打开过 -->
    <h1><a href="https://hyqq.xyz/" target="_blank">a:link特有</a></h1>
    <!-- 访问过后 -->
    <h2><a href="https://hyqq.xyz/" target="_blank">a:visited特有</a></h2>
    <!-- 鼠标悬停 -->
    <h3><a href="https://hyqq.xyz/" target="_blank">a:hover特有</a></h3>
    <!--  点击激活  -->
    <h4><a href="https://hyqq.xyz/" target="_blank">a:active特有</a></h4>
    <br>
    <!-- 标签获取焦点的样式 -->
    请输入：<input type="text" name="" id="i1">
    <br>
    请选择：<input type="radio" name="sex" id="i2">男<input type="radio" name="sex" id="">女


    <!-- 伪标签选择器 -->
    <p>世界</p>
</body>
</html>
```

3. ### css 优先级

   - 优先级的原则

     \- 顺序读取的优先级：是相同类型选择器采用顺序读取后来的优先

     \- 选择器的优先级：不同类型选择器，按照权重原则采用(id 选择器 100,类选择器 10,元素选择器 1)

     \- 继承的优先级：制定样式的优先级大于继承样式的优先级

     \- 多个选择器一起使用的时候：根据权重值累加比较值后采用优先级

     \- 最高优先级：!important，直接获取最高优先级，内联样式不能加!important


   - 优先级的比重大小

     按 CSS 引入方式分:`内联样式 > 内部样式 > 外部样式`（但要注意外部样式引用要在内部样式下面，才会低于内部样式的优先级）

     （3）按元素分:`id选择器（100） > 类选择器（10） > 元素选择器（1）`

4. ### css3 高级选择器

   1. 属性选择器

      - 简单属性选择器

        - 具有某个属性的元素：[属性名]{样式}

        - 特指某个元素具有某个属性：元素名[属性名]{样式}

        - 具备多个属性的元素： 

          ```
           [属性名1][属性名2]{样式声明}
          ```

        - 特指某元素具备多个属性：

          ```
          元素名[属性名1][属性名2]{样式声明}
          ```

      - 筛选属性选择器

        - 元素的属性名的值等于：

          ```html
          [属性名=值]{样式}
          ```

        - 元素的属性名以什么开头

          ```
          [属性名^=开头字段]{样式}
          ```

        - 元素的属性名以什么结尾

          ```
          [属性名$=结尾字段]{样式}
          ```

        - 元素的属性名包括什么字段

          ```
          [属性*=包括字段]{样式}
          ```

        - 元素的属性名包括的**独立字段**

          ```
          [属性名~=包含的字段]{样式}
          ```

      - 目标伪类选择器

        - \- 对应锚点被激活时，匹配的样式,使用 a 标签的 href 属性连接元素锚点

          \- `选择器:target{样式声明}`

      - 结构性伪类选择器

        - \- 匹配父元素的第一个孩子 ：`父元素>:first-child {样式声明}`

          \- 匹配父元素的最后一个孩子 ：`父元素>:last-child {样式声明}`

          \- 匹配父元素的第 n 个孩子： `父元素>:nth-child(n) {样式声明}`

          \- 匹配内部没有任何内容（包含文本）的标签 ：`父元素 >:empty{ 样式声明}`

          \- 匹配父元素的唯一子元素：`父元素 >:only-child{样式声明}`

          \- 使用`not()`参数为选择器，否定该括号内选择器的其他所有选择器，类似于取反：`父元素 >:not(不想要的选择器){样式声明}`

## 四、字体和颜色

1. ### 字体的尺寸和单位

定义宽度和高度的单位：px pt em rem

  一般PC端使用px pt 

  移动端使用 em rem vw vh 

  最大宽度和最小宽度 最大高度和最小高度

  max-width min-width  max-height min-height

  不允许出现负值

2. ### 颜色

   - 英文颜色：transparent透明色

   - 十六进制颜色：**#rrggbb**

     1、2 位代表红色范围

     3、4 位代表绿色范围

     5、6 位代表蓝色范围

   - rgb颜色：

     - rgb()函数：r 代表红色色值，g 代表绿色色值，b 代表蓝色色值
     - 取值范围 0~255 之间的 256 个数
     - rgba()函数：a 代表透明度，取值 0~1 之间的数字，0 代表完全透明

3. ### 行高

   - 作用：控制行间距（给每行上下增加间距）

   - 属性名：line-height

   - 取值

     - 数字+px
     - 倍数（当前标签font-size的倍数）

   - 应用

     - 让单行文本垂直居中	可以设置为line-height：文字父元素的高度
     - 网页精准布局时，会设置line-height：1可以取消上下间距

   - 行高与font-size

     - 如果同时设置了行高和font连写，注意覆盖问题
     - font：style weight size/line-heigt family

     



## 五、边框

1. ### 边框属性

   - border-width边框宽度

     border-style边框样式，solid 实线，dashed 虚线，dotted 点点

     border-color边框颜色

2. 边框的方向

   - border-bottom下边框

     border-top上边框

     border-left左边框

     border-right右边框

3. 边框的简写方式

   - border:30px solid green; 三个位置分别可以写边框宽度、边框样式边框颜色，没有严格要求书值都写顺序。

## 六、元素的分类

1. 元素的显示属性

   - display`元素以什么方式显示(以下为常用显示方式)

     \- `display: block;`以块级元素方式显示

     \- `display: inline;`以内联元素方式显示

     \- `display: inline-block;`属于行内元素，但以块级显示，俗称行内块

     \- `display: none;`不显示

     \- `display: table;`以 table 方式显示（不是重点）

2. inline-block

   - 它是行内元素的一种

     \- 不自占一行横向从左向右排列

     \- 可以设置宽度、高度以及内外边距

     \- 常见的行内块级显示元素`img button input`

     \- 会出现幽灵空白节点

      \- 把 img 标签变成块级元素 `display: block;`

      \- 父级元素`font-size: 0;`去掉空白节点

## 七、显示和隐藏属性

```html
1. display:none

   - display：none;使元素消失，脱离文档流的消失

     display：block;使元素出现，元素显示为块级元素

2. visibility: hidden

   - visibility: visible; 元素显示

     visibility: hidden；元素隐藏，占据自身位置

3. opacity: 100%

   - opacity 属性代表元素的透明度，取值范围是 0-1 之间的数字,0 代表完全透明,1 代表不透明

     缺点是，元素内的一切都会随着透明度改变
```



## 八、元素的修饰

1. ### 圆角

   1. #### 元素的四个角:

      - \- `border-top-left-radius`左上角

        \- `border-top-right-radius`右上角

        \- `border-bottom-left-radius`左下角

        \- `border-bottom-right-radius`右下角

   2. #### 圆角的取值：

      - \- 水平边和垂直边设置相同

        \- 1 个值代表四个角

        \- 2 个值代表左上和右下，右上和左下

        \- 3 个值代表左上，右上和左下，右下

        \- 4 个值代表 左上，右上，右下，左下

        \- 水平边和垂直边设置相同（了解）

        \- 水平边圆角/垂直边圆角

   3. #### 圆形

      - \- 圆形,元素宽高一致`border-radius: 50%;`

        \- 椭圆形，元素宽高不一致`border-radius: 50%;`

        \- 胶囊型`border-radius: 高度的一半

2. #### 盒子阴影

   1. ##### 盒子阴影的属性

      - \- `box-shadow: x轴偏移 y轴偏移 羽化 扩展 颜色 内阴影`

        \- 第一个值和第二个值代表： x 轴上的偏移量 和 y 轴上的偏移量（正负值）。

        \- 第三个值代表：模糊半径的大小（羽化）不允许负值。

        \- 第四个值代表：扩展半径的大小，向四周扩散相等的大小,正值放大，负值缩小。

        \- 第五个值代表：颜色值。

        \- 第六个值（可选）代表：阴影向内 inset：默认阴影向外扩散。

3. #### 光标设置

   - \- `cursor: default;`箭头

     \- `cursor: pointer;`小手

     \- `cursor: wait;`等待

     \- `cursor: text;`文本

     \- `cursor: crosshair;`十字

     \- `cursor: progress;`箭头+等待

     \- `cursor: help;`箭头+问号

4. #### 表单轮廓

   - \- `outline`属性

     \- 简写`outline:width style color;`

     \- input 标签有默认的轮廓线，清空轮廓线`input {outline: none;} 或 {outline: 0;}`\- `outline`属性

     \- 简写`outline:width style color;`

     \- input 标签有默认的轮廓线，清空轮廓线`input {outline: none;} 或 {outline: 0;}`

5. #### 列表样式

   - \- `list-style` 属性是一个简写对属性集合

     \- `list-style`简写，`list-style:none`去掉标识(常用)

     \- 分开写样式包括:

      \- `list-style-type`列表标记

       \- `list-style: none;`没有标记

       \- `list-style: disc;`默认实心圆点

       \- `list-style: circle;`空心圆点

       \- `list-style: '♥';`自定义圆点

      \- `list-style-image`设置列表标识为小图片

       \- url()使用绝对路径或者相对路径

       \- 最好放小图，图标大小无法设置

      \- `list-style-position`设置标识在 li 的定位

       \- `list-style-position: outside;`默认在 li 外

       \- `list-style-position: inside;`默认在 li 里

## 九、背景

1. ### 背景颜色

   - background-color: 颜色色值;

2. ### 背景图片

   - background-image: url(路径);

注意：背景图必须要求元素具有宽度和高度

3. ### 背景图和img的区别

   - 尺寸角度

     - img 具有自己的尺寸，不设置宽度高度，可以直接显示 （如同照片）

     - 背景图必须设置宽度和高度 （如同打印）

   - 增加内容角度

     - img 图片上不可以直接写文字，除非在 img 盒子外部定位
     - 背景图是可以在图片上写文字的，背景图其实和颜色一样

   - 功能角度

     - img 一般用于产品展示，可以根据素材更新
     - 背景图一般做大背景或者更新小图标 icon

4. ### 背景图平铺

   - background-repeat:repeat;  默认值 横向纵向都
   - background-repeat:no-repeat; 不平铺
   - background-repeat:repeat-x; x轴平铺
   - background-repeat:repeat-y; y轴平铺

5. ### 背景图定位

   - background-position: 可以改变背景图的默认的位置，默认位置在元素的左上角。

   - \- `background-position:x轴 y轴` 两个方向

     \- `background-position-x` 单独定义 x 轴

     \- `background-position-y` 单独定义 y 轴

     关键字：top、bottom、center、right、left

     可以使用长度单位，如：px、pt、em、%等

6. ### 背景图尺寸

   - background-size`属性来控制背景图片的大小.在拉伸方向中有宽度拉伸和高度拉伸两种，所以可以指定两个值`background-size:x轴拉伸 y轴拉伸

   - 取 1 个值，这个值指定图片的宽度，图片的高度隐式的为 auto

     \- 尺寸可以为 px、pt、em、%

     \- cover:铺满整个容器的宽高，而图片多出的部分则会被裁掉；

     \- contain:容器内至少有一张完整的图，no-repeat 情况下容器会有留白区域。repeat 情况下留白区域则平铺背景图

7. ### 背景简写

   - background:color image repeat position;`简写属性，四组值用空格分开,没有顺序

     \- background 简写中不包括`background-size`，`size`需要单独写

## 十、溢出

1. ### 溢出属性

   - overflow: hidden;`溢出隐藏

     \- `overflow: scroll;`x 轴 y 轴都出现拖动条，子元素不超出也会有滚动条的那条轨道。

     \- `overflow: auto;`只有溢出的方向出现拖动条

     \- `overflow: visible;`溢出默认展示

     \- 单独设定 x 轴或者 y 轴的溢出

      \- overflow-x: auto;

      \- overflow-y: hidden;

      \- 如果 overflow-x、overflow-y 的值相同，则等同于 overflow 设置了这个值。

      \- overflow-x：hidden；那么 overflow-y 就会被重置为 auto。

2. ### overflow 与 BFC（清除浮动和清除外边距溢出时着重讲解）

   - BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，并且与这个区域外部毫不相干。内部元素除了脱离文档流，之外无论如何设置都不会影响父级。（如同杯中水，如何改变也不会撒出）

     -计算BFC的高度时，浮动元素也参与计算。所以形成 BFC 的元素可以清除浮动带来的影响，不然的话，子元素浮动，父元素塌陷，父元素的兄弟元素会和父元素的子元素重叠，就违背了 BFC 的初衷，所以要清除浮动带来的影响。- scroll、auto、hidden 这三个可以触发元素的 BFC 特性。visible 不会。

     \- 利用 overflow 形成 BFC 的应用：

      \- 清除浮动影响：父元素设置 overflow：auto/scroll/hidden；可以清除子元素浮动带来的影响。（形成 bfc 结界，与外界隔绝，仅支持 ie7+及现代浏览器）

      \- 避免 margin 穿透/重叠问题（形成 bfc 结界，与外界隔绝）

## 十一、盒子模型

1. ### 盒子的概念

   - 页面中额外每一个标签，都可以看做是一个“盒子”，通过盒子的视角更方便的进行布局
   - 浏览器在渲染网页时，会将网页中的元素看做是一个个的矩形区域，我们称之为盒子

2. ### 盒子模型

   - CSS中规定每个盒子分别由：**内容区域（content）** **内边距区域(padding) 边框区域(border) 外边距区域(margin)**构成，这就是盒子模型
   - 标准盒子和怪异盒子
     - 标准盒模型采用的W3C标准，盒子的content内容部分由width宽度和height高度决定，**添加padding内边距或border外边框后，宽高都会进行相应增长；**
     - ②怪异盒模型也称为IE盒模型，是IE浏览器设计元素时遵循的规则。怪异盒模型的宽高在div盒子初次设置时就已经规定，添加padding或者border，会从中减少content内容的占据区域，来为padding和border制造空间，宽高不会相对应的进行增长。
   - 计算方法
     - 标准盒子模型的内容计算：content=width*height，
       盒子的总宽度=width+padding（左右）+margin（左右）+border（左右）
       总宽度等于所有附加值，偏移值的总和；
     - 怪异盒子模型的内容计算：content=width*height+padding+border
       盒子的总宽度=width+margin（左右）此时的width宽度已经包含了padding和border的值；

3. ### 内边距

   - adding 指盒子的“内补间”，宽高之外到边框以内的距离。

     \- 可以设置长度，如 px、em、rem 等,且不支持负值

     \- padding 有四个方向分别是上、右、下、左

      \- padding-top 上内边距

      \- padding-right 右内边距

      \- padding-bottom 下内边距

        padding-left 左内边距

   - \- 1 个值，将用于全部的四边。

     \- 2 个值，第一个用于上、下，第二个用于左、右。

     \- 3 个值，第一个用于上，第二个用于左、右，第三个用于下。

     \- 4 个值，将按上、右、下、左的顺序作用于四边。

     

4. ### 外边距

   - margin 指盒子的外边距，外边距是当前元素和其他兄弟元素之间的距离。

     \- 可以设置长度，如 px、em、rem，%等,%取值都是父元素宽度的百分比取值。

     \- 正值时是增大该方向外边距，负值时是缩小该方向外边距。

     \- margin 有四个方向分别是上、右、下、左

      \- margin-top 上外边距

      \- margin-right 右外边距

      \- margin-bottom 下外边距

      \- margin-left 左外边距

   - 和内边距一样，外边距可以简写 1 ～ 4 个值，下和右不会产生效果的原因，是因为外边距其实是当前元素与同级元素之间的距离。

     \- 1 个值，将用于全部的四边。

     \- 2 个值，第一个用于上、下，第二个用于左、右。

     \- 3 个值，第一个用于上，第二个用于左、右，第三个用于下。

     \- 4 个值，将按上、右、下、左的顺序作用于四边。

   - **margin 有一个特殊的取值是 auto**，auto 对上下外边距无效，左右取相同的值，使当前元素在父元素内左右居中。

     \- 块级元素在父元素中水平居中`margin:上下距离 auto;`

     \- 上下距离在没有的时候可以写 0

     \- 内联素使用 margin：auto，不能完成居中效果

   - **margin 的无效情形**

     外边距可以让元素发生位移效果，但只有左和上外边距会移动当前元素。

     下和右外边距，只能让当前元素和周围的元素保持距离。当旁边没有其他元素时，它只是看上去无效。因为，`margin`是设置同级元素间的间隔，并不是设置它在父元素中的位置。如果右侧和下面并没有元素，就不会出现效果。

## 十二、浮动和流体布局

1. ### 默认文档流

   \- 流就是文档布局的自身特性,而定位机制可能就会打破原有流的特性

   \- 默认文档流,画格子,内联和块级

    \- 内联元素，从左向右排列

   \- 块级元素，从上向下排列

2. ### 脱离文档流

   文档一旦脱离文档流，不受文档流的布局约束了，在算其父元素的高度时，就不包括其自身了。以下属会导致元素脱离文档流：

   \- float 浮动

   \- position 定位(绝对定位、固定定位)

3. ### 浮动

   子元素在父元素中浮动，会使其脱离文档流，

   导致父元素对其的管理能力

   - 浮动属性

     \- `float：none`默认不浮动

     \- `float：left`左浮动

     \- `float：right`右浮动

   - 浮动过程：

     \- 脱离文档流不再撑起父元素

     \- 不再自占一行

     \- 在元素浮动的“当前行”向左或向右对齐

   - 1.元素浮动后对父级的高度有影响，不再撑起父级的高度

     2.元素浮动后可以在父元素的左侧或右侧排列

     3.元素浮动后不自占一行

     4.元素浮动后会对后面的文档流中的兄弟元素产生影响会遮盖其后面的兄弟元素

     5.内联元素浮动后，自动变成块级元素

     6.浮动元素仍受父元素影响，还是在父元素的范围内

     **7.当父元素内所有元素均浮动，元素们宽度相加大于父元素宽度时，会换行**

     8.当元素浮动时虽然不自占一行，但会向前占位，前方空值的位置都会属于自己所有，因此后方的元素换行时，不能占据元素向前占位的地域（见元素占位示意图）

     9.当元素浮动时，原则会盖住其后方在文档流中的兄弟元素。但文字、图片等（行内元素和行内块）不会被盖住，其后兄弟元素的文字不会被盖住而是环绕浮动元素四周显示。解决方案包裹文字的元素浮动在前一个元素侧面。

4. ### 清除浮动

   - 清除浮动并不是去除浮动，而是将浮动带来的负面效果解决掉。因为浮动会产生高度坍塌

     \- 浮动的影响父元素无高度

     \- 父元素无高度后，父元素的兄弟元素会向上，发生被遮盖

   - **利用高度解决**

     给父元素高度，弊端是未必知道子元素的高度

   - **父元素也浮动**

     父元素浮动，会影响父元素的兄弟元素

   - **父元素溢出隐藏**

     overflow：hidden/auto，父元素中的子元素可能会被隐藏（利用BFC 块级格式化上下文中，使用该属性可保证浮动元素也可以被计算入父级的高度）

   - **用伪元和clear属性素解决**

     给父元素增加一个在尾部的伪元素

     ```html
     .clearfix:after {
     	content: "";
     	display: block;
     	clear: both;
     }
     .clearfix {
     	*zoom: 1;
     } /*IE/7/6*/
     
     ```

     

## 十三、定位

1. ### position 属性

   \- `position`属性是定位属性，用于指定一个元素在文档中的定位方式。

   \- top，right，bottom 和 left 属性值则决定了该元素的距离四边的位置，可以为负值。

   \- 开发中多用绝对长度单位 px 进行调整，如果在移动端中，可以使用 rem、vw 等单位进行调整。

   \- 常用取值：

    \- `relative` 相对定位

    \- `absolute` 绝对定位

    \- `fixed` 固定定位

   sticky

2. ### 相对定位

   **\- 相对定位 position: relative 不脱离文档流。**

   \- 可使用 top，right，bottom 和 left 做偏移。

   **\- 元素相对的位置是自己本来的位置，移动不改变页面布局。**

   \- 相对定位属性不会影响周围的布局，但会出现新的层叠顺序。

   \- 当四个方向值发生重合时，以 top 和 left 为优先。

3. ### 绝对定位

   **\- absolute 绝对定位，元素将脱离文档流，其他元素不为该元素预留空间。**

   \- 它的移动参照为祖先元素的偏移，来确定元素位置。元素会逐层向上寻找自己的参照元素，当找到的最近一层祖先元素具有 position 属性时，该元素就会以这个祖先元素的原点为参照点。

   \- 可使用 top，right，bottom 和 left 做偏移。

   \- 当四个方向值发生重合时，以“上 top”和“左 left”为优先。

   \- 绝对定位的元素可以设置外边距，且不会与其他边距合并。

   \- 应用场景背景图中的文字和按钮，轮播图中的控制符

4. ### 固定定位

   fixed 固定定位是元素，决定它的“包含块”是 html，唯一可以限定固定定为元素的就是 html 根元素

   \- `position: fixed;`它到父级始终是 html

   \- 直接在窗口的某个位置固定

   \- 可使用 top，right，bottom 和 left 做偏移。

5. ### 粘性定位

   - sticky

6. ### 层叠

   1. z-index 就是 z 轴的顺序，z-index 可以设置字符值，如：auto，多数情况设置整数值，可以为负值。z-index 的最大值是 21,4748,3647 (21 亿多)。跨度尽量 10 以上

   2. 层叠顺序取值

      \- `z-index`层叠顺序

      直接设置没有单位的整数，可以为负值，值越大层级越高

   3. 层叠领域的准则

      **\- 值大的在上：z-index 的值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的。**

      **\- 后来的在上：当元素的层叠水平一致的时候，在文档流中处于后面的元素会覆盖前面的元素。**

   

## 十四、渐变

1. ### 线性渐变

   - 颜色和角度

     - background-image: linear-gradient(color1,color2,……);`渐变最少两个颜色，才能体现出颜色的变化

       \- `linear-gradient()`渐变颜色的参数用逗号分开，可以写多种颜色表达方式

       \- 渐变的方向，按照参数顺序依次向下，可以在颜色前加入角度或关键字控制渐变方向

        \- `90deg` 角度

        \- to 终点 关键词，就是终点在哪个位置，top，left，right，bottom，记得加空格 （不建议使用）

   - 渐变的比例

     - background-image：linear-gradient(方向，颜色1 起始值 结束值，颜色2 起始值 结束值，颜色n 起始值 结束值……)`

       \- 多个颜色渐变时，渐变的区域需要调整，可采取控制颜色范围的方法。在函数内颜色的后面加入长度单位（如 px 或%）用空格分隔。

2. ### 径向渐变

   - 渐变的方向和范围

     - \- `background-image: radial-gradient(color1,color2,……);`

       \- background-image：radial-gradient(颜色 1 起始值 结束值，颜色 2 

       起始值 结束值，颜色 n 起始值 结束值……)

   - 半径

     - background-image: radial-gradient(半径,颜色1,颜色4,颜色3);`

       \- `background-image: radial-gradient(x轴半径 y轴半径,颜色1,颜色4,颜色3);`

       \- 半径只传入一个参数，则表示该渐变形状为圆

       \- 半径可以使用 px 

   - 圆心起点

     - \- background-image: radial-gradient(x 轴半径 y 轴半径 at x 轴圆心 y 轴圆心,颜色 1 起始值 结束值，颜色 2 起始值 结束值……)

       在圆心后面增加 at 空格 x 轴 y 轴的原点位置，可以使用长度单位或关键词。取值可使用 px，% 或者关键词：left/top/bottom/right

     - \- 注意重点

       \- 半径只传入一个参数，则表示该渐变形状为圆

       \- 颜色范围用的百分比,半径变化，百分比参照半径

       \- 颜色范围用的是 px，则不会因为半径的变化而变化

3. ### 重复的渐变

   - \- 注意重复的渐变要求浏览器版本，版本过低的浏览器版本无法查看效果

     \- `background-image: repeating-linear-gradient()` 重复的线性渐变

     \- `background-image: repeating-radial-gradient()` 重复的径向渐变

     \- 当半径过小，页面分辨率显示效果会怪异

## 十五、弹性布局

- 弹性布局是 css3 主推的一个布局，传统布局是基于文档流和盒子模型的，主要以浮动布局，定位布局等。

- 弹性布局是 css3 主推的一个布局，传统布局是基于文档流和盒子模型的，主要以浮动布局，定位布局等。

  **给父元素家 display：flex**；使子元素横向排列，不用每个子元素浮动了

  父元素不需要清除浮动了，高度依然被子元素撑开

1. 容器和项目

   - 使用 flex 布局的元素（父元素），称为"容器"

     它的所有“子元素”自动成为容器成员，称为 "项目"

     它们各自有控制布局的属性，必须是容器包裹着项目

2. 主轴

   - 主轴就是项目的排列方向，主轴会出现四个方向：

     \- x 轴：起点在左侧

     \- x 轴：起点在右侧

     \- y 轴：起点在顶端

     \- y 轴：起点在底端

3. 交叉轴

   - 交叉轴就是在主轴的垂直方向，项目可在交叉轴上移动

4. 将容器指定为 flex 布局

   \- 任何一个容器都可以指定为 Flex 布局:

   \- 行内元素也可以使用 Flex 布局:

   \- 注意，设为 Flex 布局以后，子元素的 float、clear 等属性将失效。

5. 容器的属性

   1. 主轴的方向

      - flex-direction` 代表主轴的方向，即项目的排列方向

        \- row 左向右

        \- row-reverse 右向左

        \- column 上向下

        \- column-reverse 下向上

   2. 项目换行

      - 默认情况下，项目都排在一条线上。`flex-wrap`属性定义如果一条轴线排不下，如何换行的模式。

        \- nowrap 默认不换行

         \- wrap 换行

        \- wrap-reverse 反向换行

6. 主轴和换行的简写方式

   - `flex-flow`属性是`flex-direction`属性和`flex-wrap`属性的简写形式，默认值为`row nowrap`横向排列不换行。

7. 主轴上的对齐方式

   - `justify-content`属性定义了项目在主轴上的对齐方式。是默认起点对齐、终点对齐还是居中对齐等。

     前提是，如果项目会换行,则下行按照下一行的数量对齐，间隔与上一行可能不同。不换行元素会在容器缩小是缩小，不会出现对齐效果。

   - \- flex-start 默认起点对齐

     \- flex-end 终点对齐

     \- center 居中对齐，一起居中

     \- space-between 两端对齐，项目之间的间隔都相等，左右贴边

     \- space-around 每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍

8. 交叉轴对齐方式

   - `align-items`属性定义项目在交叉轴上如何对齐，"前提是"前提是项目换行,容器的垂直轴方向是有独立高度或者宽度的。注意：多行项目会有行间距离

   - \- flex-start 交叉轴的起点对齐

     \- flex-end 交叉轴的终点对齐

     \- center 交叉轴的中点对齐

     \- baseline 项目的第一行文字的基线对齐,需要给项目设置单独的高度和内上边距和行高可以看出来

     \- stretch 默认值，如果项目未设置高度或设为 auto，将占满整个容器的高度

9. 多轴线对齐方式

   - `align-content`属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

   - \- flex-start 与交叉轴的起点对齐。

     \- flex-end 与交叉轴的终点对齐。

     \- center 与交叉轴的中点对齐。

     \- space-between 第一行和最后一行贴开始和结束，其他均分中间位置

     \- space-around 每行间距两侧或上下间距相等，比边框间距大一倍

     \- stretch 默认值

10. 项目属性

    - 项目排列数次序（排队拿号）

      \- `order`属性定义项目的排列顺序。数值越小，排列越靠前，默认为 0。

      \- 相当于拿号排队，默认是原有元素的顺序，这个是可以重新更改的，单独设置给每个项目，值越大排的越靠后。

      \- 调整顺序用的不是很多，因为有点反人类思维

    - 项目的放大比例（多吃多占）

      \- `flex-grow`属性定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大

      \- 当项目设置了该属性之后，原来的宽度或宽度失效。

      \- 项目不换行时：

       \- 父元素有多余的空间，设置放大比例的元素按照比例占据多余空间

       \- 父元素没有多余空间，当父元素总长度等于和低于元素宽度或者高度相加总和时，元素们同等比例缩小，无特殊化，放大比例失效。

      \- 项目换行时：

       \- 父元素会有多余空间，因为只要空间不够就换行了，只要有多余空间，放大比例元素会在当前行按照自己的比例分隔剩余空间。默认比例的元素会正常按照宽度占位

       \- 父元素宽度与元素宽（高度）相加正好相等，多余空间是 0，那么设置放大比例的元素，则暂时不会变更宽度。

    - 项目的缩小比例（缩水比例）

      \- `flex-shrink`属性定义了项目的缩小比例，默认为 1，负值无效。

      \- 前提是容器设置不换行才能看出效果，容器设置宽度看的更清晰

      \- `flex-shrink：0`：项目不换行容器缩小，其中的项目同等压缩，但设置了 flex-shrink：0 的项目不会压缩，会保持自己的宽度（高度）也就是不参与压缩

      \- `flex-shrink`：其他值如 2、10 等，缩小比例值越大，缩小的比重就越大

    - 项目的自动尺寸（特立独行）

      \- 当`flex-basis`和`width`属性同时存在时，`width`属性不生效

      \- flex 布局有多余空间时，item 的宽度为`flex-basis`设置的宽度

      \- 当 flex 空间不够时，由于`flex-shrink`的默认值为 1，所以所有 flex items 容器等比例被压缩，设置`flex-basis`的项目也会按照最大值的相对比例压缩，不会和其他元素比例相同。

    - flex 属性简写

      flex 属性是 flex-grow(放大比例), flex-shrink(缩小比例) 和 flex-basis(自动尺寸)的简写，默认值为 0 1 auto。后两个属性可选。

## 十六、元素的动效

1. ### transition过渡

   - transition 在英文中是过渡的意思，过渡可以为一个元素在不同状态之间切换不同的过渡效果。它由四个部分构成，分别是：**过渡属性的名称**，**过渡需要的时间**，**过渡的方式**和过渡的延迟时间。

   - **过渡属性的名称**

     \- `transition-property` 过渡样式

      过渡一定是有变化都，在 css 中变化都是样式，比如我们需要过渡一个颜色，那么你要过渡的属性名称就是`background-color`

     \- 当过渡多个样式的时候可以写 all

   - **过渡需要的时间**

     \- `transition-duration`如果让过渡的感觉柔和一下，那就是需要过渡的时间不是一瞬间的而是慢慢的。

     \- 过渡的时间直接是以秒 s 或者 ms 为单位，默认 0s

   - **过渡的方式**

     \- `transition-timing-function`过渡方式,过渡方式的不同而在运动中改变速度

     \- 贝塞尔曲线函数是非常复杂`http://www.css3beziercurve.net/` 函数是非常复杂的，但是在

     \- css 中为我们封装了 5 种

      \- 默认值，先慢再快最后慢`transition-timing-function:ease;`

      \- 先慢，后越来越快`transition-timing-function:ease-in;`

      \- 速度在开始和结束时都很慢,中间不加速`transition-timing-function:ease-in-out;`

      \- 先快，后越来越慢`transition-timing-function:ease-out;`

      \- 匀速`transition-timing-function:linear;`

   - **过渡的方式**

     \- `transition-timing-function`过渡方式,过渡方式的不同而在运动中改变速度

     \- 贝塞尔曲线函数是非常复杂`http://www.css3beziercurve.net/` 函数是非常复杂的，但是在

     \- css 中为我们封装了 5 种

      \- 默认值，先慢再快最后慢`transition-timing-function:ease;`

      \- 先慢，后越来越快`transition-timing-function:ease-in;`

      \- 速度在开始和结束时都很慢,中间不加速`transition-timing-function:ease-in-out;`

      \- 先快，后越来越慢`transition-timing-function:ease-out;`

      \- 匀速`transition-timing-function:linear;`

   - **简化写法**

     \- 顺序是 transition：过渡时间 延迟时间 过渡方式 过渡样式

     \- 注意“执行时间和延迟时间的顺序”不能改变

     \- 最简写法：transition：过渡时间；

2. ### 多重样式过渡

   使用 transition 进行多个样式并且不同时过渡样式时，每一个不同时间的过渡样式需要用逗号分隔。

3. ### transform变化

   - CSS 里变化这个属性属于 css 的一个精彩的革新，transform 属性允许多种变化效果的函数对元素进行改变。

     变换分为两种：2D（重点）和 3D，需要知道三个轴 xyz。

   - **transform 变化属性**

     四个最常用的变化函数，分别是：

     \- translate 位移

     \- scale 缩放

     \- rotate 旋转

     \- skew 扭曲

   - **translate()位移函数**

     translate()在变换中位移可以有 X 轴、 Y 轴、Z轴的位移方向，参数可以使用长度单位，百分比对应的是自己的宽度和高度，正直或者负值均可。Z轴的位移只有在父元素具有透视的效果下才可以看到。

     \- `transform: translateX(x); ` 沿 X 轴方向平移 正值右移 负值左移

     \- `transform: translateY(y);` 沿 Y 轴方向平移 正值下移 负值上移

     \- `transform: translate(x, y);` 沿 X 轴和 Y 轴同时平移

     \- 注意：位移和固定定为不同，它并没有脱离文档流，也不会影响其他元素的布局

     元素居中，之前 margin 负值是需要知道元素的宽度和高度，使用 translate 百分比值则不需要

   - **rotate()旋转函数**

     \- rotate()函数在 2d 变换中旋转只能以 Z 轴进行旋转，所以 rotate()函数默认为 Z 轴旋转函数。

     \- 参数为旋转角度，deg 单位为旋转角度。角度可以为正值或负值。

     \- 旋转中心点，是元素最中心的点

   - **scale()缩放函数**

     \- scale()缩放函数中的参数是以倍数为基础的，1 代表当前大小

     \- 1 以上的“正数”为当前大小的倍数。

     \- 1 以下 0 以上的“正数”为缩小的倍数。

     \- 0 倍为消失

     \- 当参数值为负值的时候，元素进行镜面翻转，同样倍数会起作用

   - **skew()倾斜扭曲函数**

     \- skew()在 2d 变换中倾斜可以有 X 轴和 Y 轴的倾斜角度

     \- 填写旋转角度，deg 单位为旋转角度，角度可以为正值或负值。

     \- skew()默认为 X 轴倾斜函数

   - **变换函数的执行顺序**

     当变换属性需要叠加使用时，不可以生明多个 transform 属性，而是需要把所有要使用的变换函数添加在一个 transform 属性中，用空格分隔。但存在前后顺序问题。

   - **基点**

     transform-origin 属性是可以改变元素变化时的原点，默认情况下，元素的中心原点位于 x 轴和 y 轴的 50%处。

     \- 在变化中，任何元素都有一个中心原点。默认情况下，元素的中心原点位于 x 轴和 y 轴的 50%处。

     \- transform-origin 属性取值有两种：一种是“长度值”；另外一种是“关键字”。

     \- 当取值为长度值时，单位可以为 px、em 和百分比等。

4. ### 透视效果

   - 透视

     在 css 变换中如果想作出 3d 效果，一定要关注透视距离 perspective 属性。

     perspective 属性值越大，元素的变形就越小。

     perspective 属性值越小，元素的变形就越大。

     \- perspective 属性定义透视距离，距离为长度单位

     \- 模拟人眼睛到 3D 变化元素之间的距离

     \- 【重点】透视距离只能定义在 3D 变化的父元素上

   - transform-style

     3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style: preserve-3d来使其变成一个真正的3D图形。

     \- 让盒子位于三维空间里transform-style: preserve-3d;   

     \- 让子盒子位于此元素所在的平面内(默认)transform-style: flat;

   - 旋转函数 x 轴和 y 轴

     2d 中旋转是 z 轴旋转，而想要感受 3d 效果，需要旋转的 x 轴和 y 轴。

     \- `transform:rotateX(deg);`x 轴旋转

     \- `transform:rotateY(deg);`y 轴旋转

   - 位移函数 z 轴

     3d变换中的移动，z中的正方向面向用户,值越大，越靠近用户。

     \- transform: translateZ(正值) 沿z轴向前（接近模拟视觉的距离）

     \- transform: translateZ(负值) 沿z轴向前（远离模拟视觉的距离）

5. ### 动画

   - 动画就是指定一组或多组成套的动作，按照指定时间，指定的方式自动完成。h5 中动画的运用效率要高于使用 js 来体现动画效果，因为动画是渲染式的。

   - 关键帧

     `@keyframes` 是 css 中的@规则，通过在动画序列中定义关键帧的样式，来控制 CSS 动画序列中的步骤。

     以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

     0% 是动画的开始时间，100% 动画的结束时间。

     为了获得最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。

   - 动画名称

     `animation-name`属性就是指定动画要使用哪一个关键帧。

   - 动画持续时间

     `animation-duration`属性代表一个动画周期的时长，单位为秒(s)或者毫秒(ms)，默认值 0 秒。

   - 动画的运动方式

     `animation-timing-function`属性跟`transition-timing-function`属性就是过渡的运动方式类似。同样也具有封装好的方式和贝塞尔曲线的方式。

     \- ease;默认

     \- ease-in;

     \- ease-out;

     \- ease-in-out;

     \- linear;

     \- steps(数值, 定位) 定位：start/end 默认 end 指逐步运动

   - 动画的延迟时间

     `animation-delay`属性动画的延迟时间和之前过渡的延迟时间一样使用

   - 结束状态

     在动画运行到某个位置的时候，动画停止，元素默认会迅速回到起始位置

     \- `animation-fill-mode`:设置动画结束时盒子的状态

     \- 属性值：`forwards`保持动画结束后的状态

     \- 属性值：`backwards`动画结束后回到最初的状态

   - 动画化执行顺序

     animation-direction 属性是动画的执行顺序

     \- 属性值：normal 正向，默认值

     \- 属性值：reverse 反向

   - 动画循环次数

     \- `animation-iteration-count`属性主要用来定义动画的播放次数。

     \- 其值通常为整数，但也可以使用带有小数的数字，其默认值为 1，这意味着动画将从开始到结束只播放一次。

     \- 如果取值为`infinite`，动画将会无限次的播放。

   - 简写方式

     \- animation: 动画执行时间 延迟时间 执行关键帧名称 运动方式 运动次数 结束状态;

     \- 最简方式 animation: 动画执行时间 执行关键帧名称;

     \- 执行时间和延迟时间顺序不可调整

     \- `animation: 2s 3s move linear 1 forwards reverse;`

   - 动画停止

     \- animation-play-state 属性规定动画是否正在运行或暂停。

     \- 属性值：running 运动的，默认值

     \- 属性值：paused 暂停的

   - 开源 CSS 动画库

     \- animate.css 下载下载:http://www.animate.net.cn/

     \- 元素加入需要的类名

     \- 当前元素使用 animate 属性，属性值为类名和运行时间

     \- 需要在元素先加上 `animate__animated` 类，之后在加入其他类

## 十七、响应式布局

- 多终端开发

  \- 现今需求从 pc 增加到移动端，移动端的发展迅速

  \- 多种规格的终端产生 pad，各种手机，手表，三维立体影像

  \- 用户在操作时的便捷，比如手机很小按钮的大小比例

- 响应式布局的产生

  意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在多种终端上有更好的浏览阅读体验。（参考站长素材 https://sc.chinaz.com/moban/）

  \- 响应式也叫自适应网页，可以根据“浏览设备”的不同改变布局样式和文本及图片的效果。

  \- 同时要考虑，设备的屏幕横置等因素。

- 视口的设置

  \- 视口（viewport）可以理解为浏览器窗口，不包含浏览器的内容。使用视口约束浏览器大小，让内容区域完全展示在用户面前。

  \- 响应式和移动端页面必须设置视口，pc 看不出效果

   `<meta name="viewport" content="属性名=属性值">`视口的设置通过 content 属性设置需要的值，如果 content 后面有多个属性，则属性与属性之间用英文逗号隔开

  \- width=device-width 视口宽度为设备宽度（device 设备）

  \- initial-scale=1.0 初始化视口不缩放

  \- maximum-scale=1.0 最大是缩放倍率（不缩放）

  \- user-scalable=0 用户不能缩放

  \- 简写方式`<meta name="viewport" content="width=device-width, initial-scale=1.0">`

- 注意事项

  \- 多用流式布局（文档流+浮动）和弹性布局，少用定位

  \- 文本，图片，尺寸尽量写相对单位，少用绝对单位

  \- 复杂页面不适和使用适应响应式

- vw 和 vh

  \- vw（Viewport Width）、vh(Viewport Height)是基于视图窗口的单位。

  - “视区”所指为浏览器内部的可视区域大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。

  \- vw:1vw 等于视口宽度的 1%

  \- vh:1vh 等于视口高度的 1%

- 优势

  \- % 是相对于父元素的大小设定的比率， vw、 vh 是视窗大小决定的。

  \- vw、 vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的。

  \- 元素会根据视口的大小设定宽高,切换手机型号查看效果

## 十八、技巧总结

1. ### 水平居中的方法

   - **text-align：center**；
     - 适用于 文本 span a input img 标签
     - 需要给以上元素的父元素设置text-align：center；
   - **margin：0 auto**；
     - 适用于 **div p h** 等大盒子标签 直接给当**前元素本身**设置即可
     - 注意：此方法针对的是有固定宽度的盒子 大盒子没有设置宽度默认会沾满整个父元素

2. ### 外边距的合并问题

   - 出现场景：垂直布局的块级元素 上下的margin会合并
   - 结果 ：两者距离为margin的最大值
   - 解决方法：
     - 只给其中一个盒子设置margin即可

3. ### 外边距的塌陷问题

   - 场景：互相嵌套的块级元素 子元素的margin-top会作用在父元素上
   - 结果：导致父元素一起向下移动
   - 解决方法：
     - 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
     - 给父元素设置overflow：hidden
     - 转换成行内元素
     - 设置浮动

4. ### 行内元素的margin和padding中的无效情况

   - 场景：给行内元素设置margin和padding时
   - 结果：
     - 水平方向的margin和padding在布局中生效
     - 垂直方向的margin和padding在布局中无效

5. ### HTML嵌套规范注意点

   - 块级元素一般作为大容器 可以嵌套：文本、块级元素、行内元素、行内块等

     - **但是 p标签中不建议嵌套div、p、h等块级标签**

       ```html
       <p>
       	<div> </div>
       </p>
       ```

     - 浏览器会将div上下分成两个部分 自动将缺失的标签补齐 如下

       ```html
       <p> </p>
       	<div> </div>
       <p> </p>
       ```

   - a标签内部可以嵌套任意元素

     - **但是不能嵌套a标签自己**