CSS display显示
最后一次修改 2017年08月04日
显示或隐藏
我们可以通过使用visibility属性或display属性来显示或隐藏元素。
要隐藏元素，请将display属性设置为“none”或将visibility属性设置为“hidden”。
visibility：hidden 隐藏元素，但是元素仍然占据空间并影响布局。
h1.hidden {
visibility: hidden;
} display：none 隐藏元素，并从布局中删除元素。
h1.hidden {
display: none;
}block（块）和 inline（内联）元素
块元素尝试获取整个宽度，并在布局中开始新行。一些HTML元素是块元素或块级元素。
<h1>, <p>, <li>, <div>
内联元素与其他内联元素保持在同一行中，并且不会开始新行。
<a>, <span> 是内联元素的示例。
我们可以使用display属性来更改块或内联函数。
以下代码使li元素显示为内联元素。不是开始一个新行作为正常li元素，它显示li元素在同一行。
li {
display: inline;
}以下代码使span元素显示为块元素。现在每个span元素将像div元素，默认情况下它是一个块元素。
span {
display: block;
}Inline-Block（内联块）
inline-block值混合块和内联特性。
盒子的外部被视为内联元素。因此，不会为元素创建新行。
框的内部被视为块元素，并应用诸如宽度，高度和边距的属性。
以下代码显示如何使用inline-block值。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {
display: inline;
}
span {
display: inline-block;
border: medium double black;
margin: 2em;
width: 10em;
height: 2em;
}
</style>
</head>
<body>
<p>This is a test.</p>
<p>This is a test. <span>This is a test.</span>
</p>
</body>
</html>← 没有了