2019-01-23

CSS3学习

Tips：

兼容性查询：caniuse.com
兼容写法要写在标准写法之前
position:absolute 父级要加 position:relative

圆角、阴影、边框、背景

1. 边框圆角：border-radius； -webkit-border-radius；

2. 边框图像：

   • border-image (图片、剪切、重复性：repeat/round/stretch)；
   • 必须先定义border 宽度属性
   • -webkit-border-image

3. 阴影：box-shadow

4. 背景：background 多背景图片
   background-clip：border-box/padding-box/content-box
background-size:
   contain(以最大的边进行适应，能保证图像完整)
   cover(以最小边为基准放大，超出裁切)
   100px 100px(用具体尺寸缩放)
   50% 50%(用百分比缩放)

5. 颜色： color:#123456/color:red/color:rgb(255,255,0)/color:rgba(255,255,0,0.2)

6. 文字省略：text-overflow 必须三个条件1.定义容器宽度（width）2.white-space:nowrap;3.text-overflow:ellipsis|clip

7. 文字换行：word-wrap:break-word|normal

8. 文字阴影：text-shadow

9. 文本字体：@font-face

10. 属性选择器：input[type="text"]... div[class^="xxx"] a[href^="http://"] 选择属性的值以指定值开始 div[class$="xxx"] img[src$="jpg"] 选择属性的值以指定值结束 div[class*="xxx"] 选择属性的值包含指定值

11. 伪类选择器：:visited/:hover/:focus/:active input:not([type="submit"]){} p:empty{} 内容为空的元素选择器 :target 目标选择器 :first-child/:last-child :nth-child(n)/:nth-last-child(n) odd奇数 even偶数 3n-2 一行的第三个：3n :first-of-type/:last-of-type :nth-of-type/:nth-last-of-type(n) :only-child 满足一个元素只有一个子元素 :only-of-type 一个元素有很多子元素，唯一一个类型的 :enabled/:disabled/:read-only/:read-write/:checked

    Tips

    父级必须 position:relative 下级：position:absolute
    内联元素没有宽高
    同级元素+ 子元素> 后代元素 空格
    ::seletion
    ::before/::after(配合content使用)
    用::after清除浮动：clearfix:after{content:"";display:block;clear:both;}
    例子：li:not(:last-child)::after{ content: "|"; }

12. 过渡效果：transition all 0.5s ease 1s;一般采用简写方式，加在元素初始状态上；

    Tips

    diaplay:none没有过渡

13. 2D转换：
    位移：-webkit-transform:translate(x,y) translateX(x) translateY(y)位移必用
    旋转：-webkit-transform:rotate(45deg)
    缩放：-webkit-transform:scale(x,y) scaleX(x) scaleY(y)
    倾斜：-webkit-transform:skew(45deg) skewX(45deg) sekwY(45deg)

14. 3D转换
    父元素必须加 transform-style:preserve-3d和 perspective:500两个属性
    3D位移：-webkit-transform:translate3d(x,y,z) translateZ(z)可以单独使用实现缩放，会打开GPU性能好
    3D旋转：-weblit-transform:rotate3d(x,y,z,a) rotateX(x) rotateY(y) rotateZ(z)
    3D缩放：-weblit-transform:scale3d(sx,sy,sz) scaleZ(z)

15. 动画
    @keyframes 规定动画
    animation: myname 3s ease|linear ;

16. 响应式布局
    viewport 响应视窗
    @media 媒体查询 @media(max-width:480px){......}
    超小屏幕（手机，小于768px） @media(max-width:767px){......}
    小屏幕（平板，大于等于768px）@media(min-width:768px){......}
    中等屏幕（桌面显示器，大于等于992px）@media(min-width:992px){......}
    大屏幕（大桌面显示器，大于等于1200px）@media(min-width:1200px){......}
    media type：screen/TV/print/projection/all
    @media only screen and (max-width:480px){......}

17. 响应式图片
    手机端图片尺寸768
    media或者 picture标签
    box-sizing:border-box;
    !important 增加权重