css高度（css高度变化动画）

简介：

CSS是层叠样式表的缩写，是用来控制网页样式的语言，它可以用来设置元素的尺寸、位置、颜色、字体、样式等属性。其中一个重要的属性就是高度，本文将详细介绍CSS高度的使用方法。

一、高度的定义

在CSS中，高度可以用来定义元素的垂直空间，它是指一个元素从上边界到下边界的距离。高度可以使用像素、百分比、自适应等多种方式进行定义。

二、使用像素设置高度

使用像素（px）单位设置高度非常常见，可以使用height属性进行设置。例如，设置一个div元素高度为200像素：

div {

height: 200px;

三、使用百分比设置高度

使用百分比来设置高度可以实现元素在不同屏幕分辨率下的自适应。例如，设置一个div元素的高度为屏幕高度的50%：

div {

height: 50%;

四、使用min-height和max-height属性

使用min-height和max-height属性可以实现元素的最小高度和最大高度限制。当元素的内容不足以填满最小高度时，元素会自动扩展至最小高度；当元素的内容超过最大高度时，元素会出现滚动条进行显示。例如：

div {

min-height: 100px;

max-height: 300px;

五、使用auto关键字设置高度

使用auto关键字可以让元素的高度自适应内容，即元素的高度会随着内容的增加自动扩展，但是auto并不适用于所有元素，例如行内元素就无法使用auto。例如：

div {

height: auto;

六、高度的继承规则

在CSS中，高度并不是可以被所有元素继承的属性，只有具有块级元素特征的元素才能继承高度。例如，p元素默认继承body元素的高度，而行内元素则无法继承高度。

总结：

CSS高度是用来定义元素垂直空间的重要属性，可以使用像素、百分比、自适应等多种方式进行设置。同时，我们还可以使用min-height、max-height等属性来限制元素的最小和最大高度。但需要注意的是，高度并不是可以被所有元素继承的属性，只有具有块级元素特征的元素才能继承高度。