美文网首页
CSS小技巧——高度与文档流

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

作者: 酒极子 | 来源:发表于2018-12-28 20:14 被阅读9次

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

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

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

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

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

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

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

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

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

    相关文章

      网友评论

          本文标题:CSS小技巧——高度与文档流

          本文链接:https://www.haomeiwen.com/subject/ibwelqtx.html