CSS3中的height屬性是控制元素的高度的重要屬性之一,在計(jì)算元素的高度時(shí)有一些需要注意的地方。
.box { height: 100px; padding: 20px; border: 2px solid black; }
首先,需要注意的是元素的height屬性不包括元素的padding、border和margin。例如上面的示例中,元素的總高度為100px + 2 x 20px(padding) + 2 x 2px(border),即144px。
其次,如果元素的height和line-height屬性都被設(shè)置了,那么元素的實(shí)際高度將取決于它們中的較大值。
.box { height: 100px; line-height: 150px; }
在上面的示例中,元素的實(shí)際高度將是150px,而不是100px。
最后,如果元素的height屬性被設(shè)置為auto或未設(shè)置,那么元素的高度將由其內(nèi)容撐開(kāi)。對(duì)于非替換元素(如純文本元素),這意味著元素的實(shí)際高度將取決于其包含的文本內(nèi)容。
.box { height: auto; }
在上面的示例中,元素的實(shí)際高度將由其內(nèi)容撐開(kāi)。