vertical-align和line-height的那些事

时间:2021-09-02 19:13:54

  可能是又遇到了瓶颈,好长时间感觉css上没什么可看。从来没觉得css有什么难,什么盒模型和各种流也觉得理解起来毫不费力,但好像仅限于此。对一些属性仅限于常用,有时会去做实验验证一些属性,过后就忘了。现在想想,这一部分是因为有些属性确实生僻,在实际生产中用的不多;还有就是有些我以为是常见的,但是却没有去深入理解为什么会如此。废话不多说了,也别问我为什么忽然像受了打击一样,因为确实受了打击...不想说

  1.   vertical-align
  • 定义:设置元素的垂直对齐方式,定义行内元素基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式,那么问题就来了,什么是基线?
  • 基线,字母下边缘所在的线,不同的字体会有微小的差别,比如微软雅黑会相对于下沉一些,但是基本都是一致的;但是理解起来,总感觉有点费劲,毕竟我们不是只靠字母x就能存活一辈子的。那怎么记呢?你可以理解成,我们在英语本上写字母时,像是字母a,e,o,x等下边缘所在的那条线,这样的话是不是就好记一些了呢?
  • 注意的点:vertical-align的应用对象是display:inline-block以及display:inline的元素

  2.  line-height

  • 定义:设置行间的距离(行高),该属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。
  • 可能的值:num,length,%;
    • 一些难点:line-height = 内容区域高度+行间距,所谓的内容区域高度,你可以理解成我们用鼠标选中文字时文字下面出现背景色的区域,内容区域高度只与字号和字体有关,比如宋体时,内容区域高度等于字号;所以说,line-height的默认属性值normal也是与字号和字体有关,也就是说与浏览器和默认字体有关。前面推了一堆,其实想证明的就是line-height的默认值不是一个定值,所以我们一般都会reset。那么,当我们reset的时候,它的三种取值是不是效果都一样呢?下面让我来给大家验证一下,来段代码
       1 <!DOCTYPE html>
      2 <html lang="en">
      3 <head>
      4 <meta charset="UTF-8">
      5 <title>vertical-align详解</title>
      6 <style>
      7 body {
      8 font-size: 16px;
      9 }
      10 .p-container {
      11 background-color: greenyellow;
      12 line-height: 1.5rem;//当取值为数字时后面的值为1.5,取值为百分数时后面的值为150%
      13 font-size: 20px;
      14 }
      15
      16 .p-container p {
      17 font-size: 14px;
      18 }
      19
      20 </style>
      21 </head>
      22 <body>
      23
      24 <div class="p-container">
      25 <p>
      26 这样想下是不是就理解了呢?但是我们需要注意的一点是不同的字体的基线会有一点点出入——微软雅黑的基线就会相对于标准的基线稍稍下沉一点,
      27 不过影响不大这样想下是不是就理解了呢?但是我们需要注意的一点是不同的字体的基线会有一点点出入——微软雅黑的基线就会相对于标准的基线稍稍下沉一点,
      28 不过影响不大这样想下是不是就理解了呢?但是我们需要注意的一点是不同的字体的基线会有一点点出入——微软雅黑的基线就会相对于标准的基线稍稍下沉一点,
      29
      30 </p>
      31
      32 <p>
      33 这样想下是不是就理解了呢?但是我们需要注意的一点是不同的字体的基线会有一点点出入——微软雅黑的基线就会相对于标准的基线稍稍下沉一点,
      34 不过影响不大这样想下是不是就理解了呢?但是我们需要注意的一点是不同的字体的基线会有一点点出入——微软雅黑的基线就会相对于标准的基线稍稍下沉一点,
      35 不过影响不大这样想下是不是就理解了呢?但是我们需要注意的一点是不同的字体的基线会有一点点出入——微软雅黑的基线就会相对于标准的基线稍稍下沉一点,
      36 不过影响不大这样想下是不是就理解了呢?但是我们需要注意的一点是不同的字体的基线会有一点点出入——微软雅黑的基线就会相对于标准的基线稍稍下沉一点,
      37 不过影响不大这样想下是不是就理解了呢?但是我们需要注意的一点是不同的字体的基线会有一点点出入——微软雅黑的基线就会相对于标准的基线稍稍下沉一点,
      38 不过影响不大这样想下是不是就理解了呢?但是我们需要注意的一点是不同的字体的基线会有一点点出入——微软雅黑的基线就会相对于标准的基线稍稍下沉一点,不过影响不大
      39 </p>
      40 </div>
      41
      42 </body>
      43 </html>

        然后我们看下当取值为1.5rem的效果vertical-align和line-height的那些事

  我们需要注意的一点是:body,.p-container,.p-container p 的字号分别是16px,20px和14px,当我们把p-conainer的line-height设置成1.5rem的时候,p

的行高为24px,24px是怎么得出的呢?是用body的16px*1.5得出的结果,因为rem和em的参考对象一般都为body的字号

然后我们看下取值为150%的效果

vertical-align和line-height的那些事

  此时.p-container p的行间距为30,很明显这个行间距是20*1.5得出的,先不说结论再看一下,取值为1.5,也就是我们常用用法的效果

vertical-align和line-height的那些事

  此时的line-height变成了21px,也就是p元素的14*1.5所得,那么此时你是否懂得了什么呢?

  当line-height取值为数值的时候,所有的子元素会重新计算行高;而当line-height的取值为length和百分数的时候,line-height是根据当前元素的font-size计算行高,继承给下面的元素,当然取值为length的时候(px除外),这个当前元素就是body。

  存在即合理,好像确实有点对啊···

  嗯,下面我们再看一下line-height对我们布局的影响,代码是这样的

<div style="background-color: #d51875;">
<img src="img/6.jpg" alt=""/><span style="background-color: #fff;">李钟硕</span>
</div>

然后效果是这样的

vertical-align和line-height的那些事

  将一个图片插入一个块级元素时,下方默认会有间隙,为什么呢?图片的display:inline-block所以图片也有vertical-align,也有基线,行间距也会对它有影响所以消除底部间隙的一个方法就是让图片display: block;

  方法2:既然图片可以应用vertical-align那便让图片的底部对齐;

  方法3:基线上移,基线上移影响的是什么呢?对,行高——基线之间的距离,让行高足够小,当然让字号为0也可以,都是去改变包含图片容器的行高因素。

  难道,line-height就这么点卵用吗?当然不是!还有一个,多行文本水平垂直居中~~

 1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>vertical-align详解</title>
6 <style>
7 body {
8 font-size: 16px;
9 }
10 .box {
         height: 250px;11 text-align: center;
12 background-color: #009900;
13 line-height: 250px;
14 }
15
16 .box .text {
17 display: inline-block;
18 vertical-align: middle;
19 line-height: normal;
20 background-color: #e3372d;
21 }
22
23
24 </style>
25 </head>
26 <body>
36 <div class="box">
37
38 <div class="text">
39 line-height默认属性值与用户的浏览器和元素字体有关,所以normal是个不确定的值;数值作为行高,是根据当前元素的font-size来计算的比如font-size:20 ;line-height:1.5;那么行高为20*1.5=30
40
41 具体长度值如15rem等;百分比相当于数值
42
43 当行高为数值时,所有子元素会重新计算行高;百分比和长度值是当前元素根据font-size计算行高,继承给下面的元素;所以作为全局设置一般使用数值
44 </div>
45 </div>
46
47
48 </body>
49 </html>

效果是这样滴

vertical-align和line-height的那些事

嗯,这个就不解释了,相信你如果可理解上面的,这个也应该明白。

以上内容是在慕课网上看完张鑫旭大大的视频之后,得出的笔记以及自己的一些想法,如果有错误的地方,欢迎批评指正。