深入理解CSS height属性设置元素的高度

在CSS中，height属性用于设置元素的高度，可以应用于大部分的HTML元素。

element {    height: value;}

其中，value可以是具体的数值，也可以是百分比。

数值可以作为height属性值，可以用像素（px）、点（pt）、厘米（cm）、英寸（in）等单位来表示。如果只输入数值，则默认使用像素作为单位。

下面是一个例子：

.container{    height: 200px;}

上面代码将设置class为container的元素高度为200像素。

百分比也可以作为height属性值。百分比的值是相对于父元素的高度计算的。

下面是一个例子：

.wrapper {    height: 100%;}

上面代码将设置class为wrapper的元素高度为父元素的100%。

height属性只能设置容器元素的高度，不能设置文本元素的高度。换句话说，height属性不能用于设置内联元素（如span或a）的高度。设置高度对于设置行高是无效的。

下面是一个例子：

.text{    height: 50px;    line-height: 50px;}

上面代码将设置class为text的元素高度为50像素，并且设置行高等于元素高度。

在实现自适应布局时，可以通过height属性与calc()函数结合使用，根据父元素的高度来动态计算子元素的高度。calc()函数是CSS3中添加的一个用于动态计算值的函数，它支持加、减、乘、除等基本运算，还支持百分比等运算符。

下面是一个例子：

.parent{    height: 200px;}.child {    height: calc(100% - 50px);}

上面代码将设置class为parent的元素高度为200像素，而设置class为child的元素高度为父元素高度减去50像素。