【前端进阶学习】CSS属性之display常用属性值和用法CSS属性之display常用属性值和用法：display 属

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第18天，点击查看活动详情

display 属性规定元素应该生成的框的类型，用于定义建立布局时元素生成的显示框类型

inline：被显示为内联元素

将元素设置为display:inline时，被隐藏的元素会变为行内元素并显示,块级元素将会变为行内元素

常用的行内元素有：<a>、、 、、、、<label>、<q>、<var>、<cite>、<code>

不能设置宽高，不能自动换行
内外边距的 top / bottom 都不可改变

    <style>
        .box {
            border: 100px solid red;
        }
        
        .block_box {
            display: inline;
        }
        
        .inline_box {
            display: inline;
        }
    </style>
    
<body>
    <div class="box block_box">
        //块元素
    </div>
    <span class="box inline_box">
        //行内元素
    </span>
</body>

block：显示为块级元素

display:block 的 CSS 声明会自动换行，宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制

将元素设置为block时，被隐藏的元素会变为块级元素；行内元素将会变为块级元素。如果不指定宽高，默认会继承父元素的宽度，并且独占一行


    <style>
        .box {
            border: 100px solid red;
        }
        
        .block_box {
            display: block;
        }
        
        .inline_box {
            display: block;
        }
    </style>
</head>
<body>
    <div class="box block_box">
        //块元素
    </div>
    <span class="box inline_box">
        //行内元素
    </span>
</body>

none：指定对象作为块元素级的表格

display:none元素设置为none时，被隐藏的元素不会占用自身固有宽度高度空间，也无法显示

    <style>
        .box {
            display: none;
        }
    </style>
</head>
<body>
    <div class="box">
        //这里隐藏了内容
    </div>
</body>

inherit：继承父元素 display 属性的值

display:inherit，继承从父元素display的属性值

    <style>
        .box {
            border: 1px solid red;
        }
        
        .block_box {
            display: inherit;
        }
        
        .inline_box {
            display: inherit;
        }
    </style>
</head>
<body>
    <div class="box block_box">
        //块元素
    </div>
    <span class="box inline_box">
        //行内元素
    </span>
</body>

写在最后

重新开始更文啦！最近忙了一段时间，终于继续可以学习！感谢大家的支持！我会继续努力坚持学习！养成了好习惯，每天必定会抽出时间多多少少学习前端知识～

以上习题&笔记从大佬们的论坛学习而来，特感谢大佬们的知识分享～（学习技术知识，果然要看大佬们的技术博客，大家有好的推荐也欢迎指引我这个小白哈，感恩！）

附上学习链接，感谢这些大佬出题和解答：