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>

什么是行框和行内框

<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; }

什么是替换元素


替换元素是指元素的内容本身并非文档直接表现的,换句话说,就是不同的页面中,浏览器不能确定其具体内容的元素,比如图片,按钮,因为图片的内容取决于图片引用的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>
因此,当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元素有效

vertical-align示例:

这是没对齐的样子:

对齐示例:想文字对齐图片的中线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.smallPeopleyellow{
vertical-align: -20px; #需要对图片进行调整,注意要调整文字需要先对图片进行调整
}
</style>
</head>
<body> <div class="c1">
小黄人<img class="smallPeopleyellow" src="timg.jpg" alt="" width="60px" height="60px">
</div>
</body>
</html>
输出结果:可以看到已经对齐图片的中线了
 

 








vertical-align和line-height的深入应用的更多相关文章

  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. 借助sass的Maps功能使得响应式代码更有条理

    原文来自这里 本文综合了原文(by Jonathan Suh)以及笔者自己的理解. Introduction 众所周知,写代码与写维护性高的代码是两回事.而涉及到响应式,代码又特别容易变的杂乱.借助s ...

  8. height与line-height

    1.网页的所有元素可以分为块元素和行元素.一行文字所在的一个逻辑区域是行元素,其他的元素就都是块元素line-height只针对行元素,height针对其他所有元素 2. width,height对于 ...

  9. 查找表,Two Sum,15. 3Sum,18. 4Sum,16 3Sum Closest,149 Max points on line

    Two Sum: 解法一:排序后使用双索引对撞:O(nlogn)+O(n) = O(nlogn) , 但是返回的是排序前的指针. 解法二:查找表.将所有元素放入查找表, 之后对于每一个元素a,查找 t ...

  10. 真正的能理解CSS中的line-height,height与line-height

    https://blog.csdn.net/a2013126370/article/details/82786681 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次 ...

随机推荐

  1. MyBatis常用对象SqlSessionFactory和SqlSession介绍和运用

    学习框架一个比较好的路径阅读源码.本文介绍的SqlSessionFactory和SqlSession.可以通过了解SqlSessionFactory接口和SqlSession接口以及两个的实现类入手, ...

  2. 【BZOJ】1612: [Usaco2008 Jan]Cow Contest奶牛的比赛(floyd/dfs)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1612 赢+输==n-1 则一定确定 dfs和floyd都行(dfs我不确定,因为我没提交,权限还没开 ...

  3. 【BZOJ】3398: [Usaco2009 Feb]Bullcow 牡牛和牝牛(排列组合+乘法逆元+欧拉定理/费马小定理)

    http://www.lydsy.com/JudgeOnline/problem.php?id=3398 以下牡牛为a,牝牛为b. 学完排列计数后试着来写这题,“至少”一词可以给我们提示,我们可以枚举 ...

  4. 获取软件的apk包名、查看手机设备名称等

    获取软件的apk包名 1.下载aapt,这里使用的是SDK自带的aapt,找到SDK路径下面的aapt.exe,本机路径:E:\downloads\android-sdk_r23.0.2-window ...

  5. Struts2_day01--访问action的方法

    访问action的方法(重点) 1 有三种方式实现 第一种 使用action标签的method属性,在这个属性里面写执行的action的方法名称 第二种 使用通配符方式实现 第三种 动态访问实现(不用 ...

  6. 高级service之ipc ADIL用法

    感谢 如果你还没有看过前面一篇文章,建议先去阅读一下 Android Service完全解析,关于服务你所需知道的一切(上) ,因为本篇文章中涉及到的代码是在上篇文章的基础上进行修改的. 在上篇文章中 ...

  7. AVR 定时器快速PWM模式使用

    PWM很常用,AVR自带内部PWM功能,分为快速PWM模式和相位修正PWM模式.   我们这里选择方式15 ,由OCR1A保存上限值,由OCR1B保存匹配值,所以输出管脚 OCR1A不能输PWM,只能 ...

  8. IOS开发经验总结(二)

    本文转载至 http://dreamahui.iteye.com/blog/1878922 IOS开发总结 by mhmwadm (感谢mhmwadm) 2013/4/10 1 XCode快捷键 4  ...

  9. 三、Gradle初级教程——Gradle除了签名打包还能配置jar包

    1.gradle概念 构建工具,Groovy,Java. 2.gradle配置jar包,和libs文件夹导入jar包的区别 到此,还是这种方法导入JAR包比较方便.每次更新JAR包,只需要修改版本号就 ...

  10. 常问面试题:C++中sizeof的陷阱及应答

    C++中sizeof是经常被问到的一个概念,比如,下面的几个关于sizeof的面试题反复出现在各大IT公司的技术面试当中,我们有必要完全理解并掌握.注:在曾经面试大公司时,我的确被问到过这样的问题. ...