CSS单位小结
- pt
点,绝对长度单位,常用于印刷当中 - px
像素,绝对长度单位,但是由于各种设备的dpi不同,所以px也有其相对性,px实际上是按角度度量的单位,px也称为css像素 - em
相对长度单位,相对于应用在当前元素的字体尺寸,一般浏览器字体大小默认为16px,则2em == 32px
<body>
<div>Test</div>
</body>
body {
font-size: 14px;
}
div {
font-size: 1.2em; // 14px * 1.2 = 16.8px
}
当在每个元素内都级联em定义的字体大小,每个div从它们的父节点继承字体大小,会出现逐级增加的字体大小
<body>
<div>
Test <!-- 14 * 1.2 = 16.8px -->
<div>
Test <!-- 16.8px * 1.2 = 20.16px -->
<div>
Test <!-- 20.16px * 1.2 = 24.192px -->
</div>
</div>
</div>
</body>
- rem
相对单位,相对HTML根元素,需要内嵌一段脚本动态计算根元素大小 - 视口单位
什么是视口?在桌面端,视口指浏览器可视区域;在移动端,涉及3个视口:Layout Viewport(布局视口)、Visual Viewport(视觉视口)、Ideal Viewport(理想视口)
vw:1vw = 视口宽度的1%
vh:1vh = 视口高度的1%
vmax:选取vw和vh中最大的
vmin:选取vw和vh中最小的 - rpx
微信小程序中的css尺寸单位,可以根据屏幕宽度自适应。规定屏幕宽为750rpx。如:屏幕宽度375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素
微信小程序也支持rem,rem和rpx换算关系:规定屏幕宽度为20rem,1rem = (750 / 20)rpx - %
要有对应的参照值-
定位中的百分比:position中的top、right、bottom、left可使用百分比作为单位,参照物是包含块(不一定是父容器)同方向的width或height计算,css中position对应的属性值不一样,其对应的包含块也将不同。如果元素为static或relative,包含块一般是父容器。如果元素为absolute,包含块是离它最近的position为absolute、relative或fixed的祖先元素。如果元素为fixed,包含块就是视窗。
-
盒模型中的百分比:height、min/max-height、width、min/max-height、padding、margin和border等属性。不同属性其对应的参照物也不同。height、min/max-height相对于包含块的height计算。width、min/max-width相对于包含块的width计算。padding和margin,如果书写模式是水平的,相对于包含块的width计算;如果书写模式是垂直的,想对于包含块的height计算。
-
文本中的百分比:font-size、line-height、text-indent、vertical-align等。font-size基于父元素中的font-size。text-align和padding,如果书写模式水平,相对于width计算,如果垂直,相对height计算。line-height基于font-size计算。vertical-align基于line-height计算。
-
边框和圆角中的百分比
-
背景属性中的百分比:background-position通过(容器尺寸-背景图像尺寸)*百分比值
-
6. 变换中的百分比:translateX()相对于容器的width计算、translateY()相对于容器的height计算、translateZ()不接受百分比为单位的值。
7. 百分比值得继承:百分比用于可继承属性时,只有结合参照计算后的绝对值会被继承,而不是百分比值本身。如:一个元素的font-size是14px,并定义了line-height: 150%;那么该元素的下一级子元素继承到的line-height就是21px,不会再和子元素自己的font-size有关。