Shulou(Shulou.com)06/03 Report--

This article mainly explains "the detailed introduction of CSS box model", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "the detailed introduction of the CSS box model".

In order to position (layout) each element in the document tree, the browser generates four nested rectangles for each element, called content box, padding box, border box and margin box, respectively, based on the rendering model (which is about how the elements are positioned and laid out on the page, including position and float, visual formatting model, etc.).

The four types mentioned above are inseparable and may overlap. This is the "box model" described in the CSS specification, which is the abstract form of an element rendered from a CSS point of view. It is about the components of an element itself, which is different from the layout: the positioning of multiple elements on the page.

The large box above represents the rectangular area generated by an element, that is, box, and each box includes a content area (the content of the element, such as text, graphics, etc.) and the surrounding padding (the inner margin of the element, the fill), border (the border of the element), and margin (the outer margin of the element). Padding, border and margin regions all include four parts: top, right, bottom and left. As shown in the figure ("LM" for left margin, "RP" for right padding, "TB" for top border... ).

Boundary

The above four regions (content, padding, border and margin) have their own boundaries. To refine, each region has four boundaries: top, right, bottom and left.

◆ content Boundary / Inner Boundary

The Content boundary surrounds a rectangle determined by the width and height of the element, which is usually determined by the rendered content of the element. The rectangle formed by the four content boundaries is the content box of the element.

◆ padding boundary

The Padding boundary surrounds the padding area of the element and, as the name implies, fills in the background color, which is valid within this range. If the width of the padding is 0, the padding boundary coincides with the content boundary. The rectangle formed by the four padding boundaries is the padding box of the element.

◆ border boundary

The Border boundary surrounds the border area of the element, and if the width of the border is 0, the border boundary coincides with the padding boundary. The rectangle formed by the four border boundaries is the border box of the element.

◆ margin Boundary / Outer Boundary

The Margin boundary surrounds the margin area of the element, and if the width of the margin is 0, the margin boundary coincides with the border boundary. The rectangle formed by the four margin boundaries is the margin box of the element. Let's talk about each part separately. A simple example from the W3C official:

Examples of margins, padding, and borders UL {background: yellow; margin: 12px 12px 12px 12px; padding: 3px 3px 3px 3px; / * No borders set * /} LI {color: white; / * text color is white * / background: blue; / * Content, padding will be blue * / margin: 12px 12px 12px 12px; padding: 12px 0px 12px 12px / * Note 0px padding right * / list-style: none / * no glyphs before a list item * / / * No borders set * /} LI.withborder {border-style: dashed; border-width: medium; / * sets border width on all sides * / border-color: lime;} First element of list Second element of list is a bit longer to illustrate wrapping.

Schematic diagram:

Margin

Margin' is an abbreviation for 'margin-top',' margin-right', 'margin-bottom',' margin-left', indicating the size range of the margin. Its value can be one of the width value, the percentage value, or 'auto'. Note: the width value must have a unit.

Margin abbreviation

1. The above four values are assigned in the order of above, right, bottom, and left.

CSS codemargin: 1px 2px 3px 4px

Equivalent to:

CSS codemargin-top: 1px margin-right: 2px margin-bottom: 3px margin-left: 4px

Remember, from the top, rotate once clockwise.

two。 Assign values in the order of up and down, left and right

CSS codemargin: 1px 2px

Then it is equivalent to:

CSS codemargin-top: 1px margin-right: 2px margin-bottom: 1px margin-left: 2px

This assignment method is suitable for the abbreviated assignment of *-top,*-right,*-bottom,*-left, such as padding,border-width,border-color, which is not described below.

What elements can be applied to?

Elements that are not table types, as well as table-caption, table and inline-table types in table types. For example, TD TR TH and so on, margin is not applicable.

When is it invalid?

Margin in the vertical direction does not work for inline non-replacement elements, such as SPAN. For example:

Ddd

As you can see, the upper and lower border of the DIV is next to the gray SPAN element.

Margin folding

The adjacent margin of different elements in the vertical direction will collapse in some cases. For example, if two div are adjacent to each other, the margin-bottom of the upper DIV will fold with the margin-top of the lower DIV, and the two will overlap into one with a larger width. For example:

The upper and lower DIV are eventually separated by 100px, not 150px.

Padding

Padding is the abbreviation of 'padding-top',' padding-right', 'padding-bottom',' padding-left'. The method of assignment is the same as margin, except that there is no 'auto' value. The default value is 0.

Elements to which it can be applied

Except for all elements whose display values are 'table-row-group',' table-header-group', 'table-footer-group',' table-row', 'table-column-group' and' table-column'.

Border

Border is a complicated thing. It is' border- top', 'border-right',' border-bottom', 'border-left'. Don't think that it just sets width like the previous padding and margin.

Border consists of three parts, 'border-width','border- color','border-style', is used to set its width, color and style, respectively. It applies to any element.

Border-width is' border-top-width', 'border-right-width',' border-bottom-width', 'border-left-width'. The default value is 0. The available values are 'thin','medium','thick', and commonly used numeric values with unit width.

Border-color is an abbreviation for 'border-top-color',' border-right-color', 'border-bottom-color',' border-left-color'. The default value is the value of the 'color' property.

Border-style is an abbreviation for 'border-top-style',' border-right-style', 'border-bottom-style',' border-left-style'. The default value is the value of the none property. Available values are: 'none','hidden','dotted','dashed','solid','double','groove','ridge','inset','outset', is interested can try the effect one by one.

At this point, I believe you have a deeper understanding of the "detailed introduction of the CSS box model". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.