hooyantsing's Blog

P44_8_元素显示的多种模式控制

字数统计: 117阅读时长: 1 min
2020/04/13

P44 8 元素显示的多种模式控制

display

1
2
3
4
5
6
7
8
//隐藏元素
display: none;
//变为块元素
display: block;
//变为行元素
display: inline;
//变为行元素并保留块元素特征,可以设置宽高
display: inline-block;

样例:

904db884ece1b07c1a9e502c9ec9b150.png

1
2
3
4
5
6
7
8
9
10
11
12
13
<ul>
    <li>LINUX</li>
    <li>JS</li>
    <li>CSS</li>
</ul>
<style>
    ul > li {
        display: inline-block;    //使用inline-block height和width才可用
        height: 100px;
        width: 100px;
        text-align: center;
    }
</style>
CATALOG