height

CSS height 属性用于指定元素内容区域的高度。

在WEB页面中，每一个元素都是一个规则的矩形，每一个元素都有一个矩形的盒模型。盒模型包括4个区域：content box（内容区域）、padding box（内边距区域）、border box（边框区域）和 margin box（外边距区域）。元素的所有内容都在content box（内容区域）中。下图是CSS盒模型的示意图。

如果为元素设置了 padding （内边距）值，那么元素的总尺寸会被增大。例如，如果元素的高度为500像素，并设置了50像素的 padding 值，那么这个元素的总高度就是600像素。

为 inline （内联元素）设置高度是没有意义的。内联元素的高度取决于它里面的内容。如果你要为内联元素设置高度，必须使用属性将内联元素转换为块级元素或内联块级元素。

CSS height 属性的值可以是数据类型值或数据类型值，也可以是关键字 auto 或 inherit 。在CSS3规范中， height 属性添加了一些新的取值，这些取值目前还处于实验性的阶段。

注意： min-height 和 max-height 属性会覆盖 height 属性。

为元素设置高度的时候需要注意一些问题。想象这种情况：如果你为一个元素设置了一个固定的高度，并为它设置了 padding 内边距值。但是你希望设置了 padding 值之后，元素的高度还是你设置的高度值。正如前面提到的，为元素设置了 padding 值之后，元素的总高度会被增加。

我们可以通过属性来解决这个问题。将属性的值设置为 border-box ，那么使用 height 属性指定的高度将包括 padding 属性指定的区域。也就是说， height 指定的高度等于内容区域的高度加上 padding 属性指定的垂直方向上的高度。例如：

.div {
    box-sizing: border-box;
    height: 500px;
    padding: 50px;
}                              
                            

那么内容区域的实际高度为500 - 2 * 50 = 400像素，元素的总高度还是500像素。

height: <length> | <percentage> | auto | inherit 
                            

新的CSS3语法如下：

height: [<length> | <percentage>] && [border-box | content-box]? | available | min-content | max-content | fit-content | auto
                            

参数：

/* 关键字 */
height: auto     
/* <length> values */
height: 120px    
height: 10em
/* <percentage> values */
height: 75%      

height: inherit