1. CSS中的高度和宽度
在 CSS 中，高度和宽度是非常基本的概念，它们常常被用于控制盒模型元素的大小和形状。HTML 元素的高度和宽度可以使用以下两个属性来定义：
height:500px;
width:100%;
其中 height 属性定义的是元素的高度，而 width 属性定义的是元素的宽度。值得注意的是，在 CSS 中，元素的默认高度和宽度是 0，这是因为它们是块级元素或者内联块元素，它们默认会填充其父元素的宽度和高度。如果您要设置一个元素的高度和宽度，务必指定具体的数值。
2. 使用 px 进行高度和宽度的设置
在 CSS 中，px 是一种常见的长度单位，它表示像素。使用 px 单位可以达到精确控制元素高度和宽度的目的。
在以下的示例中，我们将一个 div 元素的高度设置为 200px，宽度设置为 400px：
div {
height: 200px;
width: 400px;
}
这样，这个 div 元素就会被设置成指定的高度和宽度。
3. 使用 em 和 rem 进行高度和宽度的设置
3.1 使用 em
em 是一种相对于父元素的长度单位。如果设置了父元素的字体大小，则 em 单位的大小将相应地改变。
在以下的示例中，我们在一个父元素中设置一个子元素的高度和宽度，其中子元素的高度和宽度都设置为 2em：
.parent {
font-size: 16px;
}
.child {
height: 2em;
width: 2em;
}
在这个示例中，子元素的高度和宽度都被设置为 32px（16px x 2em）。
3.2 使用 rem
rem 是相对于根元素（即 HTML 元素）的长度单位。相比于 em，rem 单位更为稳定，因为它不受父元素字体大小的影响。在很多情况下，使用 rem 可以使 CSS 的编写更加方便和规范。
在以下示例中，我们设置了根元素的字体大小为 16px，并且在一个 div 元素中设置高度和宽度，其中高度和宽度均为 2rem：
html {
font-size: 16px;
}
div {
height: 2rem;
width: 2rem;
}
这样，在这个示例中，div 元素的高度和宽度都被设置为32px（16px x 2rem）。
4. 使用百分比进行高度和宽度的设置
在 CSS 中，% 单位表示相对于父元素的某个属性值的百分比。
在以下示例中，我们设置一个 div 元素的高度为父元素高度的 50%，宽度为父元素高度的 90%：
.parent {
height: 400px;
}
.child {
height: 50%;
width: 90%;
}
在这个示例中，div 元素的高度将会被设置为 200px，宽度为 360px。
5. 总结
在 CSS 中，高度和宽度是基本的概念，它们用于控制盒模型元素的大小和形状。我们可以使用不同的长度单位进行高度和宽度的设置，常见的有 px、em、rem 和 % 等。在实际开发中，我们需要根据实际场景进行选择，选择合适的长度单位可以使代码更加规范和易于维护。