整理一些CSS的知識

最近在翻《CSS權威指南》，一些零散的知識點平時不太注意，這裏記錄一下。

CSS屬性display

display指定了元素的顯示類型，它包含兩類基礎特徵，用於指定元素怎樣生成盒模型——外部顯示類型定義了元素怎樣參與流式佈局的處理，內部顯示類型定義了元素內子元素的佈局方式。

<display-outside>（指定了元素的外部顯示類型，實際上就是其在流式佈局中的角色） = block | inline | run-in
<display-inside> （指定了元素的內部顯示類型，它們定義了元素內部內容的格式化上下文的類型）= flow | flow-root | table | flex | grid | ruby
<display-listitem> （元素的外部顯示類型變爲 block 盒，並將內部顯示類型變爲多個 list-item inline 盒）= <display-outside>? && [ flow | flow-root ]? && list-item
<display-internal> （用來定義這些「內部」顯示類型，只有在特定的佈局模型中才有意義）= table-row-group | table-header-group | table-footer-group | table-row | table-cell | table-column-group | table-column | table-caption | ruby-base | ruby-text | ruby-base-container | ruby-text-container
<display-box> （是否徹底生成顯示盒）= contents | none
<display-legacy> （CSS 2 對於 display 屬性使用單關鍵字語法）= inline-block | inline-list-item | inline-table | inline-flex | inline-grid
複製代碼

候選樣式表

<link rel="stylesheet" href="day.css" title="Default Day">
<link rel="alternate stylesheet" href="night.css" title="Night">
複製代碼

rel（關係）中能夠指定候選樣式表，默認使用第一個樣式表。恰好看到這篇文章link rel=alternate網站換膚功能最佳實現，本身實現了一下：

屬性選擇符

• [ foo|='bar' ] 選擇的元素有foo屬性，且其值以bar和一個英文破折號開頭，或者值就是bar自己
• [ foo~='bar' ] 選擇的元素有foo屬性，且其值是包含bar這個詞的一組詞
• [ foo*='bar' ] 選擇的元素有foo屬性，且其值包含子串bar
• [ foo^='bar' ] 選擇的元素有foo屬性，且其值以bar開頭
• [ foo$='bar' ] 選擇的元素有foo屬性，且其值以bar結尾

這裏的應用在於，若是咱們在開發一個CSS框架或者模式庫，定義一個類'btn btn-small btn-arrow btn-active'顯得冗餘，咱們能夠直接使用'btn-small-arrow-active'

<button class="btn-small-arrow-active"></button>
*[class|="btn"][class*="-arrow"]:after {content: '▼'}
複製代碼

特指度

一個元素可能被兩個或多個規則匹配，其中只有一個規則能勝出，特指度可以解決衝突。一個特指度由四部分構成，好比0, 0, 0, 0

• 選擇符的每一個ID屬性值加0, 1, 0, 0
• 選擇符的每一個類屬性值、屬性選擇或僞類加0, 0, 1, 0
• 選擇符中的每一個元素和僞元素加0, 0, 0, 1
• 連結符和通用選擇符不增長特指度

h1 {} /* 0, 0, 0, 1 */
p em {} /* 0, 0, 0, 2 */
.grape {} /* 0, 0, 1, 0 */
p.bright em.dark {} /* 0, 0, 2, 2 */
li#answer {} /* 0, 1, 0, 1 */
複製代碼

• !important重要規則始終勝出
• 聲明衝突，按照特指度排序
• 權重、來源和特指度一致，按照位置靠後權重更大

僞元素選擇器

el::first-letter {} /*裝飾首字母*/
el::first-line {} /*裝飾首行*/
el::before {} /*前置內容元素*/
el::after {} /*後置內容元素*/
複製代碼

超連接僞類

a:link {}
a:visited {}
a:focus {}
a:hover {}
a:active {}
複製代碼

• 注意順序，由於這裏選擇符的特指度一致，因此最後一個匹配的規則將勝出。

屬性值

可使用樣式獲取的元素上的HTML屬性值（實際兼容瀏覽器不多），例如：

<!--css-->
p::before {content: "[" attr(id) "]"}
<!--html-->
<p id="leadoff">This is the first paragraph</p>
<!--顯示結果-->
[leadoff]This is the first paragraph
複製代碼

角度單位

• deg 度數，完整圓周是360度
• grad 百分度，完整圓周是400百分度
• rad 弧度，完整圓周是2π
• turn 全周，一個完整的圓周是一圈，在旋轉動畫中最有用

自定義值

:root {/* 或者html */
    --base-color: #639;
}
h1 {
    color: var(--base-color);
}
複製代碼

文本

• text-indent：<length> | <percentage>
  • 文本縮進，用於塊級元素，縮進將沿着行內方向展開
• line-height： <number> | <length> | <percentage> | normal
  • em, ex, 百分比是相對與元素的font-size值計算
  • 從父元素繼承時根據父元素的字號計算，所以最好使用純數字進行係數換算
• vertical-align：baseline | sub | super | top | text-top | middle | bottom | text-bottom | <length> | <percentage>
  • 縱向對齊文本
  • 適用於行內元素和單元格
• text-transform：uppercase | lowercase | capitalize | none
• text-decoration：none | underline | overline | line-through | blink

邊框圖像屬性

• border-image-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat

背景屬性

• background-clip: border-box | padding-box | content-box | text

  <div class="bg-img">HELLO</div>
  <!--css-->
  .bg-img {
          width: 1500px;
          height: 400px;
          color: transparent;
          font-size: 300px;
          background-image: url('bg.jpg');
          background-size: contain;
          -webkit-background-clip: text;
          background-clip: text;
      }
  複製代碼

• background-repeat：repeat-x | repeat-y | [repeat | space | round]
  • space：肯定沿某一軸能徹底重複多少次，而後均勻排列圖像
  • round：爲了放下整個圖像，有時會調整圖像尺寸，利用round有時能實現一些有趣的效果，好比下面的平鋪效果

    

• background-attachment: scroll | fixed | local
  • fixed 固定在視區
  • scroll 隨文檔滾動
  • local 隨內容滾動
• background-size：length | percentage | cover | contain | auto
  • auto 計算相應軸的固有尺寸
  • cover 自動覆蓋背景，保持固有高寬比 （無需考慮高寬）
  • contain 保持固有高寬比，至關於100% auto（若是元素高度比寬度大，反之爲auto 100%）

---

未完待續