深入理解 vertical-align 属性
语法
用来指定行内元素或表格元素的垂直对齐方式
相对父元素的值
- 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>
原因：
- 依照规则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 中的文本节点。
解决办法：- li 前后兄弟元素连起来书写。
- 用注释来代替空白，注释节点默认在渲染的时候是不渲染的。
深入理解 vertical-align 属性的更多相关文章
- 前端知识点回顾之重点篇——CSS中vertical align属性
来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...
- 【JVM虚拟机】(7)---深入理解Class中-属性集合
#[JVM虚拟机](7)---深入理解Class中-属性集合 之前有关class文件已经写了两篇博客: 1.[JVM虚拟机](5)---深入理解JVM-Class中常量池 2.[JVM虚拟机](6)- ...
- iOS runtime探究(三): 从runtime開始理解OC的属性property
你要知道的runtime都在这里 转载请注明出处 http://blog.csdn.net/u014205968/article/details/67639303 本文主要解说runtime相关知识, ...
- HTML 标签元素的 align 属性
align 属性规定段落中文本的对齐方式. 有 left right center justify 这些参数 left right center 就是左对齐 右对齐 中间对齐 justify ...
- What is Vertical Align?
https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...
- 关于Vertical Align的理解
1:vertical-align 翻译就是垂直-对齐... 2:关于line-height的点 2.1:如果一个标签没有定义height属性,那么其最终表现的高度一定是由line-height起作用. ...
- yii2知识点理解（成员属性）
yii2成员属性 成员变量类似于public $a; 成员属性类似于 public function a(){} 成员变量是就类的结构构成而言的概念,而属性是就类的功能逻辑而言的概念 成员属性应用: ...
- 理解CSS Clip属性及用法
应用Clip属性实现的一个简单效果图: 样式写法: .my-element { position: absolute; clip: rect(10px 350px 170px 0); /* IE ...
- 深入理解Spring Boot属性配置文件
我们在开发Spring Boot应用时,通常同一套程序会被应用和安装到几个不同的环境,比如:开发.测试.生产等.其中每个环境的数据库地址.服务器端口等等配置都会不同,如果在为不同环境打包时都要频繁修改 ...
- 理解 CALayer ContentsCenter 属性
http://aaronzjp.cn/2016/12/01/iOS-CALayer/ 这个属性和android 的 .9 文件类似,定义了图片的拉伸范围:例子中明显是四个角不拉伸,对于需要做背景,co ...
随机推荐
- 学习python-20191108（2）REST接口相关
一.客户登录验证 在使用接口前,需要对客户进行登录验证 enums.py文件代码: #定义枚举,客户端登录的方式有很多种形式:邮箱登录.手机登录.微信小程序登录.微信公众号登录 class Clien ...
- 清除无用工具栏：CommandbarCleaner下载
下面演示的工具,适用于Office任一版本. 使用本工具之前,预先打开相应的Office软件. 下载: CommandbarCleaner.rar
- android支付宝首页、蚂蚁森林效果、视频背景、校园电台、载入收缩动画等源码
Android精选源码 android实现蚂蚁森林效果源码 android仿支付宝首页应用管理(拖拽排序,添加删除) android校园网络电台客户端源码 android实现按钮伸缩效果源码 一款仿i ...
- Java IO: InputStreamReader和OutputStreamWriter
作者: Jakob Jenkov 译者: 李璟(jlee381344197@gmail.com) 本章节将简要介绍InputStreamReader和OutputStreamWriter.细心的读者可 ...
- Centos7下常见目录
/etc/fstab
- MAYA卸载/完美解决安装失败/如何彻底卸载清除干净MAYA各种残留注册表和文件的方法
在卸载MAYA重装MAYA时发现安装失败,提示是已安装或安装失败.这是因为上一次卸载后没有清理干净,系统会误认为已经安装过了.有的同学是新装的系统也会出现安装失败的情况,这是因为C++ 或者.NET的 ...
- python3的数据类型转换问题
问题描述:在自我学习的过程中,写了个登陆,在input处,希望能够对数据类型进行判断,但是因为python3的输入的数据会被系统默认为字符串,也就是1,1.2,a.都会被系统默认为字符串,这个心塞啊, ...
- Android中的AlertDialog和ProgressDialog用法
手机APP对话框是很多APP都有的下面来看下怎么实现的吧, 打开Android studio 然他自动创建好布局和类; 下面我们修改activity_main.xml中的代码 <?xml ver ...
- Git忽略规则(.gitignore配置）不生效原因和解决
问题: .gitignore中已经标明忽略的文件目录下的文件,git push的时候还会出现在push的目录中,或者用git status查看状态,想要忽略的文件还是显示被追踪状态. 原因是因为在gi ...
- [JS奇怪的世界]No.55 危險小叮嚀：陣列與for in
前言 前面已經瞭解了使用內建函數建構子的某些危險地方,但其實陣列與for in,也是有一些危險的地方. 陣列與for in 在前面幾個章節有講過陣列就是物件,所以我們一樣可以使用 for in來做處理 ...