EasyClick Html UI 第十三节 CSS 显示特性

Posted 2022-02-18 Mr -老鬼

EasyClick html UI 第十三节 CSS 显示特性

可以设置元素为显示或不显示状态。

display 属性的使用

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

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

示例

<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>

说明:

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

总结

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

---

交流QQ群：620028786，647082990，772810035
————————————————— 版权声明—————————————-————
版权所有~Mr-老鬼 ~转载请注明原文地址
免责声明：本文所有的教程仅限交流学习使用不得用于违法用途，造成的法律后果本人不承担责任。