阅读(27)

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>