像素，百分比，em,rem,颜色单位的相关讲解。

最新推荐文章于 2023-11-20 13:30:30 发布

手搓二十四种设计模式

最新推荐文章于 2023-11-20 13:30:30 发布

阅读量820

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/m0_73892800/article/details/127247856

版权

像素和百分比。

（一）像素

首先你电脑的屏幕（显示屏）实际上是一个一个的小点点，也就是由一个一个像素构成，不同屏幕的像素大小是不同的，并且像素越小就越清晰
也就是说，同样的200像素在不同的设备上显示的效果不同。
例如：

同一张照片在你的电脑上二百个像素，而在有些手机上可能是八百个像素，也就是说手机上四个像素替换电脑上的一个像素，这样的照片就清晰很多。

（二）百分比

可以将设置的属性改变成相对于父元素的百分比

例如：


<!DOCTYPE html>
<html lang="zh">
<head>
	<style>
		.box1{
			width: 100px;
			height: 100px;
			background-color: antiquewhite;
		}
		.box2{
			width: 50%;
			height: 50%;
			background-color: aqua;
		}
	</style>
	
</head>
<body>
	<div class="box1">
		<div class="box2"></div>
	</div>
</body>
</html>

这样就会出现以下场景

这样写有一个好处：给子元素用这种百分比的写法，就会使子元素随父元素的改变而改变。

em与rem

（一）em

如果你用em为单位，那么1em=16px

这是可以设置的

1em=1font-size

例如你可以这样写：

<head>
	<style>
		.box1{
			font-size: 10px;
			width: 100em;
			height: 100em;
			background-color: antiquewhite;
		}
	
	</style>

这样显示出来的背景就是长宽为1000px

（二）rem

这是相对于根元素的，就是你需要设置html的font-size

例如：

	<head>
	<style>
		html{font-size: 10;}
	</style>
	
</head>

同样的1rem=1font-size

颜色单位

在css中可直接使用颜色名设置：red，yellow，blue等等，但这样就会有一个弊端，一个是你把颜色很难记完，另一个就是有些颜色你根本无法表述。

在这里就要说到一个

（一）rgb值

这是通过三种颜色的浓度来调的：故名思意，red，green，blue。

每种颜色的调节浓度都是0到255之间，举个例子

<head>
	<style>
		
		.box2{
			background-color: rgb(225, 0, 0);
		}
	</style>

这就是红色，其实就是光的三原色，三者都为零，就是黑色，三者都255就是白色。

（二）rgba

相比于rgb多了个a就是透明度，为1时显示为完全不透明，0时为完全透明。

手搓二十四种设计模式

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
像素，百分比，em,rem,颜色单位的相关讲解。

像素，百分比，em,rem,颜色单位的相关讲解。
复制链接

扫一扫