CSS display属性

在本文中，我们将介绍CSS display属性的用法、常见取值、以及实例演示。

阅读更多：CSS 教程

display的作用

CSS 的 display 属性控制元素的呈现方式，也就是它所占据的空间。例如，display: none; 将元素完全从文档中移除，而 display: block; 则显示为块级元素，占据整行，宽度自适应父容器。

常见取值

block

block 元素通常用于包含块级元素，例如 div, h1, p 。它们会在父容器中新起一行，并且会沿着容器的宽度水平扩展。

<div style="display: block; background-color: lightblue; width: 50%; height: 50px;">我是一个块级元素</div>

inline

inline 元素通常用于包含文本或者其他行内元素，例如 span, a 。它们不会新起一行，而是像文本一样紧密排列在一行内。

<span style="display: inline; background-color: lightpink; padding: 10px;">我是一个行内元素</span><span style="display: inline; background-color: lightblue; padding: 10px;">我也是一个行内元素</span>

inline-block

inline-block 元素通常用于包含其他元素或者文本，并且需要设置宽高，例如 input, img 。它们与行内元素一样紧密排列在一行内，但是可以设置宽高。

<div style="display: inline-block; background-color: lightblue; width: 50px; height: 50px;"></div><div style="display: inline-block; background-color: lightpink; width: 50px; height: 50px;"></div>

none

none 元素会在文档中移除，它不再占据任何空间。例如，可以通过设置 display: none; 来实现 hover 隐藏效果。

<div id="hover-div" style="background-color: lightblue; width: 50%; height: 50px;">我是一个需要hover才能看到的div</div>
<script>
    document.getElementById("hover-div").addEventListener("mouseover", function() {
        this.style.display = "none";
    });
    document.getElementById("hover-div").addEventListener("mouseout", function() {
        this.style.display = "block";
    });
</script>

flex

flex 元素用于实现强大的布局功能。有关 flex 的详细介绍，见 CSS Flex布局。

自定义display

有时候，我们可能需要通过自定义 display 来实现某些特定的效果。例如，可以通过调整 td 的 display 属性，使其表现为块级元素。

<table>
    <tr>
        <td style="display: block;">我是一个块级元素</td>
        <td style="display: inline;">我是一个行内元素</td>
    </tr>
</table>

总结

display 属性是 CSS 布局中极为重要的一部分。通过设置不同的 display 值，我们可以控制元素的尺寸、布局、以及是否显示。熟练掌握 display 的应用，有助于我们更加自由地控制页面的布局与效果。