vertical-align和line-height的深入应用
本文的重点是了解vertical-align和line-height的使用
涉及到的名词:基线,底端,行内框,行框,行间距,替换元素及非替换元素,对齐。只有充分理解这些概念才会灵活运用这两个属性。
什么是对齐
对齐一定是涉及两个对象:对齐元素以及要对齐的对象;比如在军训时教官喊稍息,我们每个人都会有一个参照的标准去站齐。
而行内元素的对齐,除了行内元素本身,还有一个参考系,这个参考系就是行框的基线,而行框的基线依据于行内框元素的基线位置。
什么是基线
每一个文本元素自身都会有四条线,顶线,中线,基线,底线。而基线一般是指文本元素中以x字母为准,x字母的下边缘为该文本元素的基线。
而行高则是两个文本行基线之间的距离,往往使段落产生间距。
但是也可以这样理解,行高 = 字体大小 + 上半行距 + 下半行距(其中上下半行距相等,这个等式可以从图中推导出来)
行高指的是文本行的基线间的距离,但是文本之间的空白距离不仅仅是行高决定的, 同时也受字号的影响。
每一个文本元素和文本行元素,都会有一条基线,基线的位置受到文本的字体格式以及line-height的影响。
line-heght的应用:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>span{display: inline-block;height: 60px;width: 60px;background-color: grey;text-align: center;/*line-height: 60px;*/line-height: 30px;color: rebeccapurple;font-size: 20px;word-break: break-all;}</style> </head> <body><span>++++++++</span></body> </html>
View Code
什么是行框和行内框
<p><span>span</span> text <em>em</em> <i>yuan</i> </p>
在每一个段落行内,不同的行内元素除了包裹自身内容的内容框之外,还会自动生成一个行内框,其中没有标签包裹的文本会生成匿名行内框,不同的行内框会根据各自不同的line-height产生行间距,而行框则会刚好包括最高的顶端和最低的底端,从而来生成行框。
span{display: inline-block;width: 50px;line-height: 80px;background-color: darkcyan;font-size: 20px;}em{display: inline-block;width: 50px;line-height: 50px;background-color: rebeccapurple;}i{display: inline-block;width: 50px;line-height: 30px;background-color: green;}
View Code
什么是替换元素
替换元素是指元素的内容本身并非文档直接表现的,换句话说,就是不同的页面中,浏览器不能确定其具体内容的元素,比如图片,按钮,因为图片的内容取决于图片引用的src属性源,按钮的类型则依据于其input类型,因此浏览器是不能确定今天img元素里面是一张美女图片,那么明天加载的页面里面img是不是一张美女图片。
除了替换元素,其他的元素就是非替换元素。非替换元素和替换元素在行框中的影响,主要是其高度计算方式,替换元素在行框中的位置是由其height,padding和border来决定,而非替换元素在行框中的位置则是其line-height和字体样式。
如果只有文本元素的话,那么行框是很好计算基线位置的,但是如果有图片按钮等替换元素的话,那么计算方式就会变的稍微复杂一些。
在css中,有两种高度方式,一种是height,一种是line-height,这两种会决定元素的高度和位置,对于图片等行内替换元素来说,height是行框计算的依据,line-height对图片、按钮不会产生影响。
因此,如果有图片在行内的话,那么图片的底端会对齐文本的基线。
如果图片的高度高于其他行内框的整体高度
图片会在对齐原来的行框文本基线的基础上,撑开高度,使行框最高点刚好包括图片的顶端。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>div{line-height: 40px;}</style> </head> <body><div class="test"><span>span</span><em>em</em> </div> <div class="test"><span>span</span><em>em</em><img src="abc.png" alt="" width="50px" height="50px"> </div> </body> </html>
View Code
因此,当p段落里面的line-height都是40px的时候,加入图片之后,行框的高度就会比没有加入图片之前多50px - 40px=10px高度,因此基线就会下移10px的高度。
对齐延伸问题:浮动对行内元素产生了什么样的影响
设置一个元素的浮动之后,元素会从正常的文档流中去除,但是同时也会对原来的文档流产生一些影响。
可以设想一下,在长方形区域的水面上,有很多人都想要有一个固定位置的水床(浏览器盒模型布局),但是固定水床需要登记(告诉浏览器的如何布局计算)。突然有一天,有一个人想要在长方形区域的最左侧建一个水床(设置元素左浮动),它悄悄地从水底移动到最左侧,把原先的水床挤走(浮动元素会尽可能移动在到容器最高处,及最左处或最右处),在最左侧那里建了一所水床,没有登记(没有告知父容器高度,因此产生高度塌陷)。其他的人不知道,在去最左端的固定水床的时候,发现已经有人固定了,因此只能固定在它旁边(浮动会产生环绕效果,而这一点就是因为浮动元素从正常文档流中去除掉的原因)。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>p{line-height: 40px;border: 1px solid rebeccapurple;}img{width: 100px;height: 100px;}</style> </head> <body><p><span>文本内容1</span> <em>文本内容2</em> <img src="abc.png" alt="高度图片"></p> </body> </html>
img设置float:left
图片是属于替换元素,在行框中的计算中,是依据于图片的高度,如果图片进行浮动的话,对于行框来说,图片不存在了,因此,行框还是依据原来的文本行基线来计算基线,进行对齐。
对齐的过程
行内元素是默认设置的vertical-align为baseline,也就是基线对齐。当一个文本行开始渲染的时候,
1.首先浏览器会找出每一个元素的类型,是替换元素还是非替换元素
2.然后根据它们的height或者line-height以及字体大小来生成每个元素行内框
3.确定行内框基线位置,确定行框基线位置
4.根据每个元素是否设置vertical-align来进行对齐。
注意:vertical-align仅对inline-level和table-cell元素有效
下面示例无效是正常不过的:
<div><div style="float:left;font-size:20px;vertical-align:middle;">I'm former</div><div style="float:left;font-size:50px;vertical-align:middle;">I'm latter</div> </div>
练习
例1:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>css中vertical-align和line-height的用法</title><style>*{margin: 0px;padding: 0px;}div{background-color: aquamarine;font-size: 0;}img {width: 300px;/*vertical-align: top;*/}</style> </head> <body><div><img src="abc.png" alt="picture"><span>span</span></div> </body> </html><!--解决方法:--> <!--(1)、将整个div内的font-size设置为0;--> <!--(2)、将图片img变为块级元素,即设置其为display:block;--> <!--(3)、给div设置一个行高(值尽量小些),设置为line-height:5px;--> <!--(4)、设置图片img垂直对齐方式vertical-align,值为top/middle/bottom任意一个都可以(为了覆盖默认的值baseline);-->
View Code
例2:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>css中vertical-align和line-height的用法</title><style>*{margin: 0px;padding: 0px;}.item1{width: 100px;height: 100px;background-color: rebeccapurple;float: left;}.item2{width: 100px;height: 100px;background-color: cornflowerblue;float: left;}.s1{width: 100px;height: 100px;background-color: coral;display: inline-block;}.s2{width: 100px;height: 100px;background-color: green;display: inline-block;margin-left: -5px;}</style> </head> <body> <!--块级元素没问题--> <div class="item1"></div> <div class="item2">item2item2</div> <span class="s1"></span> <span class="s2">span2</span> </body> </html>
View Code
参考文献:http://www.jb51.net/css/29328.html
http://www.cnblogs.com/doctor-chen/archive/2016/11/09/6049374.html
http://www.cnblogs.com/fsjohnhuang/p/5307706.html
转载于:https://www.cnblogs.com/skyflask/articles/8282787.html
vertical-align和line-height的深入应用相关推荐
- html中高与行高的区别,深入了解css的行高Line Height属性
什么是行间距? 古时候我们是用印刷机来处理文字,印出来的每个字都位于独立的一个块里. 行间距,即传说中控制两行文字之间垂直距离的东东. 在CSS,line-height被用来控制行与行之间的垂直距离. ...
- 腾讯首页js图片切换效果
很漂亮的腾讯网图片切换效果 代码 < HTML > < HEAD > < TITLE > 腾讯软件 - 图片滑动效果,阿里西西整理收集. < / TITLE& ...
- 真正的能理解CSS中的line-height,height与line-height
在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次的理解,致使不能达到信手拈来的感觉.在此做一下总结,一是更深层次的了解什么是line-height,二是比较heigh ...
- CSS中的line-height,height与line-height
在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次的理解,致使不能达到信手拈来的感觉.在此做一下总结,一是更深层次的了解什么是line-height,二是比较heigh ...
- DW中CSS属性详解
作者:未知 来源:5D多媒体 在Dreamweaver的CSS样式里包含了W3C规范定义的所有CSS1的属性,Dreamweaver把这些属性分为Type(类型).Background(背 ...
- 超全超实用的Javascript类库和jQuery插件大全之一:图片,地图和图形
为什么80%的码农都做不了架构师?>>> 日期:2012-10-10 来源:GBin1.com 如果你需要解决一些开发中遇到的技术问题的话,很可能会找到一些相关的javasc ...
- highcharts与ajax的应用
整理一份完整的例子,以供参考: <1>页面chart.html: <span style="font-size:14px;"><!DOCTYPE HT ...
- Zabbix配置详解
为什么80%的码农都做不了架构师?>>> zabbix 配置了解 Hosts zabbix中的hosts就是指你想监控的设备,如服务器.工作站.交换机等等.如果你想监控某个主机 ...
- 用Saltstack的modules和grains实现实时监控平台
有几个朋友一直问我,页面的实时监控咋做. 他们在做idc节点的监控,我推荐用smokeping和zabbix接口的方式测试.但那哥们挺执着的,非要好看点的图表~ 关于运维业务的实时监控,我做过两套方案 ...
- Echarts中Option属性设置
一.title--标题组件 标题组件,包含主标题和副标题. title:{x:"left", // 'left' | 'right' | 'center' | '100px'y:& ...
最新文章
- 拖拉机也将自动驾驶,日本劳动力短缺大力发展无人农业
- 王者归来!2020 年 5 月编程语言排行榜,Python竟然排老三
- Java、Android基础之—反射
- hdu 2514 Another Eight Puzzle
- docker报错:Unable to get pid of LinuxThreads manager thread及openjdk-alpine镜像无法打印线程堆栈和内存堆栈问题
- 【ArcGIS微课1000例】0012:ArcGIS创建及连接ArcSDE企业级地理数据库实例
- react table里跳转页面_react路由配置基础篇:react-router4.0及以上
- 大数据驱动5G网络与服务优化
- SQL基础:数据表的创建
- php裁剪图片白边,php生成缩略图自动填充白边例子
- 如何提升应用程序启动权限
- java线程--object.waitobject.notify
- 20个Android游戏源码,…
- 安装VS2008 SP1
- 视频教程-网站建设-1小时学会建站,采用PHPWAMP搭建网站[全程实战]-PHP
- 离职 需要注意三个问题
- 计算机下桌面显示不出来,电脑桌面文档不会在右边显示出来怎么办
- 清朝皇帝年表及1840年后清朝历史事件
- 制作一个简单HTML游戏网页(HTML+CSS)_英雄联盟 lol 7页
- 分享一批学习资料教程视频书籍
热门文章
- 基于贪心算法的几类区间覆盖问题 nyoj 12喷水装置(二) nyoj 14会场安排问题...
- 第十节 4基于ashx方式的ASP.Net开发
- 报错:mysqldump‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。
- JavaScript学习(七十五)—图解浅拷贝和深拷贝
- 六级词汇打卡第一天(一)
- 42岁失业,有150万存款,房子无贷款,不想上班做点什么好?
- 黄金手镯一般多少克?
- 眼儿媚·迟迟春日弄轻柔 [宋] 朱淑真
- 能提升你的东西,都不在舒适区
- 熊猫烧香当年到底有多残忍?