块级元素
更新时间: 2024-03-07 15:54:55
块级元素对应的英文是 block-level element。常见的块级元素有<div>,<li>和<table>等。
块级元素 和 “display 为 block 的元素”不是一个概念。
例如： <li>元素默认的display值是list-item。<table>元素默认的display值是table，但它们都是块级元素，因为它们都符合块级元素的基本特征：一个水平流上只能单独显示一个元素，多个块级元素换行显示
Q: 为什么list-item元素会出现项目符号
之所以list-item元素会出现项目符号是因为生成了一个附加的盒子，学名“标记盒子”（marker box），专门用来放圆点、数字这些项目符号。
# 元素的盒子
每个元素都有两个盒子：
- 外在盒子
外在盒子负责元素是可以一行显示，还是只能换行显示 - 容器盒子
容易盒子负责宽高、内容呈现之类的
于是，按照display的属性不同，值为block的元素盒子，实际由外在的“块级盒子”和内在的“块级容器盒子”组成。值为inline-block的元素，则由外在的“内联盒子”和内在的“块级容器盒子”组成，值为inline的元素内外均是“内联盒子”。
那么按理说也可以有inline-table:
第一列
第二列
<div class="inline-table">
<div>第一列</div>
<div>第二列</div>
</div>
1
2
3
4
2
3
4
.inline-table {
display:inline-table;
width: 128px;
margin-left: 10px;
border: 1px solid #cad5eb;
}
.inline-table div {
display: table-cell;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9