- 概念:我们的电脑屏幕是由一个一个“小点”组成的,每个“小点”,就是一个像素(px)
- 规律:像素点越小,呈现的内容就越清晰、越细腻
注意点:如果电脑设置中开启了缩放,那么就会影响一些工具的测量结果。
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS_像素的概念</title>
<style>
.one {
width: 1px;
height: 1px;
background-color: black;
}
.two {
width: 10px;
height: 10px;
background-color: blueviolet;
}
.three {
width: 100px;
height: 100px;
background-color: red;
}
.four {
width: 200px;
height: 200px;
background-color: green;
}
.five {
width: 300px;
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div class="one"></div>
<br>
<br>
<br>
<hr>
<div class="two"></div>
<br>
<br>
<br>
<hr>
<div class="three"></div>
<br>
<br>
<br>
<hr>
<div class="four"></div>
<br>
<br>
<hr>
<div class="five"></div>
</body>
</html>