项目中,经常会用到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. 华为console口配置

    c.单击“Connect”,终端界面会出现如下显示信息,提示用户配置登录密码.设备缺省用户名为admin,密码为Admin@huawei.(以下显示信息仅为示意) user-interface con ...

  2. window上将MongoDB的启动加入到服务中

    在系统管理员的命令行模式中: 进入mongo的安装目录,参照如下: 其中: --dbpath为保存的数据的路径 mongod --bind_ip --serviceName "MongoDB ...

  3. [转]ViewPager学习笔记(一)——懒加载

    在项目中ViewPager和Fragment接口框架已经是处处可见,但是在使用中,我们肯定不希望用户在当前页面时就在前后页面的数据,加入数据量很大,而用户又不愿意左右滑动浏览,那么这时候ViewPag ...

  4. BeamNG.drive物理引擎评鉴

    BeamNG.drive是一款由BeamNG公司开发并于2013年首次发布的软体物理模拟游戏.作为模拟游戏,特别是物理模拟的粉丝,我早早就开始使用BeamNG.drive.我立即对崩溃的准确性和细节印 ...

  5. el 表达式 强制类型转换

    el 表达式 强制类型转换 今天有人问我了这个问题 jsp页面中,能否实现 <%  request.setAttrites("a","1234");  % ...

  6. html精灵技术(用来显示图片的某个区域)

    .left .left_down li.a.left-down-pic{display:block;width:50px;height:50px;background:url(images/app_i ...

  7. jQuery 工具大搜集

    jQuery 是一个非常棒的类库,但是为了保证代码的干净以及代码的精简,它只提供最核心的功能.所以就有了很多其他的工具来丰富jQuery的功能.我在使用这些工具的时候发现我常常重复的编写一些代码,所以 ...

  8. UML---UML中的几种关系(依赖,关联,泛化,实现)

    关于设计模式的总结没有落实到代码上,而且设计模式自己确实动手实现的非常少.所以在这一周里,除了看网站开发的视频,着手开始对设计模式进行实现以下.设计模式非常经典,每次看都有不同的收获,写一下自己的收获 ...

  9. 第三百二十节,Django框架,生成二维码

    第三百二十节,Django框架,生成二维码 用Python来生成二维码,需要qrcode模块,qrcode模块依赖Image 模块,所以首先安装这两个模块 生成二维码保存图片在本地 import qr ...

  10. gen_server的模板

    -module(first_gen_server).-behaviour(gen_server).-export([init/1, handle_call/3, handle_cast/2, hand ...