• 欢迎光临~

【H5/CSS】长度单位

开发技术 开发技术 2022-08-06 次浏览

长度单位

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

像素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>

【H5/CSS】长度单位

百分比%

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

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

<!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>

【H5/CSS】长度单位

em

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

rem

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

参考

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

程序员灯塔
转载请注明原文链接:【H5/CSS】长度单位
喜欢 (0)