语法

用来指定行内元素或表格元素的垂直对齐方式

相对父元素的值

  • baseline

    • 使元素的基线与父元素的基线对齐。HTML规范没有详细说明部分可替换元素的基线,如textarea,这意味着这些元素使用此值的表现因浏览器而异。
  • middle
    • 使元素的中部与父元素的基线加上父元素x-height(译注:x高度)的一半对齐。
  • sub
    • 使元素的基线与父元素的下标基线对齐。
  • super
    • 使元素的基线与父元素的上标基线对齐。
  • text-top
    • 使元素的顶部与父元素的字体顶部对齐。
  • text-bottom
    • 使元素的底部与父元素的字体底部对齐。

相对行的值

  • top

    • 使元素极其后代元素的顶部与整行的顶部对齐。
  • bottom

    • 使元素及其后代元素的底部与整行的底部对齐。

    没有基线的元素,使用外边距的下边缘替代。

baseLine

1、baseLine 的含义

2、baseLine 的确定规则

1. inline-table 的 baseline 是他的table的第一行的 baseline
2. 父元素 [line box] 的 baseline 是最后一个 line 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 的例子

  • 子元素为行内块,里面无行内框。
    <style type="text/css">
.ctn-block {
background-color: #bbb;
height: 500px;
text-align: center;
} .ctn-block .child {
display: inline-block;
width: 100px;
height: 200px;
background: orange;
}
</style>
<body>
<div class="ctn-block">
x
<div class="child">
</div>
</div>
</body>
![屏幕快照 2019-08-31 下午5.04.28](https://shenggao.oss-cn-beijing.aliyuncs.com/blog/2020/02/29/ping-mu-kuai-zhao-20190831-xia-wu50428.png)

原因:

  • 依照规则2。父元素的基线是最后一个行内框的基线。
  • 最后一个行内框为一个行内块。先判断该行内块 overflow 属性不是 visiable 以外的值,然后确定其内部没有行内框,得出该元素的基线是底部 margin 齐平。
  • 父元素的基线就是黄色块的底部 margin。
  • 子元素为行内块,里面有行内框。
<style type="text/css">
.ctn-block {
background-color: #bbb;
height: 500px;
text-align: center;
} .ctn-block .child {
display: inline-block;
width: 100px;
height: 200px;
background: orange;
}
</style>
<body>
<div class="ctn-block">
x
<div class="child">
x
</div>
</div>
</body>



原因:

* 依照规则2。父元素的基线是最后一个行内框的基线。最后一个行内框为一个行内块。

* 先判断得出该行内块 overflow 属性不是 visiable,然后确定其有一个作为内容存在的元素,所以当前行内框的baseline就是最后一个作为内容存在的元素的baseline,也就是内容 x 的baseline,默认是 x 的底部。

* 所以当前父元素的基线是内容区 x 的底部。

  • 子元素有行内块,且其 overflow 属性为 hidden。

    则子元素的基线是底部 margin。所以相应的父元素的基线是底部 margin。

inline-block 元素下方有空隙。

  • 垂直空隙
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0
} ul {
background-color: bisque;
} .box {
display: inline-block;
width: 100px;
height: 100px;
background-color: aliceblue;
}
</style>
</head> <body> <ul>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<span>x</span>
</ul>
</body> </html>



出现的原因:li 为行内块,且其 vertical-align 属性默认为 baseline,也就是字母 x 的底边,而相对于 s、y 等一些较高的字母,其底部会长一下,所以 baseline 的下方会给字母的一部分留出空间,因此会产生间隙。解决方法,就是**改变 line box 的 baseline 位置,比如设置 li 的 vertical-align 为 middle。如下所示。

  • 左右间隙

    出现原因:li 元素的水平空隙是因为换行引起的,这个换行会变成一个空白,这个空白会被解析为 DOM 中的文本节点。

    解决办法:

    1. li 前后兄弟元素连起来书写。
    2. 用注释来代替空白,注释节点默认在渲染的时候是不渲染的。

深入理解 vertical-align 属性的更多相关文章

  1. 前端知识点回顾之重点篇——CSS中vertical align属性

    来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...

  2. 【JVM虚拟机】(7)---深入理解Class中-属性集合

    #[JVM虚拟机](7)---深入理解Class中-属性集合 之前有关class文件已经写了两篇博客: 1.[JVM虚拟机](5)---深入理解JVM-Class中常量池 2.[JVM虚拟机](6)- ...

  3. iOS runtime探究(三): 从runtime開始理解OC的属性property

    你要知道的runtime都在这里 转载请注明出处 http://blog.csdn.net/u014205968/article/details/67639303 本文主要解说runtime相关知识, ...

  4. HTML 标签元素的 align 属性

    align 属性规定段落中文本的对齐方式. 有 left  right center  justify 这些参数 left  right center  就是左对齐 右对齐 中间对齐 justify  ...

  5. What is Vertical Align?

    https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...

  6. 关于Vertical Align的理解

    1:vertical-align 翻译就是垂直-对齐... 2:关于line-height的点 2.1:如果一个标签没有定义height属性,那么其最终表现的高度一定是由line-height起作用. ...

  7. yii2知识点理解(成员属性)

    yii2成员属性 成员变量类似于public $a; 成员属性类似于 public function a(){} 成员变量是就类的结构构成而言的概念,而属性是就类的功能逻辑而言的概念 成员属性应用: ...

  8. 理解CSS Clip属性及用法

    应用Clip属性实现的一个简单效果图: 样式写法: .my-element { position: absolute; clip: rect(10px  350px  170px  0); /* IE ...

  9. 深入理解Spring Boot属性配置文件

    我们在开发Spring Boot应用时,通常同一套程序会被应用和安装到几个不同的环境,比如:开发.测试.生产等.其中每个环境的数据库地址.服务器端口等等配置都会不同,如果在为不同环境打包时都要频繁修改 ...

  10. 理解 CALayer ContentsCenter 属性

    http://aaronzjp.cn/2016/12/01/iOS-CALayer/ 这个属性和android 的 .9 文件类似,定义了图片的拉伸范围:例子中明显是四个角不拉伸,对于需要做背景,co ...

随机推荐

  1. Grails Controller - respond 方法

    基本用法 官方文档:http://docs.grails.org/latest/ref/Controllers/respond.html 为当前 respond 语句所在 action 所对应的页面返 ...

  2. 瑞星:以虚拟化安全“Hold住”企业用户

    自从云计算的概念诞生的哪一天起,就吸引了无数人的目光.自从2006年开始,云计算经过了雾里看花的朦胧.众说纷纭的迷茫,到现在各类应用与服务呈现出了百花齐放的姿态,引领着信息科技迈入了新纪元,而服务器虚 ...

  3. Mr.Yu

    在linux下搭建Git服务器 git服务器环境 服务器 CentOS7 + git(version 1.8.3.1)客户端 Windows10 + git(version 2.16.0.window ...

  4. EventBus 3.0 的基本使用

    EventBus 3.0 的基本使用 1.什么是EventBus? EventBus 是一个Android端优化的publish/subscribe消息总线,简化了应用程序内各组件间.组件与后台线程间 ...

  5. 隐私标签(Privacy.Tag):轻轻一贴,愉快拍照!

    用相机去捕捉精彩瞬间,用照片来记录生活足迹,并实时地与朋友们分享当下的心情,似乎已成为我们忙碌生活中最有趣的调味剂.但随着移动设备照相功能的日益完善,以及各大社交平台的不断兴起,很多时候,你是否也会有 ...

  6. 用css3实现图片的放大缩小

    记录一个公用的css实现图片的放大缩小 @keyframes scaleDraw { /*定义关键帧.scaleDrew是需要绑定到选择器的关键帧名称*/ 0%{ transform: scale(1 ...

  7. MySQL性能优化最佳实践 - 02 MySQL数据库性能衡量

    测试服务器(或虚拟机)的QPS峰值 利用sysbench压测工具模拟SELECT操作 # 已有test库的话先drop掉 drop database test; create database tes ...

  8. yii2.0 集合七牛SDK 上传图片到第三方

    首先,请用composer下载七牛phpSDK (具体参考官方文档) composer require qiniu/php-sdk 注册七牛账号 获取 AK SK(密匙) ,创建资源对象 获取doma ...

  9. Flask admin Flask login 整合模板

    项目地址: https://github.com/WES6/supflask Flask admin 官方文档: https://flask-admin.readthedocs.io/en/lates ...

  10. React使用笔记2--创建登录组件

    文章目录 最近在学习使用React作为前端的框架,<React使用笔记>系列用于记录过程中的一些使用和解决方法.本文记录搭建登录页面的过程. 根据产品规划划分模块 主要页面逻辑 在这里,本 ...