CSS Implementation Box model detailed explanation

This article describes the CSS implementation of the box model, you do not know the CSS implementation of the box model or the CSS to implement the box model of interest, then we will take a look at this article, okay, let's go to the point of conversation

Box model is the core of html+css, understanding this important concept in order to better layout, page layout. The following is the accumulation and summary of their own knowledge of the CSS box model, hope to be useful for beginners.

First, CSS box model concept

CSS CSS box model, also known as box model, contains elements content, padding (padding), Border (border), margin (margin).

The most internal box in the diagram is the actual content of the element, that is, the element box, the outer edge of the element box is the inner margin padding, followed by the border (border), and then the outermost margin (margin), the entire structure of the box model. We usually set the background display area, which is the range of content, padding, border. Margin margins are transparent and do not obscure the surrounding elements.

Then, the total width of the element box = The value of the left and right margin of the width + padding of the element and the value of the left margin and the right margin of the margin + the left-and border width;

The total height of the element box = the value of the upper and lower margin of the padding (element) + The value of the top and bottom margin of the margin + the upper and lower width of the border.

Second, CSS margin merge (overlay)

Two when the adjacent element box meets vertically, the margin is merged, and the height of the merged margin is equal to the value of the higher margin in the outer margin where the merge occurred.

It is easier to understand, so sometimes it is necessary to consider this factor in the actual situation on the page. Of course, the outside of the merger actually has the meaning of existence, such as:

Note that margin merging is only possible with the vertical margin of the block box in the normal document stream. Margins between inline boxes, floating boxes, or absolute positioning are not merged.

CSS reset is also used frequently in the

* {  margin:0;  padding:0;}

Three, box-sizing property introduction

The Box-sizing property is one of the user interface properties and is introduced because it is related to the box model and is likely to be used in CSS reset.

Box-sizing:content-box|border-box|inherit;

(1) Content-box , the default value, allows you to apply the set width and height values to the element's content box. The width of the box contains only the contents.

　　That is, the total width =margin+border+padding+width

(2) Border-box , the width value of the set is in fact the total breadth of the border+padding+element except for margin. The width of the box contains border+padding+ content

That is, the total width =margin+width

Many CSS frameworks will simplify the calculation of box models.

(3) inherit , specifies that the value of the Box-sizing property should be inherited from the parent element

About the use of Border-box:

11 Box width of 100%, but also want to have internal space on both sides, this time with a better
2 Global Settings Border-box Well, first it's intuitive, then it saves time and again, and it has a key role--Let the bounding box use the percent width as usual.

Iv. application and minor problems encountered in the actual development of the frame model.

1 margin out of bounds (margin-top of the first child element and margin-bottom of the last child element)

Take the margin-top of the first child element as an example:

When the parent element does not have a border border, when the Margin-top value of the first child element is set, the Margin-top value is added to the parent element, and there are four workarounds:

(1) Add border to parent element border (side effect)

(2) Set the padding value (side effect) for the parent element

(3) parent element add Overflow:hidden (side effect)

(4) parent element plus predecessor content generation. Recommended

Take the fourth method as an example:

. parent {     width:500px;     height:500px;     background-color:red;       }. Parent:before {     content: "";     display:table;}. Child {     width:200px;     height:200px;     Background-color:green;     margin-top:50px;}

<p class= "Parent" ><p class= "Child" ></p> </p>

2 A box model between browsers.

(1) UL tag in Mozilla default is padding value, and in IE only margin has value.

(2) The difference between the standard box model and IE Model:

The standard box model is the one described above, and the IE model is more like a box-sizing:border-box; Its content width also includes border and padding. The workaround is to add the DOCTYPE declaration to the HTML template.

3 draw a triangle with a box model

<! DOCTYPE html>
The page displays the result:


The above is all the content of this article, if you are not too familiar with the words, you can realize the two sides are easy to master Oh!

Related recommendations:

The box model of HTML and CSS

 
 CSS Layout box model properties