目录
1. 绝对长度单位
彼此固定,不会因为其他元素的尺寸变化而变化。
px
cm
mm
Q
in
pc
pt
单位 | 名称 | 等价于 |
---|---|---|
px | 像素(pixels) | 典型的度量单位,很多其他长度单位直接映射成像素 |
cm | 厘米(centimeters) | 1cm = 10mm = 96px/2.54 = 37.8px |
mm | 毫米(millimeters) | 1mm = 0.1cm = 3.78px |
Q | 1/4毫米(quarter-millimeters) | 1q = 1/4mm = 0.945px |
in | 英寸(inches) | 1in = 2.54cm = 96px |
pc | 派卡(picas) | 1pc = 12pt = 1/6in = 1/6*96px = 16px |
pt | 点(points) | 1pt = 1/72in = =0.0139in = 1/722.54cm = 1/7296px = 1.33px |
px (pixel) 像素
px表示“绝对尺寸”(并非真正的绝对),实际上就是CSS中定义的像素(此像素与设备的物理像素有一定的区别)
利用px设置字体大小及元素宽高等比较稳定和精确
在IE下,不能适应浏览器缩放时产生的变化(影响不大,忽略)
2. 相对长度单位
指定相对于另一长度的长度。主要有:
2.1 字体相关的相对长度单位:
em
rem
ex
ch
em
- em是相对字体长度单位。
- 如果用于font-size属性本身,则是相对于父元素的font-size。
- 若用于其他属性(width,height),则是相对于本身元素的font-size。
- 国外使用比较多;
注意:
任意浏览器的默认字体大小都是16px;
因此1em=16px
=>10px = 0.625em
为了换算方便,可在body选择器中声明:font-size=62.5%
这样,就使得10px = 1em
;
缺点:
em
是继承父元素的字体大小,每当父元素的字体大小改变时,就得重新计算。
rem
- rem是CSS3新增的一个相对字体长度单位,只相对根元素即HTML元素字体大小
html{font-size:62.5%; }
body{font-size:12px;font-size:1.2rem ;}
p{font-size:14px;font-size:1.4rem;}
- IE9/10中font缩写和伪元素中不支持rem单位
- IE9/10部分支持,IE11+、Firefox、Chrome、Safari、Opera 的主流版本都支持,为了兼容不支持 rem 的浏览器,我们需要在 rem 前面写上对应的 px 值,这样不支持的浏览器可以优雅降级。
ex
- ex 指所用字体中小写x的高度。但不同字体x的高度可能不同。实际上,很多浏览器取em值的一半作为ex值
- ex 在实际中常用于微调
ch
- ch与ex类似,被定义为数字0的宽度。当无法确定数字0宽度时,取em值得一半作为ch值
- ch 在实际中主要用于盲文排版
- 兼容性:IE8不支持
2.2 视口相关的相对长度单位:
vw
: 视口高度,默认为视口高度的1%
vh
: 视口宽度,默认为视口宽度的1%
vmin
: 布局视口高度和宽度之中值较小的那个的 1/100
vmax
: 布局视口高度和宽度之中值较大的那个的 1/100
- 视口单位中的“视口”,在桌面端,毫无疑问指的就是浏览器的可视区域;
- 但是在移动端,它指的则是Layout Viewport(布局视口)
2.3 相对于包含块的宽高或字体大小
%
百分比是一个相对长度单位,相对于包含块(containing block)的高宽或字体大小。
关于包含块(containing block)的概念,不能简单地理解成是父元素。
如果是静态定位和相对定位,包含块一般就是其父元素。
如果是绝对定位的元素,包含块应该是离它最近的 position为非static属性的祖先元素。
如果是固定定位的元素,它的包含块是视口(viewport)。