vertical-align
請(qǐng)問(wèn)一下span1為什么會(huì)與底部對(duì)齊？
<!DOCTYPE html>
<html>
? ? <head>
? ? ? ? <meta charset="UTF-8">
? ? ? ? <title></title>
? ? ? ? <style>
? ? ? ? body{margin:0;}
? ? ? ? .box{
? ? ? ? border:1px solid black;
? ? ? ? }
? ? ? ? .span1{
? ? ? ? background:red;
? ? ? ? font-size:50px;
? ? ? ? }
? ? ? ? .span2
? ? ? ? {
? ? ? ? background:blue;
? ? ? ? font-size:20px;? ? ? ?
? ? ? ? }
? ? ? ? .span3
? ? ? ? {
? ? ? ? background:yellow;
? ? ? ? font-size:100px;
? ? ? ? vertical-align:bottom;
? ? ? ? }
? ? ? ? </style>
? ? </head>
? ? <body>
? ? <div class="box">
? ? <span class="span1">xxh</span>
? ? <span class="span2">x</span>
? ? <span class="span3">xxh</span>
? ? x??
? ? </div>
? ? </body>
</html>
2019-06-17
因?yàn)閐emo中三個(gè)元素(span1,span2和x)的默認(rèn)對(duì)齊方式都是(baseline)，且span1的font-size最大(span1:50px,span2:20px,x:24px(左右)),所以span1靠最底，以span1的文字底為baseline對(duì)齊，反過(guò)來(lái)，你把span1和span2的font-size數(shù)值對(duì)換下，那么結(jié)果span2就會(huì)與底對(duì)齊了