h5css样式

兼容性前缀：
    谷歌：webkit
    火狐：moz
    ie：ms
    欧鹏：o
选择器：
    属性选择器：
        * = 包含  {href * = 'www'}
        ^ = 以什么开头
        $ = 以什么结尾
    伪类选择器：
        第一个：first-of-type
        最后一个：last-of-type
        第几个：nth-of-type（）
        选中前n个：nth-of-type（-n）
        选中后5个：nth-of-type（n + 5）
        第4个到第8个：:nth-of-type（-n + 8）:nth-of-type（n + 4）
        奇数个：nth-of-type（2n + 1）odd
        偶数：nth-of-type（2n）even

子级：
    child:first-child
         :last-child
         :nth-child

    空的元素：empty
    除了：not()
    可用的：:not(:disabled) / :enabled
    禁用的：:disabled
    获得焦点：:focus
    当前激活元素：:target
选项卡实例：
<a href="#p1">123123</a>
<a href="#p2">123123</a>
<a href="#p3">123123</a>
<p id="p1">sadadsada23</p>
<p id="p2">3123123123</p>
<p id="p3">31asfegerg123</p>
    同级 后一个：+
    同级后所有个：~
    直系子级：>
    所有的元素：*
    选中的：checked
    第一个字母：first-letter
    第一个词：first-word
    第一行：first-line

文本：
    描边：text-stroke
    文字阴影：text-shadow   x轴偏移量  y轴偏移量  模糊范围 颜色
    盒子阴影：box-shadow   x轴偏移量  y轴偏移量 模糊范围 模糊半径 颜色 阴影位置
    盒子倒影：box-reflect：above上 、 below下 、 left左 、 right右   偏移量
    滤镜：filter：blur()
    径向渐变：radial-gradient(circle圆形 / ellipse椭圆 、 半径 、颜色 、 范围)
    线性渐变：linear-gradient(方向 颜色 范围)
    重复渐变：repeating-

    外部字体：@font-face{font-family:;  src：url{''}}
    单行文本截断：text-overflow：ellipsis(溢出变成3个点) clip(溢出裁减掉)
                还有另外两个值：overflow：hidden
                                white-space: nowrap;
    多行文本截断：display: -webkit-box;
                  text-overflow：ellipsis:
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 3;
                  overflow：hidden;
    强制换行：word-wrap：break-word；

    颜色：rgba

    边框多色：border-colors
    边框图：border-image：  图片路径 url() 、 裁剪大小 、 平铺方式 repeat(重复) round(拉伸)
    圆角：border-radius ：  左上角：border-top-left-radius
                            右上角：border-top-right-radius
                            左下角：border-bottom-left-radius
                            右下角：border-bottom-right-radius
    背景基点：background-origin：border-box 从边框开始 / content-box 从内容区域开始(默认值) / padding-box 从内边距开始
    背景裁剪：background-clip：border-box 从边框开始 / content-box 从内容区域开始(默认值) / padding-box 从内边距开始
    背景大小：background-size：宽度 / 高度 contain按宽平铺/cover按高平铺（重点）
    背景固定方式:background-attachment：fixed不随着滚动条滚动而滚动/scroll随着滚动条滚动（重点）
    背景：background ： 多个背景用逗号隔开

变形：transform：位移translate、旋转rotate、缩放scale、倾斜、skew
过渡：transition：
        过渡属性transition-property  all所有的   每一组用逗号隔开
        过渡时间transition-duration
        过渡延迟transition-delay
        过渡运动方式：transition-timing-function
            1.ease加速 2.ease-in加速 3.ease-in-out先加速后减速 4.linear匀速 5.ease-out减速 6.cubic-bezier贝塞尔曲线
动画：animation
    动画名称：animation-name
    动画时间：animation-duration
    动画次数：animation-iteration-count     infinite无限
    动画方向：animation-direction        normal 正向  reverse 反向   alternate 来回（一次正一次反）
    动画状态：animation-play-state       running运动  paused暂停
    动画的运动方式：animation-timing-function：
        1.ease加速 2.ease-in加速 3.ease-in-out先加速后减速 4.linear匀速 5.ease-out减速 6.cubic-bezier贝塞尔曲线
    动画时间外状态：animation-fill-mode
        forwards 动画结束时停在最后一帧
        backwards 动画结束时返回到第一帧
        both 动画立即执行第一帧，结束时停在最后一帧
        none 结束完之后无
    写动画：@keyframes

多列布局：columns
    间隙：column-gap
    列数：column-count
    列宽：column-width
    边框：column-rule
        边框样式：column-rule-style
        边框粗细：column-rule-width
        边框颜色：column-rule-color
    跨列：column-span

弹性盒子：display:flex;
    父盒子：
        方向：flex-direction
            row/row-reverse/column/column-reverse
        横向对齐方式：justify-content
            flex-start左对齐 / flex-end右对齐 / center居中对齐 /space-between两端对齐  / space-around等间距对齐
        纵向对齐方式：align-items
            flex-start上对齐 / flex-end下对齐 / center居中对齐 / stretch等高 / baseline基线对齐
        纵向行对齐方式：align-content
            flex-start左对齐 / flex-end右对齐 / center居中对齐 /space-between两端对齐  / space-around等间距对齐
        换行：flex-wrap
            wrap换行 / nowrap不换行
        缩写（方向和换行的缩写）：flex-flow
    子盒子：
        扩展空间：flex-grow（对剩余空间进行划分）
        压缩空间：flex-shrink
            1份宽度 = (子元素总宽-容器宽)/总份数（每个元素占一份，flex-shrink：3 + 2）
            压缩后的空间 = 子元素宽 - 1份宽度 * 份数
        宽度：flex-basis
        缩写：flex   先写扩展空间、再写压缩空间、最后写宽度

        顺序：order  值越小越靠前，越大越靠后  可以是负数，不可以为小数
        单独样式：align-self

媒体查询：
    @media （min-width）and（max-width）{}
        screen屏幕
        all所有的
        prient打印设备