内联元素的文档流
先写十个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的高度指的是内联元素里字体最高点和最低点的高度。
由此我们得知， 内联元素的高度并不是我们设置的高度来决定的，而是由元素内部字体的最高低点决定的。
网友评论