Home > Web Front-end > CSS Tutorial > How does the display attribute of css realize the mutual conversion between block-level elements and inline elements?

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

不言
Release: 2018-11-05 18:01:38
Original
5666 people have browsed it

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;}
Copy after login

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;}
Copy after login
<ul class="menu">
  <li>
    <a href="#">首页</a>
  </li>
  <li>
    <a href="#">文章</a>
  </li>
  <li>
    <a href="#">视频</a>
  </li>
  <li>
    <a href="#">登录</a>
  </li></ul>
Copy after login

The effect is as follows:

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

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

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

The effect is as follows :

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

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>
Copy after login

The effect is as follows:

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

.menu li{ display: inline;}
Copy after login

The effect is as follows:

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

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>
        Copy after login
        .class{ display: none;}
        Copy after login

        The effect is as follows:

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

        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>
        Copy after login
        .class{ visibility: hidden;}
        Copy after login

        The effect is as follows:

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

        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!

  • Related labels:
    source:php.cn
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template