详解 display
阶段一 最初只有两个基础盒子：块级盒子、内联盒子
- 块级盒子(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>Documenttitle><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>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！