CSS display属性

display 属性是用于控制布局的最重要的 CSS 属性,规定是否/如何显示元素。每个 HTML 元素都有一个默认的 display 值,具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。

一、块级元素

块级元素(block element)总是从新行开始,并占据可用的全部宽度(尽可能向左和向右伸展)。这个 <div> 元素属于块级元素。块级元素的一些例子:

<div>
<h1> - <h6>
<p>
<form>
<header>
<footer>
<section>

二、行内元素

内联元素(inline element)不从新行开始,仅占用所需的宽度。这是段落中的行内 <span> 元素。

行内元素的一些例子:

  • <span>
  • <a>
  • <img>

三、Display: none

display: none; 通常与 JavaScript 一起使用,以隐藏和显示元素,而无需删除和重新创建它们。如果您想知道如何实现此目标,请查看本页面上的最后一个实例。默认情况下,<script> 元素使用 display: none;。

四、覆盖默认Display值

如前所述,每个元素都有一个默认 display 值,但是可以覆盖它。将行内元素更改为块元素,反之,对于使页面以特定方式显示同时仍遵循 Web 标准很有用。

一个常见的例子是为实现水平菜单而生成行内的 <li> 元素:

li {
display: inline;
}

注意:设置元素的 display 属性仅会更改元素的显示方式,而不会更改元素的种类。因此,带有 display: block; 的行内元素不允许在其中包含其他块元素。

下例将 <span> 元素显示为块元素:

span {
display: block;
}

下例将 <a> 元素显示为块元素:

a {
display: block;
}

五、隐藏元素

display:none 还是 visibility:hidden?

CSS display属性

通过将 display 属性设置为 none 可以隐藏元素。该元素将被隐藏,并且页面将显示为好像该元素不在其中:

h1.hidden {
display: none;
}

visibility:hidden; 也可以隐藏元素,但是,该元素仍将占用与之前相同的空间。元素将被隐藏,但仍会影响布局:

h1.hidden {
visibility: hidden;
}

六、CSS Display/Visibility属性

CSS display属性

广告合作
QQ群号:707632017
标签:

温馨提示:

1、本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。邮箱:2942802716#qq.com。(#改为@)

2、本站原创内容未经允许不得转裁,转载请注明出处“站长百科”和原文地址。

目录