CSS基础二（高度与文档流）

问题：

• div的高度是如何确定？
• span的高度是如何确定？

１．预备：

文档流：指文档内元素的流动方向；

• 内联元素从左到右，满了，就换行；
• 块级元素，从上往下，另起一行；

示例（内联元素的特例）：

image.png

对于汉字，会自动分行。要是对于很长的单词，默认就不会分行，如果想分行，需要设置：

work-break: break-all

２．第一个问题：div的高度如何确定？

显而易见，div的高度由其内部文档流元素的高度总和决定。

注意：给div指定height会引入bug,不到情非得已千万不要指定高度.
块级元素的高度由其内部元素的高度总和决定。

３．第二个问题：内联元素的高度如何确定？

比如span。

介绍：（方老师的图）

建议行高.png

字体的高度分为五部分。基线、上部、下部，还有上下空余的部分，是由字体设计决定的（比如上下两行字之间存在间隙，不能紧挨在一起）。按照这样的原则，我们就知道比如“你好与a”，实际上是基线对齐的。

span的高度是多少？

内联高度代码.png

我们在这里设置span里的字体大小为100px，我们观察下实际出来的span是多大。

span效果图.png

• 首先可以发现汉字与字母按照我们刚说的对齐；
• 测量b的顶端到g的低端，发现，实际上相差为100px，也就是说实际上font-size设置的是，字体的最高点到最低点的大小。
  那么span到底有多高？
  比如span里有字，span的高度是由字体建议行高以及其它因素决定的。这需要结合字体具体判断，