阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      内联元素

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

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

      因为 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,当时检查后会发现是有高度的;

      目录
      目录