特殊的属性

1、link和import的区别

    兼容性（低/无）  |  权重高/低  | 运行时间（页面加载时/页面加载后）

2、transition和animation的区别

    Transition: property duration time-function delay；配合：hover等伪元素

    Animation: name duration timing-function delay iteration-count direction; 配合@keysframs name使用

    同：随着时间改变属性值

    异：触发条件（动作事件/自动）

3、relative和absolute的区别

     参照对象不同（本身/最近的父级元素）

4、block和inline的区别

    可支配的属性不同（宽高内外边距都可以/宽高不可以+上下内外边距不可以）

    block标签：div、p、h1-h6、ul、ol、li、dl、dt

    inline标签：span、a、I、img、input、select、strong

5、:first-child :last-child :nth-child(n) 

6、选择器模块

    盒子 display:flex;

    边框和背景

    2d和3d特效 transform：translate（x，y）rotate（deg）scale（x_num，y_num）skew（x_deg, y_deg）

    Matrix:translate \ scale \ rotate \ skew

 

某种效果的实现

1、实现一个三角形

    原理：边框分布 

    代码：width/height = 0； border-top:6px solid red; border-right/bottom/left: 6px solid transparent;

2、块居中显示

    条件：父级有指定宽高  margin：0 auto；

    条件：父级高不确定子高确定  父级relative、子absolute + 宽高 + left:50%;top:50%;transform：transition（-w/2，-h/2）

    条件：父级高子高都不确定  父display:flex; +align-items:center; justify-content:center;

3、清浮动

    clear：both； overflow：hidden/auto；:after{clear: both;content: ‘’;}

4、弹性布局

    核心：display：flex；