HTML/CSS学习笔记（3）

• 文档流（normal flow）：
  • 网页是一个多层的结构，一层摞着一层，通过CSS可以分别为每一层来设置样式
    • 作为用户只能看到最顶上一层
    • 最底下的一层称为文档流，文档流是网页的基础，我们所创建的元素默认都在文档流中进行排列
    • 元素主要有两个状态：在文档流中，不在文档流中（脱离文档流）
      • 元素在文档流中的特点
        • 块元素：
          • 在页面中独占一行（自上向下垂直排列）
          • 默认宽度是父元素的全部（把父元素填满）
          • 默认高度是被内容撑开（被子元素撑开）
        • 行内元素：
          • 不会独占页面的一行，只占自身的大小
          • 在页面中由左向右水平排列，如果一行中不能容内所有的行内元素，则元素会换到第二行继续自左向右排列
          • 默认宽度和高度都是被内容撑开
• 盒模型（盒子模型，框模型 box model）：
  • CSS将页面中的所有元素都设置为了一个矩形的盒子，则对页面的布局就变成将不同盒子摆放到不同位置
  • 每一个盒子的组成：
    • 内容区（content）：元素中的所有子元素和文本内容都在内容区中排列
      • 内容区的大小由width和height两个属性来设置
    • 内边距（padding）：内容区和边框之间的距离
      • 一共有四个方向的内边距：
        • padding-top:
        • padding-right:
        • padding-bottom:
        • padding-left:
        • padding：内边距的简写属性，可以同时指定四个方向的内边距，规则同border-width
      • 内边距的设置会影响到盒子的大小
      • 背景颜色会延伸到内边距上
      • 一个盒子的可见框的大小：由内容区、内边距和边框共同决定
        • 所以在计算盒子大小时，需要将这三个区域加到一起计算
    • 边框（border）：属于盒子边缘，边框里面属于盒子内部，除了边框都是盒子的外部
      • 设置三个样式：
        • 边框的宽度：border-width（有默认值，一般为3个像素）
          • 可以指定四个方向的边框的宽度
            • 四个值：上 右 下 左
            • 三个值：上 左右 下
            • 两个值：上下 左右
            • 一个值：上下左右
          • border-xxx-width：xxx可以是top、right、bottom、left：单独指定某一个边的宽度
        • 边框的颜色：border-color（默认使用color的颜色值）
          • 可以指定四个方向的边框的颜色，规则和宽度一样
        • 边框的样式：border-style：（默认值是none，表示没有边框）
          • solid：实线
          • dotted：点状虚线
          • dasher：线状虚线
          • double：双线
          • 可以指定四个方向的边框的样式，规则同上
          • border简写属性，通过该属性可以同时设置边框所有的相关样式，并且没有顺序要求
            • border:10px solid orangered
          • border-xxx：top、right、bottom、left
            • 如果哪一边不设置属性：border-xxx:none
      • 边框的大小会影响到整个盒子的大小
    • 外边距（margin）：
      • 不会影响盒子可见框的大小，但会影响盒子的位置
      • 一共有四个方向的外边距：
        • margin-top:上外边距，设置一个正值，元素会向下移动
        • margin-right:右外边距，默认情况下设置right不会产生任何效果
        • margin-bottom:下外边距，设置一个正值，下边的元素会向下移动
        • margin-left:左外边距，设置一个正值，元素会向右移动
      • margin设置负值，则元素会向相反的方向移动（相对于正值的方向）
      • 元素在页面中是按照自左向右的顺序排列
        • 默认情况下，若设置的左和上外边距，则会移动元素自身
        • 设置右和下外边距，则会移动其他元素
      • margin的简写属性：同时设置四个方向的外边距，同padding一样
      • 会影响到盒子实际占用空间的大小
  • 元素水平方向的布局：
    • 元素在其父元素中水平方向的位置由以下几个属性共同决定：
      • margin-left
      • border-left
      • padding-left
      • width
      • padding-right
      • border-right
      • margin-right
      • 一个元素在其父元素中，水平布局必须满足以下等式：
        • margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度（必须满足的等式）
        • 以上等式必须满足，如果相加结果使等式不成立，则称为过渡约束，则等式会自动调整
          • 若超出了父元素内容区，则会自动调整margin-right为负值
          • 调整的情况：
            • 如果这七个值中没有为auto的情况，则浏览器会自动调整margin-right值以使等式满足
            • 这七个值中有三个值可以设置为auto：width、margin-left、margin-right
              • 如果某个值为auto，则会自动调整为auto的那个值以使等式成立
              • width的值默认为auto
              • 如果将一个宽度和一个外边距设置为auto，则宽度会调整到最大，设置为auto的外边距会自动为0
              • 如果将三个值都设置为auto，则外边距都是0，宽度最大
              • 如果将两个外边距设置为auto，宽度固定值，则会将外边距设置为相同的值
                • 所以经常利用这个特点来使一个元素在其父元素中水平居中
                • 示例：width: xxpx; margin:0 auto;（上下为0，左右为auto）
  • 元素垂直方向的布局：
    • 默认情况：父元素的高度被内容撑开
    • 子元素在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出
      • 使用overflow属性来设置父元素如何处理溢出的子元素
        • 可选值：
          • visible：默认值，子元素会从父元素中溢出，在父元素外部的位置显示
          • hidden：溢出的内容将会被裁剪，不会显示
          • scroll：生成两个滚动条（水平和垂直方向），通过滚动条查看完整的内容
          • auto：根据需要生成滚动条
      • overflow-x：单独处理水平方向
      • overflow-y：单独处理垂直方向
  • 垂直外边距的重叠（折叠）：
    • 相邻的垂直方向外边距会发生重叠现象
    • 兄弟元素间：
      • 相邻垂直外边距会取两者之间的较大值（两者都是正值）
      • 特殊情况：
        • 如果相邻的外边距一正一负，则取两者的和
        • 如果相邻的外边距都是负值，则取两者中绝对值较大的
      • 兄弟元素间的外边距的重叠，对于开发有利，不需要进行处理
    • 父子元素间：
      • 子元素的相邻外边距会传递给父元素（上外边距）
      • 父子外边距的折叠会影响到页面的布局，必须要进行处理
  • 行内元素的盒模型：
    • 行内元素不支持设置宽度和高度
    • 行内元素可以设置padding，但是垂直方向的padding不会影响页面的布局
    • 行内元素可以设置border，但是垂直方向的border不会影响页面的布局
    • 行内元素可以设置margin，但是垂直方向的margin不会影响页面的布局
      • a（超链接）也是行内元素，不能设置宽和高
    • display：用来设置元素显示的类型：
      • 可选值：
        • inline：将元素设置为行内元素
        • block：将元素设置为块元素
        • inline block：将元素设置为行内块元素
          • 即可以设置宽度和高度，又不会独占一行
        • table：将元素设置为一个表格
        • none：元素不在页面中显示
    • visibility：用来设置元素的显示状态
      • 可选值：
        • visible：默认值，元素在页面中正常显示
        • hidden：元素在页面中隐藏，不显示，但是依然占据页面的位置
  • 默认样式：
    • 通常情况下，浏览器会为元素设置一些默认样式
    • 默认样式的存在会影响到页面的布局，通常情况下编写网页时必须要去除浏览器的默认样式（pc端的页面）
      • 列表项中：list-style:none（去除项目符号）
        • 给所有元素去除默认样式：设置*{margin:0;top:0;}
      • 在资源管理器中建立文件夹，将CSS样式复制到文件夹里，再在head中style前加入以下代码：
        • <link rel="stylesheet" href="./css/reset.css">
        • <link rel="stylesheet" href="./css/normalize.css">
      • 重置样式表，专门用来对浏览器的样式进行重置（两者选一个使用即可）：
        • reset.css直接去除了浏览器的默认样式
        • normalize.css对默认样式进行统一
  • 练习：
    • 要让文字在父元素中垂直居中，只需将父元素的line-height设置为一个和父元素height一样的值即可
    • 去除下划线 ：text-decoration: none;
  • 盒子的大小：
    • 默认情况下，盒子可见框的大小由内容区、内边距、边框共同决定
    • box-sizing用来设置盒子尺寸的计算方式（设置width和height的作用）
      • 可选值：
        • content-box:默认值，宽度和高度用来设置内容区的大小
        • border-box:宽度和高度用来设置整个盒子可见框的大小
          • width和height指内容区和内边距和边框的总大小
  • 轮廓和圆角：
    • outline用来设置元素的轮廓线，用法和border一样
      • 轮廓和边框不同的点，就是轮廓不会影响到可见框的大小
    • box-shadow用来设置元素的阴影效果，阴影不会影响页面布局
      • 第一个值：水平偏移量，设置阴影的水平位置，正值向右移动，负值向左移动
      • 第二个值：垂直偏移量，设置阴影的垂直位置，正值向下移动，负值向上移动
      • 第三个值：阴影的模糊半径
      • 第四个值：阴影的颜色，一般用rgba(0,0,0,.3)（透明的颜色）
        • box-shadow:0px 0px 50px rgba(0, 0, 0, .3);
    • border-radius用来设置圆角（圆的半径大小）
      • 可以分别制定四个角的圆角
        • 四个值：左上，右上，右下，左下
        • 三个值：左上，右上/左下，右下
        • 两个值：左上/右下，右上/左下
        • 一个值：左上/右上/右下/左下
        • 将元素设置为一个圆形：
          • border-radius: 50%;
      • border-top-left-radius，border-top-right-radius，border-bottom-left-radius，border-bottom-right-radius;
        • border-top-left-radius: 100px 50px;（水平方向，垂直方向）
• 浮动：
  • 通过浮动可以使一个元素向其父元素的左侧或右侧移动
    • 使用float属性来设置元素的浮动
      • 可选值：
        • none：默认值，元素不浮动
        • left：元素向左浮动
        • right：元素向右浮动
    • 注意：元素设置浮动以后，水平布局的等式（七个值）便不需要强制成立，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动
    • 浮动的特点：
      • 浮动的元素会完全脱离文档流，不再占据文档流中的位置
      • 设置浮动以后元素会向父元素左侧或右侧移动
      • 浮动元素默认不会从父元素中移出
      • 浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
      • 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
      • 浮动元素不会超过它上边的浮动的兄弟元素，最多就是和它一样高
    • 浮动主要作用：让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局
    • 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以可以利用浮动来设置文字环绕图片的效果
    • 元素设置浮动以后，会从文档流中脱离，元素的一些特点也会发生变化
      • 脱离文档流的特点：
        • 块元素：
          • 不再独占页面的一行
          • 脱离文档流后，块元素的宽度和高度默认都被内容撑开
        • 行内元素：
          • 脱离文档流后会变成块元素，特点和块元素一样，可以设置宽度和高度，默认被内容撑开
        • 脱离文档流后，不需要再区分块和行内元素
  • 练习：
    • line-height：将文字在父元素中垂直居中
  • 高度塌陷的问题：
    • 在浮动布局中，父元素的高度默认被子元素撑开，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离，将会无法撑起父元素的高度，导致父元素的高度丢失
    • 父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱
    • 所以高度塌陷是浮动布局中比较常见的一个问题，必须要进行处理
    • BFC（Block Formatting Context）块级格式化环境：
      • 是css中一个隐含的属性，可以问一个元素开启BFC，开启后该元素会变成一个独立的布局区域
      • 元素开启BFC后的特点：
        • 开启BFC的元素不会被浮动元素所覆盖
        • 开启BFC的元素的子元素和父元素的外边距不会重叠
        • 开启BFC的元素可以包含浮动的子元素
      • 可以通过一些特殊方式来开启BFC：
        • 设置元素的浮动（不推荐）
        • 将元素设置为行内块元素（不推荐）
          • display:inline-block;
        • 将元素的overflow设置为一个非visible的值
          • 常用overfolow:hidden;开启其BFC以使其可以包含浮动元素
    • clear：
      • 如果不希望某个元素因为其他元素浮动的影响改变位置，可以通过clear属性来清除浮动元素对当前元素所产生的影响
      • 可选值：
        • left：清除左侧浮动元素对当前元素的影响
        • right：清除右侧浮动元素对当前元素的影响
        • both：清除两侧中最大影响的那侧
      • 原理：设置清除浮动以后，浏览器会自动为元素添加一个上外边距，以使其位置不受其他元素的影响
    • 使用after伪元素解决高度塌陷：
      • .box1::after{content: '';display: block;clear: both; }
        • after默认为行内元素，所以要将它转换为块元素
    • clearfix：可以同时解决高度塌陷和外边距重叠的问题
      • 在遇到这些问题时，直接使用clearfix这个类
      • .clearfix::before,.clearfix::after{content: ''; display: table; clear: both;}
• position（定位）：
  • 是一种更加高级的布局手段，通过定位可以将元素摆放到页面的任意位置
  • 使用position属性来设置定位：
    • 可选值：
      • static：默认值，元素是静止的，没有开启定位
      • relative：开启元素的相对定位
      • absolute：开启元素的绝对定位
      • fixed：开启元素的固定定位
      • sticky：开启元素的粘滞定位
    • 相对定位：当元素的position属性值设置为relative时则开启了元素的相对定位
      • 特点：
        • 元素开启后，如果不设置偏移量，元素不会发生任何的变化
        • 相对定位是参照于元素在文档流中的位置进行定位的（原来的位置）
        • 相对定位会提升元素的层级
        • 相对定位不会使元素脱离文档流
        • 相对定位不会改变元素的性质（块还是块，行内还是行内）
      • 偏移量offset：当元素开启了定位以后，可以通过偏移量来设置元素的位置
        • 定位元素垂直方向的位置由top和bottom两个属性来控制
          • top：定位元素和定位位置上边的距离
          • bottom：定位元素和定位位置下边的距离
            • 通常情况下只会使用其中之一
            • top值越大，定位元素越向下移动；bottom值越大，定位元素越向上移动
        • 定位元素水平方向的位置由left和right两个属性来控制
          • left：定位元素和定位位置左侧的距离
          • right：定位元素和定位位置右侧的距离
            • 通常情况下只会使用其中之一
            • left值越大，元素越靠右；right值越大，元素越靠左
    • 绝对定位：当元素的position属性值设置为absolute时则开启了元素的绝对定位
      • 特点：
        • 开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化
        • 开启后，元素会从文档流中脱离
        • 绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
        • 绝对定位会使元素提升一个层级
        • 绝对定位元素是相对于其包含块进行定位的
          • 包含块containing block：
            • 正常情况下：包含块就是离当前元素最近的祖先块元素
              • <div><div></div></div>
              • <div><span><em>hello</em></span></div> -> span和em的包含块都是div
            • 绝对定位的包含块：包含块就是离它最近的开启了定位的祖先元素
              • 如果所有的祖先元素都没有开启定位，则根元素就是它的包含块
                • html：根元素、初始包含块
    • 固定定位：当元素的position属性值设置为fixed时则开启了元素的固定定位
      • 固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样
        • 唯一不同的是固定定位永远参照于浏览器的视口进行定位
        • 固定定位的元素不会随网页的滚动条滚动
    • 粘滞定位：当元素的position属性值设置为sticky时则开启了元素的粘滞定位
      • 和相对定位的特点基本一致
        • 不同的是粘滞定位可以在元素到达某个位置时将其固定
      • 兼容性不好
  • 绝对定位元素：
    • 水平布局：left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right=包含块的内容区的宽度
    • 当开启了绝对定位后，水平方向的布局等式就需要添加left、right两个值，此时规则和之前一样，只是多添加了两个值：
      • 当发生过度约束，如果9个值没有auto，则自动调整right值以使等式满足
      • 如果有auto，则自动调整auto的值，使等式满足
      • 可以设置auto的值：margin width left right
      • 因为left和right的值默认是auto，所以如果不指定left和right，则等式不满足时，会自动调整这两个值
      • 水平居中：margin-left/right:auto; left:0; right:0;
    • 垂直方向布局的等式也必须要满足：top+margin-top/bottom+padding-top/bottom+border-top/bottom+bottom+height=包含块的高度
      • 垂直居中：margin-top: auto;margin-bottom: auto;top: 0;bottom: 0;
  • 对于开启了定位的元素，可以通过z-index属性来指定元素的层级
    • z-index需要一个整数作为参数，值越大，元素的层级越高；元素的层级越高，越优先显示
      • 如果元素的层级一样，则优先显示靠下的元素
      • 祖先元素的层级再高也不会盖住后代元素
  • 练习：
    • 将背景颜色只设置到内容区，边框和内边距不再有背景颜色：
      • background-clip:content-box;border: 2px solid transparent;

• 字体和背景：
  • 字体相关的样式：
    • color：设置字体颜色
    • font-size：设置字体的大小
      • 单位：
        • em：相当于当前元素的一个font-size
        • rem：相当于根元素的一个font-size
    • font-family字体族：设置字体的格式
      • 可选值：
        • serif：衬线字体
        • sans-serif：非衬线字体
        • monospace：等宽字体
          • 以上三个指定字体的类别，浏览器会自动使用该类别下的字体（一般不会直接这样写）
        • cursive：草书字体
        • fantasy：虚幻字体
      • font-family可以同时指定多个字体，多个字体间使用“，”隔开
        • 字体生效时优先使用第一个，第一个无法使用时则使用第二个，以此类推
    • font-face可以将服务器中的字体直接提供给用户去使用
      • font-family：指定字体的名字（自己起名字）
      • src：服务器中字体的路径
      • 问题：加载速度、版权
  • 图标字体：
    • 在网页中经常使用一些图标，可以通过图片来引入图标，但是图片本身比较大，并且非常不灵活
    • 所以在使用图标时，可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入，这样就可以通过使用字体的形式来使用图标
      • 使用fontawesome：将css和webfonts移动到项目中（放在一个文件夹下），再将all.xss引入到网页中
        • 使用方式：
          • 直接通过类名来使用图标字体
            • <i class="fas fa-bell"></i> fas表示类名，fa-bell表示要使用的图标
            • <i class="fab fa-accessible-icon"></i>
          • 通过伪元素设置
            • 找到要设置图标的元素通过before或after选中
            • 在content中设置字体的编码
            • 设置字体的样式
              • fab：font-family: 'Font Awesome 5 Brands';
              • fas：
                • font-family: 'Font Awesome 5 Free';
                • font-weight: 900;
          • 通过实体来使用图标字体：&#x图标的编码
      • 使用阿里字体库
  • 行高ling height：
    • 指文字占有的实际高度，可以通过ling height设置行高
      • 行高可以直接指定一个大小（px em），也可以直接为行高设置一个整数（如果是一个整数，行高将会是字体指定的倍数）
      • 默认行高为1.33
      • 字体框：字体存在的格子，设置font-size实际上就是设置字体框的高度
      • 行高会在字体框的上下平均分配
      • 可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中
      • 行间距 = 行高 - 字体大小
  • 字体的简写属性：
    • font可以设置字体相关的所有属性
      • 语法：
        • font：字体大小 /行高 字体族
          • 行高可以省略不写（如果不写会使用默认值），设置line-height时将其写在font后
          • font-weight：字重，即字体的加粗（可以省略不写）
            • 可选值：
              • normal：默认值，不加粗
              • bold：加粗
              • 提供100-900九个级别（没什么用）
          • font-style：字体的风格（可以省略不写）
            • normal：正常
            • italic：斜体
  • 文本的样式：
    • text-align：文本的水平对齐
      • 可选值：
        • left：左对齐；right：右对齐；center：居中对齐；justify：两端对齐
    • vertical-align：文本的垂直对齐
      • 可选值：
        • baseline：基线对齐（默认值）；top：顶部对齐；bottom：底部对齐；middle：居中对齐
        • 设置数值
      • 引入图片设置vertical-align，只要不设置baseline就可以消除图片下面的间距
    • text-decoration：设置文本修饰
      • 可选值：
        • none：什么都没有
        • underline：下划线
        • line-through：删除线
        • overline：上划线
      • 还可以指定线的颜色和样式：text-decoration: overline red dotted;
    • white-space：设置网页如何处理空白
      • 可选值：
        • normal：正常
        • nowrap：不换行
        • pre：保留空白
    • 设置省略号：width: 200px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
  • 背景：
    • background-color：设置背景颜色
    • background-image：设置背景图片
      • 可以同时设置背景图片和颜色，这样背景颜色将会成为图片的背景色
      • 如果背景图片小于元素，则背景图片会自动在元素中平铺，将元素铺满
      • 如果背景图片大于元素，将会有一部分背景图片无法完全显示
    • background-repeat：设置背景的重复方式
      • 可选值：
        • repeat：默认值，背景会沿着x、y轴双方向重复
        • repeat-x：沿着x轴方向重复
        • repeat-y：沿着y轴方向重复
        • no-repeat：不重复，图片有多大就显示多大
    • background-position：设置背景图片的位置
      • 设置方式：
        • 通过top、left、right、bottom、center几个表示方位的词来设置背景图片的位置（九宫格）
          • 使用方位词时必须要同时指定两个值，如果只写一个，则第二个默认是center
          • background-position: top left;（默认）
        • 通过偏移量指定背景图片的位置：水平方向的偏移量 垂直方向的偏移量
    • background-clip：设置背景的范围
      • 可选值：
        • border-box：默认值，背景会出现在边框的下边
        • padding-box：背景不会出现在边框，只出现在内容区和内边距
        • content-box：背景只会出现在内容区
    • background-origin：背景图片的偏移量计算的原点
      • 可选值：
        • padding-box：默认值，background-position从内边距处开始计算
        • content-box：背景图片的偏移量从内容区处计算
        • border-box：背景图片的偏移量从边框处计算
    • background-size：设置背景图片的大小
      • 第一个值表示宽度，第二个值表示高度
        • 如果只写一个，则第二个值默认是auto
        • background-size: 100% auto; 宽度显示完全，高度等比例缩放
        • cover： 图片的比例不变，将元素铺满
        • contain：图片的比例不变，将图片在元素中完整显示
    • background-attachment：背景图片是否跟随元素移动
      • scroll：默认值，背景图片会跟随元素移动
      • fixed：背景图片会固定在页面中，不会随元素移动
    • background：背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置
      • 该样式没有顺序要求，也没有哪个属性是必须写的
      • 注意：
        • background-size必须写在background-position的后边，并且使用/隔开
          • background-position/background-size
        • background-origin和background-clip两个央视，origin要在clip的前边
  • 练习：
    • 按钮练习：
      • 图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载
        • 浏览器加载外部资源时是按需加载的，用则加载，不用则不加载
          • link会首先加载，而hover和active会在指定状态出发时才会加载
        • 解决图片闪烁的问题：
          • 可以将多个小图片统一保存到一个大图片中，然后通过调整background-position来显示响应的图片，这样图片会同时加载到网页中，可以有效避免出现闪烁的问题
          • 这个技术在网页中应用十分广泛，被称为CSS-Sprite，这种图称为雪碧图
          • 使用雪碧图的步骤：
            • 先确定要使用的图标
            • 测量图标的大小
            • 根据测量结果创建一个元素
            • 将雪碧图设置为元素的背景图片
            • 设置一个偏移量以显示正确的图片
          • 雪碧图的特点：
            • 一次性将多个图片加载进页面，降低请求的次数，加快访问速度，提升用户体验
  • 渐变：
    • 渐变是图片，需要通过background-image来设置
    • 线性渐变linear-gradient：颜色沿着一条直线发生变化
      • linear-gradient(red,yellow)：从上往下，红色在开头，黄色在结尾，中间是过渡区域
        • 在开头可以指定一个渐变的方向：
          • to left，to right，to bottom，to top（还可以两两组合）
          • xxxdeg： deg表示度数（180表示默认）
          • xturn： turn表示圈
        • 渐变可以同时指定多个颜色，多个颜色默认情况下平均分布
        • 可以手动指定渐变的分布情况
      • repeating-linear-gradient：可以平铺的线性渐变
    • 径向渐变radial-gradient：放射性效果（从中间向四周）
      • 默认情况下径向渐变的形状根据元素的形状来计算，也可以手动指定径向渐变的大小
        • 正方形-->圆形；长方形-->椭圆形
        • circle：正圆；ellipse：椭圆
      • 也可以通过at指定渐变的位置
        • 语法：
          • radial-gradient(大小 at 位置，颜色 位置，...)
            • 大小：circle，ellipse，closest-side近边，closest-corner近角，farthest-side远边，farthest-corner远角
            • 位置：top，right，left，bottom
• 动画：
  • 过渡transition：
    • 通过过渡可以指定一个属性发生变化时的切换方式，可以创建好的效果来提升用户体验
    • 属性：
      • transition-property：指定要执行过渡的属性
        • 多个属性使用逗号,隔开；如果所有属性都要过渡，则使用all关键字
        • 大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡
      • transition-duration：指定过渡效果的持续时间
        • 时间单位：s和ms 1s=1000ms
      • transition-timing-function：过渡的时序函数，即指定过渡的执行方式
        • 可选值：
          • ease：默认值，慢速开始，先加速再减速
          • linear：匀速运动
          • ease-in：加速运动
          • ease-out：减速运动
          • ease-in-out：先加速后减速
          • cubic-bezier()贝塞尔曲线：指定时序函数
            • https://cubic-bezier.com
          • steps()：分步执行过渡效果（但过渡效果不流畅）
            • 可以设置第二个值：
              • end：表示在时间结束时执行过渡（默认值）
              • start：表示在时间开始时执行过渡
      • transition-delay：过渡效果的延迟
        • 等待指定时间后再执行过渡
    • transition可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟
  • 动画animation：
    • 和过渡类似，都可以实现一些动态的效果
    • 不同：过渡需要在某个属性发生变化时才会触发，动画可以自动触发动态效果
    • 设置动画效果，必须先要设置一个关键帧，关键帧设置了动画执行的每一个步骤
    • 用@keyframes 来设置：
      • from{}表示动画的开始位置，to{}表示动画的结束位置（可以使用百分数）
    • animation-name：对当前元素生效的关键帧的名字
    • animation-duration：动画执行时间
    • animation-delay：动画的延时
    • animation-timing-function：动画的时序函数
    • animation-iteration-count：动画执行的次数
      • 可选值：指定次数或者infinite无限次
    • animation-direction：动画运行的方向
      • 可选值：
        • normal（默认值）：从from向to运行，每次都是这样
        • reverse：从to向from运行
        • alternate：从from向to运行，重复执行时反向执行
        • alternate-reverse：从to向from运行，重复执行时反向执行
    • animation-play-state：设置动画的执行状态
      • 可选值：
        • running（默认值）：动画执行
        • paused：动画暂停
    • animation-fill-mode：动画的填充模式
      • 可选值：
        • none（默认值）：动画执行完毕，元素回到原来位置
        • forwards：动画执行完毕，元素停止在动画结束的位置
        • backwards：动画延时等待时，元素就会处于开始位置
        • both：结合forwards和backwards
  • 变形：
    • 通过CSS改变元素的形状或位置，不会影响到页面的布局
    • transform设置元素的变形效果
  • 平移：
    • translateX()：沿着x轴方向平移
    • translateY()：沿着y轴方向平移
    • translateZ()：沿着z轴方向平移
      • 在平移元素时，百分比是相对于自身计算的
        • top: 0;left: 0;bottom: 0;margin: auto;（这种居中方式只适用于元素的大小确定时）
        • 元素大小不确定时居中：left: 50%;top: 50%;transform: translateX(-50%) translateY(-50%);
      • z轴平移就是调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离
        • 距离越大，元素离人越近
      • z轴平移属于立体效果（近大远小），默认情况下网页不支持透视，如果需要看见效果，必须要设置网页的视距
        • 在html{}/body{}中设置perspective，即人眼距离网页的距离
  • 旋转：
    • 通过旋转可以使元素沿着x、y、z旋转指定的角度
      • transform：rotateX()/rotateY()/rotateZ()，单位是deg
    • backface-visibility：是否显示元素的背面
      • visibility：默认值
      • hidden：不显示
    • transform-style: preserve-3d：设置3d变形效果
  • 缩放：
    • 对元素进行缩放的函数：
      • scaleX()：水平方向
      • scaleY()：垂直方向
      • scale()：双方向
      • scaleZ()：要设置3d效果才能看出来
    • transform-origin：变形的原点
      • 默认值是center center
• less：
  • 一个css的增强版，通过css可以编写更少的代码实现更强大的样式
  • 在less中添加了许多新的特性，如对变量的支持、对mixin的支持
  • less的语法大体上和css语法一致，但是less中增添了许多对css的扩展
    • 所以浏览器无法直接执行less代码，要执行必须要将less转换为css，然后再由浏览器执行
  • 兼容性不好
    • css原生也支持变量的设置
      • --变量名，var(--变量名)
    • calc()计算函数
  • 语法：
    • //less中的单行注释
    • 变量：
      • 在变量中可以存储一个任意的值，并且可以在需要时，任意修改变量的值
      • 语法：@变量名
      • 使用：
        • 直接使用：以@变量名 的形式
        • 作为类名或者一部分值使用：以@{变量名} 的形式
      • 变量发生重名时，优先使用比较近的变量
        • 可以在变量声明前就使用变量
    • 父元素和扩展：
      • &：表示外层的父元素
      • extend()：对当前选择器扩展指定选择器的样式（选择器分组）
      • 直接对指定的样式进行引用，即mixin混合：.p3{.p1();}
      • 使用类选择器时可以在选择器后边添加一个括号，实际上就是创建了一个mixins
      • 在混合函数中可以直接设置变量（09_css/css/syntax2.less）
      • average()：设置颜色的平均值
      • darken(颜色,加深程度百分数)：加深颜色
    • 在less中所有的数值都可以直接进行计算
    • import用来将其他的less引入到当前的less：@import “”；