vertical-align属性主要用于改变行内元素的对齐方式，对于行内布局影响很大，如果不了解的话，我们开发调整样式的时候很容易出错。

　　网上关于这个属性的原理说得很是复杂，看一眼就让人觉得望而生畏，而且大可不必完全理解其原理，只要懂得其规律，我们足够使用即可，下面把我的理解分享给大家：

　　基线

　　要了解vertical-align属性，必须懂得基线，怎么理解基线呢？

　　1、我们写网页是在一个矩形的显示屏上，经常是一行一行来布局，不可避免的是一行中会有多个内容，那么这行内容是如何上下对齐的呢？答案就是默认让他们的基线对齐。

　　2、各种字体、图片、行内html元素等可展示的内容都有各自的基线，要想知道具体内容的基线我们可以找一个简单的参照物：小写字母“x”，为什么找它呢？因为英文字母的基线恰好就是小写"x"的最下方，比较容易看出。

　　知道了以上两点我们就可以很容易知道其他内容元素的基线位置了，把其他元素和小写“x”放在一行展示一下就一眼可以看出了：

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

    div {

      border: 1px solid cyan;

      font-size: 30px;

    }

    div .span1 {

      display: inline-block;

      background-color: green;

    }

    div .span2 {

      display: inline-block;

      overflow: hidden;

      background-color: green;

    }

  </style>

</head>

<body>

  <div>

    x

    <img src="./demo.jpg" alt="">

    汉字

    <input type="text">

    <button>按钮</button>

    <span class="span1">span1</span>

    <span class="span2">span2</span>

  </div>

</body>

</html>

　　

　　如上图红色为该行元素基线，可以发现图片和overflow:hidden样式的元素的基线位置是最下方，中文、输入框和button按钮的基线位置都在中下方的位置。可以看出，这些行内元素的排列是先按基线上下对齐，然后把父元素撑开。

　　值得注意的一点是，如果我们直接往div中放入一个图片，会发现图片底部距离div的下方有一个空隙；这是因为行内元素各自基线对齐以后还要和父元素的字体基线保持一致，换句话说：每个行内元素的基线都要向父元素字体基线看齐。当父元素的行高和字体大小样式改变的时候，会使得父元素字体基线位置改变，从而使得行内元素的位置整体上下移动。虽然我们只看到了一个图片没有看到字，但是父元素有默认的line-height和font-size，也会悄悄地影响布局，你会发现再往div中放入了一个小写字母“x”，如下图，它的下方刚好占据了空隙的位置。所以知道了这个原因，想去掉这个空隙的话，只需要把父元素的line-height和font-size设置为0，或者把图片设置成块级元素，让它独占一行就可以了。同样的，如果div中直接放入一个input输入框，输入框上方也会有个空隙，与此类似，只是图片和输入框的基线位置不同罢了。

　　

vertical-align属性

　　了解了上述行内元素的排序原则，我们可能会有个疑问：如果我们需要某些行内元素不按照基线排列怎么办？答案就是使用vertical-align属性。

　　首先，vertical-align属性是针对行内元素才有效果，它改变了当前行内元素和父元素字体两者之间的对齐方式，默认值是baseline，即两者基线对齐，如上面我们测试的一样。

　　关于各个属性值可参考https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align，可简单在div中加入小写字母“x”和一张图片分别切换属性进行验证即可。

　　回到上面提到的div中图片下方空隙的问题，只需要设置图片的vertical-align：bottom，这样会使得图片的底部和整行的底部对齐，也就不会有空隙了。

　　有两个属性稍作解释：

　　1、当设置属性为"%"的时候，指的是当前行内元素的line-height属性值的占比，可以设置成正负值，行内元素基线相对父元素字体基线上下移动这个百分比的距离。如下图，设置图片vertical-align: 50%; line-height: 30px; 本来图片最下方应该和"x"底部对齐的，现在上移了15px，如果是-50%，就会相对下移15px。当然也可以直接设置为length，vertical-align：15px;效果也是一样的。

　　

　　2、当设置属性为“middle”的时候，行内元素中间位置会和父元素字体基线上方1/2"x-height"位置对齐，“x-height”其实就是父元素中小写字母“x”的高度，简单来说，就是行内元素的中间位置会和父元素中的小写字母“x”的中间位置（x的交叉点）对齐，就相当于两者中间对齐了。

　　

　　

简单理解vertical-align属性和基线问题的更多相关文章

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

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

  2. 简单理解Struts2中拦截器与过滤器的区别及执行顺序

    简单理解Struts2中拦截器与过滤器的区别及执行顺序 当接收到一个httprequest , a) 当外部的httpservletrequest到来时 b) 初始到了servlet容器 传递给一个标 ...

  3. 我们为之奋斗过的C#-----C#的一个简单理解

    我们首先来简单叙述一下什么是.NET,以及C#的一个简单理解和他们俩的一个区别. 1 .NET概述 .NET是Microsoft.NET的简称,是基于Windows平台的一种技术.它包含了能在.NET ...

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

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

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

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

  6. 沉淀，再出发：VUE的简单理解

    沉淀,再出发:VUE的简单理解 一.前言 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过 ...

  7. 【原创】分布式之数据库和缓存双写一致性方案解析(三) 前端面试送命题（二）-callback，promise，generator，async-await JS的进阶技巧 前端面试送命题（一）-JS三座大山 Nodejs的运行原理-科普篇 优化设计提高sql类数据库的性能 简单理解token机制

    [原创]分布式之数据库和缓存双写一致性方案解析(三)   正文 博主本来觉得,<分布式之数据库和缓存双写一致性方案解析>,一文已经十分清晰.然而这一两天,有人在微信上私聊我,觉得应该要采用 ...

  8. input屏蔽历史记录 ;function($,undefined) 前面的分号是什么用处 JSON 和 JSONP 两兄弟 document.body.scrollTop与document.documentElement.scrollTop兼容 URL中的# 网站性能优化 前端必知的ajax 简单理解同步与异步 那些年，我们被耍过的bug——has

    input屏蔽历史记录   设置input的扩展属性autocomplete 为off即可 ;function($,undefined) 前面的分号是什么用处   ;(function($){$.ex ...

  9. vue学习笔记（六）— 关于Vuex可以这样简单理解

    关于Vuex可以这样简单理解 作者:狐狸家的鱼 本文链接:关于Vuex GitHub:sueRimn 概念理解 和大多数文章都一样,从概念解释到引出问题再举例解决问题. 官网中,Vuex是状态管理模式 ...

  10. 简单理解JavaScript原型链

    简单理解原型链 什么是原型 ? 我是这样理解的:每一个JavaScript对象在创建的时候就会与之关联另外一个特殊的对象,这个对象就是我们常说的原型对象,每一个对象都会从原型"继承" ...

随机推荐

  1. OpenFlow(OVS)下的“路由技术”

    前言 熟悉这款设备的同学,应该也快到不惑之年了吧!这应该是Cisco最古老的路由器了.上个世纪80年代至今,路由交换技术不断发展,但是在这波澜壮阔的变化之中,总有一些东西在嘈杂的机房内闪闪发光,像极了 ...

  2. Levenshtein Distance（编辑距离）算法与使用场景

    前提 已经很久没深入研究过算法相关的东西,毕竟日常少用,就算死记硬背也是没有实施场景导致容易淡忘.最近在做一个脱敏数据和明文数据匹配的需求的时候,用到了一个算法叫Levenshtein Distanc ...

  3. php Rabbitmq扩展安装坑点

    pecl install amqp 出现 checking for amqp using pkg-config... configure: error: librabbitmq not found 这 ...

  4. Flink系列之状态及检查点

    Flink不同于其他实时计算的框架之处是它可以提供针对不同的状态进行编程和计算.本篇文章的主要思路如下,大家可以选择性阅读. 1. Flink的状态分类及不同点. 2. Flink针对不同的状态进行编 ...

  5. Nginx之负载均衡配置（一）

    前文我们聊了下nginx作为反向代理服务器,代理后端动态应用服务器的配置,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/12430543.html:今天我们来聊 ...

  6. 2019-2020-2 20175226 王鹏雲 网络对抗技术 Exp2 后门原理与实践

    2019-2020-2 20175226 王鹏雲 网络对抗技术 Exp2 后门原理与实践 实验内容 使用netcat获取主机操作Shell,cron启动: 使用socat获取主机操作Shell, 任务 ...

  7. 什么是YUM

    什么是Yum Yum(全称为 Yellow dog Updater, Modified)是一个在RedHat以及CentOS等Linux系统中的Shell前端软件包管理器.基于RPM包管理,能够从指定 ...

  8. Spring源码阅读笔记05：自定义xml标签解析

    在上篇文章中,提到了在Spring中存在默认标签与自定义标签两种,并且详细分析了默认标签的解析,本文就来分析自定义标签的解析,像Spring中的AOP就是通过自定义标签来进行配置的,这里也是为后面学习 ...

  9. OpenCV3入门（十四）图像特效—挤压、哈哈镜、扭曲

    一.图像挤压特效 1.原理 图像压效果本质的图像坐标的非线性变换,将图像向内挤压,挤压的过程产生压缩变形,从而形成的效果. 挤压效果的实现是通过极坐标的形式,设图像中心为O(x,y),某点距离中心O的 ...

  10. fastdfs的入门到精通（引言和单机安装）

    引言: FastDFS是一个开源的轻量级分布式文件系统,它对文件进行管理,功能包括:文件存储.文件同步.文件访问(文件上传.文件下载)等,解决了大容量存储和负载均衡的问题.特别适合以文件为载体的在线服 ...