css笔记

css（前端三要素之一）
1.介绍
  作用：修饰页面的
  css：层叠样式表
       层叠：多个样式用于同一个元素
       样式：color font-size
       表：css代码，css文件
       选择器  样式   布局
  工作原理：加载html，然后加载css，将html和css结合，创建DOM树，浏览器显示DOM  
  DOM：文档对象模型，树形结构， 元素、属性、文本称之为节点
2.语法
  声明
      属性名：属性值
      css中区分大小写，对大小写比较敏感
  声明块
      将多个声明放在一个 { } 里面，每个声明之间使用；分隔
      {
          color：red；
          font-size：12px；
      }
  规则
    选择器{
        color：red；
    }
  注释:  /*注释内容*/   快捷键 ctrl+/
      作用：1.记录你的编程思路
                2.便于后期代码的维护
  空白：可以在css代码中添加一些空白（空格 回车），提高代码的可读性
        color：red；
        font-size：12px；
  速写形式：
      font
        font-size
        font-weight
      padding: 1px 2px 3px 4px;   顺时针（上右下左）
        padding-top
        padding-left
        padding-right
        padding-bottom
      margin
  如何在html中使用css
  1）行内样式
    将样式写在元素的style属性中
    <div style='color:red;font-size:22px;'>
    缺点：结构和样式没有分离
              代码的复用率低
    优点：优先级高
  2）内联样式
    将代码写在head标签中的style标签中
    <style>
        选择器 {
          color:red,
          font-size:19px;
        }
    </style>
    缺点：代码的复用率不高
    优点：结构和样式可以分离
  3）外部样式
    在外部定义一个后缀名为.css的文件，在head中使用link标签引入
    优点：结构和样式分离
          复用率提高
选择器+规则（样式）+布局+动画
3.css选择器
  作用：选择元素
  核心选择器
    1）标签选择器
       div{
         规则;
         规则;
         ...
       }
       选中标签为div的所有样式
    2）id选择器
      #id{
        规则;
        规则;
        ...
      }

    3）类选择器
      .class{
        规则;
        规则;
        ...
      }

    4）普遍选择器
      *
  层次选择器
    1）后代选择器
       ul li{
         规则;
         规则;
         ...
       }
       选中ul下面的所有li
    2）子代选择器
       .bottom>p{
         规则;
         规则;
         ...
       }
       选中class为bottom的直接子元素p
    3）相邻同胞选择器
      .jiangsu+li{
        规则;
        规则;
        ...
      }
      选中class为江苏这个元素的下一个兄弟元素
    4）一般同胞选择器
      .jiangsu~li{
        规则;
        规则;
        ...
      }
      选中class为江苏的所有兄弟元素
  多选择器
    1）逗号选择器
      h1,h2,h3,.test{
        规则;
        规则;
        ...
      }
      选中h1、h2、h3、class为test的元素
    2）组合选择器
      a.baidu{
        规则;
        规则;
        ...
      }
      选中class为baidu的a标签
  属性选择器
      [atrr]  选中具有属性atrr的元素，不管属性的值为多少

      [atrr=val] 选中具有atrr属性，并且值为val

      [atrr ^= val] 选中具有atrr属性，并且值以val开头

      [atrr $= val] 选中具有atrr属性，并且值以val结尾

      [atrr *= val] 选中具有atrr属性，并且值包含val

      [atrr ~= val] 选中具有atrr属性，并且其中一个值为val
 伪类选择器
      子代元素相关的伪类选择器
        ul:first-child{
          规则;
          规则;
          ...
        }
        选中ul的第一个孩子
        ul:last-child{
          规则;
          规则;
          ...
        }
        选中ul的最后一个孩子
        ul:nth-child(参数){
          规则;
          规则;
          ...
        }
        参数的取值：
             1.数字
             2.关键字(odd=>奇数 even=>偶数)
        选中ul的参数值的孩子
      元素状态相关的伪类选择器
          :hover   鼠标悬停在上面时
          :link
          :visited
  伪元素选择器
       ::after    选中之后不存在的元素
       ::before   选中之前不存在的元素
4.优先级
  1）权重(特性值)  比较权重
  2）权重一样的话，后面的样式会覆盖前面的样式
  3) !important
    通过4个特性值来量化一个选择器
    Thousands
    声明在元素的style属性中。特性值记为1000
    Hundreds
    包含在一个选择器中的所有ID选择器，特性值记为100
    Tens
    包含在一个选择器中的所有类选择器，属性选择器，伪类选择器，特性值记为10    
    Ones
     包含在一个选择器中的所有元素选择器，伪元素选择器，特性值记为1
5.继承
  CSS中有些规则将会默认被子元素继承，有些则不会。
    可继承属性：font系列属性、文本系列属性、列表系列属性、cursor、visibility等
    不可继承属性：margin、padding、border等
  CSS提供了三个特殊的值用来处理继承
    inherit     继承父元素的样式    
    initial     不继承。应用浏览器的默认样式    
    unset     不设定，表现该规则本来特性，即如果该规则具有继承属性则继承，否则不继承。
6.单位
  颜色
    关键字        red、pink、teal
    十六进制的值  #ffffff(白) #cccccc(灰色) #ff0000(红色) #fff
    rgb函数      rgb(0,0,0)白  rgb(0~255,0~255,0~255)
    rgba函数     rgba(0~255,0~255,0~255,0~1)
    hsl函数
    hsla函数
  长度
    绝对单位  
      px  像素
    相对单位
      em  相对于当前元素的字体大小
        div  font-size：12px    1em=12px  width=10em  
      rem  相对于html上的字体大小
        div  html：10px  1rem=10px
      %
选择器+样式(文本相关、字体、盒子、表格样式、列表样式)
7.文本相关的样式
     文字相关的样式(可以被继承)
       color          给文本指定颜色(关键字、十六进制的值、rgb函数、rgba函数)
       font-family    给文本设置字体(字体栈、字体族)
         serif     有衬线的字体,笔画结尾有特殊的装饰线或衬线
         sans-serif    无衬线的字体，笔画结尾是平滑的字体
         monospace    等宽字体，用于代码，字体中每个字宽度相同
         cursive     草书，这种字体有的有连笔，有的还有特殊的斜体效果。
         fantasy     梦幻装饰字体 ，具有特殊艺术效果的字体
         网络字体
            @font-face{
                font-family: myfont;
                src: url(./FZYangNSXSJW.TTF);
            }
            p{
                font-family: myfont;
            }
      font-style      用于打开和关闭斜体
         normal         【默认】正常字体，关闭斜体
         italic           斜体                
         oblique            模拟斜体
      font-weight   字体的粗细程度
         normal          默认】正常,400
         bold           加粗字体,700                
         lighter      设置当前元素字体比父元素更细
         bolder          设置当前元素字体比父元素更粗
         100–900       数值类型的粗细程度（值越大字体越粗）
      text-align  文本的排列方式
         left       左对齐
         center      居中
         right      右对齐
      text-transform  允许字体变形
          none     防止任何改变            
          uppercase      将文本转换为大写                
          lowercase      将文本转换为小写        
          capitalize    将所有单词第一个字母转换为大写
          full-width    转换为类似于一个等宽字体
      text-decoration  (line style color)
         text-decoration-line
            none     取消所有文本修饰            
            underline      为文本添加下划线            
            overline        为文本添加上划线            
            line-through 为文本添加删除线
         text-decoration-style
            solid(实线)
            wavy(波浪线)
            dashed(虚线)
            dotted(点状线)
            double(双实线)
         Text-decoration-color
            关键字、十六进制的值、rgb函数、rgba函数
         text-shadow (h-shadow v-shadow blur color)    文本的阴影
            none      取消所有阴影            
            h-shadow       必需。水平阴影的位置。允许负值        
            v-shadow      必需。垂直阴影的位置。允许负值        
            blur            可选。模糊的距离
            color            可选。阴影的颜色。参阅 CSS 颜色值
字体图标库
   iconfont
8.列表样式
   list-style
     list-style-type       列表类型
       none              没有类型
       disc              一个实心的小黑圆圈
       circle          一个空心的小圆圈    
       square          一个块
       decimal          数字
       lower-roman       小写罗马数字    
       upper-roman      大写罗马数字
       decimal-leading-zero      十进制的值
     list-style-image
       none        没有图片
       url()       图片的路径
     list-style-position
       outside     [默认值]显示在主块的外部
       inside      显示在主块的内部
9.其他样式
    cursor       调整光标悬浮到链接上的时候光标的形状
        url    需使用的自定义光标的 URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。鼠标样式栈 url('./images/zhankai.png'), help
        default     默认光标（通常是一个箭头）  
        auto      默认。浏览器设置的光标     
        pointer     手型     
        crosshair  十字交叉    
        wait    等待    
        help    帮助      
        move    移动      
        text    文本
    line-height          设置文本的行高
        给元素设置行高=盒子的高度，那么盒子中的文本将垂直居中
        一般用相对单位
    outline              环绕边框
        类似于盒子的边框，但是不占空间
    display              控制盒子的显示方式
        inline      行内显示，宽高无效(行内元素)
        block      块级显示，宽高有效（块级元素）
        inline-block    行内显示同时宽高有效（行内块）
        none    不显示，不占据屏幕空间（隐藏）
    visibility        显示与隐藏
        hidden      隐藏，占据屏幕的空间
        visible     显示
    opacity           透明度     0~1之间的值
    overflow          溢出部分的处理
        hidden   超出内容隐藏      
        auto     超出产生滚动条
        scroll   滚动条
10.盒子相关的样式
    每一个元素都是一个盒子
    width    宽度
    height   高度
    padding  内边距
        padding-top
        padding-right
        padding-bottom
        padding-left
    margin   外边距
        margin-top
        margin-right
        margin-bottom
        margin-left
    border   边框
        border-width        为元素指定边框的宽度
            关键字    thin、medium、thick
            单位    px、em
        border-style        为元素指定边框样式
            none    不设置
            hidden     隐藏
            dotted     显示一系列的点
            dashed  显示一系列小线段
            solid     显示一条单一的实心直线
            double     显示两条实心直线
            groove     边框雕刻效果(与ridge相反)
            ridge     与groove相反
            inset     嵌入式边界框(与outset相反)
            outset     突出的边界框
            …
        border-color        为元素指定边框颜色
            关键字 十六进制 RGB HSL RGBA HSLA
        border-radius       为元素指定圆角
    background   为元素设置背景
        background-color         为元素设置一种颜色
            关键字 十六进制 RGB HSL RGBA HSLA
        background-image        为元素设置一个背景图片
            none
            url
        background-size         设置背景的大小
            cover      背景铺满整个屏幕，（尽量不要使用大图覆盖小范围）
                     把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。按照背景定位区域的最大边扩展。
            contain    把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。按照背景定位区域的最小边扩展，如果不重复，可能背景定位区域有一部分没有背景图片。
            百分比
            绝对值
        background-repeat         设置背景图片的重复方式
            repeat         为了覆盖整个背景范围，背景图片尽可能多的重复，在背景边缘切割(clipping)最后一个图片以使用整个背景范围。
            repeat-x    x方向平铺一行
            repeat-y    y方向平铺一行
            no-repeat    不重复
        background-origin         设定背景的起始点
            padding-box    默认，背景图片从内边距的外边缘开始绘制
            border-box    背景图片从边框的外边缘开始绘制    
            content-box    背景图片从内容区开始绘制
        background-clip         设定背景的覆盖范围
            border-box    默认，背景位于边框以内
            padding-box    背景位于内边距以内
            content-box    背景位于内容区
        background-attachment     设置背景图片的固定点
            scroll     默认值，背景图像会随着页面其余部分的滚动而移动，背景固定在自身元素上，背景图相对于元素固定，背景随页面滚动而移动，即背景和元素绑定。
            fixed     背景图相对于视口固定，所以随页面滚动背景不动，相当于背景被设置在了视口区上。
        background-position     设置为背景图像初始位置，可以实现图片精灵
        background                 背景设置的速记写法
11.盒子模型
    所有的元素都可以看作一个盒子
    1）内容盒子(w3c盒子、标准盒子)
        box-sizing：content-box
        width=内容的宽度
    2）边框盒子(怪异盒子、IE盒子)
        box-sizing:border-box
        width=内容+padding+border
12.元素的默认样式
    body    默认有一个外边距
    a
    p
    h1~h6
    ul
13.表格样式
     border-collapse     指定表格的边框是合并还是分开
        separate    【默认值】分开模式，表示相邻的两个格子都有独立边框
        collapse    合并模式，表示相邻的两个格子共享边框
     caption-side     指定caption坐落在表格的哪个位置上
        top         标题位于表格的上方
        bottom     标题位于表格的下方
        left        标题位于表格的左侧
        right        标题位于表格的右侧
14.布局
    1）默认文档流
        1）元素显示的顺序和代码的顺序是一致的
        2）块级元素独占一行空间，默认宽度为父元素的100%，高度由内容或者子元素决定
        3）行内元素共享一行空间，默认宽高都由内容决定
    2）浮动布局
        float(如果一个元素添加float属性，那么这个元素就会成为一个浮动元素)
            left    向左浮动
            right   向右浮动
            none    不浮动
            inherit 浮动方式继承父元素
        浮动元素的特点：
            1）当一个元素是浮动元素的时候，他会失去对父元素的支撑
            2）清除浮动
                a.给父元素添加overflow：hidden
                b.使用伪元素,给伪元素添加clear：both
            3）脱离文档流
    3）定位布局
    position
        static          静态（默认）       非定位元素

        relative        相对定位            定位元素
                        相对的是元素原先的位置，
                        不脱离文档流(还占据原先的位置),宽度默认还是100%，
                        可以覆盖在其他元素上

        absolute        绝对定位           定位元素
                        相对的是距离它最近的父定位元素的位置，如果没有父定位元素，那么它相对于浏览器视口
                        脱离文档流

        fixed           固定定位            定位元素
                        相对于浏览器视口
                        脱离文档流
                        不会随着浏览器的滚动而滚动

        sticky          粘滞定位            定位元素
                        不脱离文档流
                        使用top/right/bottom/left设置一个过渡点，当超过这个过渡点的时候，就会体现fixed固定在页面上
        只有定位元素才可以使用top、right、bottom、left、z-index默认值为0
        脱离文档流的特点：默认宽度由内容决定，不占据原先的位置（原先的位置被其他元素抢占）
    4） flex布局(伸缩盒布局)
        1.比较：
        传统布局
            兼容性好
            布局繁琐
            局限性，不能在移动端很好的布局
        flex弹性布局
            操作方便，布局极为简单，移动端应用很广泛
            pc端浏览器支持情况较差
            IE11或更低版本，不支持或部分支持

        2.原理
            任何一个容器都可以指定为flex布局
                采用flex布局的元素，称之为flex容器，它的所有子元素称之为flex项目
                容器默认存在两根轴：水平的主轴和垂直的交叉轴
            当我们为父盒子设为flex布局后，子元素的float、clear属性即将失效
            给父元素设置display：flex，达到控制子元素的目的

        3.常见父项(容器)属性
            flex-direction：设置主轴的方向
                row(默认值):主轴为水平方向，起点在左端
                row-reverse：主轴为水平方向，起点在右端
                column：主轴为垂直方向，起点在上沿
                column-reverse：主轴为垂直方向，起点在下沿

            justify-content:设置主轴上的子元素排列方式
                flex-start      【默认值】左对齐                
                flex-end          右对齐                
                center              居中                
                space-around     两端对齐，项目之间的间隔都相等            
                space-between    每个项目两侧间隔相等
                所以，项目之间间隔比项目与边框的间隔大一倍

            flex-wrap：设置子元素是否换行
                nowrap(默认):       不换行
                wrap:               换行，第一行在上方
                wrap-reverse:       换行，第一行在下方   

            align-content：设置侧轴上的子元素的排列方式(多行)
                flex-start:    与交叉轴的起点对齐
                flex-end：     与交叉轴的终点对齐
                center：       与交叉轴的中点对齐
                space-between：与交叉轴两端对齐，轴线之间平均分布
                space-around： 每根轴线两侧的间隔都相等，所以，轴线之间的间隔比轴线与边框的间隔大一倍
                stretch（默认值)

            align-items:设置侧轴上的子元素的排列方式(单行)
                flex-start:交叉轴的起点对齐
                flex-end:交叉轴的终点对齐
                center:交叉轴的中点对齐
                baseline：项目的第一行文字的基线对齐
                stretch（默认值）：如果项目没设置高度或设auto，将占满整个容器

            flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap
                flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

        4.项目的属性
                order
                    该属性定义了项目的排列顺序，数值越小，排列越靠前，默认0

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

                flex-shrink
                    该属性定义了项目的缩小比例，默认为1，即如果剩余空间不足，该项目将缩小

                flex-basis
                    该属性定义了在分配多余空间之前，项目占据的主轴空间

                flex
                    flex-grow、flex-shrink、flex-basis的速写形式
15.css动画  
    定义动画：使用@keyframes 定义动画，关键帧可以使用关键字from~to，也可以使用0%~100%
    配置动画：
        animation-name              动画的名字
            @keyframes定义的动画的名字
        animation-duration          动画持续的时间
            单位 s、ms  默认0s
        animation-iteration-count   动画迭代次数
            数字 默认值为1，可以为小数，不可以为负数
            infinite(无限循环)
        animation-delay             动画延迟执行时间
        animation-direction         动画方向
            normal      (默认)动画按照正常顺序执行
            reverse     反转 最后一帧作为第一帧
            alternate   顺序交替反转
            alternate-reverse   
        animation-fill-mode         动画填充模式
            none                默认
            forwards            在动画结束后，目标将保留在执行期间所遇到的最后一个关键帧所设置的计算值
            backwards           在延迟时间内，目标将保留在执行期间所遇到的第一个关键帧所设置的计算值。
            both                向前和向后填充模式都被应用。
        animation-timing-function   动画的速度曲线
            ease            (默认)先快后慢
            linear          线性，匀速
            ease-in         先慢后快
            ease-out        先快后慢
            ease-in-out     先慢后快再慢
    第三动画库
        1.安装
            先把源码下载到本地库
        2.使用
            <div class="box animate__animated animate__swing">hello</div>

16.css过渡
    div {
        transition: <property> <duration> <timing-function> <delay>;
    }
    transition
        transition-property             过渡属性
        transition-duration             持续时间
        transition- timing-function     时间曲线
        transition-delay                过渡延迟
        transition                      速写形式
    过渡和动画的区别：
        1.过渡需要触发
        2.不是所有的属性都可以过渡

17.css变形
    transform           属性
        rotate(旋转)
            rotateX (angle)
                绕X轴旋转，例如单杠运动  30deg
            rotateY (angle)
                绕Y轴旋转，例如钢管舞运动
            rotateZ (angle)
                绕Z轴旋转，例如旋转盘。
            rotate (angle)
                与rotateZ()一致。
        skew(倾斜)
            skewX(deg)
            skewY(deg)
            skew(x,y)
        scale(缩放)
            scale(x,y)                                              隐藏元素scale(0,0)不占据空间
        translate(移动)
            translate(x,y)