深入理解css行内元素

2,263 阅读6分钟

一些前置知识

替换/非替换元素

替换元素

不直接显示html元素内容的元素,如img、input、iframe等

替换元素尺寸

video、iframe等默认宽高为300px、150px,img默认尺寸为0,加载图片后默认尺寸为图片原始尺寸 宽高可以通过width、height属性设置,或用css设置

非替换元素

元素内容直接显示在元素生成的框中,如div、span等

块级/行内元素

块级元素

宽度默认占满父元素的content区(盒模型),独占一行(即前后换行)

行内元素

宽度默认包裹内容,可换行
设置width、height对行内非替换元素不生效,垂直padding、border有显示效果但不影响布局,垂直margin无效

示例

span {
  line-height: 60px;
  border: 2px solid;
  font-size: 12px;
  background: green;
  padding: 10px;
  margin: 30px;
}

如图可见,每行的高度仅由line-height控制并产生了行间距;border和padding水平方向生效,垂直方向只有显示效果(由背景和边框看出);margin水平方向生效,垂直方向无效;background会延伸到border中(同块级元素,将border设置成transparent时可见)

一些基本概念

匿名行内文本

不在任何行内元素中的字符串

示例

<div>
    这是匿名行内文本
    <span>hehe</span>
</div>

em框(字符框)和内容区

对非替换元素

em框为非替换元素中一个字符形成的框
em框高度 = font-size(不等于实际渲染大小,实际渲染大小取决于字体) = 1em
内容区由em框串在一起组成

对替换元素

不存在em框

文本基线

可以按小写字母x的下边沿来理解

1ex = 字母x的高度

行间距

由line-height属性产生(如图,灰色框为行间距)

对非替换元素

line-height = font-size + 行间距(上下等分)

对替换元素

line-height不直接影响替换元素布局(只在替换元素的vertical-align设置为百分比时有影响,参见下文)

行内框inline-box

对非替换元素

inline-box高度 = line-height

对替换元素

inline-box高度 = 元素自身高度 + 垂直padding + 垂直border + 垂直margin(行内图片有垂直margin时,行框高度被这个margin影响了,而行框包裹inline-box,可见替换元素的inline-box高度包含margin)

行框

垂直方向包含一行中所有inline-box的上下边界,其最终高度受行内各元素vertical-align影响(因为vertical-align会导致inline-box在垂直方向上移动)

幽灵空白节点

每个行框前都有一个虚拟的宽度为0的inline空白节点,font-size、line-height继承自父元素;
幽灵空白节点的具体作用参考下文;

重要css属性详解

font-size

指定文字em框高度(字体实际显示大小由字体决定)

如图,实线框为em框,虚线框为em框拼接成的内容区

  • 设置为em、百分比时,按父元素font-size计算(如父元素font-size: 20px,子元素font-size: 0.5em,则子元素实际font-size为20 * 0.5 = 10px)
  • font-size继承时(即自身没有设置font-size)得到的是计算值(如父元素font-size: 1em,需先计算成px值后再由子元素继承)

text-align

设置行内元素形成的一个或多个行框之间的对齐方式

用于block、inline-block元素(inline-block对外表现为inline、对内为block)
可继承

  • left(默认值)
  • right
  • center
  • justify(行框中文字由用户代理控制自适应向两侧对齐,最后一行无效)

示例

text-align: center;

当内部只形成一个行框时,行框整体居中

当形成多个行框时,各行框居中对齐

text-align: justify;

多个行框左右两侧对齐,最后一行无效

line-height

设置行高

对非替换元素来说,line-height = font-size + (上下等分的)行间距 = inline-box高度
可见非替换元素的inline-box高度完全由line-height决定

可用于任意元素
可继承
只直接影响行内非替换元素

  • normal(默认值)一般用户代理中为1.2
  • 数字 如2.5,则行高为2.5 * font-size,继承时直接继承2.5这个值,即子元素上line-height值也为2.5
  • 长度 如1.5em,18px等,继承时按计算值(即先计算出父元素的line-height的px值再由子元素继承)
  • 百分比 如50%,则行高为50% * font-size,继承时按计算值 line-height设置于块级元素时不直接生效,但决定了其内部行内元素形成行框时的最小高度

由于行框最前面存在的“幽灵空白节点”,该节点继承父元素(即外层的块级元素)的line-height,所以这个节点形成的inline-box高度为line-height,而行框需要包含一行中所有inline-box的上下边界,所以决定了行框的最小高度

vertical-align

指定行内元素在其所在行框中的垂直对齐方式

只能用于行内元素和替换元素
不可继承

首先解释两个概念

元素基线(baseline)

非替换由字体决定,可理解为小写字母x的下边缘
替换元素为其inline-box的底部

行框基线

可以理解为在幽灵节点中的插入一个虚拟的小写字母“x”,行框基线则是这个字母“x”的底部
因为这个虚拟的字母x无法设置其vertical-align,同时vertical-align也不会发生继承,所以这个虚拟节点的vertical-align值永远是默认值baseline,所以可以代表行框的基线

  • baseline(默认值)元素基线与行框基线对齐
  • middle 元素inline-box的垂直中心与行框基线上方0.5ex(ex相对父元素font-size计算,而幽灵节点中的虚拟字母x继承父元素font-size,则也可以理解为幽灵节点中x的垂直中心)处对齐
  • 长度 元素基线与行框基线上方对应给定长度处对齐
  • 百分比 元素基线与行框基线上方 给定百分比 * 自身line-height 处对齐(可见这里line-height对替换元素是有影响的)
  • top 元素inline-box的top与行框顶部对齐
  • bottom 元素inline-box的bottom与行框底部对齐
  • text-top 元素inline-box的top和父元素内容区(即幽灵节点中虚拟字母x的内容区或em框)顶部对齐
  • text-bottom 元素inline-box的top和父元素内容区(即幽灵节点中虚拟字母x的内容区或em框)底部对齐

display: inline-block;

对外表现为是inline元素,对内表现为block元素
在行框中的表现基本同替换元素

inline-block的基线

若inlin-block元素内部有inline元素,则基线为元素中最后一个行框的基线
若inlin-block元素内部没有inline元素,则基线为inline-block元素margin-box的底部