css屬性分類介紹

CSS分類目錄

1. 文本/字體/顏色
   1. 文本相關
   2. 字體相關
   3. 顏色相關
   4. 背景相關
2. 大小/布局
   1. 大小屬性
   2. margin 外邊距
   3. padding 內邊距
   4. border 邊框
   5. position 定位
3. 列表/表格
   1. 多列屬性
   2. 可伸縮框屬性
   3. 列表屬性
   4. Grid屬性
   5. Table屬性
4. 動畫屬性
   1. Animation 動畫屬性
   2. Transition 過渡屬性

CSS屬性分類

文本/字體/顏色/背景

字體類

1. font-family：指定字體
   1. 需要考慮客戶端機器上是否裝有字體
   2. 可以排列多個字體，用逗號分隔，如果有空格用引號分隔
   3. 最后一個建議放通用字體名，這個屬性只有幾個選項：serif | sans-serif | cursive | fantasy | monospace
2. font-size：字體大小，要注意有絕對大小，相對大小，長度，百分比
   1. 一般建議采用相對大小，即em或者rem
   2. 典型的長度單位，詳細信息請參考這里
3. font-style：正常體、斜體、傾斜體
4. font-weight：設置粗體
5. font-variant：用來將所有字體都變成大寫，但是原來是大寫的字體呢又要比默認的要大一些
6. font：
   1. 簡寫形式，如上所有跟字體相關的字體混合在一起
   2. font-family是必選的，而且一定要在最后；font-size如果有，必須出現在倒數第二個, 后面可以用/跟一個line-height的設置
   3. 剩下的font-style, font-weight, font-variant就無所謂了，前面任意排列
   4. font還支持一些類似caption, icon等快捷描述
   5. 詳細請參考這里
7. line-height：一個數字，默認差不多為1.2，有normal/數字/長度/百分比
   1. 一般建議使用純數字, 用長度和百分比都在某些特殊情況下超出預期，即子元素的行高被父親元素設置了，同時子元素還有默認的瀏覽器字體設置的場景。參考這里
   2. 長度可以參考這里
8. font-size-adjust：不太常用屬性，用來設置英文字體的大小寫字母之間的高度比例的

文本類

1. word-spacing：詞和詞之間的距離，默認值是由字體來定的，自定義可以定義為長度/百分比，對於中文來講，也是空格
2. letter-spacing：字母和字母之間的距離，默認值是由字體來定的，可以自定義為長度單位
3. word-break：文字換行邏輯
   1. normal：默認值，英文空格處換行，中文任意字符換行；
   2. break-all：都采用中文的方式任意換行；
   3. keep-all：都采用英文的方式，中文也要遇到了空格或者回車等特殊符號才換行
   4. break-word：跟normal類似，不過即使min_width(即單個單詞的長度)大於容器的width的時候，會換行，而不是超出
4. word-wrap/overflow-wrap：normal/break-word。word-wrap是overflow-wrap的別名。邏輯跟如上word-break的break-word的邏輯類似，要溢出的時候是否換行, 詳情參考這里
5. vertical-align: 上下對齊方式
   1. 只針對display的值為inline和table-cell的元素有效，比如span，img，input，td等元素，對於其他塊級元素都不生效
   2. 取值范圍為枚舉/長度/百分比
   3. 枚舉取值為：baseline(基線默認)/super(上標)/sub(下標)/top(父元素頂部)/bottom(父元素底部)/middle(父元素中部)/text-top(文字頂部)/text-bottom(文字底部)
6. text-align: 左右對齊方式
   1. 也是指針對行內元素有效，不能針對塊級元素進行控制
   2. 取值為：left, right, center和justify(兩側對齊)
7. text-transform：大小寫轉換
   1. 取值為枚舉：capitalize：首字母大寫；uppercase/lowercase; none;
8. text-shadow：陰影設置，可以設置陰影的顏色，相對原字體的位置，以及模糊半徑
9. text-decoration：設置顏色、位置、樣式。分別對應了text-decoration-color，text-decoration-line，text-decoration-style
   1. 位置可以為：上划線、下划線、刪除線、閃爍和無
   2. 樣式可以為：實線(solid)、雙實線(double)、dotted(點虛線)、dashed(虛線)、wavy(波浪線)
   3. 注意：父親會影響兒子，且兒子無法取消
10. text-indent：縮進，段落第一行文本要空多少距離，單位為長度
11. text-justiy：在text-align被設置為justiy的時候用來控制是在單詞之間加空格(英文)，還是在字母之間加空格(中文)
12. text-overflow：文本溢出的截斷，可以用'...'來代替，或者用自己定義的字符串來代替超出字符
    1. 需要配合 overflow: hidden 的屬性來控制, 否則還是會超出邊距顯示
13. white-space：控制空格符，"\t", "\n"以及顯示的時候是否折行顯示的屬性
    1. normal/nowrap/pre/pre-wrap/pre-line：詳情參考這里

顏色&背景類

1. color：背景顏色，關於眼色的值一共有三種，枚舉值，#xxx, rgb, hsl，詳細請參考這里
2. opacity：不透明度，即設置顏色的透明的程度，0為透明，1為不透明，單獨的屬性設置和用color的rgba函數來設置都一樣
3. backgroud-color：背景顏色
4. backgroud-image：
   1. 可以指定多個圖片，第一個圖片最接近用戶，border會最后繪制
5. backgroud-clip：背景圖片延伸到盒子模型的范圍，到文本、到邊框內沿，到邊框外沿
6. backgroud-origin：跟backgroud-clip類似，只是只作用域backgroud-image, 可以取值為border-box, padding-box, content-box
7. backgroud-position：背景圖片的位置，可以設置為枚舉值，也可以設置為相對於左上角的坐標，分別為長度單位，這個值一般要跟backgroud-repeat: no-repeat配合使用
8. backgroud-size：設置背景圖片的大小，可以控制壓縮或者截斷或者比例
   1. auto：自動
   2. cover：圖片做截斷，裝滿背景，但是背景圖片可能顯示不全
   3. contain：圖片不做截斷，但是有可能裝不滿背景
   4. 還可以指定長寬來按照指定的比例來縮放背景圖片
9. backgroud-repeat：不重復；沿着x,y軸重復（最后一個圖片可能會被截斷）；圖片不截斷，但是中間留空隙；圖片不截斷，同時拉伸/壓縮圖片保證圖片之間無空隙；
10. backgroud-attachment：背景圖片是否隨着鼠標滾輪而變動位置
11. backgroud：如上各個backgroud開頭的屬性的組合，組合比較自由，一共8個元素：
    1. backgroud-color必須出現在最后；
    2. 盒子屬性有backgroud-clip, backgroud-origin，可以出現0,1,2次
    3. backgroud-size必須出現在backgroud-position之后，用/連接
    4. backgroud-image, backgroud-position, backgroud-size, backgroud-repeat, backgroud-attachment 可以任意出現

文字連接&鼠標樣式

1. a:link 文字連接默認格式； a:visited 訪問過后的鏈接樣式；a:active 鼠標點擊時候的樣式；a:hover 鼠標移動上去的樣式；
2. 鼠標樣式：help 加?；pointer 變為手；progress：請等待；wait：系統繁忙；move：拖拽；not-allowed：不能執行；等等，詳細請參考這里

大小/布局類

大小屬性

1. width/height：包含了width，max-width，min-width幾個配套的屬性，值為長度/百分比；同時還可以設置一些屬性值，用於表達width用於內容級別，還是border級別等；
2. max-width/max-height：最大寬度/高度
3. min-width/min-height：最小寬度/高度

盒子模型類

1. border：包含了粗細、樣式、顏色。
   1. border-width：可以有1~4個長度值。1個代表4個邊；2個的話代表橫邊和縱邊；3個代表上，左&右，下；4個代表上，右，下，左
   2. border-style：可以有1~4個枚舉值。跟text-decoration類似，可以有實線、雙實線、虛線、點虛線、波浪線等，還可以有浮雕、陷入、突出等效果；
   3. border-color：可以有1~4個顏色值。
   4. border-image：可以用來設置邊框的圖片，用來顯示一些比較漂亮的邊框，圖片選擇哪些部分來作為邊框請參考這里
   5. border-radius：用來設置圓角的
   6. box-shadow：邊框的模糊划效果，跟text-shadow是類似的效果，可以設置陰影相對位置/陰影模糊半徑/擴散半徑/陰影顏色；
2. outline：outline跟border類似, 是畫邊框的，
   1. 跟border的區別是 1. 不占盒子模型寬度; 2. 可能不是矩形;
   2. 准確來說, outline應該不算是盒子模型的屬性
   3. 跟border類似有, outline-style, outline-color, outline-width三個子屬性
3. margin/padding：外邊距，內邊距的屬性，可以有1~4個值，不同個數的值代表函數同邊；
4. margin-top/margin-bottom/margin-left/margin-right：對應的控制4個邊的外邊距的屬性
5. padding-top/padding-bottom/padding-left/padding-right：對應的控制4個邊的內邊距的屬性

布局類

基礎定位類

1. float：浮動屬性
2. clear：清除浮動
3. position：位置類型
4. top/left/bottom/right：如果設置了position為非static的話，就可以設置這幾個值來調整div的相對位置
5. display：顯示類型
6. visibility：是否顯示，設置為hidden則不顯示，跟display:none最大的區別就在其還是會占據空間；還有個跟表格相關的collapse的選項；
7. overflow：visible(默認值), 會顯示出來；hidden, 不顯示了；scroll，增加滾動條；auto，交給瀏覽器來判斷是否裝得下，裝不下就加滾動條；
8. clip：用來剪切一個形狀的屬性，可以剪切為圓形，不規則多邊形，圓弧等形狀
9. transform：對元素屬性主要是用來對某個元素進行旋轉，偏移等，demo效果請參考這里。
10. z-index：
    1. 不同z-index之間的比較只針對父親和直屬子元素，一個比較好的理解是給理解成目錄版本號，詳細請參考這里
    2. 除了z-index之外，還有其他的一些屬性也會生成一個新的層疊上下文
       1. z-index不為auto：非static的元素，或者flex元素
       2. opacity小於1, 即元素半透明
       3. transform不為nong的元素，即有各種角度變換的操作等

多列屬性

1. columns：像論文一樣將文章按照多列的方式來展示，可以分成任意多列；
2. column-count：分成幾列來顯示文本
3. column-gap：每一列之間的間距大小
4. column-rule：每一列之間的間隔樣式(類似border)
5. column-span：可以將某段文字橫跨所有列, 比如標題，或者將文章分成幾個格子來展現
6. column-width：每一個列的寬度；

Flex布局

父親元素設置

基本屬性設置

彈性布局，更多詳細請參考這里

該布局主要用於單行的橫向排版布局, 相比於float等布局方式主要好處在於其不脫離文檔流, 控制比例方便

1. display:flex：將父親設置為 flex 彈性布局
2. flex-direction：row(從左往右), row-reverse(從右往左), column(從上往下), column-reverse(從下往上)
   1. 主軸：以從左往右為例, 就是左->右;
   2. 交叉軸：就是垂直於主軸的方向，以rtl為例, 就是上->下；
   3. 起始和終止：以左->右布局為例, 起始就是左邊交叉軸->右邊交叉軸;
   4. 主軸和交叉軸概念很重要，因為各種屬性都是控制區塊是如何在主軸和交叉軸上面分布的；
3. flex-wrap：沿着主軸的元素如果超出父元素寬度之后，是否自動折行顯示新子元素，默認不折行，直接超出父元素顯示；
   1. wrap：換行；nowrap：不換行；
4. flex-flow：將flex-direction和flex-wrap合起來的簡寫屬性；

元素對齊與空間分配

1. align-items：元素在交叉軸上的高度控制
   1. flex-start：頂部對齊，不自動拉伸高度
   2. felx-end：底部對齊，不自動拉伸高度
   3. center：中間對齊
   4. stretch：默認值，自動拉伸占滿所有高度
2. justify-content：在主軸上的布局方式
   1. flex-start：靠左對齊
   2. flex-end：靠右對齊
   3. center：居中
   4. space-round：平均分布，左右也留白
   5. space-between：平均分布，左右對齊邊界
3. align-content：對於多行的flex容器設置行與行之間的排布

子元素寬度屬性

占據寬度設置

1. flex-bias：用來決定子元素的初始長度
   1. 默認為auto，意思是讓瀏覽器來決定寬度，如果設置了width，就用；否則就瀏覽器自己計算；
   2. 也可以人工指定絕對值或者百分比（相對父親），用來手動指定寬度
2. flex-grow：一個絕對的數字，如果子元素之和沒有父元素寬的話，就用這個數字的相對比例來決定每個元素如何分配剩下的空間
3. flex-shrink：跟flex-grow類似，只不過是子元素之和大於父元素的時候，怎么壓縮，不過壓縮不會無限制壓縮，每個元素都會有個最小寬度。
   1. 具體grow和shrink在實際應用當中的表現可以參考這里
4. flex：如上三個屬性的簡寫，可以為枚舉值或者1~3個數字
   1. auto：相當於1 1 auto，即自動伸長，也自動伸縮，寬度由瀏覽器決定
   2. initial: 默認值, 相當於0 1 auto, 即不自動伸長，但是自動收縮，寬度由瀏覽器決定
   3. none：相當於0 0 auto，即不自動伸長，也不自動收縮，寬度由瀏覽器決定
   4. 如果是一個值：
      1. 如果是一個無單位的數，會被當成flex-grow的值
      2. 如果是一個長度/寬度單位，會被當成flex-bias的值
   5. 如果是兩個值：
      1. 第一個值必須是一個無單位的數，當成是flex-grow的值
      2. 第二個值可以是：
         1. 一個無單位的數，當成是flex-shrink的值
         2. 一個長度/寬度單位，會被當成是flex-bias的值
   6. 如果是三個值
      1. 第一個值必須是無單位的數，會被當成flex-grow的值
      2. 第二個值必須是無單位的數，會被當成是flex-shrink的值
      3. 第三個值必須是長度/寬度單位或者枚舉值，被當成flex-bias的值
      4. 占據高度設置
5. align-self：在子元素上面設置元素在交叉軸上面的高度控制
   1. 默認為父親的align-items的值
   2. 如果設置了，就覆蓋父親的值，值得取值范圍和含義跟align-items一模一樣
   3. 排序設置
6. order：如果子元素設置了該屬性，則各子元素按照order值排序，否則按照文檔出現的先后順序排序

網格布局

網格布局跟Flex彈性布局是類似的，都是css3新出的屬性。

Flex主要針對的是單行的布局，一般不會換行。Grid主要針對的是表格類多行布局，可以將其想象成在css中控制類似excel的表格。

相比於普通的html中的table布局，Grid布局一方面主要是在 css 中控制表格效果，另一方面是在合並單元格方面比表格布局會更靈活。

更多跟Grid布局相關的信息，請參考這里

父親屬性

1. display: grid：將父親設置為表格布局屬性，所有其直屬兒子都會按照表格方式布局
2. grid-template-columns：將表格分為多少列
   1. 可以直接寫100px, 100px, 100px 將表格分為三個 100px 的列
   2. 也可以寫 1fr, 1fr, 1fr 將表格均分為三個相同的列，主要 fr 是專門為grid布局新出的一個單位
   3. 也可以寫 repeat(3, 1fr) 達到跟上面一樣的效果，這樣可以減少書寫的量
   4. 還可以為每條線命名，這樣兒子就可以不用坐標，而用名字來定位，有的時候這樣代碼會更可讀一些，比如
      1. grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
3. grid-template-rows：將表格分為多少行，同上
4. grid-auto-rows：設置每一行的高度，可以用minmax(100px, auto)來設置為最少100px, 最高就讓瀏覽器自己設置
5. grid-auto-columns：同grid-auto-rows
6. grid-column-gap：列與列之間的寬度，一個長度單位
7. grid-row-gap：行與行之間的寬度，一個長度單位
8. grid-gap：如上兩個屬性的簡寫
   1. 如果只有一個值，會同時應用到行與列的間距
   2. 如果有兩個值，第一個用到行，第二個用到列
9. grid-template-areas：這個是基於命名網格的定位， 在該屬性中將所有單元格屬於哪個兒子都寫出來，詳情請參考這里

兒子屬性
兒子定位默認是從左到右，從上到下，按照單元格依次排布的。

而Grid屬性最大的作用就是可以彈性布局，即合並單元格，每個兒子可以指定自己所占據的單元格的區間。

設置的方式有多種：

1. grid-column-start/grid-column-end/grid-row-start/grid-row-end：這四個屬性就對應了橫縱坐標軸(注意，是從1開始)
   1. 默認每個兒子只占一個單元格，所以如果只寫了start，不寫end的話，默認end就是start+1；同樣，如果只寫了end的話，start就是end-1
   2. 坐標可以設置為負數，即導數第幾個坐標
2. grid-column/grid-row的簡寫，如下：
   1. grid-column: 1 / 2
   2. grid-row： 1 / 4
   3. 可以用span關鍵字來改為start/start+_span_的方式來設置單元格屬性，這樣可以專注單元格大小，示例如下：
      1. grid-column: 1 / span 1
      2. grid-row: 1/ span 3
      3. 效果跟上面兩行效果是一樣的
3. grid-area屬性，如下：
   1. grid-area：1 / 1 / 4 / 1
   2. 該屬性是按照 上/左/下/右 的順序來寫的，跟margin正好是反方向的

表格布局

表格布局是很老很早的布局了，其布局結構主要在html中控制，css中有如下的幾個屬性來控制表格的行為：

而現在表格一般不用來布局了，主要還是用來做表格類數據的呈現。

1. border-collapse：控制單元格之間的邊框是否合並，默認不合並，但是一般都要設置為合並；

   1. 默認為seperate，合並為collapse

2. border-spacing：跟grid-gap類似，設置的單元格之間的間距，如果是一個值就是統一設置，如果是兩個值就是先行后列

   1. 如果設置了border-collapse屬性，就會忽略border-spacing的屬性

3. empty-cells：在沒有內容的單元格周圍是否繪制邊框

   1. show：繪制，默認值
   2. hide：不繪制
   3. 如果設置了border-collapse為collapse的話，就會忽略該屬性

4. caption-side：可以在html中用 caption 添加一個標題，然后這個屬性是用來控制該標題的位置，是位於表格的上面還是下面

5. top：頂部

6. bottom：底部

7. table-layout：用來設置單元格的布局寬度高度的算法

   1. auto：自動設置，默認值
      1. 某列寬度由沒有折行的最大寬度來決定，即使設置了width也沒用
      2. 該算法較慢，因為要遍歷完所有內容才能決定每一列的寬度，在主要以呈現數據為主的頁面中不建議使用
   2. fixed：固定寬度
      1. 跟單元格內內容無關，就跟表格自身設置的高度寬度比例有關

動畫屬性

animation

animation 屬性的動畫原理是在一段時間之內修改某個元素的屬性，然后瀏覽器會自動的將修改屬性在這段時間之內均勻化，看起來就是一個比較均勻的動畫效果了。

最簡單的動畫就是設置調整位置屬性，然后就可以均勻的上
下或者左右移動了。

1. @keyframes

動畫的關鍵幀配置，類似一個函數，將動畫的關鍵時間點對應的屬性信息給標注上，配置示例如下：

@keyframes mymove
{
    0%     {top:0px;}
    25%    {top:200px;}
    50%    {top:100px;}
    75%    {top:200px;}
    100% {top:0px;}
}

最終的動畫效果參考這里。

1. animation-name：即指定的 keyframes 的名字，如上的例子就是 mymove
2. animation-duration：動畫的持續時間，我估計瀏覽器會根據這個時間來計算需要自動計算的幀數，因為人眼睛需要每秒24幀的變化才能顯示出比較平滑的動畫效果；
3. animation-timing-function：動畫的變化的速度曲線，可以是線性的，或者一開始慢后面快，或者反過來，或者先慢后快結束的時候再慢等選項，也可以通過指定三次貝塞爾函數 cubic-bezier(n,n,n,n) 來選擇不同的動畫效果；
4. animation-delay：在動畫開始之前的延遲；
5. animation-iteration-count：默認為1，可以為任意整數，也可以設置為枚舉值 infinite 從而無線循環；
6. animation-direction：枚舉值，默認為normal，即正常播放動畫，可以設置為 alternate 該值得含義是奇數次正向播放，偶數次反向播放；當然，如果 animation-iteration-count 設置為1的話，該屬性就沒有意義了；
7. animation-play-state：paused和running的枚舉值，可以對動畫進行暫停和繼續的操作，類似視頻播放的感覺；
8. animation-fill-mode：在動畫開始之前和之后屬性的應用值；
9. animation：綜合如上所有屬性的一個簡寫屬性
   1. 各簡寫屬性出現的順序並沒有明確規定，而且沒有任何一個屬性是必須的；
   2. 只有時間的值可能會出現0，1,2次，當出現1次的時候表示的是 animation-duration 的值，如果出現2次代表的是 animation-delay 的值
   3. 可以有多組值，用逗號做分割，表示多個動畫效果同時顯示和起作用

transition

1. transition-property：對該元素哪個屬性的變化進行動畫效果
   1. 當然，不是所有的屬性都支持動畫的，常見的位置、大小、顏色、以及旋轉 之類的都是支持的，詳細支持列表請參考這里
   2. 只要屬性發生變化，都會實現動畫效果，比如hover屬性或者js變化屬性
2. transition-duration：動畫的持續時間
3. transition-delay：動畫開始的延遲時間
4. transition-timing-function：動畫的速度函數，可以是勻速，也可以是變速，也可以是指定函數
5. transition：是如上幾個屬性定的簡寫屬性
   1. 幾個屬性出現的順序沒有明確規定，如果是時間字段的話，第一個是duration，第二個是delay-time
   2. 一些常見的動畫效果示例請參考這里。

其他

1. 長度：長度是css的基本單位，會有如下的一些可能的值：
   1. 會用到長度單位的典型的屬性：
      1. font-size, width, margin, padding, border-width, text-shadow
   2. 相對單位
      1. cap：相對當前字體的大寫字母的高度
      2. ch：相對字體當中0的高度
      3. ex：相對字體當中小寫x字母的高度，一般字體的ex≈0.5em
      4. lh/rlh：相對當前行高/跟節點行高
      5. em/rem：相對當前字體/根節點字體
   3. 絕對單位
      1. px：一個像素點，跟設備相關，一般1cm約等於35~45個像素點
      2. Q/mm/cm：0.25毫米/毫米/厘米
      3. pt/in：1/72英寸 / 英寸
      4. pc：12px
   4. 視窗單位
      1. vh/vw：相對視窗的高度/寬度的1/100
      2. vmin/vmax：在視窗的min(高度, 寬度)和max(高度, 寬度)的1/100

在實際應用場景中，主要使用的是em和px兩個類型的長度。

1. 顏色：
   1. 枚舉值
      1. 比如red, blue, yellow一共大概有將近150個預定義的顏色，詳細請參考這里
   2. RGB立體坐標

      1. RGB || #RRGGBB

         1. 當設置為#RGB的時候，跟#RRGGBB是一樣的，比如#F03，效果跟#FF0033是一樣的
      2. 可以用rgb(r_int, g_int, b_int)來表示，跟上面表示是類似的，只不過一個用的是16進制，一個用的是十進制
      3. 可以用rgba(r_int, g_int, b_int, 透明度)，透明度得分從0~1的浮點數，0是透明，1是不透明
   3. HSL圓柱坐標
      1. hsl(色相, 飽和度, 明度)
         1. 色相是一個彩虹圓環的角度值，red為0/360，green為120，blue為240；
         2. 飽和度是顏色的顯示強度，如果為0就是黑白照片即某種灰色
         3. 明度是明亮度，如果是100%，就是白色了，如果是0%，那就是黑色了
      2. hsla，跟rgba一樣可以增加一個透明度的參數
2. 漸變函數
   1. 漸變函數是一種自定義的image表示方法，使用示例參考這里
   2. 直線漸變：linear-gradient(角度，方向，顏色列表)，在顏色后面還可以跟一個比例表示位置從什么地方開始漸變
   3. 圓形漸變：radial-gradient(顏色列表)
   4. 重復漸變：重復漸變（即條紋裝漸變）

參考

1. CSS屬性的高級分類. https://blog.csdn.net/qq_16546829/article/details/81979142
2. CSS屬性參考頁面. https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference