The display attribute sets how an element should be displayed, and the visibility attribute specifies whether an element should be visible or hidden.
Hidden elements-display:none or visibility:hidden
Hiding an element can be done by setting the display property to “none” or the visibility property 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. In other words, although the element is hidden, it still affects the layout
< span style="color: #ff00ff;">DOCTYPE html>
<html >
<head >
<meta charset="utf-8">
<title >title>
<style >
h1.hidden {visibility:hidden; }
style>
head>
<body >
<h1 >This is a visible headlineh1>
<h1 class="hidden">This is a hidden titleh1>
<p > Note that the hidden title in the example still takes up space. p> span>
body>
html>
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 disappear from the page layout.
DOCTYPE html>
<html >
<head >
<meta charset="utf-8">
<title >title>
<style >
h1.hidden {display:none; }
style>
head>
<body >
<h1 >This is a visible headlineh1>
<h1 class="hidden">This is a hidden titleh1>
<p > Note that the hidden title in the example does not take up space. p> span>
body>
html>
CSS Display-Block and Inline element
The block element is an element that occupies the entire width, with line breaks before and after it.
Example of block element:
-
Inline elements only need the necessary width and do not force line breaks.
Examples of inline elements:
The following example displays list items as inline elements:
DOCTYPE html>
<html >
<head >
<meta charset="utf-8">
<title >title>
<style >
li{display: inline;}< /span>
style>
head>
<body >
<p > The link list is displayed horizontally: p>
<ul >
<li ><a href="/html/" target="_blank"< span style="color: #0000ff;">>HTMLa span>>li >
<li ><a href="/css/" target="_blank"< span style="color: #0000ff;">>CSSa span>>li >
<li ><a href="/js/" target="_blank"< span style="color: #0000ff;">>JavaScripta span>>li >
<li ><a href="/xml/" target="_blank"< span style="color: #0000ff;">>XMLa span>>li >
ul>
body>
html>The following example uses the span element as a block element:
span>
The block element is on its own line
DOCTYPE html>
<html >
<head >
<meta charset="utf-8">
<title >Novice Tutorial (runoob.com)title>
<style >
span
{
display:block;
}
style>
head>
<body >
<h2 >Nirvanah2>
<span >Record: MTV Unplugged in New Yorkspan>
<span >Year: 1993span>
<h2 >Radioheadh2>
<span >Record: OK Computerspan>
<span >Year: 1997span>
body>
html>DOCTYPE html< /span>>
<html >
<head >
<meta charset="utf-8">
<title >title>
<style >
h1.hidden {visibility:hidden; }
style>
head>
<body >
<h1 >This is a visible headlineh1>
<h1 class="hidden">This is a hidden titleh1>
<p > Note that the hidden title in the example still takes up space. p> span>
body>
html>DOCTYPE html>
<html >
<head >
<meta charset="utf-8">
<title >title>
<style >
h1.hidden {display:none; }
style>
head>
<body >
<h1 >This is a visible headlineh1>
<h1 class="hidden">This is a hidden titleh1>
<p > Note that the hidden title in the example does not take up space. p> span>
body>
html>DOCTYPE html>
<html >
<head >
<meta charset="utf-8">
<title >title>
<style >
li{display: inline;}< /span>
style>
head>
<body >
<p > The link list is displayed horizontally: p>
<ul >
<li ><a href="/html/" target="_blank"< span style="color: #0000ff;">>HTMLa span>>li >
<li ><a href="/css/" target="_blank"< span style="color: #0000ff;">>CSSa span>>li >
<li ><a href="/js/" target="_blank"< span style="color: #0000ff;">>JavaScripta span>>li >
<li ><a href="/xml/" target="_blank"< span style="color: #0000ff;">>XMLa span>>li >
ul>
body>
html>DOCTYPE html>
<html >
<head >
<meta charset="utf-8">
<title >Novice Tutorial (runoob.com)title>
<style >
span
{
display:block;
}
style>
head>
<body >
<h2 >Nirvanah2>
<span >Record: MTV Unplugged in New Yorkspan>
<span >Year: 1993span>
<h2 >Radioheadh2>
<span >Record: OK Computerspan>
<span >Year: 1997span>
body>
html>