CSS基础——css 显示特性

2022-07-20 19:26:12 浏览数 (2)

1. display 属性的使用

display 属性是用来设置元素的类型及隐藏的,常用的属性有:

  • none 元素隐藏且不占位置
  • inline 元素以行内元素显示
  • block 元素以块元素显示

2. 示例代码

代码语言:javascript复制
<style>
    .box{
        /* 将块元素转化为行内元素 */
        display:inline;
    } 

    .link01{
        /* 将行内元素转化为块元素 */
        display:block;
        background: red;

    }

    .con{
        width:200px;
        height:200px;
        background:gold;

        /* 将元素隐藏 */
        display:none;
    }

</style>

<div class="con"></div>
<div class="box">这是第一个div</div>
<div class="box">这是第二个div</div>
<a href="#" class="link01">这是第一个链接</a>
<a href="#" class="link01">这是第二个链接</a>

说明:

行内元素不能设置宽高, 块元素或者行内块元素可以设置宽高。

3. 小结

  • 通常隐藏元素使用 display:none

0 人点赞