CSS Basics 14: display attribute settings supplemented by the Box Model

CSS Basics 14: display attribute settings supplemented by the Box Model

I am studying CSS basics 13: The Box Model I blog only explains the CSS box model and does not use many examples for demonstration. This blog

In this article, we will add some knowledge about the box model. This part is very important for the overall layout of webpages. In the past, most of the tables in HTML were used.

And frame labels to carry out the overall layout of the web page. Now we use the most DIV + CSS web page layout. So be sure to master the box model and remember

The roles and usage of content, border, padding, and margin in the box.

First, let's look at an example of a box model with complete elements:

 CSS box model demonstrationThe first box, the second box, and the third box

The running result is:

What elements can be used as a box model? In fact, any HTML tag can be in a box! But there is a difference in the box type, I

We will focus on this issue, which involves the display attribute.

Display attributes:

Set the type of the element's box model, that is, the type of the row element and block-level element.

Frequently available values:

None is not displayed, hide

Inline element (intra-Row Element)

Block-level elements

Inline-block in-line block-level elements

Let's first recall which are block-level elements and intra-row elements.

HTML tags are classified into two categories:

One block-level label (element): a complete block, region. There is a line break after the label ends. Common tags include div p dl table ol ul title.

Intra-row label (element): Used in block-level elements. It cannot represent a complete block, a block, or a part of a row. Tag

There is no line feed after the bundle. Common labels are: font span img input select.

The following example shows how to use the display attribute:

Example 1: set the same width and height for the div and span elements:

 CSS box model demonstrationDiv Area
 Span Area

The running result is:

The preceding results show the width and height of the div area, regardless of the content of the text. The width and height of the span area are not displayed,

The width and height of the text content are different from the box type of the div element and the span element.

Example 2: add another span element, set the same height and width, and set its display attribute to block.

 CSS box model demonstrationDiv Area
 Span area 1
 Span area 2

The running result is:

This time we see two different span elements, because the second span element is set as a block-level element through the display attribute, so the height

And width are displayed.

Example 3: distinguish block-level elements in a row from block-level elements

 CSS box model demonstrationDiv Area
 Span area 1
 Span area 2 welcome to the siege class
 Span Area 3 Welcome To The siege class

The running result is:

The block-level element in a row is still in a row, and other elements can be added to the right of the row. However, block-level elements are not allowed. The second element must be wrapped in a line to display

This is the most direct difference between them.

I have learned so much about the display attribute of the Box Model for the moment. If there are any errors, they will be corrected in time !! I will learn more in-depth knowledge in the future,

I will try again later.