CSS Display
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中文網(wǎng)(php.cn)</title>
<style>
h1.hidden {visibility:hidden;}
</style>
</head>
<body>
<h1>這是一個(gè)明顯的標(biāo)題</h1>
<h1 class="hidden">這是一個(gè)隱藏標(biāo)題</h1>
<p>注意,隱藏標(biāo)題仍然占用空間.</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中文網(wǎng)(php.cn)</title>
<style>
h1.hidden {display:none;}
</style>
</head>
<body>
<h1>這是一個(gè)明顯的標(biāo)題</h1>
<h1 class="hidden">這是一個(gè)隱藏的標(biāo)題</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:
<h1>
<p>
<div>
Inline elements only need the necessary width and do not force wrapping.
Example of inline elements:
- ##<span> ##<a>
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: Run the program to try it Example The following example uses the span element as a block element Run the program to try it <!DOCTYPE html>
<html>
<head>
<style>
li{display:inline;}
</style>
</head>
<body>
<p>這個(gè)鏈接列表顯示為一個(gè)水平菜單:</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><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>
