CSS Display (display) and Visibility (visibility)
The display property sets how an element should be displayed, and the visibility property specifies how an element should be displayed. Visible or hidden.
Hide elements - display:none or visibility:hidden
Hide an element by setting the display attribute to "none" , or set the visibility attribute to "hidden". Note, however, that these two methods will produce different results.
visibility:hidden can hide an element, but the hidden element still needs to occupy the same space as before it was hidden. In other words, although the element is hidden, it still affects the layout.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
h1.hidden {visibility:hidden;}
</style>
</head>
<body>
<h1>这是一个明显的标题</h1>
<h1 class="hidden">这是一个隐藏标题</h1>
<p>注意,隐藏标题仍然占用空间.</p>
</body>
</html>Run the program and try it
display:nonecan be hidden An element, and hidden elements do not take up any space. In other words, not only is the element hidden, but the space originally occupied by the element will also disappear from the page layout.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
h1.hidden {display:none;}
</style>
</head>
<body>
<h1>这是一个明显的标题</h1>
<h1 class="hidden">这是一个隐藏的标题</h1>
<p>注意,display:none 隐藏不占用空间.</p>
</body>
</html>Run the program to try it
CSS Display - Block and Inline elements
The block element is an element that takes up the entire width and is preceded and followed by line breaks.
Example of block element:
Inline elements only need the necessary width and do not force wrapping.
Example of inline elements:
How to change the display of an element
You can change inline elements and block elements, and vice versa, to make the page look put together in a specific way. And still adhere to web standards.
The following example displays list items as inline elements:
<!DOCTYPE html>
<html>
<head>
<style>
li{display:inline;}
</style>
</head>
<body>
<p>这个链接列表显示为一个水平菜单:</p>
<ul>
<li><a href="" target="_blank">HTML</a></li>
<li><a href="" target="_blank">CSS</a></li>
<li><a href="" target="_blank">JavaScript</a></li>
<li><a href="" target="_blank">XML</a></li>
</ul>
</body>
</html>Run the program to try it
Example
The following example uses the span element as a block element
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</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>Run the program to try it
Next Section
