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也可以很方便地幫助我們控制響應尺寸,但實際的可控性可能不如前者,具體按照我們的業務需求去實踐吧!
css 單位