CSS 尺寸 (Dimension)学习笔记
在CSS中，尺寸是用来定位和调整元素大小的重要属性。本文将介绍常见的尺寸单位和如何使用它们。
尺寸单位
像素（px）
像素是最常见的尺寸单位。一个像素是屏幕上的一个小点，通常使用px表示。可以通过指定元素的宽度和高度来设置像素尺寸，例如：
cssCopy Codediv {
width: 200px;
height: 100px;
}
百分比（%）
百分比也是一种常见的尺寸单位，它是相对于父元素的尺寸计算的。这意味着，如果父元素的宽度或高度更改，子元素的尺寸也会相应地更改。例如：
cssCopy Codediv {
width: 50%;
height: 50%;
}
视口宽度（vw）和视口高度（vh）
视口宽度和视口高度是相对于视口大小的尺寸单位。视口是指浏览器窗口的可见部分。视口宽度是以1/100视口宽度为单位的值，视口高度是以1/100视口高度为单位的值。例如：
cssCopy Codediv {
width: 50vw;
height: 50vh;
}
em
em是相对于元素的字体尺寸的单位。例如，如果一个元素的字体大小为16px，1em将等于16px。可以使用em作为宽度或高度值，例如：
cssCopy Codediv {
width: 20em;
height: 10em;
font-size: 16px;
}
原始单位（rem）
rem是相对于根元素（即html元素）字体大小的单位。这意味着，如果根元素的字体大小更改，所有rem值都会相应地更改。例如：
cssCopy Codediv {
width: 10rem;
height: 5rem;
font-size: 16px;
}
实例
下面是一个简单的实例，展示如何使用不同的尺寸单位：
htmlCopy Code<!DOCTYPE html>
<html>
<head>
<title>CSS Dimension</title>
<style>
body {
font-size: 16px;
}
.container {
width: 80%;
height: 50vh;
margin: 0 auto;
border: 1px solid black;
}
.box {
width: 20em;
height: 10em;
padding: 1em;
margin: 2rem;
background-color: #eaeaea;
float: left;
}
.box2 {
width: 50%;
height: 50%;
padding: 1em;
margin: 2rem;
background-color: #eaeaea;
float: left;
}
.box3 {
width: 10rem;
height: 5rem;
padding: 1em;
margin: 2rem;
background-color: #eaeaea;
float: left;
}
.box4 {
width: 5vw;
height: 10vh;
padding: 1em;
margin: 2rem;
background-color: #eaeaea;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="box">This box is using em for width and height.</div>
<div class="box2">This box is using percentage for width and height.</div>
<div class="box3">This box is using rem for width and height.</div>
<div class="box4">This box is using vw and vh for width and height.</div>
</div>
</body>
</html>
在这个例子中，我们使用了不同的尺寸单位来设置元素的宽度和高度。通过这个例子，你可以更好地理解CSS尺寸单位的概念并学会如何使用它们。