css积累

writing-mode

书写方式，默认为水平方向从上到下

<!--水平方向从上到下 | 垂直方向上从右到左 | 垂直方向上从左到右 | 水平上下（IE） | 垂直右左（IE） -->

writing-mode：horizontal-tb | vertical-rl | vertical-lr | lr-tb | tb-rl

em

em是相对单位。

font-size: 2em; /* 表示2倍于继承来的值。其他属性尺寸设置成2em，表示为2倍于自身的font-size值。 */

flex布局下文字超出一行隐藏

<div class='flex-box'>
    <div class='flex-left'>描述</div>
    <div class='flex-right'>
        <div class='text'>
            内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
        </div>
    </div>
</div>

.flex-box {
    display: flex;
    width: 500px;
}
.flex-left {
    width: 100px;
}
.flex-right {
    flex: 1;
    overflow: hidden;   /* 重点 或者使用 width: 0; */ 
}
.text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}

css动画animation可停止

animation-play-state: running/paused

20190419更新

粘性定位

position: sticky;

sticky定位可以认为是相对定位relative和固定定位fixed的结合；当父元素全部都在可视范围内时，它是相对定位；当父元素部分消失在可视范围内时，它是固定定位；当父元素完全消失在可视范围内时，它又变回了相对定位，即一起消失在可视范围内。

注意：

1. 必须指定top, right, bottom 或 left 四个值其中之一，才可使粘性定位生效。否则其行为与相对定位相同
2. 父元素高度需大于其本身的高度
3. 父元素不能设置overflow: hidden;或者overflow: auto;等属性
4. sticky元素仅在其父元素内生效，当父元素消失在可视范围内时它也会消失

感觉理解有点问题，暂时先这样吧 20190419

eg: 常用于定位字母列表的头部元素

参考：position-sticky(MDN)

不定时更新~