Detailed description of CSS box model and block-level, inline elements

This article details CSS box models and block-level, inline elements

First, CSS box model

Box Model Overview

The box model is one of the core knowledge points of CSS, which specifies how elements are displayed and how they interact with each other. Each element on the page is treated as a rectangular box that consists of the element's contents, padding, borders, and margins. As shown in the following:

The inner margin appears around the content area. If you add a background to an element, the background is applied to the area of the element's content and padding. You can therefore create a barrier around the content with the padding so that the content is not blended with the background. Adding a border adds a line outside the inner margin area. These lines can have different styles and widths, with a line of truth, dashed lines, and dots. Outside the bounding rectangle is the margin, which is transparent, and it is generally used to control the spacing between elements.

The padding, borders, and margins can be applied to all edges of an element or to individual edges, such as:

padding-top:20px; Set the upper padding padding:15px for the elements individually; All the inner margins of the element are 15pxpadding:1px 2px 3px 4px; Set the padding for each edge separately, with the order of upper right lower left/* margin margin usage and internal margin padding*/border-top:1px solid #ccc; Sets the top border of the element individually border:2px dashed #000; Set borders for all edges

Box model in standard mode and promiscuous mode

What is standard mode and promiscuous mode

When browser vendors start to create a standard-compatible browser, they want to ensure backward compatibility. To achieve this, they created two rendering modes: Standard mode and promiscuous mode. The browser renders the page in standard mode, and in promiscuous mode, the page is displayed in a more relaxed backward-compatible manner. Promiscuous mode typically simulates the behavior of older browsers to prevent old sites from working.

How to differentiate between standard mode and promiscuous mode

The browser chooses which rendering to use based on whether the DOCTYPE (document declaration) exists and uses that DTD. If XHTML and HTML documents are guaranteed to be complete doctype, then it is generally rendered in standard mode. Conversely, HTML and XHTML are rendered in promiscuous mode if the DOCTYPE of the document does not exist or if the form is incorrect.

Box model in two modes

The actual width of the box in standard mode is:

Width + padding-left + padding-right + border-left-width + border-right-width

The actual height is:

Heigth + padding-top +padding-bottom + border-top-width + border-bottom-width

The actual width of the box in promiscuous mode is: the width value set in the CSS and the height of the setting. Of course, without setting the overflow, if the contents of the box, padding, or the value of the border is larger, the box will be opened, the actual width and height is greater than the set value.

Second, block-level elements and inline elements

When we do the page layout, we generally divide the HTML elements into two types, that is, block-level elements and inline elements.

Block-level elements: blocks elements repel other elements on the same line, you can set the element's width (width) and height (height), block-level elements are generally containers for other elements, and can accommodate block-level elements and inline elements. Common block-level elements are Div, p, h1~h6, and so on.

Inline elements: Inline elements cannot be set to width (width) and height (height), but can be on the same row as other inline elements, and in-line elements may not generally contain block-level elements. The height of the inline element is generally determined by the font size inside the element, and the width is controlled by the length of the content. Common inline elements are a, EM, strong and so on.

For example, we can apply the following style to Div or p, but the a tag does not apply the following style.

Of course we can also change the way elements are displayed by using the Display property of the style. When the value of display is set to block, the element is rendered in block-level mode, and when the display value is set to inline, the element is rendered in inline form. So we can apply the following style to the A tag: