css animation動畫完成後隐藏_關于 css 的一些記錄

1.内聯元素定位方式：text-align/vertical-align

• 定義行内内容（例如文字）如何相對它的塊父元素對齊
• 對齊原理是自動占據剩餘空間

2.冒泡狀态控制：focuns-within

3.目标狀态控制：target

4.陰影擴散：box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2) x|y|陰影模糊|陰影擴散|color

5.顔色漸變：linear-gradient（類似實作google???）

6.動畫實作的兩種形式：

• 動畫實作的原理：即定義2中狀态，初始狀态和結束狀态。然後定義狀态執行的過程
• transform（狀态改變），旋轉，縮放，傾斜或平移給定元素（scale，roate）
• transtion （過渡效果），
• animation / @keyframes。組合模式，定義動畫

綜上一般而言定義動畫可使用：transform and transtion || animation and @keyframes

7.非矩形形狀：shape-outside

• 相鄰的内聯内容應圍繞該形狀進行包裝

8.flex布局下的：margin:auto

• 關于flex下的margin:auto，從目前來看，似乎是将設定元素居中？？

9.内聯元素和塊級元素

• 常見内聯元素：a、b、span、img、input、textarea、select

10.脫離文檔流的三種方式

• display：float
• position：absolute
• position：fixed

11.隐藏元素的幾種方式

• display：none(Render 樹中沒有節點)
• visibility：hidden(Render 樹存在節點)
• opacity：0(透明度)

12.文檔超出省略設定：ellipsis

• overflow:hidden /// text-overflow:ellipsis

13.動畫狀态方向控制：animation-direction

• reverse
• alternate
• normal
• alternate-reverse

14.層疊層級順序：z-index、層疊上下文等排序

• 層疊上下文（background/border）
• zindex（負值）
• block（塊狀水準盒子）
• float（浮動盒子）
• inline、inline-block（水準盒子）
• z-index（正值）

z-index屬性必須是position不是static屬性方才生效

15.關于居中的特殊方式：margin:auto

• margin：auto ，預設就會左右平分剩餘空間（水準方向上，直接使用即可）
• margin：auto ，垂直方向上如果想要支援居中，可以使子級元素絕對定位，同時設定定位（top，bottom，left，right）為0

16.背景圖檔位置：background-attachment

• 其屬性決定背景圖像的位置是在視口内固定，還是随着包含它的區塊滾動。
• scroll ，包含塊内固定，随視口移動
• local ，包含塊和視口，都移動
• fixed ， 包含塊和視口，都固定

17.輪廓屬性：outline

• outline是用來設定一個或者多個單獨的輪廓屬性
• outline: 1px solid white;

18.背景虛化：fliter:blur

19.寬度自适應：fit-content

• fit-content能夠使塊級元素像内聯元素一樣包裹元素。

20.自調整寬度大小：resize

• resize屬性允許你控制一個元素的可調整大小性。
• 值得注意的是，當塊級元素overflow為visible時，該屬性沒有效果。

21.動畫負延遲：animation-delay：負值

• 當animation-delay設定為負值時，動畫立即開始，并且起點為設定的負值。

22.viewless 和viewmore

@fontSize: 15px;
       @textlh: 1.6;
       .m-mind-text1{
            /* 火狐不支援-webkit-line-clamp */
            // display: -webkit-box;
            // -webkit-box-orient: vertical;
             // 最大10行，超出...隐藏
             // -webkit-line-clamp: 10;
             line-height: @textlh;
             max-height: @fontSize * @textlh * 10;
             overflow: hidden;
             cursor: default;
            word-wrap: break-word;
             /*可以利用after實作一個隐藏文本的過渡效果*/
          }
          .m-mind-text2{
            line-height: @textlh;
             word-wrap: break-word;
         }
           

23.基線、底線、頂線、中線

元素預設的垂直對齊方式為基線對齊（vertical-align：baseline）。

24.文本的可複制性：user-select

• user-select:text(none) ，可用于設定頁面文本是否可複制。
• cursor，可用于設定文本聚焦方式

25.css可替換元素

• 可替換元素即展現效果不是由css決定，而是由自身的内容去決定。css僅僅影響它的位置
• 可替換元素包含：img iframe video 等
• 一些元素在特定情況下也可以轉換為可替換元素：input...