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.

Continuing Learning

new file

<!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>

submit Reset Code

Automatic operation

CSS Display and Visibility

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]