简单了解并使用px,em,rem三种长度单位，设置一个在浏览器中显示200*200像素的正方形

KeYiTangPing

于 2023-07-22 12:02:31 发布

阅读量414

点赞数

分类专栏：前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_37117408/article/details/131865962

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的px,em,rem三种长度单位，并通过示例代码展示了如何用它们设置一个200x200像素的正方形。px是设备独立像素，直接控制元素大小；em基于父元素字体大小；rem则始终相对于html根元素的字体大小。

摘要由CSDN通过智能技术生成

简单了解并使用px,em,rem三种长度单位，设置一个在浏览器中显示200*200像素的正方形

需求

使用px,em,rem三种长度单位，设置一个在浏览器中显示200*200像素的正方形

长度单位介绍：
	1.px ：设备独立像素，css直接控制元素大小
					
	2.em ：1em等于距离当前元素最近的设置了font-size值的大小，当前元素没有设置font-size值就向上找到父元素， 一直向上直到html根元素
								 
	3.rem ：1rem等于根元素的font-size值的大小，只受html根元素的影响，html默认font-size是16px

效果示例图

在这里插入图片描述

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
				box-sizing: border-box;
			}

			.px-style {
				border: 1px solid red;
				font-size: 20px;
				width: 200px;
				height: 200px;
				margin: 0px auto;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			/* 
			 当前元素设置font-size单位px
			*/
			.em-style-one {
				border: 1px solid red;
				font-size: 20px;
				width: 10em;
				height: 10em;
				margin: 1em auto;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			/* 
			 当前元素没有设置font-size值 ,
			 给它的上一级设置font-size值单位px
		  */
			.em-style-father {
				border: 1px solid red;
				width: 100%;
				font-size: 20px;
			}

			.em-style-two {
				border: 1px solid red;
				width: 10em;
				height: 10em;
				margin: 1em auto;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			/* 
			  当前元素设置font-size，只不过单位为em，
				给它的上一级设置font-size值单位px，
				那么当前元素设置的em=fatherFontSize*currentFontSize*设置的变量值
			 */
			.em-style-father-three {
				border: 1px solid red;
				width: 100%;
				font-size: 16px;
			}

			.em-style-three {
				border: 1px solid red;
				font-size: 1.25em;
				width: 10em;
				height: 10em;
				margin: 1em auto;
				display: flex;
				align-items: center;
				justify-content: center;
			}


			.rem-style {
				border: 1px solid red;
				font-size: 1.25rem;
				width: 12.5rem;
				height: 12.5rem;
				margin: 1.25rem auto;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			p {
				border: 1px solid #dcdcdc;
				border-radius: 8px;
				width: 600px;
				margin: 20px auto;
				padding: 12px 12px;
			}
		</style>
	</head>
	<body>
		<!-- 
		   长度单位介绍：
					1.px ：设备独立像素，css直接控制元素大小
					
					2.em ：1em等于距离当前元素最近的设置了font-size值的大小，当前元素没有设置font-size值就向上找到父元素，
					       一直向上直到html根元素
								 
					3.rem ：1rem等于根元素的font-size值的大小，只受html根元素的影响，html默认font-size是16px
		 -->
		
		<!-- 1.px -->
		<p>1.px:设备独立像素，css直接控制元素大小</p>
		<div class="px-style">fontSize:20px;200px*200px</div>

		<!-- 2.em -->
		<p>2.em:1em等于距离当前元素最近的设置了font-size值的大小，当前元素没有设置font-size值就向上找到父元素，一直向上直到html根元素</p>
		<div class="em-style-one">fontSize:20px;10em*10em</div>

		<div class="em-style-father">
			我是上一级，我设置了font-size:20px
			<div class="em-style-two">10em*10em</div>
		</div>

		<div class="em-style-father-three">
			我是上一级，我设置了font-size:16px
			<div class="em-style-three">fontSize:1.25em;10em*10em</div>
		</div>

		<!-- 3.rem -->
		<p>3.rem:取得根节点font-size默认值16px</p>
		<div class="rem-style">fontSize:1.25rem;12.5rem*12.5rem</div>

	</body>
	<script type="text/javascript">

	</script>
</html>