Html + css box model is the core foundation of knowledge and understanding of this important concept in order to better typography, page layout. Here is knowledge about css box model of their accumulated and summarized ^ _ ^ hope useful for beginners.
A, css box model concept
CSS css box model, also known as box model (Box Model), contains the element content (content), Padding (padding), border (border), margins (margin) of several elements. Figure:
FIG innermost block is the actual content of the element, i.e. the element housing, next to the external frame element is padding padding, followed by a border (border), then the outermost layer is margins (margin), the whole constituting the box model. We usually set the background display area, it is the content, padding, borders, this one range. The outer margin margin is transparent and does not block other elements around.
Then, width = total width of the element frame element (element) + padding the left and right margins of the pitch value + left margin and right margin value + left border width;
height = total height of the box element element (element) + value of the padding of the top and bottom margins of the top and bottom margins + value + margin of the vertical width of the border.
Two, css margins merge (overlay)
When the encounter, margins merges vertically adjacent two vertical frame elements, from the outside of the combined height of the two margin value equal to the combined occurrence of higher margins, as shown:
Easier to understand, so the page is sometimes encountered in actual need to consider this factor. Of course, margins have actually merged the meaning of existence, as shown below:
Note that: only the vertical outer housing block normal document from the merged stream will occur margins. Outside the lines between the inner box, float or absolute positioning distance will not be merged.
css reset will also frequently used
* { margin : 0; padding : 0; }
Three, box-sizing property description
box-sizing property is an attribute in a user interface, why introduce it, because this property with the box model, but also to the css reset likely will need it.
box-sizing : content-box|border-box|inherit;
(1) content-box, the default value may be set so that the width and height values are applied to the contents of the box element. Box width contain content only.
I.e., total width = margin + border + padding + width
(2) border-box, width value is actually the total width of the border + padding + element except the margin. Width of the box border + padding + content comprising
I.e., total width = margin + width
Many CSS frame, box model calculation method will be simplified.
(3) inherit, the predetermined value should inherit parent element attribute box-sizing
On border-box use:
1 a box width is 100%, and the desired spacing on both sides, this time with a relatively good
2 good global settings border-box, first it is intuitive, it is dispensed followed by simple calculations again and again, it also has a key role - so that there is a border of normal use of the percentage of the width of the box.
Fourth, the actual development and application encountered a small problem and box model dependent.
1 margin out of range (margin-bottom margin-top and the last child element of the first child element of the problem of cross-border)
Margin-top to the first child of an example:
When the parent element has no border border, set up the first child of margin-top value of time, there will be margin-top value plus the phenomenon on the parent element, there are four solutions:
(1) add a border to the parent element border (side effects)
(2) Set padding value (side effects) to a parent element
(3) the parent element to add overflow: hidden (side effects)
(4) adding the parent element pre-generated content. (recommend)
In a fourth method, for 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>
Box model between the two browsers.
(1) ul default tag is in Mozilla padding value, and only in the margin has a value IE.
(2) the difference between a standard IE box model and model:
Standard box model that is described above, the model is more like IE box-sizing: border-box; the contents of the border width and further comprising padding. The solution is to: increase the doctype html in the template.
3 with the box model triangle Videos
<!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>
Page shows the results:
-----------------------
Original link address: https: //www.cnblogs.com/clearsky/p/5696286.html