CSS小技巧——高度与文档流

在CSS里，一个元素的高度是由其内部文档流元素高度总和决定的！
那么文档流是什么呢？（加border可检测）

文档流就是文档内元素的流动方向。

其中有四句话一定要记住！

内联元素由左往右流动，遇到阻碍就换行继续流。
块级元素由上往下流动，每一块占一行。

内联元素的高度是由"line-height"决定的，"line-height"多少像素，内联元素的高度就是多少。
块级元素的高度是由其内部文档流元素的总和决定的。

但是CSS的内联元素的高度是深坑，甚至与字体设计有关，有空可以搜一下老师的博客“方应杭 CSS line-height”看一下！

还有，中文和英文网页有个现象不一样。
中文每个字遇到分行时会分行，
而英文打死也不会打断一个单词让其分行。
原因就是中英文语言上的不同。

以英文为主的页面默认 word-break:break-word(文字打断：打断单词)
以中文为主的页面默认 word-break:break-all(文字打断：打断全部)

还有CSS里不到非做不可，千万不要写死宽度和高度，否则会有无穷无尽的BUG，记住了！！