How does the display attribute of css realize the mutual conversion between block-level elements and inline elements?

We know that there are two types of elements in HTML: block-level elements and inline elements. The display attribute can realize the mutual conversion between block-level elements and inline elements in HTML. Without further ado, let’s get straight to the text.

By default, the default display value of paragraph

(block-level element) is block, but it can be rendered as an inline value:

p{ display: inline;}

Why not use an HTML What about inline elements like ?

Because you choose the HTML element for its meaning, not its rendering. If we decide that a paragraph is best for our content, we can't change the tags just for styling purposes. CSS implements styles.

In short, display allows changing the type of an element without changing its meaning.

Each display option has specific rendering behavior:

block will take up the entire width

inline will be treated as plain text

inline-block as it is As the name suggests, is a composite of block and inline behavior, a "best of both worlds" option

list-item is similar to block taking up the entire available width, but displays an additional Bullets

table, table-row and table-cell all have very specific, albeit unexpected, behaviors that make for more interesting layouts

display:block

This will convert any element to a block element.

This technique is often used on links to increase their clickable area and can be easily evaluated by setting the background color.

.menu a{ background: red; color: white;}

<ul class="menu">
  <li>
    <a href="#">首页</a>
  </li>
  <li>
    <a href="#">文章</a>
  </li>
  <li>
    <a href="#">视频</a>
  </li>
  <li>
    <a href="#">登录</a>
  </li></ul>

The effect is as follows:

If we convert these links into blocks, we will increase their target area:

.menu a{ background: red; color: white; display: block;}

The effect is as follows :

display :inline

This will convert any elements to inline elements as if they were just plain text .

It is often used to create horizontal navigation where list items are semantically but not visually useful.

<ul class="menu">
  <li>
    <a href="#">首页</a>
  </li>
  <li>
    <a href="#">文章</a>
  </li>
  <li>
    <a href="#">视频</a>
  </li>
  <li>
    <a href="#">登录</a>

The effect is as follows:

.menu li{ display: inline;}

The effect is as follows:

display: list-item

The only HTML element list-item displayed is (unsurprisingly) the list item

, and the definition description

.

Render list items using bullet points (if in an unordered list

) or using incremental numbers (if in an ordered list

).

Because the rendering of these bullets and numbers varies between browsers and is difficult to style in CSS, display: list-item never uses this rule. In fact,

1. is usually rendered as display: block or display: inline because they are more flexible.

   display: none

   Applying a display: none; HTML element will remove it from your webpage, as if it never existed in your code .

   <p>php中文网</p>
   <p class="class">PHP中文网</p>
   <p>Php中文网</p>

   .class{ display: none;}

   The effect is as follows:
   

   

   There are 3 paragraphs in the code, but only 2 appear, as if the 2nd paragraph never existed .

   visibility: hidden

   CSS properties visibility and display. Slightly similar. The app will hide the element on the page with visibility: hidden; , but it will only make it invisible: it will still take up the space it deserves.

   <p>哈哈哈哈</p>
   <p class="class">哈哈哈哈哈哈</p>
   <p class="class">哈哈哈哈哈哈哈哈</p>
   <p>哈哈哈哈哈哈哈哈啦</p>

   .class{ visibility: hidden;}

   The effect is as follows:

   

   There are 5 paragraphs in the code, only 2 appear, but the space that the hidden paragraph should occupy still exists, but you see less than them.

The above is the detailed content of How does the display attribute of css realize the mutual conversion between block-level elements and inline elements?. For more information, please follow other related articles on the PHP Chinese website!