css基础--vertical-align

1、vertical-align属性值分为以下4类：
线类，如baseline（默认值）、top、middle、bottom；
文本类，如text-top、text-bottom；
上标下标类，如sub、super；
数值百分比类，如20px、2em、20%等。
数值百分比类根据计算值的不同，相对于基线往上或往下偏移，到底是往上还是往下取决于vertical- align的计算值是正值还是负值，如果是负值，往下偏移，如果是正值，往上偏移。
vertical-align的默认值是baseline，即基线对齐，而基线的定义是字母x的下边缘。因此，内联元素默认都是沿着字母x的下边缘对齐的。对于图片等替换元素，往往使用元素本身的下边缘作为基线。如图所示：

负值全部都是往下偏移，正值全部都是往上偏移，而且数值大小全部都是相对于基线位置计算的，因此，从这一点来看，vertical-align:baseline等同于vertical-align:0。
在CSS世界中，凡是百分比值，均是需要一个相对计算的值，例如，margin和padding是相对于宽度计算的，line-height是相对于font-size计算的，而这里的vertical- align属性的百分比值则是相对于line-height的计算值计算.
2、vertical-align起作用的前提条件就是：只能应用于内联元素以及display值为table-cell的元素。浮动和绝对定位会让元素块状化。
有时会觉得vertical-align在内联元素下也不能生效

.box {
height: 128px;
}
.box > img {
height: 96px;
vertical-align: middle;
}
<div class="box">
<img src="1.jpg">
</div

这种情况看上去是vertical-align:middle没起作用，实际上，vertical-align是在努力地渲染的，只是行框盒子前面的“幽灵空白节点”高度太小，如果我们通过设置一个足够大的行高让“幽灵空白节点”高度足够，就会看到vertical-align:middle起作用了，代码如下所示：

.box {
height: 128px;
line-height: 128px;
/* 关键CSS属性，使得幽灵空白节点填充行间距，高度变高 */
}
.box > img {
height: 96px;
vertical-align: middle;
}

看一段代码，发现vertical-align无法作用到table-cell的元素上

.cell {
height: 128px;
display: table-cell; }
.cell > img {
height: 96px;
vertical-align: middle;
}
<div class="cell">
<img src="1.jpg">
</div>

结果图片并没有要垂直居中的迹象，还是紧贴着父元素的上边缘.

但是，如果vertical-align:middle是设置在table-cell元素上，CSS代码如下：

.cell {
height: 128px;
display: table-cell;
vertical-align: middle;
}
.cell > img {   height: 96px; }

虽然就效果而言，table-cell元素设置vertical-align垂直对齐的是子元素，但是其作用的并不是子元素，而是table-cell元素自身。就算table-cell元素的子元素是一个块级元素，也一样可以让其有各种垂直对齐表现。
3、vertical-align和line-height之间的关系

.box {
line-height: 32px;
}
.box > span {
font-size: 24px;
}
<div class="box">
<span>文字</span>
</div>

看以上代码，容器高度和行高不一致。其中有一个很关键的点，那就是24px的font-size大小是设置在元素上的，这就导致了外部

元素的字体大小和元素有较大出入。
我们改一改上面的html:

<div class="box">
x<span>文字x</span>
</div>

此时，我们可以明显看到两处大小完全不同的文字。一处是字母x构成了一个“匿名内联盒子”，另一处是“文字 x”所在的元素，构成了一个“内联盒子”。由于都受line- height:32px影响，因此，这两个“内联盒子”的高度都是32px。下面关键的来了，对字符而言，font-size越大字符的基线位置越往下，因为文字默认全部都是基线对齐，所以当字号大小不一样的两个文字在一起的时候，彼此就会发生上下位移，如果位移距离足够大，就会超过行高的限制，而导致出现意料之外的高度

上图非常直观地说明了为何最后容器的高度会是36px，而非line-height设置的32px。
解决方案：
我们可以让“幽灵空白节点”和后面元素字号一样大，也就是

.box {
line-height: 32px;
font-size: 24px;
} .box > span {}

或者改变垂直对齐方式，如顶部对齐，这样就不会有参差位移了

.box {
line-height: 32px; }
.box > span {
font-size: 24px;
vertical-align: top; }

现象：任意一个块级元素，里面若有图片，则块级元素高度基本上都要比图片的高度高，如下代码，结果.box元素的高度可能就会像下图一样，底部平白无故多了5像素

.box {
width: 280px;
outline: 1px solid #aaa;
text-align: center;
}
.box > img {   height: 96px; }
<div class="box">   <img src="1.jpg"> </div

间隙产生的三大元凶就是“幽灵空白节点”、line-height和vertical-align属性。为了直观演示原理，我们可以在图片前面辅助一个字符x代替“幽灵空白节点”，并想办法通过背景色显示其行高范围如下图示：

当前line-height计算值是20px，而font-size只有14px，因此，字母x往下一定有至少3px的半行间距（具体大小与字体有关），而图片作为替换元素其基线是自身的下边缘。根据定义，默认和基线（也就是这里字母x的下边缘）对齐，字母x往下的行高产生的多余的间隙就嫁祸到图片下面，让人以为是图片产生的间隙，实际上，是“幽灵空白节点”、line-height和vertical-align属性共同作用的结果。
清除该间隙的方法：
（1）图片块状化。可以一口气干掉“幽灵空白节点”、line-height和vertical- align。
（2）容器line-height足够小。只要半行间距小到字母x的下边缘位置或者再往上，自然就没有了撑开底部间隙高度空间了。比方说，容器设置line-height:0。
（3）容器font-size足够小。此方法要想生效，需要容器的line-height属性值和当前font-size相关，如line-height:1.5或者line-height:150%之类；否则只会让下面的间隙变得更大，因为基线位置因字符x变小而往上升了。
（4）图片设置其他vertical-align属性值。间隙的产生原因之一就是基线对齐，所以我们设置vertical-align的值为top、middle、bottom中的任意一个都是可以的
前面提到的一个问题

<div class="box">
<img src="mm1.jpg">
</div>
.box > img {   height: 96px；margin-top: -200px; }

按照理解，-200px远远超过图片的高度，图片应该完全跑到容器的外面，但是，图片依然有部分在.box元素中，而且就算margin-top设置成-99999px，图片也不会继续往上移动，完全失效。其原理和上面图片底部留有间隙实际上是一样的，图片的前面有个“幽灵空白节点”，而在CSS世界中，非主动触发位移的内联元素是不可能跑到计算容器外面的，导致图片的位置被“幽灵空白节点”的vertical-align:baseline给限死了。我们不妨把看不见的“幽灵空白节点”使用字符x代替

因为字符x下边缘和图片下边缘对齐，字符x非主动定位，不可能跑到容器外面，所以图片就被限死在此问题，margin-top失效。

.box {  text-align: justify; } .justify-fix {   display: inline-block;   width: 96px; }<div class="box">   <img src="1.jpg" width="96">  <img src="1.jpg" width="96">   <img src="1.jpg" width="96">   <img src="1.jpg" width="96">   <i class="justify-fix"></i>   <i class="justify-fix"></i>   <i class="justify-fix"></i> </div>

按照之前解决问题的方法，我们可以直接给.box元素来个line-height:0解决垂直间隙问题，结果，这样设置之后的效果却如下图示。图片和图片之间的间隙是没有了，但是图片和最后的占位元素之间依然有几像素的间距。这个与inline-block和baseline有关，后面章节解惑

css基础--vertical-align相关推荐

【前端开发基础】CSS基础知识以及CSS3
文章目录一.CSS层叠样式 (一) 目标 1.CSS简介 1.1 HTML的局限性 1.2 CSS网页的美容师 1.3 CSS语法规范 1.4 CSS代码风格 (1)样式格式书写 (2)样式大小写风 ...
CSS基础面试题精选
css 基础 1. 引入CSS样式表(书写位置) 1.1 行内式(内联样式) <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;">内容 ...
html笔记（一）html4+css2.0、css基础和属性、盒模型
w3c 官网这里是 html4 的内容大标题小节一.关于HTML 1. 基本语法 2. HTML常用标签 3. 相对路径和绝对路径二.css基础 1. 表单元素 2. 创建样式表 3. cs ...
CSS基础必备知识点01
CSS基础必备知识点 CSS(Cascading Style Sheme), 层叠样式表或级联样式表,简称样式表.它的作用是给HTML网页设置外观或者样式.其中外观或者样式指的是:HTML网页中的文字 ...
CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化
本篇文章为 CSS 基础系列笔记第七篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
34、CSS高频前端面试题之CSS基础
参考:https://juejin.cn/post/6905539198107942919 目录一.CSS基础 1. CSS选择器及其优先级 2.CSS中可继承与不可继承属性有哪些 2.1 无继承性 ...
HTML+CSS基础知识简单版
HTML+CSS基础知识简单版一.HTML概述 HTML:超文本标记语言,其实就是用来开发网页的一门语言: CSS:层叠样式表,可以用于渲染网页.美化网页.做网页. 1.HTML介绍 HTML:超文 ...
HTML和Css基础知识点笔记
HTML基础 Ctrl+/直接注释 px为像素单位 HTML是用来描述网页的一种语言 HTML指超文本标记语言:不是编程语言,是一种标记语言. 1.HTML基础标签 head.body 2.HTML标 ...
HTML、css基础知识
typora-copy-images-to: media 第01阶段.前端基础.CSS初识 CSS层叠样式表学习目标理解 css的目的作用 css的三种引入方式应用 css三种引用方式的书写通 ...
HTML+css 基础语法
title: HTML+css 基础语法 categories: HTML tags: [语法,HTML,css] 一.HTML 什是么网站? 网站(Website)开始是指在因特网上根据一定的规 ...

css基础--vertical-align

css基础--vertical-align相关推荐

最新文章

热门文章