what is css box model

css box model is also called the box model. The innermost part of the box is the actual content of the element, that is, the element content. Next to the outside of the element box is the inner margin, followed by the border, and then the outermost layer is the outer margin. This Several parts together form the box model

The box model is the core basic knowledge in html css. Only by understanding this important concept can we do better typesetting and page layout. The following is a summary of the knowledge about the CSS box model. I hope it will be helpful to everyone.

1. Concept of css box model

CSS css box model, also known as box model (Box Model), contains element content (content), padding, border, and margin. As shown in the picture:

The innermost box in the picture is the actual content of the element, that is, the element box, which is immediately outside the element box. The first is the padding, followed by the border, and then the outermost layer is the outer margin, which constitutes the box model. Usually the background display area we set is the range of content, padding, and borders. The outer margin is transparent and will not block other surrounding elements.

Then, the total width of the element box = the width of the element (element), the value of the left and right margins of the padding, the value of the left and right margins of the margin, the left and right width of the border;

Element The total height of the box = the value of the top and bottom margins of the height padding of the element, the value of the top and bottom margins of the margin + the top and bottom width of the border.

2. CSS margin merging (overlay)

When two element boxes adjacent in the upper and lower directions meet vertically, the margins will be merged, and the merged margins will The height of is equal to the higher of the two merged margins, as shown in the figure:

is relatively easy to understand, so sometimes you need to consider this factor when encountering actual situations on the page. Of course, merging margins also has meaning, as shown below:

It should be noted that only the block boxes in the ordinary document flow Margin merging occurs only with vertical margins. Margins between inline boxes, floated boxes, or absolutely positioned boxes are not merged.

It is also often used in css reset

* {
  margin : 0;
  padding : 0;
}

3. Introduction to box-sizing attribute

The box-sizing attribute is in the user interface attribute One, the reason why I introduce it is because this attribute is related to the box model, and it may be used in css reset.

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

(1) content-box , the default value, allows the set width and height values ​​to be applied to the content box of the element. The width of the box only contains the content.

That is, total width = margin border padding width

(2) border-box, the set width value is actually the total width of the border padding element except margin. The width of the box includes the border padding content

That is, the total width = margin width

Many CSS frameworks will simplify the calculation method of the box model.

(3) inherit , stipulates that the value of the box-sizing attribute should be inherited from the parent element

About the use of border-box:

1. The width of the box is 100%, and you want inner spacing on both sides. It is better to use it at this time.

2. Setting the border-box globally is very good. First of all, it is intuitive, and secondly, it can save you time and time again. Plus, minus, it also has a key role - to allow boxes with borders to use percentage widths normally.

4. Applications and minor problems related to the frame model encountered in actual development.

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

Take the first The margin-top of a child element is an example:

When the parent element has no border, when setting the margin-top value of the first child element, the margin-top value will be added to the parent element. There are four solutions to this phenomenon:

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

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

(3) The parent element adds overflow: hidden (side effect)

(4) The parent element adds prefix content to generate. (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;}
<div class="parent">    
<div class="child"></div> </div>

2. Box model between browsers.

(1) The ul tag has a padding value by default in Mozilla, but in IE only margin has a value.

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

The standard box model is the one introduced above, while the IE model is more like box-sizing: border-box ; Its content width also includes border and padding. The solution is: add a doctype statement to the html template.

3. Use the box model to draw triangles

<!DOCTYPE html><html>
  <head>
    <style>
        .triangle {
            width : 0;
            height: 0;
            border : 100px solid transparent;
            border-top : 100px solid blue; /*这里可以设置border的top、bottom、left、right
            四个方向的三角*/
        }
    </style>
  </head>
  <body>
    <div class="triangle"></div>
  </body></html>

页面显示结果为：

The above is the detailed content of what is css box model. For more information, please follow other related articles on the PHP Chinese website!