css的宽度与高度

div的高度问题

1. div里面没有内容的时候，高度是多少？

• 是0

2. 若div里面有文字，且css设置font-size:20px，浏览器显示div的高度是28，为什么？

• 第一种错误回答：行高的默认值就是1.4（28/20=1.4）

3. 若换了字体，div的高度又变了，为什么？

• 默认的行高是由字体设计师自己设计的。所以不同的字体有着不同的行高

4. 一个中文对应几个空格，是由字体设计师所设计的。

总结：

• div的高度=字体*它建议的行高

• 如果div里面只有内敛元素，则div的高度就是这一行的行高。如果有多行内敛元素，则就是行高的叠加，若有一个单词特别长，则要看是否加了word-break: break-all;，再判断高度。

• div的高度就是由它内部文档流高度总和确定，若有脱离文档流的则不计算它的高度。
  2018-05-19

作者：徐金俊
链接：https://www.jianshu.com/p/414be81cfdb4