狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

單位就是那個形容長度大小的東西。比如身高180cm(厘米)，cm就是單位。

css 也不例外，要描述一個盒子的大小，就必須要用到單位。

css 單位根據其作用分為幾大類：絕對單位、相對單位、視口單位、角度單位、時間單位、網格單位、頻率單位、分辨率單位。

動態計算單位

認識單位之前，先認識幾個動態計算函數，這東東的用法可強大了，后續再介紹。

• calc()
  動態計算值（如width: calc(100% - 20px)）

• min()
  取最小值（如width: min(100%, 500px)）

• max()
  取最大值（如width: max(50%, 300px)）

• clamp()
  限制在范圍（如font-size: clamp(1rem, 2.5vw, 2rem)）

絕對單位

絕對單位的大小固定不變，與屏幕或設備無關，適合精確控制。例如一個長寬20像素的盒子，不管是在電腦上還是手機中，其大小就是20px。

需要注意系統縮放，分辨率2560x1440的筆記本電腦，如果縮放100%，其寬度還是2560像素；如果縮放150%，其寬度將變為2560÷1.5=1706.66。。

同一個20像素，在縮放100%和縮放150%肉眼看到的大小是不一樣的。

• px（像素）
  最常用單位，1px = 1屏幕像素（非物理像素），適合固定尺寸元素（邊框、圖標）

• cm（厘米）
  實際物理尺寸（1cm ≈ 37.8px），多用于打印樣式

• mm（毫米）
  同厘米，但更精細（1cm = 10mm）

• in（英寸）
  1in = 2.54cm ≈ 96px

• pt（點）
  印刷單位，1pt = 1/72英寸 ≈ 1.33px

• pc（派卡）
  印刷單位，1pc = 12pt ≈ 16px

cm 、 mm 、 in 、 pt 、 pc 這些單位主要用于打印和其他需要精確尺寸的場合。

相對單位

相對單位的大小基于其他參考值（父元素、視口、字體大小等），適合響應式設計。

相對單位必須要找一個老六，老六的大小就是他的標準。

• em
  相對于當前元素的字體大小，1em等于當前元素的字體大小。如果父元素有font-size屬性，則子元素的em值是根據父元素的字體大小計算的。適用于創建可以相對于用戶設定的字體大小縮放的布局。

• rem
  相對于根元素（html元素）的字體大小，1rem等于根元素的字體大小。使用rem單位可以方便地進行響應式布局，同時避免em單位的嵌套導致的復雜計算問題。

• %
  相對于父元素的尺寸，例如width: 50%表示元素寬度為父元素寬度的50%。

• ch
  相對于當前元素的字體寬度，1ch = 當前字體中 "0" 字符的寬度，適合文本排版對齊。

• ex
  相對于當前字體的x高度，1ex等于當前字體的x高度，使用較少。

視口單位

視口單位就是相對于瀏覽器窗口的寬度或高度，它與屏幕或設備無關，只與瀏覽器的可視窗口有關。

• vw
  視口寬度的1%（50vw = 視口寬度的一半）。

• vh
  視口高度的1%。

• vmin
  取視口寬高中較小的1%（如豎屏手機中相當于vw）。

• vmax
  取視口寬高中較大的1%。

• svh/lvh
  區分短視口（svh）和完整視口（lvh），解決移動端瀏覽器地址欄遮擋問題。

角度單位

對頭，就是那個三角函數中的角度，弧度。

• deg（度數）
  表示角度，用于控制旋轉和變形。

• rad（弧度）
  表示弧度，用于控制旋轉和變形。

• grad（梯度）
  表示梯度，用于控制旋轉和變形。

• turn（圈數）
  表示旋轉的圈數，用于控制旋轉和變形。

時間單位

多用于控制持續時間，如動畫。

• s（秒）
  用于控制動畫和過渡的時間長度。

• ms（毫秒）
  用于控制動畫和過渡的時間長度，是秒的千分之一。

網格單位

用于網格布局，就是 Grid。

• fr
  表示網格容器剩余空間的一部分，用于網格布局。

頻率單位

嘿...這個真不常見。

• Hz（赫茲）
  表示頻率，用于控制動畫和音頻的播放速度。

• kHz（千赫茲）
  表示千赫茲，是赫茲的千倍，用于控制音頻的播放速度。

分辨率單位

用于打印媒體查詢，沒見過~~

• dpi（每英寸點數）
  表示每英寸的點數，用于控制圖片大小和清晰度。

• dpcm（每厘米點數）
  表示每厘米的點數，用于控制圖片大小和清晰度。

• dppx（每像素點數）
  表示每像素的點數，用于控制圖片大小和清晰度。

常用單位

這么多單位，可不是每個都會使用的，一般常用的也就幾個，如下：

• px
  邊框、固定尺寸圖標、微小間距。

• %
  容器寬度、高度（相對于父元素）。

• rem
  字體大小、間距、布局尺寸。

• vw/vh
  全屏布局、響應式字體/元素。

• fr
  CSS Grid 布局中的彈性列寬。

• calc()
  動態計算尺寸（如 calc(100% - 20px)。

• clamp()
  流體響應式設計（如字體、容器尺寸）。

總結

1. 核心掌握：px、%、rem、vw/vh、fr、calc()、min()、max()、clamp()。

2. 了解即可：em、vmin/vmax、ch。

3. 特殊場景備用：svh/lvh、ex。

4. 無需深究：cm、mm、in、pt、pc。