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

在CSS里,一个元素的高度是由其内部文档流元素高度总和决定的!
那么文档流是什么呢?(加border可检测)

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

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

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

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

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

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

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

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

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容