可能是又遇到了瓶颈，好长时间感觉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的时候，它的三种取值是不是效果都一样呢？下面让我来给大家验证一下，来段代码

       <!DOCTYPE html>
      
 <html lang="en">
      
 <head>
      
     <meta charset="UTF-8">
      
     <title>vertical-align详解</title>
      
     <style>
      
         body {
      
             font-size: 16px;
      
         }
      
         .p-container {
      
             background-color: greenyellow;
      
             line-height: 1.5rem;//当取值为数字时后面的值为1.5，取值为百分数时后面的值为150%
      
             font-size: 20px;
      
         }

         .p-container p {
      
             font-size: 14px;
      
         }

     </style>
      
 </head>
      
 <body>

 <div class="p-container">
      
     <p>
      
         这样想下是不是就理解了呢？但是我们需要注意的一点是不同的字体的基线会有一点点出入——微软雅黑的基线就会相对于标准的基线稍稍下沉一点，
      
         不过影响不大这样想下是不是就理解了呢？但是我们需要注意的一点是不同的字体的基线会有一点点出入——微软雅黑的基线就会相对于标准的基线稍稍下沉一点，
      
         不过影响不大这样想下是不是就理解了呢？但是我们需要注意的一点是不同的字体的基线会有一点点出入——微软雅黑的基线就会相对于标准的基线稍稍下沉一点，

     </p>

     <p>
      
     这样想下是不是就理解了呢？但是我们需要注意的一点是不同的字体的基线会有一点点出入——微软雅黑的基线就会相对于标准的基线稍稍下沉一点，
      
     不过影响不大这样想下是不是就理解了呢？但是我们需要注意的一点是不同的字体的基线会有一点点出入——微软雅黑的基线就会相对于标准的基线稍稍下沉一点，
      
     不过影响不大这样想下是不是就理解了呢？但是我们需要注意的一点是不同的字体的基线会有一点点出入——微软雅黑的基线就会相对于标准的基线稍稍下沉一点，
      
     不过影响不大这样想下是不是就理解了呢？但是我们需要注意的一点是不同的字体的基线会有一点点出入——微软雅黑的基线就会相对于标准的基线稍稍下沉一点，
      
     不过影响不大这样想下是不是就理解了呢？但是我们需要注意的一点是不同的字体的基线会有一点点出入——微软雅黑的基线就会相对于标准的基线稍稍下沉一点，
      
     不过影响不大这样想下是不是就理解了呢？但是我们需要注意的一点是不同的字体的基线会有一点点出入——微软雅黑的基线就会相对于标准的基线稍稍下沉一点，不过影响不大
      
     </p>
      
 </div>

 </body>
      
 </html>

      　　然后我们看下当取值为1.5rem的效果

　　我们需要注意的一点是：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%的效果

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

　　此时的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>

然后效果是这样的

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

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

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

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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>vertical-align详解</title>

     <style>

         body {

             font-size: 16px;

         }

         .box {
　　　　　　　　　height: 250px;

             text-align: center;

             background-color: #009900;

             line-height: 250px;

         }

         .box .text {

             display: inline-block;

             vertical-align: middle;

             line-height: normal;

             background-color: #e3372d;

         }

     </style>

 </head>

 <body>

 <div class="box">

     <div class="text">

         line-height默认属性值与用户的浏览器和元素字体有关，所以normal是个不确定的值；数值作为行高，是根据当前元素的font-size来计算的比如font-size:20 ;line-height:1.5;那么行高为20*1.5=30

         具体长度值如15rem等；百分比相当于数值

         当行高为数值时，所有子元素会重新计算行高；百分比和长度值是当前元素根据font-size计算行高，继承给下面的元素；所以作为全局设置一般使用数值

     </div>

 </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. vue项目中遇到的那些事。

    前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...

  9. height与line-height

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

  10. 关于CSS样式的那些事_导航条菜单讲解

    最近开始忙着开自己的个人博客了,自己的前端确实是渣渣.没办法,一步步来,从慕课网上慢慢学着先. 首先带来的是一个导航栏的设计: 垂直导航栏的设计: 直接上代码: <!DOCTYPE html P ...

随机推荐

  1. word20161220

    S/MIME, Secure Multipurpose Internet Mail Extensions / 安全多用途网际邮件扩展协议 SACL, system access control lis ...

  2. 学习 opencv---(4) 分离颜色通道 && 多通道混合

    上篇文章中我们讲到了使用addWeighted函数进行图像混合操作,以及将ROI和addWeighted函数结合起来使用,对指定区域进行图像混合操作. 而为了更好地观察一些图像材料的特征,有时需要对R ...

  3. android3D动画,绕y轴旋转

    原文地址:http://blog.csdn.net/x_i_a_o_h_a_i/article/details/40449847 其实网上的3D旋转的例子很多,在这里我只是想把其代码做一个解释. 先上 ...

  4. [CodeWars][JS]实现链式加法

    在知乎上看到这样一个问题:http://www.zhihu.com/question/31805304; 简单地说就是实现这样一个add函数: add(x1)(x2)(x3)...(xn) == x1 ...

  5. EndNote(二)之英文引文导入方式

    在上一篇EndNote教程(一)--基本介绍中介绍了基本使用,今天将来介绍如何将常用文献引文导入EndNote中. EndNote在文献管理方面有着很多优点,可以节约很多精力.但是,不同文献查询网站可 ...

  6. 【JavaScript】--重点解析之跨域请求

    JSON JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. JSON是用字符串来表示Javascript对象,例如可以在django中发送一个JSON格式 ...

  7. android 对话框 setMultiChoiceItems 设置 初始化勾选

    只需要 设定第二个参数 boolean[] 值就好了

  8. 建表过程-列名&列类型&修改表B

    怎么建表? 主键 名称 重量 价格 生产日期 保质期 产地 种类                       分析:我们只要把第一行的表头建好后,这张表也就完成了.  术语:建表的过程就是声明字段过程 ...

  9. JAX-RS规范-常用注解浅析（WebServer）

    一.@Path 若希望一个Java类能够处理REST请求,则这个类必须至少添加一个@Path("/")的annotation: 对于方法,这个annotation是可选的,如果不添 ...

  10. Mahout之数据承载

    转载自:https://www.douban.com/note/204399134/ 推荐数据的处理是大规模的,在集群环境下一次要处理的数据可能是数GB,所以Mahout针对推荐数据进行了优化. Pr ...