作者:手机用户2502870941 | 来源:互联网 | 2023-05-17 01:49
display的几种参数1.inline和blockinline,在一行中不会换行,内联属性不可设置盒子大小,且不会自动换行。block,不在一行会自动换行,可设置盒子的大小默认下,span是inli
display的几种参数
1.inline和block
inline,在一行中不会换行,内联属性不可设置盒子大小,且不会自动换行。
block,不在一行会自动换行,可设置盒子的大小
默认下,span是inline的,div是block的
div是block的
div是block的
span是inline的
span是inline的
h1也是block的
h1也是block的
效果如下:
默认情况下的确如此,但是可以通过display来进行修正,比如上述代码中的style部分修改为
div{
background-color: aqua;
display: inline;
}
span{
background-color: crimson;
display: block;
}
h1{
background-color: yellow;
display:inline;
}
那么得到的效果是这样的:
确实,div和h1变成inline的了,而span却变成block的了。
2.inline-block
前面说到,inline,是不可以设置大小的,
而inline-block同时具备了inline和block的特性,可以设置其大小,且在一行之中
比如,对于span来说,他本身是inline的,多个span之间是不会自动换行的,且也无法修改大小,inline-bock正可以解决这个问题
span是inline的1
span是inline的2
span是inline的3
span是inline的4
效果如下:
3.inline-table
table本身也是block的,如果我用以下代码:
header
1 |
2 |
3 |
4 |
1 |
2 |
3 |
4 |
1 |
2 |
3 |
4 |
1 |
2 |
3 |
4 |
1 |
2 |
3 |
4 |
footer
效果如下:
那么我现在有个需求,我需要header和footer和table在一排,header在左边,table在中间,footer在右边
只需要把table设为inline-table即可
table{
display: inline-table;
background-color: crimson;
}
4.list-item
div的组合也可以展示出list的效果
item1
item2
item3
item4
item5
效果:
关键在这三行代码:
1 display: list-item;
2 list-style-type: circle;
3 margin-left: 30px;
第1行和第2行必须同时出现,缺一个都不会有圆圈的效果
第3行代码如果没有,圆圈会被覆盖掉。