教育改变生活
标题: CSS中级-1 CSS 布局-display 属性 [打印本页]
作者: 却尘 时间: 2023-11-23 16:15
标题: CSS中级-1 CSS 布局-display 属性
CSS 布局 - display 属性
display 属性是用于控制布局的最重要的 CSS 属性。
display 属性
display 属性规定是否/如何显示元素。
每个 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？
display:none
删除
visibility:hidden
隐藏
Reset
重置所有
通过将 display 属性设置为 none 可以隐藏元素。该元素将被隐藏，并且页面将显示为好像该元素不在其中：
实例
h1.hidden {
display: none;
}
visibility:hidden; 也可以隐藏元素。
但是，该元素仍将占用与之前相同的空间。元素将被隐藏，但仍会影响布局：
实例
h1.hidden {
visibility: hidden;
}
CSS Display/Visibility 属性
| 欢迎光临 教育改变生活 (http://bbs.goldoar.com/) |
Powered by Discuz! X3.2 |