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)

不定時更新~