1. 程式人生 > >css 單位

css 單位

區域 版權 adding 100% 長度單位 size box 個數 像素

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 單位