vertical-align和line-height的深入应用

本文重点是了解vertical-align和line-height的使用

涉及的名词：基线、底端、行内框、行框、行间距、替换元素、非替换元素、对齐。只有充分理解这些概念才会灵活运用这两个属性。

什么是对齐

对齐一定是涉及两个对象：对齐元素以及要对齐的对下对象；比如再军训时教官喊稍息，我们每个

人都会有一个参照对象去做对齐调整。

什么是基线

每一个文本元素的基线都会有四条线：顶线、中线、基线、底线，而基线一般是指文本元素中以X字母为准，X字母的下边缘为该文本元素的基线。

而行高则是两个文本行基线之间的距离，往往使段落产生间距。

但是也可以这样理解，行高=字体大小+上半行距+下半行距（其中上下半行距相等，这个等式可以从图中推导出来）

行高指的是文本行的基线间的距离，但是文本之间的空白距离不仅仅是行高决定的，同时也受字号的影响。每一个文本元素和文本行元素，都会有一条基线，基线的位置受到文本的字体格式以及line-height的影响。

line-height的应用：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         span{
 8             display: inline-block;
 9             height: 100px;
10             width: 120px;
11             background-color: grey;
12             text-align: center;
13             /*line-height: 60px;*/
14             line-height: 25px;
15             color: rebeccapurple;
16             font-size: 20px;
17             word-break: break-all;}
18     </style>
19 </head>
20 <body>
21 
22 <span>白日依山尽,黄河入海流.欲穷千里目,更上一层楼.</span>
23 
24 </body>
25 </html>
26 <!--行高设为25px-->
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对图片、按钮不会产生影响。

因此，如果有图片在行内的话，那么图片的底端会对齐文本的基线。

如果图片的高度高于其他行内框的整体高度

图片会在对齐原来的行框文本基线的基础上，撑开高度，使行框最高点刚好包括图片的顶端。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             line-height: 40px;
 9         }
10     </style>
11 </head>
12 <body>
13 
14 <div class="test">
15     <span>span</span><em>em</em>
16 </div>
17 <div class="test">
18     <span>span</span><em>em</em>
19     <img src="abc.png" alt="" width="50px" height="50px">
20 </div>
21 </body>
22 </html>
View Code

因此，当p段落里面的line-height都是40px的时候，加入图片之后，行框的高度就会比没有加入图片之前多50px - 40px=10px高度，因此基线就会下移10px的高度。

对齐延伸问题：浮动对行内元素产生了什么样的影响

设置一个元素的浮动之后，元素会从正常的文档流中去除，但是同时也会对原来的文档流产生一些影响。

可以设想一下，在长方形区域的水面上，有很多人都想要有一个固定位置的水床（浏览器盒模型布局），但是固定水床需要登记（告诉浏览器的如何布局计算）。突然有一天，有一个人想要在长方形区域的最左侧建一个水床（设置元素左浮动），它悄悄地从水底移动到最左侧，把原先的水床挤走（浮动元素会尽可能移动在到容器最高处，及最左处或最右处），在最左侧那里建了一所水床，没有登记（没有告知父容器高度，因此产生高度塌陷）。其他的人不知道，在去最左端的固定水床的时候，发现已经有人固定了，因此只能固定在它旁边（浮动会产生环绕效果，而这一点就是因为浮动元素从正常文档流中去除掉的原因）。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         p{
 8             line-height: 40px;
 9             border: 1px solid rebeccapurple;
10         }
11 
12         img{
13             width: 100px;
14             height: 100px;
15         }
16     </style>
17 </head>
18 <body>
19 
20 <p>
21 
22 <span>文本内容1</span> <em>文本内容2</em> <img src="abc.png"  alt="高度图片">
23 
24 </p>
25 </body>
26 </html>
View Code

img设置float:left

图片是属于替换元素，在行框中的计算中，是依据于图片的高度，如果图片进行浮动的话，对于行框来说，图片不存在了，因此，行框还是依据原来的文本行基线来计算基线，进行对齐。

对齐的过程

行内元素是默认设置的vertical-align为baseline，也就是基线对齐。当一个文本行开始渲染的时候，

1.首先浏览器会找出每一个元素的类型，是替换元素还是非替换元素

2.然后根据它们的height或者line-height以及字体大小来生成每个元素行内框

3.确定行内框基线位置，确定行框基线位置

4.根据每个元素是否设置vertical-align来进行对齐。

注意：vertical-align仅对inline-level和table-cell元素有效

下面示例无效是正常不过的：

1 <div>
2     <div style="float:left;font-size:20px;vertical-align:middle;">I'm former</div>
3     <div style="float:left;font-size:50px;vertical-align:middle;">I'm latter</div>
4 </div>

练习

 练习一：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css中vertical-align和line-height的用法</title>
 6     <style>
 7         *{
 8             margin: 0px;
 9             padding: 0px;
10         }
11         div{
12             background-color: aquamarine;
13             font-size: 0;
14         }
15         img {
16             width: 300px;
17             /*vertical-align: top;*/
18         }
19     </style>
20 </head>
21 <body>
22     <div>
23         <img src="abc.png" alt="picture"><span>span</span>
24     </div>
25 </body>
26 </html>
27 
28 
29 <!--解决方法：-->
30 <!--（1）、将整个div内的font-size设置为0；-->
31 <!--（2）、将图片img变为块级元素，即设置其为display:block;-->
32 <!--（3）、给div设置一个行高（值尽量小些），设置为line-height:5px;-->
33 <!--（4）、设置图片img垂直对齐方式vertical-align,值为top/middle/bottom任意一个都可以（为了覆盖默认的值baseline）;-->
css中vertical-align和line-height的用法

练习二：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css中vertical-align和line-height的用法</title>
 6     <style>
 7         *{
 8             margin: 0px;
 9             padding: 0px;
10         }
11 
12         .item1{
13             width: 100px;
14             height: 100px;
15             background-color: rebeccapurple;
16             float: left;
17         }
18         .item2{
19             width: 100px;
20             height: 100px;
21             background-color: cornflowerblue;
22             float: left;
23         }
24 
25         .s1{
26             width: 100px;
27             height: 100px;
28             background-color: coral;
29             display: inline-block;
30         }
31         .s2{
32             width: 100px;
33             height: 100px;
34             background-color: green;
35             display: inline-block;
36             margin-left: -5px;
37         }
38 
39     </style>
40 </head>
41 <body>
42 <!--块级元素没问题-->
43 <div class="item1"></div>
44 <div class="item2">item2item2</div>  
45 
46 
47 <span class="s1"></span>
48 <span class="s2">span2</span>
49 </body>
50 </html>
css中vertical-align和line-height的用法

参考文献：

日天博客

肥仔博客

友情链接

 

posted @ 2017-09-21 15:58  Justin067  阅读(141)  评论(0)    收藏  举报
TOP