资讯专栏INFORMATION COLUMN

css文本模型漫游指南

Freelander / 1859人阅读

摘要:默认情况下,行内元素不会以新行开始,而块级元素会新起一行。常见的内联元素有分类替换元素在中,可替换元素的展现效果不是由来控制的。这些元素是一种外部对象,它们外观的渲染,是独立于的。

前言

在写作本文章前原本打算只是复习一下 line-heightvertical-height 这两个属性而已, 结果发现掉进了一个大坑网上有很多篇文章看的我云里雾里的, 最后决定还是从头来一遍吧, 这篇文章是这次的一个记录.

这次的故事虽然时因为 line-heightvertical-align 这两个属性引起的, 但是实际上本篇文章中主要探讨的话题是 "文本是如何渲染", 虽然这两个属性与话题关联很大但是本文中不会过多的提及它们, 请确保熟悉它们.

内联元素(行内元素)

你也可以直接跳过这章, 去阅读后面精彩的部分, 如果遇到了概念问题可以在回来进行查阅.

我们这里不会仔细的讨论 "内联元素", 只是为了后面的内容做铺垫, 这些内容可能需要你提前预习.

另外 "内联元素" 和 "行内元素" 实际上是同一个东西只是叫法不同, 但是本篇文章中没有统一叫法.

表现

一个内联元素只占据它对应标签的边框所包含的空间。

默认情况下,行内元素不会以新行开始,而块级元素会新起一行。

常见的内联元素有:

b, big, i, small, tt

abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var

a, bdo, br, img, map, object, q, script, span, sub, sup

button, input, label, select, textarea

分类 替换元素
在 CSS 中,可替换元素replaced element)的展现效果不是由 CSS 来控制的。这些元素是一种外部对象,它们外观的渲染,是独立于 CSS 的。

典型的替换元素有: