The box model is the core basic knowledge in html+css. Only by understanding this important concept can you better typeset and lay out the page. The following is the knowledge I accumulated and summarized about the css box model_ , I hope it is useful for beginners.
1. The concept of css box model
The CSS css box model is also known as the box model, which contains elements of content, padding, border, and margin. As shown:
The innermost box in the figure is the actual content of the element, that is, the element box. The inner margin padding is immediately outside the element box, followed by the border, and then the outermost layer is the margin. The whole composition The box model. Usually the background display area we set is the range of content, padding, and border. The margin is transparent and will not obscure other surrounding elements.
Then, the total width of the element box = element width + padding left and right margin values + margin left and right margin values + border left and right width;
The total height of the element box = the height of the element + the value of the top and bottom padding of the padding + the value of the top and bottom margins of the margin + the top and bottom width of the border.
2. CSS margin merge (overlay)
When two adjacent element boxes in the vertical direction meet vertically, the outer margins will be merged, and the height of the merged outer margin is equal to the higher margin value of the two merged outer margins, as shown in the figure:
It's easier to understand, so you need to consider this factor when you encounter actual situations on the page. Of course, merging margins actually has meaning, as shown in the figure below:
It should be noted that only the vertical margins of the block boxes in the normal document flow will merge the margins. The margins between inline boxes, floating boxes, or absolute positioning will not merge.
Also often used in css reset
* { margin : 0; padding : 0;
}
Three, box-sizing attribute introduction
The box-sizing attribute is one of the user interface attributes. The reason for introducing 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, which allows the set width and height values to be applied to the content box of the element. The width of the box only contains content.
That is, total width=margin+border+padding+width
(2) border-box, the width value set is actually the total width of border+padding+element except margin. The width of the box contains border+padding+ content
That is, the total width = margin + width
Many CSS frameworks simplify the calculation method of the box model.
(3) inherit, which specifies that the value of the box-sizing attribute should be inherited from the parent element
About the use of border-box:
1 A box with a width of 100% and an inner space on both sides is better. This is better.
2 The global setting of border-box is very good. First of all, it is intuitive, and secondly, it can save time and time again. 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 is out of bounds (the problem of the margin-top of the first child element and the margin-bottom of the last child element)
Take the margin-top of the first child element as an example:
When the parent element has no border, when the margin-top value of the first child element is set, the margin-top value is added to the parent element. There are four solutions:
(1) Add a border to the parent element (side effect)
(2) Set the padding value to the parent element (side effect)
(3) Add overflow to the parent element: hidden (side effect)
(4) Parent element plus pre-content generation. (recommend)
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 only margin has a value in IE.
(2) The difference between the standard box model and the IE model:
The standard box model is the one introduced above, and the IE model is more like box-sizing: border-box; its content width also includes border and padding. The solution is to add a doctype declaration in the html template.
3 Draw a triangle with a box model
<!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 page display result is:
