内联、块级元素的高度和文档流

内联元素的文档流

先写十个span，并给这十个span加上样式，现在可以看到这十个span的方向是依次从左往右排开的。然后把网页拉到最外边界宽度最宽时，可以看到右边文字10已经断成两截了，并且自动换行继续从左往右散开。说明内联元素流动方向是从左往右流动的。

内联元素流动方向是从左往右流动的

块级元素的文档流

我们再写十个div，也给这十个div加上边框，下图可以看到，如果是块级元素，就不从左往右流动了；而是每一个块都占一行。若是再增加一个新的div进来，就会另起一行继续从上往下流动。说明块级元素的流动方向是从上往下依次流动的。

块级元素流动方向是从上往下流动  

内联元素：英文和中文的流动

现在把span里的内容换成一个长的英文串，再把网页拉到极限最宽。如下图，这说明了当一个内联元素里的内容为中文时，到达宽度极限的时候会自动换行；而当内联元素为英文，到达宽度极限时并不会换行，而是直接缩进了。

英文和中文的流动

如果内联元素是一个很长的英文串，在默认情况下是不会分开的，若要解决这类问题，可以给这个元素加上一个属性：

word-break:break-all;/*把单词分断*/

块级元素

若要让两个块级元素不上下分行，使之并排在同一行里，或像内联元素一样依次连起来，可以用两种办法

display：inline-block; 或

float:left；

使块级元素并排在同一行

块级元素和内联元素的高度

块级元素

块级元素的高度比较好理解，是由它内部文档流元素的总和决定的。

那么，内联元素的高度是由什么决定的呢？

我们先给span一个font-size为100px，现在看看图片左边，能看出来现在这个hug的像素是多高吗？

font-size：100px

现在用尺子量一下，就可以看到这个hug的高度是97.5。并不足100。

hug的高度为97.5

我们再加两个中文字你好来看看

“你好”的高度为92.5

这个现象是不是很奇怪？我们现在加进去的你好量出来的高度才92.5，而刚刚hug量出来的高度是97.5，而我们给span的font-size是100px。再来看看下图

上下红线的高度为140

测量出来上下红线的高度是140px。不管是你好的高度还是hug的高度，都不是我们font-size的100px，这是为什么呢？其实内联元素的高度是没有确定性的，即使你给一个内联元素设定了一个高度的数值，但浏览器还是会默认读取这个字体的行高，并且给你添加一点建议高度 。所以font-size的高度指的是内联元素里字体最高点和最低点的高度。

由此我们得知， 内联元素的高度并不是我们设置的高度来决定的，而是由元素内部字体的最高低点决定的。