美文网首页
CSS基础二(高度与文档流)

CSS基础二(高度与文档流)

作者: 索伯列夫 | 来源:发表于2018-09-18 21:23 被阅读0次

    问题:

    • div的高度是如何确定?
    • span的高度是如何确定?

    1.预备:

    文档流:指文档内元素的流动方向;

    • 内联元素从左到右,满了,就换行;
    • 块级元素,从上往下,另起一行;

    示例(内联元素的特例):


    image.png

    对于汉字,会自动分行。要是对于很长的单词,默认就不会分行,如果想分行,需要设置:

    work-break: break-all
    

    2.第一个问题:div的高度如何确定?

    显而易见,div的高度由其内部文档流元素的高度总和决定。

    注意:给div指定height会引入bug,不到情非得已千万不要指定高度.
    块级元素的高度由其内部元素的高度总和决定。

    3.第二个问题:内联元素的高度如何确定?

    比如span。

    介绍:(方老师的图)

    建议行高.png
    字体的高度分为五部分。基线、上部、下部,还有上下空余的部分,是由字体设计决定的(比如上下两行字之间存在间隙,不能紧挨在一起)。按照这样的原则,我们就知道比如“你好与a”,实际上是基线对齐的。

    span的高度是多少?

    内联高度代码.png

    我们在这里设置span里的字体大小为100px,我们观察下实际出来的span是多大。


    span效果图.png
    • 首先可以发现汉字与字母按照我们刚说的对齐;
    • 测量b的顶端到g的低端,发现,实际上相差为100px,也就是说实际上font-size设置的是,字体的最高点到最低点的大小。
      那么span到底有多高?
      比如span里有字,span的高度是由字体建议行高以及其它因素决定的。这需要结合字体具体判断,

    相关文章

      网友评论

          本文标题:CSS基础二(高度与文档流)

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