Deep understanding of CSS box models

Some basic concepts

Most elements of HTML are block-level or inline (inline) elements

Block-level elements

By default, block-level elements start on a separate line and fill as much of the container as possible.
Block-level elements can contain inline elements and other block-level elements, and can create more complex and large structures than inline elements

Block-level element list:

HTML5 new elements:
Figcation: Graphic Information Group title, article: article, figure: Graphic Information Group
Output: Form out, aside: Sidebar content, footer: End of section or footer, audio: playback
Video: Videos, section: page sections, canvas: Canvases, drawing graphics, Header: section header or page header
Hgroup: Header Group,

Address: Contact information, OL: Sequential list, p: line, form: form, pre: preformatted text, Blockqute: block reference
H1-h6: Title, table: Table, DD: Item description in list, DL: Definition list, DIV,HR: Horizontal Split Line

In-line elements

The inline element does not have another row that occupies only the space that contains the contents of the bounding rectangle of its corresponding label.
can only contain data and other inline elements

In-line element list

B,big,i,small,tt,
Abbr,acronym,cite,code,dfn,em,kbd,strong,samp,var,
A,bdo,br,img,map,object,q,script,span,sub,sup,
Button,input,label,select,textarea

The difference between a block-level element and an in-line element

Block-level elements:
1. There will be another line,
2. You can set the Width,height,margin,padding,border property
3. The default width is 100% of the container

Inline elements:
1. Within the same line as other elements
2. Height and width are the height and width of the content
3. Margin-left and Margin-right properties can be set, Margin-top and Margin-bottom properties cannot be set
4.border and padding can be set, but Border-top and padding-top are no longer added after the top of the page

Normal flow

Normal flow means: From left to right, from top to bottom. The only way to make an element out of the normal flow is to let the element float or position

Non-replacement elements

If the content of an element is contained in a document, it is called a non-replacement element. For example, the text of a paragraph is within the element itself, and this paragraph is a non-replacement element.

Replace element

An element that is a placeholder for other content is called a replacement element, and the elements of the content are displayed based on the values of the labels and attributes. Like an IMG element, it just points to an image file, which is inserted into the document stream. Most form elements (input, which display content based on the Type property) are also replacement elements.

root element

At the top of the document tree, which is the HTML element in the HTML document

Box model

Each element in the HTML document is depicted as a rectangular box that describes its footprint through a model called a box model. The box model is described by four boundaries: margin (margin), border (border), padding (inner margin), content (contents area),:

Some hints on CSS box model

The 1.padding,border,margin is optional and the default value is 0, but the browser sets the margin and padding of the element itself, by setting it in the CSS style sheet

*{     margin:0;     padding:0}

To override the browser style. NOTE: Here the * represents all elements, but this is not a good performance, it is recommended to list commonly used elements to set

2. If you set the background for an element and the color of the border is transparent, the background applies to the area of content, padding, and borders.

3. Browser compatibility
Once the appropriate DTD has been set for the page, most browsers will render the content as shown above. However, the rendering of IE 5 and 6 is not correct.
According to the specification, the space occupied by the element content is set by the Width property, and the padding and border values around the content are calculated separately.
Unfortunately, IE5. X and 6 use their own non-standard models in quirks mode. These browsers have a width property that is not the contents, but the sum of the content, padding, and width of the border.

Horizontal formatting of non-replacement elements horizontally

The 7 major properties of horizontal formatting are: Margin-left,border-left,padding-left,width,padding-right,border-right,margin-right. These 7 attribute values often add up to the width value of the parent element.

Where margin-left,width,margin-right can be set to auto.
There are several main situations:

A property is set to Auto

If one of the three properties is set to auto and the remaining two is a specific value, setting auto's property to determine the desired element so that the width of the element box is equal to that of the parent element.

Example

HTML code

class="parent">      class="block" > block-level elements </span>  </div>

CSS Code

. parent{    width:600px} div {    00;}. Block {    00  ;    Display:block;    Margin-left:auto;    Margin-right:100px;    padding:30px;    width:100px;}

The value of the Margin-auto property set to Auto is 340px, which is margin-left+border-left+padding-left+width+padding-right+border-right+ margin-right=340+0+30+100+30+0+100=600

Sum is not equal to the width of the parent element

Use Auto to compensate for the difference between the actual value and the desired sum, if the three attributes have a specific value set, but the sum is not equal to the width of the parent element.
Modify the Margin-left in the example above to 100px, i.e.

. Block {    00;    Display:block;    Margin-left:100px;    Margin-right:100px;    padding:30px;    width:100px; }

In the above CSS, margin-left,width,margin-right all set a specific value, but the sum of the seven attributes is not equal to the width of the parent element. In this case:
In FF, the value of Margin-right is the value set by the developer
In Chrome, Margin-right is forced to auto

Width set to Auto

If Margin-left and Margin-right both set a specific value and width is set to auto, width will be equal to a specific value to reach the width of the parent element.
If you modify width to auto, that is:

. Block {    00;    Display:block;    Margin-left:100px;    Margin-right:100px;    padding:30px;    Width:auto; }

The width of the element is set to 340px so that the sum reaches the width of the parent element

Margin-left and Margin-right are set to auto

If both Margin-left and Amrgin-right are set to auto, they will set an equal value, so the element will be centered in the parent element. This is a way to center a block-level element. Note: Text-align is set to center only for inline content in block-level elements, and does not center the block-level element.
Set the margin property to margin:0 Auto

The values of Margin-left and margin-right are set to equal so that the elements are centered

A margin and width are set to auto

If you set a margin and width to auto, the margin set to auto fills the parent element with the value that 0,width will set to the values that you want.

. Block {    00;    Display:block;    Margin-left:auto;    Margin-right:100px;    padding:30px;    Width:auto;}

Set Margin-left and width to auto, then Margin-left will be set to 0,width will be set to 440px to satisfy the width of the parent element

All set to Auto

If both margin and width are set to auto, the two margins will be set to 0,width as wide as possible.

. Block {    00;    Display:block;    Margin-left:auto;    Margin-right:auto;    padding:30px;    Width:auto;}

Three values are set to auto, two margins will be set to 0,width will be set to 540px

Negative outer margin

7 properties As long as the value is greater than or equal to 0, the sum is always equal to the width of the parent element and does not exceed the area of the parent element
However, you can get a larger area than the parent element width by making a negative margin

. Block {    00;    Display:block;    Margin-left:100px;    Margin-right:-400px;    padding:30px;    Width:auto;}

Set Margin-right to -400px, the element is greater than the parent element width, because 100+0+30+840+30+0-400=600, the width of the element is 840px

The horizontal formatting of the replacement element

The horizontal formatting rules of the replacement element are similar to the rules for non-replacement elements, with only one width being different, and if width is set to auto, the width of the element is the intrinsic width of the content. NOTE: For an IMG tag, if width is not equal to its intrinsic width, the height will also increase proportionally unless a specific value is set. Conversely, if height is set, width will increase proportionally.

Vertical formatting

Similar to vertical formatting and horizontal formatting, there are also 7 related properties: Margin-top,border-top,padding-top,height,padding-bottom,border-bottom,margin-bottom, The sum of these 7 attributes must be equal to the height property of the parent element.
where Margin-top,margin-bottom and height can be set to auto
When the Margin-top and margin-bottom of a block element in a normal flow are set to auto, it is set to 0, that is, the element cannot be centered vertically, and actually the element has no margin. Positioning elements if set to auto has different processing results.

If the height of the normal flow element is set to auto, its height will be set to the sum of the heights of its content elements.

Vertical margin Merge

Vertical margin Merge: When two vertical margins meet, they form an outer margin. The height of the merged margin is equal to the greater of the two of the height in which the merged margins occur.

Example:

HTML code

class="M20"class="M10"> Margin 10px </ Div>

CSS Code

. m20 {padding:20px;}. M10 {padding:10px;}

, the margins for the two div tags are 20px,10px, but the distance between the final two Div is 20px, not 20+10=30px

box model for inline elements

Inline elements also have a box model, but there are a few things to note:

1. For non-replacement elements, such as a,span tags, etc.
(1) Margin-left and Margin-right properties can be set, Margin-top and Margin-bottom properties cannot be set
(2) Inline elements border and padding can be set, but Border-top and padding-top are no longer added after the top of the page

2. For replacement elements, such as input,img tags

Margin,padding,border are effective.

Deep understanding of CSS box models