详解 display

最新推荐文章于 2024-04-19 20:41:06 发布

酷吧~我装的

最新推荐文章于 2024-04-19 20:41:06 发布

阅读量190

点赞数 1

分类专栏：精通css之路文章标签： html5 css html

本文链接：https://blog.csdn.net/kiss_again/article/details/120394057

版权

精通css之路专栏收录该内容

3 篇文章 0 订阅

订阅专栏

阶段一最初只有两个基础盒子：块级盒子、内联盒子

块级盒子(block-level box) 负责结构，可作用宽高，不与图文一行显示
内联盒子(inline box) 负责内容，不作用宽高，与图文一行显示

这时候，所有的"块级元素"只有一个"块级盒子"。

阶段二 display:list-item

因为list-item默认要显示项目符号，一个盒子解释不了。

解决：为list-item重新命名一个盒子——附加盒子，学名标记盒子(marker box)用来存放圆点、数字这些项目符号。

这时候，所有的"块级元素"都有一个"块级盒子"，但list-item还会额外有一个附加盒子。

注：IE浏览器下的伪元素不支持list-item，原因或许是无法创建标记盒子

阶段三 display:inline-block

穿着inline的皮藏着block的心，现有的盒子无法解释。

解决：继续添加盒子。此时每个元素都有两个盒子：外在盒子、内在盒子。外在盒子负责元素是可以一行显示，还是只能换行显示；内在盒子负责宽高、内容呈现什么的。

内在盒子还有一个更专业的名字：容器盒子

这时候，display: inline-block外在是内联盒子，可以与图文一行显示；内在是块级盒子，可以作用宽高。

display:inline 内外元素均为"内联盒子" 可理解为display:inline-inline。

display:block 可理解为 display:block-block。

display:table可理解为display:block-table。

<!-- 供测试体验使用 -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    .inline-table {
      display: inline-table;
      /* display: inline; */
      /* display: table; */
      width: 128px;
      height: 300px;
      margin-left: 10px;
      border: 1px solid #cad5eb;
    }

    .inline-table>p {
      display: table-cell;
    }
  </style>
</head>

<body>
  和文字平起平坐的表格：
  <div class="inline-table">
    <p>第1列</p>
    <p>第2列</p>
  </div>
</body>


</html>

酷吧~我装的

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
详解 display

阶段一最初只有两个基础盒子：块级盒子、内联盒子块级盒子(block-level box) 负责结构，可作用宽高，不与图文一行显示内联盒子(inline box) 负责内容，不作用宽高，与图文一行显示这时候，所有的"块级元素"只有一个"块级盒子"。阶段二 display:list-item因为list-item默认要显示项目符号，一个盒子解释不了。解决：为list-item重新命名一个盒子——附加盒子，学名标记盒子(marker box)用来存放圆点、数字这.
复制链接

扫一扫