CSS简单认识

      ##  css3 是用来设置网页中的样式
        
      ##css的使用方式：
            1.内联样式：在标签内部通过style属性来设置元素样式
                语法 样式名：样式值 （key：value键值对）
                设置多个样式时，要以`；`分隔
                只能对一个标签生效
                开发时尽量不用内联样式
            2.内部样式表：
                通过css选择器选中元素并设置样式
                只针对当前页面生效
                注释 /*（注释内容）*/
            3.外部样式表：
                写在外部文件当中
                通过link标签引入<link rel="stylesheet" href="./css/style.css">
                只要想使用样式，引用即可，可以在不同的页面中复用
      ##css基本语法：
            选择器 声明块{样式名：样式值；}
            
            选择器：通过选择器可以选中页面指定的元素
            声明块：通过声明块为指定的元素设置样式
            声明是一个键值对结构

   常用选择器
         
                1.元素选择器
                    语法：标签名{}
                2.id选择器
                    语法：#id{}
                3.class选择器（类选择器）
                    语法：.类名{}
                    可以重复 也可以为一个元素同时指定多个class 以空格分开 class="p3 p4"
                4.通配选择器 *{}    
                5.交集选择器
                    语法：选择器1选择器2选择器n{}
                6.并集选择器
                    语法：选择器1，选择器2，选择器n{}
                7.关系选择器
                    父元素 直接包含子元素的元素
                    子元素 直接被父元素包含的元素
                        语法：父元素>子元素{}
                    祖先元素 直接或间接包含后代元素的元素（一个元素的父元素也是它的祖先元素）
                    后代元素 直接或间接被包含的元素
                        语法：祖先元素+空格+后代元素{}
                    兄弟元素 拥有相同父元素的元素
                        语法：前一个+后一个{}
                            前一个~下面的{}
                8.属性选择器
                    语法：【属性名】选择指定属性的元素
                    【属性名=属性值】
                    【属性名^=属性值】选中含有指定属性并以指定值开头的元素
                    【属性名$=属性值】选中含有指定属性并以指定值结尾的元素
                    【属性名*=属性值】选中含有指定属性并包含指定值的元素
                9.伪类选择器
                    语法：以：开头
                    ：first-child{}
                    ：last-child{}
                    ：nth-child（n）{}第n和子元素
                    ：nth-child（2n+1/odd）{}奇位数的元素
                    ：nth-child（2n/even）{}偶位数的元素
                    以上是根据所有的子元素进行排序
                    ：first-of-type{}
                    ：last-of-type{}
                    ：nth-of-type{}
                    以上是根据同类型元素
                10.超链接的伪类
                    a：link正常链接
                    a:hover 鼠标放上
                    a:active 点击
                    a:visited 访问过后
 

元素继承 
                发生在祖先元素和后代元素之间
                用继承可以将一些通用的样式统一设置到共同的祖先元素上 这样只设置一次 即可让所有元素都具有该样式
                但是不是所有样式都会被继承 transport（默认透明）
 

权重（优先级）
            通过不同的选择器选中了相同的元素，同一种样式发生了冲突，样式就由选择器权重来决定（优先级）
            内联样式  1000（量化）1，0，0，0
            id选择器  100（量化）0，1，0，0
            类选择器  10（量化）0，0，1，0
            元素选择器  1（量化）0，0，0，1
            通配选择器 0（量化）0，0，0，0
            继承的样式  没有优先级
            交集选择器（相加）
            并集选择器（不加）
                注意点：
                1.比较优先级的时候，需要把所有选择器的优先级进行相加，优先级越高，则优先显示
                2.如果优先级计算后相同，则有限使用靠下的样式
                3.选择器的累加不会超过其最大的数量级（类选择器再高也不能超过id选择器）
                4.通配选择器优先级是0，任何一个选择器都可以覆盖它
                5.继承的样式 没有优先级 由祖先元素继承来的
                6.某个样式后加上！important，这个样式就获得了最高优先级，甚至超过了内联样式
        
盒模型
            内容区 content
             width height决定内容区大小
            内边距 padding
                内容和边框的距离 4个值上右下左
                分开写是padding-top padding-right padding-bottom padding-left
            边框 border
                border-width 边框宽度
                border-color 边框颜色
                border-style 边框样式
                
                border-width 边框宽度的值（同内边距）
                    4个 上 右 下 左
                    3个 上  左右  下
                    2个 上下  左右
                    1个 上右下左
                单独设置:boder-XXX-width(xxx为top right left bottom)
                
                boder-style 的值：solid实线 dotted点状虚线 dashed虚线 double双线
        
                boder简写
                    没有顺序要求
            外边距 margin
                改变不会影响盒子可见框大小，会影响盒子的位置
                单独设置4个方向值 margin-xxx (xxx为top right left bottom)
                值可以为负（负值往反方向移动7）


 网页布局
        
            文档流 是网页的基础
            我们所创建的元素都在文档流中来排序
            元素的两种状态 在文档流中/不在文档流
            元素在文档流中的特点：块元素 行内元素
            
            块元素 
                独占一行 
                默认宽度是其父元素的全部宽度 
                默认高度是被内容撑开的
            行内元素
                不会独占一行 只占自身的大小
                在页面中自左向右排列
                默认宽高都是被内容撑开的
                
            可见框大小= content+padding+border
            块元素水平方向布局：
                margin-left+border-left+padding-left+content+padding-right+border-right+margin-right=父元素内容的宽度
                1）7个值中 没有auto 则浏览器自动调整margin-right
                2）7个值中 margin-left width margin-right 这三个值可以设为auto，设置auto值后，浏览器自动使等式成立
                3）如果俩个值为auto
                    3.1）一个宽度一个外边距，此时宽度为最大，外边距0
                    3.2）两个外边距是auto，两个外边距设为相同的值（重要的居中方法）
                4）3个值都是auto，此时宽度最大，两个边距都是0
                5）如果子元素宽度大于父元素宽度 此时右边距自动设为负值
            垂直方向布局
                外边距折叠
                    兄弟元素    
                        1.1）相邻的垂直外边距都是正值，折叠时取较大值
                        1.2）相邻的垂直外边距一正一负，折叠时取二者之和
                        1.3）相邻的垂直外边距都是负值，折叠时取绝对值较大值
                    父子元素
                        父子元素相邻的外边距，子元素的外边距会传递给父元素（尽量使用父元素的padding，不要使用margin）
            行内元素
            不支持设置宽高，可设置padding（垂直方向设置padding border margin不影响布局）水平方向边距相加

   
    

display设置元素的显示类型 
                            block设为块元素
                            inline设为行内元素
                            inline-block设为行内块元素  （避免用）
                            none 不显示
visibility  visible正常显示  hidden隐藏 但依然占据页面位置 

 浮动float
                    通过浮动使元素向其父元素的左侧或右侧移动
                浮动特点：
                    1.浮动元素会脱离文档流，不在占用文档流的位置
                    2.元素向其父元素的左侧或右侧移动
                    3.浮动之后仍然在父元素当中没有移出
                    4.浮动元素不能超过它前面的浮动元素
                总结： 主要是使页面当中的元素可以水平排列
                
                浮动的其他特点：
                    块元素浮动后不再独占一行，宽和高是被内容撑开
                    行内元素浮动后 可以设置宽高，特点和块元素一样
                    浮动后不需要在区分行内元素和块元素

         <!-- 浮动高度塌陷 问题 -->

          清除浮动元素对当前元素所产生的影响clear
             left right both
 

          clearfix可以解决高度塌陷问题
              原理：用CSS给html添加了标签 

position属性设置定位
                    relative开启元素的相对定位
                    absolute开启元素绝对定位
                    fixed开启元素的固定定位
                    1.相对定位：
                        1）开启后，如果不设偏移量不会发生任何变化
                        2）参照于元素在文档流中的位置来进行定位
                        3）会提升元素的层级
                        4）不会脱离文档流
                        5）不会改变元素的性质
                        偏移量：
                            top bottom 控制垂直方向的位置，通常只会使用其一
                            left right 控制水平方向的位置，通常只会使用其一
                    2.绝对定位：
                        1）开启后，如果不设偏移量不会发生任何变化
                        2）开启以后，元素从文档流中脱离
                        3）元素的层级提升
                        4）绝对定位是相对于包含快进行定位
                        5）开启后改变了元素的性质，原来的块元素宽高是被内容撑开
                        包含块：正常情况下，是离当前元素最近的祖先块元素
                        绝对定位的包含块
                            是离它最近的开启了定位的祖先元素，如果所有祖先元素都没开启定位，则根元素html就是他的包含块
                    3.固定定位：
                        固定定位也是一种绝对定位
                        固定定位是永远参照与浏览器的视口进行定位
                        其他特点和绝对定位一样
 

                 元素的层级
                        z-index 可以指定开启了定位的元素层级
                        需要一个整数做值，值越大，元素层级越高，就优先显示
                        元素层级一样，浏览器优先选择考下的元素
                        祖先元素的层级即使再高也不会盖住后代元素
 

   字体相关样式
                color字体颜色
                font-size字体大小
                font-family字体类别（字体族）
                line-height文字占有的实际高度  如果直接行高直接写数字将会是字体的指定倍数
                font-weight 字重  bold加粗 nomarl正常
                font-style字体样式 italic斜体 normal正常
              单位：

                    em相对于当前元素的单位
                    rem相对于根元素的单位  16px           

              简写：
                font：字重 字体风格 字体大小/行高 字体族
 

文本对齐方式 text-align 样式值 legt center right justify（两端对齐）

文本缩进 text-indent

文本字间距 later-spacing

内部空白处理 white-space  样式值nowrap 不换行

                width: 500px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                /* 一行显示并超出部分显示。。。*/

 下划线设置：text-decoration:
                 none;去掉下划线 
                 underline 下划线
                 line-through 删除线
                 overline上划线
 

阿里图标库使用步骤 
                1.找到自己所需要的图标，添加到购物车
                2.找到购物车，添加到自己的项目
                3.在我的项目中点击下载到本地，解压缩放到自己的项目
                使用方式：
                1.通过实体来使用
                    首先引用iconfont.css，标签上加上类名iconfont，使用实体语法&#XXX；
                2.通过类名使用
                    把类名放在iconfont后面
                3.使用伪元素
                    ：：befor{
                        content：'\名称'，
                        font-family：'iconfont'
                    }
<link rel="icon" href="favicon.ico">引入ico图标（最上层页面标题旁的图）

设置背景颜色  background-color
                        有效颜色值 red
                        十六进制值 #ff0000
                        rgb/rgba
设置背景图片 background-img：url（"图片地址"）
                        如果图片小于元素，则背景图片自动平铺将元素铺满
                        如果图片大于元素，则一部分无法完全显示
                        如果图片和元素一样大，就正常显示
 背景图片重复方式 background-repeat
                    repeat 默认值
                    no-repeat 不重复
                    repeat-x 沿x轴重复
                    repeat-y 沿y轴重复

背景图片位置 background-position
                    1.数值 x轴 y轴
                    2.使用方位词 top bttom right center
                        2.1一个方位词（第二个默认值是center）
                        2.2指定2个值

背景范围background-clip
                    content-box背景只会出现在内容区
                    padding-box背景出现在内白那句和内容区
                    border-box
设置图片大小background-size
                    cover图片比例不变，将元素铺满（短边完全显示）
                    contain图片比例不变，将元素完整显示（长边完全显示）
                    如果使用% 以元素大小为基准
 背景图片是否随元素滚动background-attachment
                    fixed固定 不随元素移动
                    scroll默认值

               /* background简写：
                        background-size 大小必须写在background-position后面
                */

transition过渡
                一个属性从一个值过渡到另一个值
                /* 过渡
                    指定一个属性发生变化时的切换方式
                    transition-property指定属性
                        可以指定多个属性以逗号隔开
                        所有属性可以使用all
                        （大部分属性都支持过度，需要从一个有效值过渡到另一个有效值）
                    transition-duration 过渡持续时间
                    transition-timing-function 指定过渡方式时序函数
                        ease默认值 慢速开始加速在减速
                        liner 匀速
                        ease-in 加速
                        ease-out 减速
                        ease-in-out 先加速后减速
                        steps（）分布执行过渡效果 第二个值start/end 时间开始或末尾执行过渡
                    transition-delay 过渡效果的延时
                    */

animation动画
            自动触发的动态效果
        animation-name:对当前元素生效的关键帧名字
        animation-duration 动画执行的时间
        animation-delay动画的延时时间
        animation-iteration-count 动画执行的次数
            可选值： infinite无数次
        animation-direction 动画运行方向
            可选值：normal默认值 从from到to
                    reverse 从to到from
        animation-play-state 设置动画的执行状态
            running执行
            pause停止
        animation-timing-fuction 指定动画方式 时序函数
            值同transition-timing-fuction
        animation-fill-mode 动画的填充方式
            none
            forwards 动画执行完毕停止在动画结束的位置
            backwards 动画执行完毕 获取第一个关键帧设置的样式
 

            /* 关键帧 @keyframes
                from 表示动画开始的位置 也可以用0%
                to表示动画结束的位置 也可以用100%
             */

媒体查询
                    使一个网页适用于不同的设备
                    语法 @media 查询规则{}
                    media-type 媒体类型:
                        all 所有设备
                        print 打印设备
                        screen 带屏幕的设备
                    在媒体类型前加上only 表示只有(主要是为了兼容老版本浏览器)
                    
                    媒体特性
                        width 视口宽度
                        @media screen and (min-width:500px)大于等于500px显示
                    样式切换的分界点(断点)常用断点:
                        <768
                        >992
                        >1200
                            and并且 ,或
                    响应式原则
                        1.移动端优先
                        2.渐进增强

flex弹性盒 伸缩盒
                    flex可以使元素有弹性 让元素可以跟随页面大小改变而改变
                  display：flex；
                    flex设置块级的弹性容器
                    inline-flex设置行内弹性容器
                弹性元素：
                    弹性容器的子元素是弹性元素，只管子元素不管后代元素
                flex-direction 指定弹性容器中弹性元素的排列方式
                    row 默认 弹性元素在容器中水平排列
                    row-reverse 水平反向排列 从右向左
                    column 弹性元素纵向排列
                    column-reverse 纵向反向排列 从下到上
                    
                    主轴：弹性元素排列的方向成为主轴
                    侧轴：与主轴方向垂直的是侧轴
                    flex-wrap 设置弹性元素在弹性容器中是否换行
                        warp换行
                        nowrap不换行
                        war-reverse 沿辅轴反方向自动换行
                    flex-flow是 direction和wrap的简写：
                        flex-flow：row wrap；
                        
                    justify-content 分配主轴上的空白空间（主轴上的元素如何排列）
                        flex-start
                        flex-end
                        center
                        space-around 空白分不到元素两侧 每个元素左右间距相等
                        space-between 空白分不到元素之间 元素两端对齐
                        space-evenly 空白要分布到元素的单侧 每个元素之间和元素距离边距都相等
                    align-items 元素在辅轴上怎么对齐
                        flex-start
                        flex-end
                        center
                        stretch默认值
                    align-content 元素在辅轴上空白空间的分布
                        可选值 同justify-content
               

                 弹性元素的属性
                    flex-grow 弹性增长系数
                    默认值0
                        当父元素有多余的空间，子元素如何伸展
                        父元素的‘剩余空间’，会按照比例进行分配
                    flex-shrink 缩减系数
                        计算方式复杂，根据缩减系数和元素大小来计算
                    flex-basis 主轴方向的基础长度
                        默认值auto 表示参考元素本身的宽高，一般都用auto
                        如果传具体值就以该值为准
                 以上三个属性可以简写：
                    flex 增长 缩减 基础
                          1    1   auto      flex：auto；
                          0    1   auto      flex：initial默认值
                          0    0   auto      flex：none
                    order给弹性元素排序 order值越大越往后排