css杂项

bo一、margin负值

    margin-left / margin-top为负值，当前元素会向左 / 上拖动

    margin-right / margin-bottom，当前元素右 / 下方的元素会向左 / 上移动

二、BFC（块级格式化上下文）

应用场景

    1、float高度塌陷

    2、上下margin重叠    

触发条件

    1、overflow的值不是visible

    2、position的值是absolute或者fixed

    3、float的值不是none。

    4、display的值是inline-block、table-cell、flex、table-caption、flex

    5、body根元素

三、margin和padding的百分数

    值是父元素的宽*百分数

四、绝对定位的百分数

    值是父元素宽高的值*百分数

五、line-height继承

    具体值（30px）：直接继承值

    比例(1/2)：继承比例

    百分数（200%）：继承计算出来的值（line-height*height / line-height * font-size）

六、响应式

    单位：

        px：绝对长度单位，不可做响应式单位

        em：相对于父元素的单位长度，不常用

        rem: 相对于根元素的单位长度，html的font-size = 1rem，弊端（阶梯性）

        vw/vh: 视口宽高的1/100（window.innerWidth / window.innerHeight）

        vmax/vmin:视口宽高中较大/小的值

    布局：

        media-query: @media

七、offsetWidth = width + border + padding

八、空白p标签会重叠

九、css3动画

    定义：

        @keyframes{

                0%{},

                50%{},

                100%{}

            }

    使用：animation: name duration timing-function delay iteration-count direction;

        timing-function:动画的速度曲线

            inear匀速

            ease低速/加快/变慢

            ease-in低速开始

            ease-out低速结束

            ease-in-out低速开始和结束。

        iteration-count:播放次数