px,em,rem,%

px em rem %的作用及区别

---

前言

px em rem %都是用于设置字体的大小及盒子的大小 不同的是px是像素单位，em 和 rem 是根据字体大小来决定的

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、百分比

百分比是以父容器尺寸作为基准。以父容器的尺寸换算元素的实际大小。
html

	<div class='box'>
			<div class='box_1'>正义
			
			    <div class='box_1_1'>妙团体</div>
			
			</div>
		</div>
		

css

 .box{
				width: 300px;
				height:300px;
				background-color: #008000;
				
			}
			.box .box_1{
				width: 200px;
				height: 200px;
				background-color:red;
			}
			.box .box_1 .box_1_1{
				width: 70%;
				height: 70%;
				background-color: blue;
			}

效果

使用这种方法，要知道父元素的大小，如果父元素没有给定大小，设置百分比会不成功。元素实际大小会由内容撑开。
html

<div class='box'>
			<div class='box_1'>正义
			
			    <div class='box_1_1'>妙团体</div>
			
			</div>
		</div>

css

 .box{
				width: 300px;
				height:300px;
				background-color: #008000;
				
			}
			.box .box_1{
				background-color:red;
			}
			.box .box_1 .box_1_1{
				width: 70%;
				height: 70%;
				background-color: blue;
			}

效果

二、px

px是一个相对单位，相对于物理像素来取的。物理像素是屏幕出厂就设置好的大小，是不会改变的。px，并不是真正的长度，w3c规定：参考像素是像素密度为96dpi的设备上的一个像素的视角，与阅读器的距离为一臂的长度。对于一个名义臂长度为28英寸的物体，其视角因此约为0.0213度。
代码

	   .box{
				width: 400px;
				height:400px;
				background-color: #008000;
				
			}
			.box .box_1{
				width: 50%;
				height: 50%;
				background-color: #FF0000;
			}

<div class='box'>
			<div class='box_1'>正义</div>
		</div>
		

当我们改变浏览器窗口大小的时候，屏幕上显示的div大小也会改变，

然而我们div设置的高度宽度并没有改变，依然还是400px。这时候就体现出px是一个相对单位。

不同的设备，物理像素是不同的，为了保持显示结果一至，px会随着设备的变化而变化。

三、em

大多数浏览器默认字体大小是16px，换算为1em。em的具体尺寸继承自父元素的px || 文本大小，父元素的font-size设置为px值，子元素设置为 em 孙元素也设置为 em，那么子元素和孙元素的em都是以父元素设置的px值为标准 。
代码
html

	<div class='em'>
			<div class='em_1'>
				沉默寡言会影响大脑语言功能
				<div>
						要多交流
					<p>
						不好的事情都会离去
						<span>
							我是妙团团
						</span>
					</p>
				</div>
			</div>
		</div>
		

css

	.em .em_1>div{
				font-size:10px;
			}
			.em .em_1>div>p{
				font-size:1em;
			}
			.em .em_1>div>p>span{
				color:gold;
				font-size:1em;
			}

效果

如果子元素的font-size也设置为px值。孙元素的em就会以子元素的px值为标准。
html

	.em .em_1>div{
				font-size:10px;
			}
			.em .em_1>div>p{
				font-size:20px
			}
			.em .em_1>div>p>span{
				color:gold;
				font-size:1em;
			}

效果

如图 字体就会根据子元素设置的 font-size ：20px 而变大 ，其他元素的大小也是一样

四、rem

rem 是以根元素为大小的，即1根元素大小等于1 rem，rem设定好了之后，后代元素使用font-size：设置px值。不会对使用中的rem造成影响。
代码
css

	.em .em_1>div{
				font-size:2rem;
			}
			.em .em_1>div>p{
				font-size:50px
			}
			.em .em_1>div>p>span{
				color:gold;
				font-size:1rem;
			}

效果

我们可以看到，即使 p元素设置 font-size：50px，span设置 font-size：1rem
。span字体的大小仍然会以根元素为准。

总结

不管那种方式，能够符合实际情况，并完成需求就是好方式。