张鑫旭老师在文章《我对CSS vertical-align的一些理解与认识(一)》中提到:

vertical-align:middle属性的表现与否,仅仅与其父标签有关,至于我们通常看到的与后面的文字垂直居中显示那都是假象!

经过摸索测试,才对这句话有种豁然开朗的感觉。

html:

        <span class="box">
<span class="dot"></span>
匿名元素
<span class="text"> 我是一段卡哇伊的文字。</span>
</span>

css:

    .box {
margin: 36px 0;
border: 1px dashed blue;
font-size: 12px;
color: white;
background: red;
/*height: 50px;*/
} .box .dot {
display: inline-block;
width: 16px;
height: 16px;
/*line-height:50px;*/
background: white;
vertical-align: baseline; // 这个baseline到底在哪里
} .box .text {
vertical-align: middle;
/*line-height:50px; */
font-size: 16px;
}

首先要明白的是,一个行内元素有四条看不见的线(直接复制了张老师文章里的图片):

这四条线的位置由谁决定呢,我认为是字体的大小,当字体的font-size:0时,则四线重合。
所以实际上子元素的vertical-align对齐是父元素的这几条线,看下图,我直接在父元素span里放乐“匿名元素”几个字,你能直观的发现,子元素对齐的就是“匿名元素”的baseline

另外 :
1.vertical-align: baseline/middle...是指此元素的baseline/middle line 和父元素的对齐
2.对于空的元素,其baseline就是底边缘,比如.dot元素

我对line-height及vertical-align的一点理解的更多相关文章

  1. What is Vertical Align?

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

  2. 浏览器兼容CSS代码:按钮文字垂直居中(input button text vertical align)

    经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comm ...

  3. 关于Vertical Align的理解

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

  4. How to Take Control of Your Line Height in Outlook.com

    Reference to: http://www.emailonacid.com/blog/details/C13/line_height_and_outlook.com

  5. 深入了解css的行高Line Height属性

    什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...

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

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

  7. Java内存管理的进一步理解-模拟过程图解

    Java内存管理的进一步理解-模拟过程图解--转载 java的内存管理分为: 1.堆内存:2.栈内存:3.方法区:4.本地方法区 /* 1:方法区      方法区存放装载的类数据信息包括:      ...

  8. div仿checkbox表单样式美化及功能

    div仿checkbox表单样式美化及功能(checkbox的样式不好看)素材在底部: 效果图: window.css .bj { position: absolute; top: 0; left: ...

  9. CSS布局设置

    一 盒模型 盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模 ...

  10. 原生 JS 实现移动端 Touch 滑动反弹

    什么是 Touch滑动?就是类似于 PC端的滚动事件,但是在移动端是没有滚动事件的,所以就要用到 Touch事件结合 js去实现,效果如下: 1. 准备工作 什么是移动端的 Touch事件?在移动端 ...

随机推荐

  1. python 创建目录文件夹

    主要涉及到三个函数 1.os.path.exists(path) 判断一个目录是否存在 2.os.makedirs(path) 多层创建目录 3.os.mkdir(path) 创建目录 DEMO 直接 ...

  2. ts转js 并压缩

    1,在线编译,进入typescript官网http://www.typescriptlang.org/,点击里面的playground就可以直接写代码了. 2,在本地编译运行Typescript需要使 ...

  3. docker部署redis

    镜像获取 docker pull redis:4.0 ##当前最新版本 docker images 启动 docker run --name redis-huiyuan -p : -v $PWD/da ...

  4. c# 爬虫和组件HtmlAgilityPack处理html

    测试当前爬虫的User-Agent:http://www.whatismyuseragent.net/ 大佬的博客地址:https://www.cnblogs.com/jjg0519/p/670274 ...

  5. C#动态生成Word文档并填充数据

    C#也能动态生成Word文档并填充数据 http://www.cnblogs.com/qyfan82/archive/2007/09/14/893293.html 引用http://blog.csdn ...

  6. ThreadPoolExecutor的runState和workCount变量怎么存储?

    在阅读Java线程池ThreadPoolExecutor源码的时候,发现它很巧妙地把线程池状态runState和线程数workCount两个变量存放在了一个int型变量里面. 我们先看一个数值,如下是 ...

  7. CSS设置浮动导致背景颜色设置无效的解决方法

    float浮动会使父元素高度塌陷,父级元素不能被撑开,所以导致背景颜色不能被撑开 解决方法: 对父元素设置高度 对父元素设置 overflow:hidden清除浮动 把父元素也设置为float浮动 结 ...

  8. 二、LinkList及其源码解析

    1.链表介绍 链表是一种物理单元上非连续,非顺序的存储结构.链表由一系列的姐点组成,结点可以在运行时动态生成.每个结点包含两个部分,一个是存储数据元素的数据域,一个是存储下一个结点的指针域 双链表是链 ...

  9. SpringCloud之RabbitMQ安装

    本文介绍Linux以及MAC OS下的RabbitMQ安装及配置: 一.Linux环境下的RabbitMQ安装(CentOS) 1.安装ErLang Erlang(['ə:læŋ])是一种通用的面向并 ...

  10. db2 with用法

    最近在研究db2 递归查询时想到了with,一直以为with只是用来查询递归,但是实际with功能强大,还有更加强大的功能,偶然读到一位大神的文章,对with做了很详细的解读,特贴出来供大家学习研究 ...