Css入门: display（显示方式）

介绍

CSS的display属性用于定义HTML元素的显示方式。通过display属性，我们可以控制元素是以何种方式显示在页面上。

常用的display属性值

以下是一些常用的display属性值：

• block: 元素将以块级元素的形式显示，会独占一行。
• inline: 元素将以内联元素的形式显示，不会独占一行。
• inline-block: 元素将以内联块级元素的形式显示，不会独占一行。
• none: 元素将不会显示在页面上，完全隐藏。
• flex: 元素将以弹性盒子的形式显示，可以实现灵活的布局。

示例

下面是一些使用display属性的示例：

块级元素

块级元素会独占一行，例如：

<div style="display: block; background-color: red; color: white; padding: 10px;">
  这是一个块级元素
</div>

内联元素

内联元素不会独占一行，例如：

<span style="display: inline; background-color: blue; color: white; padding: 5px;">
  这是一个内联元素
</span>

内联块级元素

内联块级元素不会独占一行，但可以设置宽度和高度，例如：

<span style="display: inline-block; width: 100px; height: 100px; background-color: green;">
  这是一个内联块级元素
</span>

隐藏元素

通过设置display属性为none，可以完全隐藏元素，例如：

<p style="display: none;">
  这个段落将不会显示在页面上
</p>

弹性盒子

通过设置display属性为flex，可以实现弹性盒子布局，例如：

<div style="display: flex; justify-content: center; align-items: center; width: 200px; height: 200px; background-color: yellow;">
  这是一个弹性盒子
</div>

总结

通过CSS的display属性，我们可以灵活地控制HTML元素的显示方式。无论是块级元素、内联元素、内联块级元素还是弹性盒子，都可以通过设置display属性来实现不同的布局效果。

相关链接

了解更多关于CSS的display属性，请访问W3Schools。

香港服务器首选晴川云

晴川云提供高性能的香港服务器，为您的网站和应用程序提供稳定可靠的托管服务。了解更多，请访问晴川云官网。