我遇見的哪些 CSS 中有趣的尺寸、寬高

炎霖發表於2019-02-28
CSS

原文連結： https://github.com/hangyangws/article/blob/master/src/css-width-about.md

寫在前面

目的：「攻鞏固 CSS 知識，發現新的『桃花源』」
受眾群體：「web 前端開發者、愛好者」

感謝：

  1. www.w3.org 文獻
  2. 張鑫旭 個人部落格

我遇見的哪些 CSS 中有趣的尺寸、寬高

不常見長度單位

  • ex 相對於「小寫字母」x 的 高度
  • ch 相對於「數字」 0 的 寬度

利用 ch 單位實現「打字效果」的 一個 Demo
核心原理：利用寬度 ch 剛好是一個字母的寬度實現「寬度等比增長」

  • vw 相對於視窗的 寬度：視窗寬度是 100vw「window.innerWidth」
  • vh 相對於視窗的 高度：視窗高度是 100vh「window.innerHeight」
  • vm 取決於 min(vw, vm)

利用 vw 實現的一個「懶載入時，頁面不隨著滾動條抖動」的 一個 Dome
溫馨提示：mac 的瀏覽器滾動條不佔「顯示區域」的寬度
核心原理：利用寬度 calc(100vm - 100%) 剛好等於滾動條的寬度

實用的實體單位

  •   相當於 em 的寬度
  •   相當於 1/2 em 的寬度

使用場景

當我們需要給文字增加間隙的時候，可能會使用 last-letter，但是他會使最後一個字元後面也有間距
所以可以使用 string.split(``).join(` `) 的方式

利用   實現的對齊效果 一個 Demo

另外 text-align: justify; 也能實現「文字兩端對齊」的效果 一個 Demo

height、width、百分比、迴圈

先丟擲一個疑問：如果沒有顯示的設定父元素寬高，子元素寬高的百分比有效果嗎？
看一個 Demo

為什麼父元素沒有顯示得設定高度，子元素高度設定 100% 就沒有效果呢？
在翻閱 w3 對高度的定義 、w3 對寬度的定義，後瞭解到瀏覽器的寬高計算原理：

高度的計算

如果元素 沒有顯示的設定高度 且 非 fixed/absolute 定位，
其 渲染高度 為子元素的的高度，其 計算高度 為 auto
所以如果未顯示設定父元素高度，其高為 auto，子元素 height: 100% 的意思就是 auto * 100% ≈ auto

寬度的計算

如果元素 沒有顯示的設定寬度 且 非 fixed/absolute 定位，
如果元素是塊級元素，其 渲染寬度 為父元素的的寬度，其 計算寬度 也為父元素的的寬度
如果元素是行級元素，其 渲染寬度 為子元素的的寬度，其 計算寬度 也為子元素的的寬度
所以未顯示設定寬度，其高為和 渲染高度 一樣，所以子元素的百分比寬度有效果

再丟擲一個疑問：這個 Demo 的父元素的寬為什麼不是子元素的寬度和？
如果父元素寬度變化，這樣會不會帶來渲染迴圈問題？

答案是不會，讓我來講解一下瀏覽器渲染的基本順序和原理：

  1. 下載文件內容，生成 DOM
  2. 載入頭部的樣式資源，生成 CSSOM
  3. 按照從上而下，自外而內的順序渲染 DOM 內容「先渲染父元素，後渲染子元素」

遵循上面的原則，當瀏覽器渲染父元素的時候，還未渲染子元素，
這個時候瀏覽器要根據子元素的寬度來計算父元素的寬度，
不過這個時候，子元素 DOM 還沒有結合 CSSOM 渲染，所以子元素就是圖片和文字的寬度和，
所以父元素的寬度就是圖片和文字的寬度和

所以我們也明白了： CSS 中父元素選擇器 久久未實現的原因，是因為這樣真的會導致「迴圈渲染」

padding 百分比

丟擲一個問題：padding-top、padding-bottom 如果設定為百分比，是相對於什麼來計算的？
答案是相對於父元素的寬度來計算的「一臉吃驚的表情，記住就好」?

height:100% 和 height:inherit 的異同

如果 height:inherit 是繼承父元素的高度，那麼和 height:100% 不是沒有什麼區別麼？
一般情況他們二者沒有區別，區別在於元素為「絕對定位」時
絕對定位元素的 height:inherit 是相對於父元素計算；而 height:100% 相對於定位基準元素計算

width 新鮮值

作用：在原有的 display 水平不變的情況下擁有元素其他 display 值才有的特性

  • fill-available

fill-available 元素會充分利用可用空間，就像 div 一樣「預設 100% 寬度」。
塊級元素預設寬度表現行為就是 fill-available。
一個 Demo 認識 fill-available

  • max-content

假設 我們的容器有足夠的寬度，足夠的空間，此時，所佔據的寬度是就是 max-content 所表示的尺寸
一個 Demo 認識 max-content
一個 max-content 的實際用例

  • min-content

min-content 元素寬度為「內部元素最小寬度值最大的那個元素的寬度」
最小寬度值的意思：
例如圖片的最小寬度值就是圖片呈現的寬度；
對於文字元素，如果全部是中文，則最小寬度值就是一箇中文的寬度值；
如果包含英文，因為預設英文單詞不換行，所以，最小寬度可能就是裡面最長的英文單詞的寬度。

  • fit-content

fit-content 元素的寬度計算方式和「float、absolute、inline-block」一樣
這種計算方式被稱為「shrink-to-fit」

舉例一個使用場景，就拿水平居中效果舉例：
inline-block 元素需要父級使用 text-align: center，而本身可能還需要 text-align: left。? mdzz~~~
而 width: fit-content 可以沒有這些煩惱，
因為，width: fit-content 可以實現元素收縮效果的同時，保持原本的 block 水平狀態
於是，就可以直接使用 margin: 0 auto 實現元素向內自適應同時的居中效果了

相關文章