我对line-height及vertical-align的一点理解
张鑫旭老师在文章《我对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的一点理解的更多相关文章
- What is Vertical Align?
https://css-tricks.com/what-is-vertical-align/ ************************************************* CSS ...
- 浏览器兼容CSS代码:按钮文字垂直居中(input button text vertical align)
经过测试的浏览器:IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon 按钮的HTML代码: <input id="btn_comm ...
- 关于Vertical Align的理解
1:vertical-align 翻译就是垂直-对齐... 2:关于line-height的点 2.1:如果一个标签没有定义height属性,那么其最终表现的高度一定是由line-height起作用. ...
- 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
- 深入了解css的行高Line Height属性
什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...
- 前端知识点回顾之重点篇——CSS中vertical align属性
来源:https://www.cnblogs.com/shuiyi/p/5597187.html 行框的概念 红色(line-height)为行框的顶部和底部,绿色(font-size)为字体的高度, ...
- Java内存管理的进一步理解-模拟过程图解
Java内存管理的进一步理解-模拟过程图解--转载 java的内存管理分为: 1.堆内存:2.栈内存:3.方法区:4.本地方法区 /* 1:方法区 方法区存放装载的类数据信息包括: ...
- div仿checkbox表单样式美化及功能
div仿checkbox表单样式美化及功能(checkbox的样式不好看)素材在底部: 效果图: window.css .bj { position: absolute; top: 0; left: ...
- CSS布局设置
一 盒模型 盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模 ...
- 原生 JS 实现移动端 Touch 滑动反弹
什么是 Touch滑动?就是类似于 PC端的滚动事件,但是在移动端是没有滚动事件的,所以就要用到 Touch事件结合 js去实现,效果如下: 1. 准备工作 什么是移动端的 Touch事件?在移动端 ...
随机推荐
- python 创建目录文件夹
主要涉及到三个函数 1.os.path.exists(path) 判断一个目录是否存在 2.os.makedirs(path) 多层创建目录 3.os.mkdir(path) 创建目录 DEMO 直接 ...
- ts转js 并压缩
1,在线编译,进入typescript官网http://www.typescriptlang.org/,点击里面的playground就可以直接写代码了. 2,在本地编译运行Typescript需要使 ...
- docker部署redis
镜像获取 docker pull redis:4.0 ##当前最新版本 docker images 启动 docker run --name redis-huiyuan -p : -v $PWD/da ...
- c# 爬虫和组件HtmlAgilityPack处理html
测试当前爬虫的User-Agent:http://www.whatismyuseragent.net/ 大佬的博客地址:https://www.cnblogs.com/jjg0519/p/670274 ...
- C#动态生成Word文档并填充数据
C#也能动态生成Word文档并填充数据 http://www.cnblogs.com/qyfan82/archive/2007/09/14/893293.html 引用http://blog.csdn ...
- ThreadPoolExecutor的runState和workCount变量怎么存储?
在阅读Java线程池ThreadPoolExecutor源码的时候,发现它很巧妙地把线程池状态runState和线程数workCount两个变量存放在了一个int型变量里面. 我们先看一个数值,如下是 ...
- CSS设置浮动导致背景颜色设置无效的解决方法
float浮动会使父元素高度塌陷,父级元素不能被撑开,所以导致背景颜色不能被撑开 解决方法: 对父元素设置高度 对父元素设置 overflow:hidden清除浮动 把父元素也设置为float浮动 结 ...
- 二、LinkList及其源码解析
1.链表介绍 链表是一种物理单元上非连续,非顺序的存储结构.链表由一系列的姐点组成,结点可以在运行时动态生成.每个结点包含两个部分,一个是存储数据元素的数据域,一个是存储下一个结点的指针域 双链表是链 ...
- SpringCloud之RabbitMQ安装
本文介绍Linux以及MAC OS下的RabbitMQ安装及配置: 一.Linux环境下的RabbitMQ安装(CentOS) 1.安装ErLang Erlang(['ə:læŋ])是一种通用的面向并 ...
- db2 with用法
最近在研究db2 递归查询时想到了with,一直以为with只是用来查询递归,但是实际with功能强大,还有更加强大的功能,偶然读到一位大神的文章,对with做了很详细的解读,特贴出来供大家学习研究 ...