This is the 8th day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021.

Iii. Label Display Mode

3.1. What is the label display mode

How tags are displayed, for example, div on its own line, or SPAN on a single line. There are many tags on our webpage, and different types of tags will be used in different places, so as to better complete our webpage. HTML tags are generally divided into block tags and inline tags, which are also called block elements and inline elements.

3.2 block level Elements (block-level)

Common block elements include < H1 >~<h6>, < P >, <div>, <ul>, < OL >, <li>, etc., among which the <div> tag is the most typical block element.

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>
<body>
    <div>I'm a div element, I'm a block-level element</div>
    <p>I'm a P element, block element</p>
</body>
</html>
Copy the code

Characteristics of block-level elements

(1) More domineering, their own line

(2) Height, width, margins and margins can be controlled.

(3) The width defaults to 100% of the container’s parent width

(4) is a container and box that can release internal or block-level elements.

Note:

  • Only words can form a paragraph sopYou can’t put block-level elements inside a tag, especiallypLabels cannot be placeddiv> tag.
  • The same goes for these labelsh1.h2.h3.h4.h5.h6.dtThey are text block-level tags and cannot contain other block-level elements.

3.3 inline Elements (Inline-level)

Common inline elements include < A >, <strong>, <b>, <em>, < I >, <del>, < S >, <ins>, <u>, < SPAN >, among which the < SPAN > tag is the most typical inline element. Also called inline elements in some places.

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>
<body>
    <span>I'm a SPAN element, I'm an inline element</span>
    <a href="#">I'm an A tag, and I'm also an inline element</a>
</body>
</html>
Copy the code

Characteristics of inline elements:

  1. Elements in adjacent rows are on a single line. Multiple elements can be displayed on a single line.

  2. Height and width Settings are invalid.

  3. The default width is the width of its own content.

  4. Inline elements can only hold text or other inline elements.

Note:

  1. You can’t put a link inside a link.

  2. Special case A can have block-level elements, but it is safest to switch block-level mode for A.

3.4 Inline-block Elements

There are several special tags <img />, <input />, < TD > that you can set width, height, and alignment on inline elements, and some sources might call them inline block elements.

Characteristics of inline block elements:

(1) and adjacent inline elements (inline blocks) are on a line, but there are gaps between them. A line can display more than one (2). The default width is the width of its content. (3) Height, line height, margins and margins can be controlled.

3.5. Summarize the differences between the three modes

Element model Elements are arranged Set the style The default width contains
Block-level elements Only one block element can be placed in a row You can set the width height 100% of the container The container level can contain any tag
Inline elements A row can contain multiple inline elements The width height cannot be set directly The width of its own content Holds text or other inline elements
Inline block elements Put multiple inline block elements in a row You can set the width and height The width of its own content

3.6 label display mode conversion display

  • Block inline: display:inline;
  • Inline block: display:block;
  • Display: inline-block; display: inline-block;