CSS

CSS  
    Cascading style sheets
        层叠样式表
    html  结构
    css   展现样式
    js    动作
    
    CSS选择器   选择某些元素
        id选择器:    #one{

                    }
        类选择器:    .one{

                    }
        标签选择器： p{

                    }
        普遍选择器：*(所有元素)
        子代选择器：
            div
                p
                p
                span
                sapn
            div
            空格-->后代  div *
            >  --> 直接子代  div>p
            +  --> 后一个兄弟元素  p+span
            ~  --> 之后所有的兄弟元素
                    p.one~*
        嵌套选择器：
            p.one   选择p标签且class为one的  
            p .one  选择p标签的后代中class为one的
        组合选择器： 选择p标签，span标签
            p,span{
            
            }
        属性选择器：
            [key]  有key属性的元素
            [key=value]  有key并且值为value的
            [key^=value]  有key，并且值以value开始的
            [key$=value]  有key，并且值以value结尾的
            [key*=value]  有key，并且值中包含value的
            [key~=value]  有key，并且值中有一个值为value的
        伪类选择器：
            a:link{}  /*未访问的样式  默认蓝色*/
            a:visited{}  /*访问之后的样式  默认紫色*/
            a:hover{}  /*悬停的样式  默认无*/
            a:active{}  /*点击的样式  默认红色*/

            :first-child  选择作为第1个孩子的元素
            :last-child   选择作为最后一个孩子的元素
            :only-child   选择作为独生子的元素
            :nth-child()   选择作为第几个孩子的元素
                参数有以下取值
                    n  自然数
                    an+b  3n+2
                    odd  奇数
                    even 偶数
            :nth-last-child()  选择作为倒数第几个孩子的元素
            :first-of-type  每家中的每种类型中的第一个
            :last-of-type  每家中的每种类型中的最后一个
            :nth-of-type()  每家中的每种类型中的第几个
            :nth-last-of-type () 每家中的每种类型中的倒数第几个
        表单的伪类选择器
            :focus  聚焦时候的状态
            :enabled  可用的元素选择
            :disabled  禁用的元素被选中
            :required  必填的元素被选中
            :optional  非必填的元素
            :ckecked  选中的元素
            :default  默认选中的元素
            :valid  通过验证的元素
            :invalid  没有通过验证的元素
        伪元素选择器：
            ::before  在之前添加东西
            ::after  在之后添加东西
            ::first-line  第一行
            ::first-letter  第一个字符
            ::selection  选中的字符

        继承
            可继承属性
                background
                color
            不可继承属性
                border:
                    inherit  不继承,初始化
                    initial  继承
                    unset  不设置

css引入html页面中的方式
    内嵌样式
        标签内部的style属性
            特性值 1000
    内部样式表
        <style></style>
    外部样式表
        <link herf=""/>
            .css结尾的文件
        @import url();
    style属性>style标签/
    link标签>@import
css优先级
    3个
    1. !important 修饰的最优先
    2. 特性值(权值，权重)
        style属性内  1000
        id选择器  100
        类选择器,属性选择器,伪类选择器  10
        标签选择器,伪元素选择器  1
        空格,>,+,~,*  0
    3. 就近原则(权值一样)
显示与隐藏
    display:
        none  消失,不占位置
        block  块级显示,可设置宽高
        inline  行内元素显示,不可设置宽高
        inline-block  行内显示,可设置宽高
    visibility:
        hidden  消失，占位置
        visible  显示
块级与行内转换
    块级:独占一行,可设置宽高
    行内:与其他元素共享一行，不可设置宽高
超出部分的处理
    overflow:
        auto 自动
        scroll 滚动条
        hidden 隐藏
cursor 鼠标样式
    text 文本
    help 问号
    pointer 手
    move 移动
    wait 等待
    corsshair 十字
    n-resize  s n e w

盒子模型
    内容区
    padding 内间距
    border 边框
    margin 外边距

    w3c盒子模型
        设置的宽高就是内容区的宽高
        div
            width:100px;
            height:100px;
            padding:10px;
            margin:10px;
        内容区宽 100px;
        盒子的宽 100+2*padding+2*border=122px;
        盒子所占的屏幕空间的宽
            100+2*padding+2*border+2*margin
        margin/padding
            一个值  上下左右
            两个值  上下 左右
            三个值  上 左右 下
            四个值  上 右 下 左
        margin-top  margin-bottom  margin-left  margin-right
        padding-top  padding-bottom  padding-left  padding-right
    IE盒子模型
        设置的宽高是盒子的宽高,包括内容区,padding区,border区
        div
            width:100px;
            height:100px;
            padding:10px;
            margin:10px;
        内容区的宽
            100-2*padding-2*border=78px
        盒子的宽
            100px
        占据屏幕空间的宽
            100+2*margin=120px
        box-sizing:
            content-box 内容区的宽高  w3c
            border-box 盒子的宽高  IE
浮动
    float:
        none 浮动
        left 左浮动
        right 右浮动
    清除浮动
        clear:both;
            可以清除浮动元素对其他元素带来的影响
        如果子元素都浮动，想让父级有高度，在父级元素上使用overflow:hidden;
        如果只是想清除浮动对其他元素的布局的影响的话，在其它元素上使用clear:both;
    浮动的特点
            如果只有一个元素浮动的话，该元素脱离文档流，其他元素顶上去，
        如果多个元素浮动的话，在一行显示，紧跟在第一个浮动元素之后。
        如果有父子级关系的话，子级元素都浮动，则父级元素没有高度，
        如果想有高度，在父级元素上使用overflow:hidden;

定位
    position属性
        static 静态的
        fixed 固定定位(参考点是浏览器)
            脱离文档流，默认位置是原来位置的上方
        relative 相对定位(参考点是原来在文档流中的位置)
            不脱离文档流，默认位置是原来的位置
        absolute 绝对定位
            如果没有定位的父元素，参考点是页面的左上点
            如果有定位的祖先元素，参考点是离他最近的定位祖先元素
            脱离文档流，默认位置是原来位置的上方
        定位元素：使用position属性,值为fixed,relative,absolute。
            定位元素专用属性
                left:
                top:
                right:
                bottom:
布局
    默认：
        书写顺序就是展示顺序
    自定义：
        *{
            margin:0;
            padding:0;
        }
        display
        overflow
        visibility
        float
        定位
        盒子模型
    品字布局
    弹性盒模型布局
        容器：父元素
            display:flex;
            flex-direction:内部项目的方向
                row 在一行 【默认】
                row-reverse 在一行倒着显示
                column 在一列
                column-reverse 在一列倒着显示
                flex-warp 设置是否换行
                    nowarp 不换行【默认】
                    warp 换行
                    warp-reverse 换行并且倒着显示
                flex-flow:row warp;
                align-items:垂直对齐方式
                    stretch  拉伸【默认】
                    flex-start 上
                    flex-end  下
                    center 中
                justify-content:水平对齐方式
                    flex-start 左
                    flex-end  右
                    center  中
                    space-between
        项目：子元素
            flex:1/2 200px;
        动画
            animation-name:动画名字
                @keyframes myNmae{
                    0%{
                        width:...
                    }
                    100%{
                        width:...
                    }
                }
            animation-duration:动画持续时间
            animation-delay:动画延迟时间
            animation-timing-function:动画执行函数
            animation-direction:动画执行方向
                reversed 从最后一帧到第一帧
                alternate 奇数次从第一帧到最后一帧，偶数次从最后一帧到第一帧
                alternate-reversed
                    偶数次从第一帧到最后一帧，奇数次从最后一帧到第一帧
            animation-iteration-count:动画播放次数
                                        n
                                        infinite 无限次
            变形
                transform属性
                    translateX()  X轴偏移
                    translateY()  Y轴偏移
                    translateZ()  Z轴偏移
                    scale()  放大和缩小
                    rotateX()  X轴旋转
                    rotateY()  Y轴旋转
                    rotate(deg) Z轴旋转
            table
                border-collapse  合并单元格线
                    collapse  合并
                caption-side  标题位置