CSS中有哪些尺寸单位

本篇文章为大家展示了CSS中有哪些尺寸单位，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

成都创新互联公司IDC提供业务:服务器托管雅安,成都服务器租用,服务器托管雅安,重庆服务器租用等四川省内主机托管与主机租用业务;数据中心含:双线机房,BGP机房,电信机房,移动机房,联通机房。

绝对单位

• 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 可视范围的宽度或高度中较大的那个尺寸

运算

calc: 四则运算

实例：

h2 {
    width: calc(100% - 10px + 2rem);
}

单位比例

1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

详细

绝对单位

px - Pixel 像素

像素 px 相对于设备显示器屏幕分辨率而言。

div { font-size: 12px }
p { text-indent: 24px }

pt Points 磅

1 pt = 1/72 英寸

div { font-size: 10pt }
p { height: 100pt }

pc Picas 派卡

十二点活字（印刷中使用的），相当于我国新四号铅字的尺寸。

div { font-size: 10pc }
p { height: 10pc }

in Inches 英寸

div { font-size: 10in }
p { height: 10in }

mm Millimeter 毫米

div { font-size: 10mm }
p { height: 10mm }

cm Centimeter 厘米

div { font-size: 10cm }
p { height: 10cm }

q Quarter millimeters 1/4毫米

div { font-size: 20q }
p { height: 100q }

相对单位

% 百分比

相对于父元素宽度