CSS Display and Visibility
##Hidden elements - display:none Or visibility:hidden
The display attribute sets how the element is displayed, and the visibility attribute sets the visibility of the element. display:none does not occupy space, while visibility:hidden although the element is not visible, still occupies the same space. space.
The characteristic of block-level elements is that they occupy the normal width and force line wrapping, such as div, p, h1
Inline elements only occupy the required width and do not force line wrapping, such as span, a.
You can change the display mode of two elements mutually, such as span{display:block;} or li{display:inline;}
The attribute value of visibility can be hidden or visible or collapse , the collapse attribute can be used to hide a row or column of a table without affecting the layout of the table. Replace the position of the hidden element with the same blank space.
CSS Display - Block and Inline Element
The block element is an element that takes up the entire width and is preceded and followed by line breaks.
Examples of block elements:
<h1>
<p>
<div>
Inline elements Only necessary width is required, no line breaks are forced.
Examples of inline elements:
<span>
<a>
How to change the display of an element
Yes Changing inline and block elements, or vice versa, can make a page appear to be put together in a specific way and still adhere to web standards.
The following example uses the span element as a block element:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
span
{
display:block;
}
</style>
</head>
<body>
<h2>标题</h2>
<span>这是一段内容</span>
<span>这也是一段内容</span>
<h2>标题</h2>
<span>内容</span>
<span>也是内容</span>
</body>
</html>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.
Next Section
