欢迎来到站长教程网!
兔子CDN

DIV&CSS

当前位置:主页 > 网页制作 > DIV&CSS >

深入理解css中vertical-align属性

时间:2020-09-17|栏目:DIV&CSS|点击:

一、为什么要写这篇文章

今天看到一个问题:

两个div 都设置 display:inline-block,正常显示;但是在第二个div中加一个块级元素或者内联元素,显示就变了个样,为什么?

<meta charset="utf-8"/>
<style>
div{
    width: 100px;
    height: 100px;
    border:1px solid red;
    display: inline-block;
}
.align{
/*    vertical-align: top;*/
}
</style>
<body>
    <div>
    </div>
    <div class="align">为什么?</div>
</body>

深入理解css中vertical-align属性

解决方案就是给第二个div加上:vertical-align:top。

关于vertical-align和基线我知道一点,但是这个问题我没能答出,所以学习总结分享一下。

二、vertical-align干什么的?

w3c有一段相关信息如下:

 

'vertical-align'
Value:      baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
Initial:      baseline
Applies to:      inline-level and 'table-cell' elements
Inherited:      no
Percentages:      refer to the 'line-height' of the element itself
Media:      visual
Computed value:      for <percentage> and <length> the absolute length, otherwise as specified

可以看到vertical-align影响inline-level元素和table-cell元素垂直方向上的布局。根据MDN描述,vertical-align对::first-letter和::first-line同样适用。

适用于:

inline水平的元素  

inline:<img>,<span>,<strong>,<em>,未知元素  

inline-block:<input>(IE8+),<button><IE8+>....

'table-cell'元素

table-cell:<td>

所以默认情况下,图片,按钮,文字和单元格都可以用vertical-align属性。

取值:


复制代码代码如下: vertical-align: baseline|length|percentage|sub|super|top|middle|bottom|text-top|text-bottom|initial|inherit;

三、baseline

1、字母‘x’与baseline

 字母x的下边缘(线)就是基线。不是字母s之类下面有尾巴的字母

深入理解css中vertical-align属性

基线甚至衍生出了:  

1.“alphabetic” baseline: “字母”基线 – 英文  

2.“hanging” baseline: “悬挂”基线 – 印度文  

3.“ideographic” baseline: “表意”基线 – 中文

深入理解css中vertical-align属性

2、baseline的确定规则

1、inline-table元素的baseline是它的table第一行的baseline。

2、父元素【line box】的baseline是最后一个inline box 的baseline。

3、inline-block元素的baseline确定规则  

规则1:inline-block元素,如果内部有line box,则inline-block元素的baseline就是最后一个作为内容存在的元素[inline box]的baseline,而这个元素的baseline的确定就要根据它自身来定了。  

规则2:inline-block元素,如果其内部没有line box或它的overflow属性不是visible,那么baseline将是这个inline-block元素的底margin边界。

3、例子:inline-block例子

深入理解css中vertical-align属性

上图描述:

上图中从左到右都是line-block元素,红线代表margin-box的边界,蓝线代表baseline;黄色为border,绿色为padding,蓝色为content。

左边元素包含着没有脱离正常流的内容c,中间元素除了没有脱离正常流的内容c外还增加了overflow:hidden,右边元素没有内容,但是内容区有宽高。

分析图中各种情况inline-block元素的baseline:

上图左图,inline-block元素有处于正常流的内容,根据规则1,所以inline-block的baseline就是最后一个作为内容存在的元素的baseline,也就是内容c的baseline,而c的baseline根据自身定,就是图中蓝色。

上图中图,inline-block元素overflow:hidden不为visible,根据规则2,该inline-block元素baseline就是inline-block元素的margin-box的下边界了,即图中蓝线。

上图右图,inline-block元素没有内容,根据规则2,所以其baseline为margin-box的下边界,即蓝线。

4、例子:baseline确定规则例子

举例:  

<style type="text/css">
    .ctn-block{
        display: block;
        background-color: #bbb;
        line-height: 200px;
        font-size: 50px;
    }
    .ctn-block .child1{
        display: inline-block;
        width: 100px;
        height: 100px;
        margin:10px 0;
        vertical-align: baseline;
        background-color: aliceblue;
    }
</style>

<div class="ctn-block">
    <div class="child1"></div>
    <span>Gg</span>
</div>

深入理解css中vertical-align属性

分析:

父元素.ctn-block的base-line是Gg的baseline,

inline-block元素因为没有内部line box,也没有设置overflow:visible,所以其baseline是底margin边界。

四、vertical-align基于baseline的不同取值

1、baseline

将子元素盒子的baseline与父盒子的baseline对齐。

深入理解css中vertical-align属性

2、middle

将元素盒子的垂直中点与父盒子的baseline加上父盒子的x-height的一半位置对齐

上一篇:type=file的inpu美化,自定义上传按钮样式代码

栏    目:DIV&CSS

下一篇:CSS 属性选择器_动力节点Java学院整理

本文标题:深入理解css中vertical-align属性

本文地址:www.dtcnnet.com/CSS/31921.html

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:584415406 | 邮箱:584415406#qq.com(#换成@)

Copyright © 2015-2020 小白站长网 版权所有 苏ICP备20040415号