css 單位

CSS 有幾個不一樣的單位用於表示長度。

一些設置 CSS 長度的屬性有 width, margin, padding, font-size, border-width, 等。

長度有一個數字和單位組成如 10px, 2em, 等。

數字與單位之間不能出現空格。若是長度值爲 0，則能夠省略單位。

對於一些 CSS 屬性，長度能夠是負數。

有兩種類型的長度單位：相對和絕對。

  以上爲菜鳥教程版權全部！

 

 

絕對單位

px: Pixel 像素
pt: Points 磅
pc: Picas 派卡
in: Inches 英寸
mm: Millimeter 毫米
cm: Centimeter 釐米
q: Quarter millimeters 1/4毫米

相對單位

%: 百分比
em: Element meter 根據文檔字體計算尺寸
rem: Root element meter 根據根文檔（ body/html ）字體計算尺寸
ex: 文檔字符「x」的高度
ch: 文檔數字「0」的的寬度
vh: View height 可視範圍高度
vw: View width 可視範圍寬度
vmin: View min 可視範圍的寬度或高度中較小的那個尺寸
vmax: View max 可視範圍的寬度或高度中較大的那個尺寸

css計算屬性：

calc: 四則運算

實例：h1 {    width: calc(100% - 10px + 2rem) }

vmin / vmax 可視範圍的寬度或高度中較小/較大的那個尺寸

假設須要讓一個元素始終在屏幕上可見：.box {  height: 100vmin; width: 100vmin;}

 

 

若是須要讓這個元素始終鋪滿整個視口的可見區域：.box { height: 100vmax; width: 100vmax;}

 

 em、rem 是實際生產中咱們最經常使用到的單位，可使用其配合媒體查詢改變 body 字體大小來實現響應式的設計，vh、vw、vmin、vmax也能夠很方便地幫助咱們控制響應尺寸，但實際的可控性可能不如前者，具體按照咱們的業務需求去實踐吧！