超碰人人人人人,色婷婷综合久久久久中文一区二区,国产-第1页-浮力影院,欧美老妇另类久久久久久

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

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

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

動態(tài)計算單位

認(rèn)識單位之前，先認(rèn)識幾個動態(tài)計算函數(shù)，這東東的用法可強(qiáng)大了，后續(xù)再介紹。

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

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

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

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

絕對單位

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

需要注意系統(tǒng)縮放，分辨率2560x1440的筆記本電腦，如果縮放100%，其寬度還是2560像素；如果縮放150%，其寬度將變?yōu)?560÷1.5=1706.66。。

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

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

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

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

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

• pt（點(diǎn)）
  印刷單位，1pt = 1/72英寸 ≈ 1.33px

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

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

相對單位

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

相對單位必須要找一個老六，老六的大小就是他的標(biāo)準(zhǔn)。

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

• rem
  相對于根元素（html元素）的字體大小，1rem等于根元素的字體大小。使用rem單位可以方便地進(jìn)行響應(yīng)式布局，同時避免em單位的嵌套導(dǎo)致的復(fù)雜計算問題。

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

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

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

視口單位

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

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

• vh
  視口高度的1%。

• vmin
  取視口寬高中較小的1%（如豎屏手機(jī)中相當(dāng)于vw）。

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

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

角度單位

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

• deg（度數(shù)）
  表示角度，用于控制旋轉(zhuǎn)和變形。

• rad（弧度）
  表示弧度，用于控制旋轉(zhuǎn)和變形。

• grad（梯度）
  表示梯度，用于控制旋轉(zhuǎn)和變形。

• turn（圈數(shù)）
  表示旋轉(zhuǎn)的圈數(shù)，用于控制旋轉(zhuǎn)和變形。

時間單位

多用于控制持續(xù)時間，如動畫。

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

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

網(wǎng)格單位

用于網(wǎng)格布局，就是 Grid。

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

頻率單位

嘿...這個真不常見。

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

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

分辨率單位

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

• dpi（每英寸點(diǎn)數(shù)）
  表示每英寸的點(diǎn)數(shù)，用于控制圖片大小和清晰度。

• dpcm（每厘米點(diǎn)數(shù)）
  表示每厘米的點(diǎn)數(shù)，用于控制圖片大小和清晰度。

• dppx（每像素點(diǎn)數(shù)）
  表示每像素的點(diǎn)數(shù)，用于控制圖片大小和清晰度。

常用單位

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

• px
  邊框、固定尺寸圖標(biāo)、微小間距。

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

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

• vw/vh
  全屏布局、響應(yīng)式字體/元素。

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

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

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

總結(jié)

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。