笔记: CSS深入理解vertical-align和line-h

作者: wudimingwo | 来源:发表于2018-11-12 23:12 被阅读0次

笔记: CSS深入理解vertical-align和line-h
【CSS】深入理解 vertical-align
深入理解css中vertical-align属性
文本的垂直居中
CSS中line-height与vertical-align
web前端如何实现CSS竖向居中
深入理解vertical-align
深入理解Vertical-align
CSS行高
line-height和vertical-align的关系(一)

参考

CSS深入理解vertical-align和line-height的基友关系

深入理解css中vertical-align属性 - starof - 博客园

深入理解盒子模型——CSS 盒模型Block box与Line box

image.png

w3c

image.png

作为一个小白,我真的不喜欢CSS...

image.png

如何确定共同基线?
下面几组是没加margin 单纯往里面填文字

image.png

我只在第二个元素上加了 margin-top = 100px;
结果三个一起动了, 因为共同基线会选最低的. 其他会以自己的基线去对齐?

image.png

第二个上下加上margin: 100px 0px;

image.png

当我看完第一篇博客时,我以为我懂了,结果我傻了,
当我看完第二篇博客时, 我以为终于有点懂了,结果疑点重重混乱了,
当我看完第三篇博客时,我终于觉得自己稍微有点懂了这个 vertical-aline
同时, 我对之前没学明白vertical-aline 不感到羞耻了,
这玩意跟其他属性比起来确实要稍微复杂一点.

首先我们要找到共同基线,也就是父级的文字?
看完第三篇之后,才明白,不是父级的文字,
而是要找line-box 的文字
什么是line-box? 第三篇博客中写道
装这一行内所有inline,inline-box的盒子就是line-box
line-box 的上边,是所有元素中marin-top的边界线, 也就是最高点.
而line-box 的下边, 才是不好确定的.

vertical-aline 默认值时,
inline-block 没有文字的margin底部是该元素的基线.
inline-block 有文字的最后一行的文字底部是该元素的基线.

所有元素中最低的基线, 就是 line-box 的基线.

image.png

关键在于, 这个a 也就是这个假想的基线文字的位置,
就在这个line-box 的最下面.

vertical-aline 的各种属性就是根据
这个line-box 的顶边,底边,
以及这个 a的中心,底边,顶边,

看着啊
html

         <div class="wrapper">
           <span>x agj</span>
           <span>x agj</span>
           <div class="item3">item3</div>
         </div>

scss

.wrapper{
    width: 900px;
    height: 500px;
    margin: 100px;
    border: 1px solid black;
            font-size: 80px;
        line-height: 180px;
    background-color: #F23D6A;
    div{
        display: inline-block;
        background-color: #fff;
        font-size: 40px;
        line-height: normal;
        word-wrap: break-word;
    }
    span{
        margin-top: 100px;
        vertical-align: baseline;
        display: inline-block;
        font-size: 80px;
        line-height: 180px;
        background-color: #fff;
        &:nth-of-type(2) {
            margin: 0;
        }
    }
}

效果图

image.png

这默认三个都是 baseline 的时候.
现在我们假定第一个元素与父级基线也就是line-box 的基线一致.
(如果这个假设不成立,那么下面的都是错的.)

div{
            vertical-align: sub;
}
span2 {
            vertical-align: sub;
}

image.png

div{
            vertical-align: super;
}
span2 {
            vertical-align: super;
}

image.png

div{
            vertical-align: text-bottom;
}
span2 {
            vertical-align: text-bottom;
}

image.png

div{
            vertical-align: text-top;
}
span2 {
            vertical-align: text-top;
}

image.png

div{
            vertical-align: middle;
}
span2 {
            vertical-align: middle;
}

这个不清楚,

image.png

div{
            width: 200px;
            height: 200px;
            vertical-align: bottom;
}
span2 {
        width: 200px;
        height: 100px;
        vertical-align: bottom;
}

image.png

div{
            width: 200px;
            height: 200px;
            vertical-align: top;
}
span2 {
        width: 200px;
        height: 100px;
        vertical-align: top;
}

image.png

div{
            width: 200px;
            height: 300px;
            vertical-align: middle;
}
span2 {
        width: 200px;
        height: 100px;
        vertical-align: middle;
}

image.png

我的天.虽然我没记住我自己写的所有内容,
但感觉自己总结的还挺清晰,还挺牛逼的.哈哈哈,作为一个小白勉励一下自己

那么问题来了,怎么确定line-box的底边?
我们看上面的几个图时,
会发现明明发现有时, 都突破了line-box的底边了,
凭什么最低的那个不算底边?
凭什么把最前面的元素的底边看成是line-box的底边?

其实我是这么猜测的.
首先不要计算vertical,
而是要先计算width,height,padding,
或者是多行时的文字底边的高度.
经过这些属性,以及刚开始说的
没有文字的margin底边,和有文字的最后一行文字底边,
进行比较,哪个最低,哪个就是line-box 的底边.

然后再计算vertical-aline.
之所以之前搞不明白的原因是,
我们看到的永远是
这些影响位置的属性综合计算的最后结果.
这尼玛,我讨厌css, 水太他么深了,太费时间了.
而且搞完,不像js,会有应用上和思维上的某种拓展性?
没感觉价值特别大.但不会又感觉缺了条腿.妈的.

其实写这篇文章的起始原因是,
看到一篇文章中,垂直居中的原理,利用了这个,
当时实在是没看懂
html

         <div class="wrapper">
           <div class="item"></div>
         </div>

scss

.wrapper{
    width: 500px;
    height: 500px;
    background-color: #F08080;
    font-size: 0px;// 对垂直位置没有影响,对水平有影响
    // 难道是因为,两个inline-block 之间有个空格 占了1em的空间的原因?
    text-align: center;// 用来水平居中的
    .item{
        display: inline-block;// 只能用在inline-block 或者 inline上
        width: 100px;
        height: 100px;
        background-color: #F23D6A;
        vertical-align: middle;// 会把自身的居中在父级x的中心
    }
    &::after{
        display: inline-block;
        content: "";
        vertical-align: middle;// 决定基准x的位置
        width: 0;
        height: 100%;// 为了决定父级基准x的位置 撑大成父级高度.
    }
}

image.png

当然上图中x是我为了理解加上去的.

============================
发现另一个问题.
html

           <div class="item">item</div>
           <div class="item1">item1</div>
           a

scss

div{
    width: 100px;
    background-color: #F08080;
    display: inline-block;
    border: 1px solid black;
    &.item{
        vertical-align: bottom;
        height: 50px;
        
    }
    &.item1{
        vertical-align: baseline;
        height: 500px;
    }
}

效果图

image.png

这个就推翻了我的一个想当然的假设,
我以为,父级基准x的的位置一定是从line-box底边去找.
这个图告诉我,line-box 和基准x的位置可以差的很远.
实际上上面那个居中案例就揭示了这个道理.
也就是说上面的那些推理是用来判断父级基准x的位置,
而line-box的底边则是行内元素当中最底边为准?
上面有张图,我加一下line-box

image.png

如果我们的猜测合理, 那么我们如果把第三个改成bottom时,
应该对齐第二个元素的底边

.item1{vertical-aline:baseline,margin-top:400px}// 反正保证他的基准x是最低的.
.item2{vertical-aline:middle}//让他的元素底边最后会超出元素1
.item3{vertical-aline:bottom}// 看他对齐哪里,就可以判断line-box的底边了.

image.png

猜想吻合.
首先证明, line-box 的底边右行内元素最低决定,
(合理猜测,line-box的顶边应该由行内元素最高决定?)
其次证明,line-box的底边并不能决定父级基准x的位置,
基准x的位置应该由昨天,也就是上面说的,根据mangin和文字最底行的比较来决定.
第三,我们可以说, vertical-aline中的 top , bottom两个值,的元素
能参与影响 line-box的底边,
但无法参与影响基准x的位置.

然后我决定证实猜想,又试了一下,稍微改了下,前面提到的代码.
html

             <div class="item1">xitem1x</div>
             <div class="item2">xitem2x</div>
             <div class="item3"></div>
             asja

scss

div{
    width: 100px;
    display: inline-block;
}
.item1{
    height: 100px;
    background-color: #F08080;
    vertical-align: bottom;
}
.item2{
    height: 500px;
    background-color: #F0AD4E;
}
.item3{
    margin-top: 100px;
    height: 100px;
    background-color: #A71D5D;
}

效果图