1. Definition
The display property sets how an element should be displayed
The visibility attribute specifies whether an element should be visible or hidden
2. Hidden elements - display:none or visibility:hidden
An element can be hidden by setting the display property to "none", or the visibility property to "hidden". Note, however, that the two methods produce different results:
1. visibility:hidden can hide an element, but the hidden element still needs to occupy the same space as before it was not hidden. In other words, although the element is hidden, it still affects the layout.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS基础学习-visibility</title>
<style>
h1.hidden {visibility:hidden;}
</style>
</head>
<body>
<h1>这是一个可见标题</h1>
<h1 class="hidden">这是一个隐藏标题</h1>
<p>注意, 实例中的隐藏标题仍然占用空间。</p>
</body>
</html>Renderings:
2. display:none can hide an element, and the hidden element will not take up any space. In other words, the element is not only hidden, but the space originally occupied by the element will also disappear from the page layout.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS基础学习-display</title>
<style>
h1.hidden {display:none;}
</style>
</head>
<body>
<h1>这是一个可见标题</h1>
<h1 class="hidden">这是一个隐藏标题</h1>
<p>注意, 实例中的隐藏标题不占用空间。</p>
</body>
</html>Renderings:
3. CSS Display - block and inline elements
A block element is an element that takes up the full width and has line breaks before and after it .
Examples of block elements:
- <h1>
- <p>
- <div>
Inline elements only need the necessary width and do not enforce line breaks .
Examples of inline elements:
- <span>
- <a>
4. How to change the display of an element
It is possible to change inline and block elements, and vice versa, to make the page appear to be composed in a specific way and still follow web standards.
4.1. The following example displays list items as inline elements:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS基础学习-将li转化为内联元素</title>
<style>
li{display:inline;}
</style>
</head>
<body>
<p>链接列表水平显示：</p>
<ul>
<li><a href="/html/" target="_blank">HTML</a></li>
<li><a href="/css/" target="_blank">CSS</a></li>
<li><a href="/js/" target="_blank">JavaScript</a></li>
<li><a href="/xml/" target="_blank">XML</a></li>
</ul>
</body>
</html>Renderings:
Remarks: Normally, li is a block element, and each item will occupy one line
4.2. The following example uses the span element as a block element:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS基础学习-将span元素转化为块元素</title>
<style>
span
{
display:block;
}
</style>
</head>
<body>
<h2>Nirvana</h2>
<span>Record: MTV Unplugged in New York</span>
<span>Year: 1993</span>
<h2>Radiohead</h2>
<span>Record: OK Computer</span>
<span>Year: 1997</span>
</body>
</html>Renderings:
Remarks: Normally, span is an inline element and will not wrap
Note: Change the display type of an element to see how the element is displayed and what kind of element it is. For example: an inline element set to display:block is not allowed to have nested block elements inside it.