h5css样式

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打印设备