CSS 布局 - display 属性
CSS 中 display
属性设置是否显示元素以及元素的显示方式,是控制布局的最重要的 CSS 属性。
CSS 中 display
属性设置元素是否显示以及元素的显示方式,是控制布局的最重要的 CSS 属性。
默认情况下,大多数 HTML 元素属于块元素和内联元素。块元素的显示方式为 block
, 内联元素的显示方式为 inline
。通过 display
属性我们可以改变元素的显示方式,让块元素表现为内联元素或者让内联元素表现为块元素,在或者让元素表现为“内联块元素”。
块级元素
块级元素总是从新行开始并占据整个可用宽度。块级元素示例:
<div>
<h1>
-<h6>
<p>
<form>
<header>
<footer>
<section>
内联元素
内联元素不会从新行开始,只会占用必要的宽度。内联元素示例:
<span>
<a>
<img>
修改元素的显示方式
特定的场景下,将块元素显示为内联元素,对页面的布局很有用。
通过 <li>
制作水平导航菜单:
li {
display: inline;
}
!! 设置元素的 display
属性只会改变元素的显示方式,而不是它是什么类型的元素。块元素始终块元素,只是像内联元素那样显示而已。
display: none;
通过 display: none;
可以将元素隐藏起来。
鼠标悬停提示案例
<!DOCTYPE html>
<html>
<style>
button {
cursor: pointer;
}
button span.hover {
display: none;
}
button:hover span.hover {
display: inline;
}
</style>
<body>
<button>我是按钮 <span class="hover">鼠标在我上面了</span></button>
</body>
</html>
隐藏元素 - display:none
vs visibility:hidden
-
display:none
隐藏一个元素。元素隐藏后,就像元素没在 HTML 文档出现过一样,不会占用页面的任何空间。
-
visibility:hidden
隐藏一个元素。元素隐藏后,仍将占用与以前相同的空间,仍然影响布局。
display:none
vs visibility:hidden
区别:
<!DOCTYPE html>
<html>
<style>
#display:hover ~ p.p1 {
display: none;
}
#visibility:hover ~ p.p1 {
visibility: hidden;
}
</style>
<body>
<button id="display">display:none</button>
<button id="visibility">visibility:hidden</button>
<p class="p1">Hello World!</p>
<p></p>
<p>Hello CSS!</p>
<p></p>
</body>
</html>
inline-block
内联元素在水平布局上有很有优势,但是内联元素不能设置宽度和高度,不能设置上下的内边距和外边距,这又带来了很多不便。
而显示方式为 inline-block
的元素则结合了块元素和内联元素的优点,即能水平排列,有可以设置宽度、高度和内外边距。
在制作水平导航菜单的时候经常用到 display: inline-block
。
使用 inline-block
创建导航链接
.nav {
background-color: yellow;
list-style-type: none;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
display: inline-block;
font-size: 20px;
padding: 20px;
}
CSS 显示/可见性属性
属性 | 说明 |
---|---|
display |
设置元素是如何显示的 |
visibility |
设置原始是否显示 |