【H5/CSS】长度单位

长度单位

设置样式来控制页面中某些元素的显示长宽。

像素px

  • 屏幕（显示器）实际上是由一个一个的小点点构成的
  • 不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
  • 所以同样的200px在不同的设备下显示效果不一样

案例一：我想设置一个边为200px的正方形

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style>
			.box1 {
				width: 200px;
				height: 200px;
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
	</body>
</html>

百分比%

  • 也可以将属性值设置为相对于其父元素属性的百分比
  • 设置百分比可以使子元素跟随父元素的改变而改变

案例二：在正方形中嵌入一个小正方形

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style>
			.box1 {
				width: 200px;
				height: 200px;
				background-color: orange;
			}

			.box2 {
				width: 50%;
				height: 50%;
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
		</div>
	</body>
</html>

em

  • em是相对于元素的字体大小来计算的
  • 1em = 1font-size ，通常默认1font-size为16px，可以更改
  • em会根据字体大小的改变而改变，该字体大小设置可以是在根元素html标签，也可以在自己要设置的选择器中

rem

  • rem是相对于根元素的字体大小来计算

参考

视频链接（P40~P41）
尚硅谷Web前端零基础入门HTML5+CSS3基础教程丨初学者从入门到精通

posted @ 2022-08-06 14:14  帕图纳克斯  阅读(77)  评论(0)    收藏  举报