内联元素

🌙
手机阅读
本文目录结构

内联元素:图文,指图片和文字,是最典型的内联元素。

为什么内联元素的解析比块级元素解析更难理解?

因为 CSS 属性往往具有继承特性,混合在一起会导致 CSS 解析规则非常复杂。多个属性共同作用的结果,需要对内联元素特性,内联盒模型以及当前 CSS 属性都了解

1 哪些元素是内联元素

从定义看

“内联元素”的“内联”特指“外在盒子”,和“display 为 inline的元素”不是一个概念

内联元素: display:inline / inline-block / inline-table

<button>按钮元素是内联元素,因为其 display 默认值是 inline-block;

<img>图片元素也是内联元素,因为其 display 默认值是 inline 等

问:浮动元素是可以和文字在一个水平上显示的,属于内联元素吗

不是的,因为已经浮动已经脱离文档流了;脱离文档流的会生成"块级盒子"

从表现看

就行为表现来看,“内联元素”的典型特征就是可以和文字在一行显示。因此,文字是内联元素,图片是内联元素,按钮是内联元素,输入框、下拉框等原生表单控件也是内联元素。

2 内联世界深入的基础 — 内联盒模型

<p>这是一行普通的文字,这里有个 <em>em</em> 标签。</p>

(1)内容区域(content area)

内容区域指一种围绕文字看不见的盒子,其大小仅受字符本身特性控制,本质上是一个字符盒子(character box)

(2)内联盒子(inline box)

“内联盒子”不会让内容成块显示,而是排成一行,这里的“内联盒子”实际指的就是元素的“外在盒子”,用来决定元素是内联还是块级。

(3)行框盒子(line box)

每一行就是一个“行框盒子”(实线框标注),每个“行框盒子”又是由一个一个“内联盒子”组成的。

(4)包含盒子(containing box)

<p>标签就是一个“包含盒子”(实线框标注),此盒子由一行一行的“行框盒子”组成。

3 空白支柱节点

是内联盒模型中非常重要的一个概念,具体指的是:在 HTML5 文档声明中(必须是 HTML5 声明),内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”一样。

这个“空白节点”永远透明,不占据任何宽度,看不见也无法通过脚本获取,但又确确实实地存在,表现如同文本节点一样,

div {
    background-color: #cd0000;
}
span {
    display: inline-block;
}

<div><span></span></div>

虽然内部的<span>元素的宽高明明都是 0,当时检查后会发现是有高度的;

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了