阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      块级元素

      HTML 常见的标签有<div><p><li><table>以及<span><img><strong><em>等。

      虽然标签种类繁多,但通常我们就把它们分为两类:

      • 块级元素(block-level element)
        • <div><p><li><table>
      • 内联元素(inline element)
        • <span><img><strong><em>

      注意 : “块级元素”和“display 为 block 的元素”不是一个概念。

      例如,<li>元素默认的 display 值是 list-item,

      <table>元素默认的 display 值是 table,

      但是它们均是“块级元素”,因为它们都符合块级元素的基本特征,也就是一个水平流上只能单独显示一个元素,多个块级元素则换行显示。

      正是由于“块级元素”具有换行特性,因此理论上它都可以配合 clear 属性来清除浮动带来的影响。

      CSS 清除浮动

      .clear:after {
          content: '';
          display: table; // 也可以是 block,或者是 list-item
          clear: both;
      }
      

      实际开发时,我们要么使用 block,要么使用 table,并不会使用 list-item,主要有 3 个原因。

      • (1)1 个字符的比较多,其他都是 5 个字符。
      • (2)会出现不需要的项目符号,这其实并不是什么大问题,再加一行 list-style:none 声明就可以了。
      • (3)IE 浏览器不支持伪元素的 display 值为 list-item。这是不使用 display:list-item 清除浮动的主因,兼容性不好。

      对于 IE 浏览器(包括 IE11),普通元素 设 置 display:list-item 有 效 , 但 是 :before/:after 伪元素就不行。

      list-item 和 两套盒子的概念

      作者引出这个概念,非常有意思;值得深入考虑;

      list-item 的产生

      1. 开始只有 块级盒子(block-level box)和内联盒子(inline box),

        • 块级负责结构
        • 内联负责内容
      2. 有需求要显示 项目符号的,这样就不好处理了,于是引出了 list-item, 学名“标记盒子”(marker box)

        • 专门用来放圆点、数字这些项目符号。IE 浏览器下伪元素不支持 list-item 或许就是无法创建这个“标记盒子”导致的。

      display:inline-block 引出的 2 种盒子

      有些场景,需要多个元素一行显示,但还需要甚至他们的宽度高度背景这些;于是产生了 display:inline-block

      这个概念让盒子引申出了,

      • 外在盒子
        • 负责元素是可以一行显示,还是只能换行显示;
      • 内在盒子 / 容器盒子
        • 内在盒子负责宽高、内容呈现什么的。

      为何 display 属性值是 inline-block 的元素既能和图文一行显示,又能直接设置 width/height ?

      因为 CSS 一个元素有两个盒子的概念,外面的盒子是 inline 级别,里面的盒子是 block 级别。

      如果遵循这种理解,display:block 应该脑补成 display:block-blockdisplay:table 应该脑补成 display:block-table,我们平时的写法实际上是一种简写。

      display:inline-table 产生什么效果?

      外面是“内联盒子”,里面是“table 盒子”。

      得到的就是一个可以和文字在一行中显示的表格。可以和文字在一行中显示的表格!

      <div>
          和文字平起平坐的表格:<div style="display:inline-table;width:128px;margin-left:10px;border:1px solid #cad5eb;">
              <p style="display: table-cell;">第1列</p>
              <p style="display: table-cell;">第2列</p>
          </div>
      </div>
      

      渲染效果如下:

      和文字平起平坐的表格:

      第1列

      第2列


      width/height 作用在哪个盒子上

      如果按照2种盒子的概念,那么作用就是再内在盒子上(容器盒子)

      这一节,还是非常有必要看看的;

      目录
      目录