《CSS世界》之块级元素

快链接:CSS-World-Note

所谓的块级元素(block-level element),他们都有个特征是在一个水平流上只能单独显示一个元素,多个块级元素则换行显示

问:display:block 和 块级元素 一样???

这种说法是错误的

li元素的dispaly:list-item也是块级元素

table元素的display:table也是块级元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<style>
.con{
padding:30px;
}
.con .cell{
width:50%;float:left;padding:0 20px;
}
.clear{
border:10px solid #b4a078;
}
.clear img{
width:100%;
float:left;
}
.clear2:after,.con:after{
clear:both;
content:"";
display: table;// block
}
</style>
<template>
<div class="con">
<div class="cell">
<span>正常内部float的效果</span>
<div class="clear">
<img src="./assets/images/1.jpeg" />
</div>
</div>
<div class="cell">
<span>清楚float的效果</span>
<div class="clear clear2">
<img src="./assets/images/1.jpeg" />
</div>
</div>
</div>
</template>
<script>
</script>

image.png

问:为什么实际开发的过程中,不使用dispaly:list-item 设置块级元素,而经常使用block或者table?

  • 字符比较多,其他两个相对少
  • 会出现不需要的项目符合,当然也可以解决 list-style:none
  • IE浏览器不支持微元素的display:list-item,属于兼容性的问题

问:为什么list-item元素会出现项目符号?

系统会生成一个附加的盒子,学名标记盒子(marker box),专门用来放圆点、数字这些项目符号

特殊性别display:inline-block

俗话:穿着inline的皮藏着block的心,专业名称叫容器盒子

  • 不仅有inline的特性,和图文一行显示
  • 而且有block的特性,可以设置widthheight

盒子display:inline-table

从上面可以知道,inline内联盒子和table盒子的结合,得到一个和文字在一行中的显示的表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<style>
.con{
padding:30px;
}
.con .inline-table{
display:inline-table;
width:130px;
background-color:#b4a078;
text-align:center;
margin-bottom:10px;
}
</style>
<template>
<div class="con">
<div class="inline-table">
第一列
</div>
<div class="inline-table">
第二列
</div>
<div class="inline-table">
第三列
</div>
<div class="inline-table">
第一列
</div>
<div class="inline-table">
第二列
</div>
<div class="inline-table">
第三列
</div>
</div>
</template>
<script>
</script>

image.png

快链接:CSS-World-Note