视觉格式化模型

在一个文档中,每个元素都被表示为0、1或多个矩形的盒子。确定这些盒子的尺寸, 属性 --- 像它的颜色,背景,边框方面 --- 和位置是渲染引擎的目标。

在CSS中,使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边:外边距边, 边框边, 内填充边 与 内容边。

盒的种类又分为:块级盒和行内级盒。如下

一些附加概念:

  • 块容器盒:直接包含的全部是块级盒的盒子称为块容器盒,它本身可能不是块级盒,比如非替换行内块及非替换表格单元格,不是块级盒。
  • 块盒:同时是块容器盒的块级盒称为块盒。
  • 匿名块盒:一个块容器盒内如果同时有块级盒和行内级盒,那么会自动创建匿名块盒来包含行内级盒。
  • 行内盒:生成行内格式化上下文的行内级盒称为行内盒。
  • 原子行内级盒:对于display为inline-block/inline-table的盒子,称为原子行内级盒,因为原子行内级盒就像一个原子一样,不能拆分成多个(盒),因为不能换行。
  • 匿名行内盒:类似于匿名块盒,CSS引擎有时候有必要生成匿名行内盒。常见的例子是块级盒直接包含文本,那么这些文本将包含在匿名行内盒中。(空白如果使用white-space去掉,则不会生成匿名行内盒)
  • 行盒:由行内格式化上下文产生的盒称为行盒,用于表示一行。行盒从包含块的一边排版到另一边。当有浮动时,行盒从左浮动的最右边排到右浮动的最左边。

行盒

由于我们今天讨论的是内联元素垂直方向上发生的事,所以我们直接讨论一个行盒的内部行为即可,一个行盒可以由块级盒产生,也可以由行内级盒产生,它描述了一行行内元素的渲染方式。一个行盒的内部组成是这样的:(不太会用PS,做的丑了一点,将就看一下……)

顶线(top line)
在印刷字体中,顶线的定义是小写字母k或h的最高点对应的线。不过我们在实际使用中发现小写字母k或h的最高点并没有到达顶线的位置,最高点的位置还与所用的字体有关,一般我们的网页中所用的字体,顶线的位置都会比k或h的最高点更高一些。像上图所示的那样。所以把顶线理解成文本的最高点对应的线比较好。

底线(bottom line)
底线的定义是小写字母y的最低点对应的线,如上图所示。

中线(middle line)
中线的定义是小写字母x的交叉点对应的线,注意,这并不是真正的内容区中线。

基线(base line)
基线的定义是小写字母x的最低点对应的线。这条线也是 vertical-align 默认采用的垂直对齐方式,即baseline。

内容区
从顶线到底线之间即为内容区。

行间距
行间距可以认为是line-height与内容区高度之间的差值,准确地描述是上一行的底线到下一行的顶线之间的距离,即可以认为是非内容区域的高度。

行内框
对非替换行内级元素来说,行内框高度就是它本身的line-height,对于替换行内级元素来说,行内框高度是它的实际高度。

行高
上一行基线到下一行基线的高度,可以认为是line-height(毕竟人家中文名字就叫行高啊>_<|||)。

行框
本行盒内所有行内框里最大的一个决定了行框,相当于最大的一个行内框把行盒撑开了。比如行盒内有一个有内容的span的line-height大于行盒本身的line-height,那么行盒本身会被撑大。


font-size

font-size是一个我们经常使用的属性,有时查文档,会看到这个的定义是字体的大小,这不成了翻译了嘛,其实font-size的精确定义是,大写字母S的最高线到小写字母y的最低线的距离。


line-height

一个行盒的基本表现,除了由font-size决定,还由line-height决定,正如上面说的,行高决定了上下两行之间基线的垂直距离,即是一行的高度。我们从上面的说明图片来看,line-height即是绿色区域加文字内容区域的高度。当设置了font-size属性后,再根据字体,就决定了文字内容区的高度,line-height决定了行高,line-height减去内容区高度后,剩余的高度即是行间距,这个行间距被平均地分到内容区的上下两侧。

对于块级元素来说,line-height指定了其内部行内盒的最小高度。对于非替换行内元素来说,line-height用于计算其行盒的高度,对于替换内联元素来说,line-height对它没有影响。


vertical-align

vertical-align属性定义了行内级盒的垂直对齐方式。注意是行内级盒,这样描述比较精确,因为行内级盒包括行内盒、原子行内级盒还有匿名行内盒,这些盒都可以用vertical-align控制垂直对齐,块级盒的vertical-align属性是无效的。不过顾名思义,对齐,至少要有两个东西才存在对齐一说吧,所以到底是什么与什么对齐呢?更加精确的描述,vertical-align定义了行内级盒相对于父元素行盒的垂直对齐方式。(行盒的概念在上方插图中有,它是由行内格式化上下文产生的盒)

vertical-align可以取的属性值

baseline
默认值,元素基线与父元素基线垂直对齐,对于替换行内元素来说,由于没有明确定义它的基线,所以各个浏览器下的表现可能不一样。

sub
元素基线与父元素的下标的基线对齐。

super
元素基线与父元素的上标的基线对齐。

text-top
元素顶端与父元素文字内容区的顶端对齐。

text-bottom
元素底端与父元素文字内容区的底端对齐。

middle
元素中线与父元素的小写x中线对齐。

top
元素的顶端与父元素的顶端对齐。

bottom
元素的底端与父元素的底端对齐。

< length>
元素基线超过父元素基线的指定高度,可以取负值。

< percentage>
元素基线超过父元素基线的百分比高度,这个百分比是对于元素自身的line-height来说的。(注意line-height是可以继承的,如果子元素没有特意设置line-height,那么将继承父元素的line-height)


实例面板

参考张鑫旭大神的作品制作了一个实验面板,用这个实验面板控制属性,配合文中的讲解,相信就能更方便地理解文中的概念啦!
vertical-align 实验面板


引用/参考资料

①: MDN - 盒子模型
②: MDN - 视觉格式化模型
③: WebpageFX - The Basics of Typography
④: PEARSONIFIED - Secret Symphony: The Ultimate Guide to Readable Web Typography
⑤: MDN - vertical-align
⑥:张鑫旭博客 - 我对css-vertical-align的一些理解与认识(一)
⑦: segmentfault - 想要清晰的明白(二)CSS 盒模型Block box与Line box

行盒(line box)垂直方向的属性详解:从font-size、line-height到vertical-align的更多相关文章

  1. Css盒模型属性详解(margin和padding)

    Css盒模型属性详解(margin和padding) 大家好,我是逆战班的一名学员,今天我来给大家分享一下关于盒模型的知识! 关于盒模型的属性详解及用法 盒模型基本属性有两个:padding和marg ...

  2. css 12-CSS3属性详解:动画详解

    12-CSS3属性详解:动画详解 #前言 本文主要内容: 过渡:transition 2D 转换 transform 3D 转换 transform 动画:animation #过渡:transiti ...

  3. css 11-CSS3属性详解(一)

    11-CSS3属性详解(一) #前言 我们在上一篇文章中学习了CSS3的选择器,本文来学一下CSS3的一些属性. 本文主要内容: 文本 盒模型中的 box-sizing 属性 处理兼容性问题:私有前缀 ...

  4. Android组件---四大布局的属性详解

    [声明] 欢迎转载,但请保留文章原始出处→_→ 文章来源:http://www.cnblogs.com/smyhvae/p/4372222.html Android常见布局有下面几种: LinearL ...

  5. 【CSS3 transform属性和过渡属性详解】

    CSS3transform属性详解 transform字面上就是变形,改变的意思. 在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translat ...

  6. [转]CSS vertical-align属性详解 作者:黄映焜

      CSS vertical-align属性详解 posted @ 2014-08-26 17:44 黄映焜   前言:关于vertical-align属性. 实践出真知. 垂直居中. 第二种用法. ...

  7. css动画-animation各个属性详解(转)

    CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①a ...

  8. HTML中元素的position属性详解

    HTML中元素的position属性详解 转载自:https://blog.csdn.net/wangzunkuan/article/details/81540935   HTML中DOM元素有5种定 ...

  9. CSS2.1SPEC:视觉格式化模型之width属性详解(下)

    本文承接CSS2.1SPEC:视觉格式化模型之width属性详解(上),继续分析CSS视觉格式化模型中width以及相关值的计算问题: 注:与上节不同,本节的demo中由于出现了float,absol ...

随机推荐

  1. lnmp环境一键安装

    lnmp一键安装命令: wget -c http://soft.vpser.net/lnmp/lnmp1.5.tar.gz && tar zxf lnmp1.5.tar.gz & ...

  2. 基于C/S 结构的IM即时通讯软件--下篇

    3.实现界面事件函数 客户端:单击" 进入" 按钮发送请求,如果要与服务器通信,必须要同时发送结构体信息描述发送内容,便于服务器处理. void CCase010Dlg::OnBn ...

  3. 常用的web服务器软件整理(win+linux)

    (1)Apache Apache是世界使用排名第一的Web服务器软件.它可以运行在几乎所有广泛使用的计算机平台上.Apache源于NCSAhttpd服务器,经过多次修改,成为世界上最流行的Web服务器 ...

  4. Javascript中用来实现继承的几种方式

    一.原型链继承 原理:修改子类型的原型,使其指向父类型的实例: 缺点: 1,不能以字面量方式在子类型的原型上添加新方法:这回重新改写子类型的原型: 2  创建子类型的实例时无法向父类型的构造函数传参. ...

  5. 记一次laravel-jwt修改黑名单所用redis数据库

    场景是这样的,我用tymon/jwt包做鉴权.jwt是自编码token,过期前想要强制失效只能将其加入黑名单中,黑名单一般用缓存存储. 但会有一个问题,若某种意外情况不小心执行了php aritsan ...

  6. bashrc和bash_profile

    在~/.bashrc中起别名 !/bin/bash下必须加上shopt -s expand_aliases #!/bin/sh下不用 shopt -s expand_aliases 这一条命令让she ...

  7. 2017-11-11 Sa Oct Spider

    2017-11-11 Sa Oct Spider 4:33 PM Again. Firstly test liburl: # -*- coding: utf-8 -*- import json imp ...

  8. Spring再接触 整合Hibernate

    首先更改配置文件 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http ...

  9. BUG在线上环境中出现的原因总结

    1.线上环境数据的复杂度以及数据量是测试环境不能比拟的. 2.业务操作的不可控性,用户错误的使用习惯. 3.实际场景的复杂性. 上线之后,测试人员需要做好以下二件事:   第一,灰度测试 项目上线之后 ...

  10. C#客户端和服务端数据的同步传输 (转载)

      客户端: using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;u ...