项目中,经常会用到line-height和vertical-algin来解决垂直居中的问题,但对其原理和应用限制却很少了解。因此做了一下总结:

  line-height具有继承性,对inline元素、textnode节点、inline-block、block都起作用。和很多网上的描述并不一致(已验证),当设置了line-height但是没有设置高度的情况下,高度由line-height决定。

  vertical-algin不具有继承性。vertical-algin的实现基本上每个浏览器都不相同,但是它的middle值得实现却基本相同,因此用来实现垂直居中是可以的。默认是baseline居中。只对inline-block和table-cell的元素起作用。

line-height和vertical-algin的更多相关文章

  1. HTML: vertical algin Big/small div in same row (bootstrap)

    Reference: http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3?answertab=vot ...

  2. 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

  3. 深入了解css的行高Line Height属性

    什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...

  4. height与line-height

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

  5. leetcode-[3]Max Points on a Line

    Given n points on a 2D plane, find the maximum number of points that lie on the same straight line 思 ...

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

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

  7. CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  8. CSS学习笔记——视觉格式化模型 visual formatting model

    CSS 视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制.他有一套既定的规则(也就是W3C规范),规定了浏览器该怎么处理每一个盒子.以下内容翻 ...

  9. 浅析CSS中的BFC和IFC

    1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...

  10. Box Model,边距折叠,内联和块标签,CSSReset

    一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三.内联与 ...

随机推荐

  1. 【Navicat_Premium_11.0.10】破解版

    数据库管理的超级工具 Navicat_Premium_11.0.10破解版: Navicat_Premium_11.0.10 ,功能全开,支持多种数据库,爽~ 下载地址请拖到本文最后: 在没和谐前永久 ...

  2. android矩阵具体解释

    Matrix.中文里叫矩阵,高等数学里有介绍,在图像处理方面,主要是用于平面的缩放.平移.旋转等操作. 在Android里面,Matrix由9个float值构成.是一个3*3的矩阵. 最好记住.例如以 ...

  3. iOS边练边学--UINavigationController导航条的使用

    一.使用UINavigationController的步骤以及代码 // 程序加载完成后执行的代码 - (BOOL)application:(UIApplication *)application d ...

  4. php 抽象 继承 多态

    1.继承和重载 !!!php中使用extends单一继承的方法 被继承的类  父类(基类) 继承者   子类(派生类) 如果说我们需要将父类方法重载(方法覆盖),在派生类里使用与基类方法重名的方法名称 ...

  5. 【面试】hibernate n+1问题

    Hibernate中常会用到set,bag等集合表示1对多的关系, 在获取实体的时候就能根据关系将关联的对象或者对象集取出, 还可以设定cascade进行关联更新和删除.这不得部说hibernate的 ...

  6. (转)sqlite3使用中的常见问题

    1. 创建数据如果不往数据库里面添加任何的表,这个数据库等于没有建立,不会在硬盘上产生任何文件,如果数据库已经存在,则会打开这个数据库. 2. 如何通过sqlite3.dll与sqlite3.def生 ...

  7. Sublime Text 3安装清爽主题(著名的Soda Theme)

    Sublime Text是一款强大的编辑器,不但拥有众多强大的功能,还拥有很多漂亮的主题以及大量的插件可供配置使用. 本文主要描述Sublime Text 3安装清爽的主题,默认的深色主题Monoka ...

  8. 【Java面试题】41 两个对象值相同(x.equals(y) == true),但却可有不同的hash code,这句话对不对?

    对. 如果对象要保存在HashSet或HashMap中,它们的equals相等,那么,它们的hashcode值就必须相等. 如果不是要保存在HashSet或HashMap,则与hashcode没有什么 ...

  9. kaptcha图形验证码组件

    kaptcha 是一个非常实用的验证码生成工具.有了它,你可以生成各种样式的验证码,因为它是可配置的.kaptcha工作的原理是调用 com.google.code.kaptcha.servlet.K ...

  10. MathType公式编辑器快捷键操作

    快捷键操作是最常见的操作方式,MathType软件系统提供大量的快捷键操作供用户使用.使用MathType公式编辑器快捷键操作可节省大量的操作的时间,本教程将详解MathType快捷键操作. 放大或缩 ...