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

原文連接： http://hangyangws.win/2017/06/02/css-width-about/

寫在前面

目的：「攻鞏固 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 實現元素向內自適應同時的居中效果了