CSS单位小结

最新推荐文章于 2022-03-28 13:02:41 发布

一只柚子爹

最新推荐文章于 2022-03-28 13:02:41 发布

阅读量199

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_43957218/article/details/109637240

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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
%
要有对应的参照值
1. 定位中的百分比：position中的top、right、bottom、left可使用百分比作为单位，参照物是包含块（不一定是父容器）同方向的width或height计算，css中position对应的属性值不一样，其对应的包含块也将不同。如果元素为static或relative，包含块一般是父容器。如果元素为absolute，包含块是离它最近的position为absolute、relative或fixed的祖先元素。如果元素为fixed，包含块就是视窗。
2. 盒模型中的百分比：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计算。
3. 文本中的百分比：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计算。
4. 边框和圆角中的百分比
5. 背景属性中的百分比：background-position通过(容器尺寸-背景图像尺寸)*百分比值

在这里插入图片描述
6. 变换中的百分比：translateX()相对于容器的width计算、translateY()相对于容器的height计算、translateZ()不接受百分比为单位的值。
7. 百分比值得继承：百分比用于可继承属性时，只有结合参照计算后的绝对值会被继承，而不是百分比值本身。如：一个元素的font-size是14px，并定义了line-height: 150%；那么该元素的下一级子元素继承到的line-height就是21px，不会再和子元素自己的font-size有关。

一只柚子爹

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
CSS单位小结

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.
复制链接

扫一扫