• Define and use display

    Property specifies the type of box the element should generate.Copy the code

Description: This property defines the type of display box that elements generate when creating a layout. For document types such as HTML, using display carelessly can be dangerous because it can violate the display hierarchy already defined in HTML. With XML, since XML does not have such a built-in hierarchy, all display is absolutely necessary.

Common attribute values:

value describe
inline The default. This element is displayed as an inline element (inline element) with no line breaks before or after the element.
none This element will not be displayed.
block This element is displayed as a block-level element, preceded by a newline character.
inline-block Inline block elements. (New value in CSS2.1)
list-item This element is displayed as a list.
What are inline and block-level elements in HTML?
  • In HTML, elements are divided into inline elements and block-level elements.
  • Inline elements are written without wrapping and have no width or height.
  • Block-level elements are wrapped after being written, and the width and height can be changed.
  • There is also a special type of element called an inline block element.

Roughly:

Line elements include: heda meat title lable span BR a style em B I strong

Body from select Textarea H1-H6 HTML table button HR P OL ul DL cnter div

Common inline block elements are: img Input TD

So those are the common inline elements and block level elements, and the common inline block elements

Example 1: How to display elements as inline elements (inline elements)

<html>
<head>
<style type="text/css">
p {display: inline}
div {display: none}
</style>
</head>

<body>
<p>The stylesheet in this example sets the paragraph element to be an inline element (inline element).</p>

<p>The div element doesn't show up!</p>

<div>The contents of the div element are not displayed!</div>
</body>
</html>
Copy the code



Example 2: How do I display elements as block-level elements

<html>
<head>
<style type="text/css">
span
{
display: block
}
</style>
</head>
<body>

<span>The stylesheet in this example sets the SPAN element as a block-level element.</span>
<span>A line break occurs between the two SPAN elements.</span>

</body>
</html>
Copy the code