CSS中的长度单位_css 长度单位

目录

• 1. 绝对长度单位
  px cm mm Q in pc pt
• 2. 相对长度单位
  相对字体：em rem ex ch
  相对视口：vw vh vmin vmax
  相对父元素大小：%

1. 绝对长度单位

彼此固定，不会因为其他元素的尺寸变化而变化。
px cm mm Q in pc pt

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;}
1
2
3

• 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）。