CSS Box Model Knowledge Summary

The contents of this chapter:

Knowledge Point One:

Box models: The box model consists of four components with content (element contents), padding (padding), Border (border), boundary (margin), and these four sections contain top/right/bottom/ Left four components.

Take a look at the four components of the box model from a picture downloaded from W3school

Description: The inner part of the element box in the diagram is the actual content (element), the padding is the inner margin (padding), the inner margin renders the background of the element (background), the edge of the padding is the border (border), and the margin is outside the border (margin). The margin is transparent by default, so it does not obscure any subsequent elements (in fact, the margin of the element is the padding of the parent element).

When an element is placed on the page exactly how large the size is, put the declared padding, border, and margin values with the content area. Of course, if an element does not have an inner margin, a border, or an outer margin, its size is only determined by its content. First, ignore the overlay effect of the margin, the formula is as follows:

Total width = left margin + left Border + Left padding + width + right padding + right border + right margin

Total Height = top margin + top border + top padding + height + bottom padding + bottom border + bottom margin

For example, take one of the following examples:

Introduce code:

<p style= "width:500px;" > <p style= "margin:10px; BORDER:5PX solid blue; padding:10px; "> A lot of ways to set up online, currently in a binary way to explain (ID class element) online many of the way, currently in a binary way to explain (ID class element) online a lot of settings, currently in a binary way to explain (ID CL ) </p></p>

The dimensions of the above elements are calculated in total:

Total Width = 5 + + 450+ + 5 + = 500px

Total Height = 5 + + 72+ + 5 + = 122px

Knowledge Point two:

After a preliminary understanding of the box model, we took into account the following scenarios:

1. Relative positioning or no positioning (default = position is static)

Introduce code:

<! DOCTYPE html>

 



The width of the block is an extension that fills the width area of its parent element automatically.

2. Floating float element and absolute positioning element (with wrapping, by setting display:table; also can achieve the wrapping effect, can set up to see the effect)


 

Introduce code:

<! DOCTYPE html>

 



3. particularity: The style of setting p is box-sizing:border-box;


 

Introduce code:

<p style= "width:500px;" > <p style= "margin:10px; BORDER:5PX solid blue; padding:10px; width:300px; Box-sizing:border-box; "> A lot of ways to set up online, currently in a binary way to explain (ID class element) online many of the way, currently in a binary way to explain (ID class element) online a lot of settings, currently in a binary way to explain (ID CL ) </p></p>

 


Found content width: Border Width +padding width + content width

4. Margin properties of the box model:



If two elements are put together, the corresponding margin is vertically only for its large