css--box model and cascading relationships

Cascading Style Sheets (full name: Cascading style Sheets) 1. Introduce the standard CSS box model. What's different about the box model of the low version ie.

1.1 Category: IE box model and standard box model

1.2 Box Model: content, padding, border, margin

1.3 Differences

In the box model: the width of the width=content of the element

IE Box Model: the Width=content+padding+border of elements

For example a box model is as follows: margin:20px,border:10px,padding:10px;width:200px;height:50px;

If you use the box model to explain,
Then the box model occupies a width of: * 2+10 * 2+10 * 2+200=280px;
Height: * 2+10 * 2+20 * 2+50=130px;
The actual width of the box is: Ten * 2+10 * 2+200=240px;
Actual height: ten * 2+10* 2+50=90px;

Use the box model of IE to explain: the box occupies the size of the Web page is 20*2+200=240px; High: * 2+50=90px;

Box-sizing–border-box and Content-box

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

I personally think that the World Wide definition box model and IE defined box model, IE definition is reasonable, the width of the element should contain border (border) and padding (fill), this and our real life box is the same, the Internet has recognized its own problems, So there's a new style box-sizing in CSS3 that contains two properties Content-box and Border-box.

(1) Content-box (default is Content-box)
The width and height are applied to the element's content box, respectively.
Draws the inner margin and border of the element outside the width and height.

The element width is 250px
. test1{  
    Box-sizing:content-box;  
    width:200px;  
    padding:10px;  
    border:15px solid #eee;  
}  

(2) Border-box
The width and height set for the element determines the bounding box of the element.
That is, any padding and borders specified for the element will be drawn within the set width and height.
The width and height of the content can be obtained by subtracting the border and padding from the set width and height.

The element width is 200px
. test1{  
    Box-sizing:border-box;  
    width:200px;  
    padding:10px;  
    border:15px solid #eee;  
}  

2. Stacking order (stacking level) and cascading contexts (stacking context)

Hierarchy of control elements
1.z-index
2. Cascading contexts
3. Cascade level (determines the stacking order of a cascading context element)

Z-index

– An integer creates a new cascading context, and auto does not create a new cascading context

1.auto, default value. When set to auto, the current element cascade is 0, and the box does not create a new hierarchy context (unless it is the root element, i.e.);
2.. Indicates the cascade progression, which can cause negative values, and creates a new cascade context regardless of the value;
3.inherit. Parent element Inheritance

Z-index is only positioned on elements (except position=static, because the element defaults to static, which is equivalent to a useless position style).

. top{
    width:200px;
    height:200px;
    Background:black;
    z-index:100;//, although added Z-index, but still bottom cover top, because Z-index only in the positioning element function
}
. bottom{
    width:200px;
    height:200px;
    background:red;
    Margin-top: -100px;
}
<div class= "Top" ></div>
<div class= "Bottom" ></div>

why an absolutely positioned element overrides a common element

Once an element becomes a positioning element, its z-index automatically takes effect, at which point the Z-index is the default auto, which is the 0 level, which overrides the inline or block or float elements according to the cascading order table above.

Well- known 7 levels of stacking – can reduce the use of Z-index

Each element in the cascading context has a cascading level that determines the order in which elements are displayed on the z-axis in the same cascading context. Follow the cascading guidelines of "catch up" and "Who's big on";

1. Stacking the border and background color of context elements
2. A sub-stack context element with negative z-index (the higher the negative, the lower the stacking level)
3. Normal flow layout, non-inline-block, no position positioning (except static) child elements
4. Float floating element with no position positioning (except static)
5. Normal flow layout, inline-block element, no position (except static) child elements (including display:table and Display:inline)
6. A sub-stacking context element with z-index:0/auto and a descendant element of "positioned" with a cascade progression of 0;
7. Have positive Z-index: the sub-stack context element (positive lower stacking level lower)

The rules are a bit more, but simply put, the parent element is drawn first, followed by the Z-index as a negative value, followed by the "non-positioned" element, and finally by the cascade progression from 0 onwards (this is relatively simple, omitting a lot of detail, so it is not very accurate). If the levels are the same, they are drawn according to the order of the elements in the DOM tree.

Example 1:

Where div#1 and div#4 are pink boxes, position is set to absolute;
Div#2 and div#3 are pink boxes, position set to relative;
Div#5 is a yellow box, position is set, default static;
<body>
<div id= "Absdiv1" >div #1 </div>
<div id= "Reldiv1" >div #2 </div>
<div id= "Reldiv2" >div #3 </div>
<div id= "Absdiv2" >div #4 </div>
<div id= "Normdiv" >div #5 </div>
</body>

The cascade effect DIV5 must be at the bottom. But
Is that the browser parsing HTML is still in accordance with the sequence of HTML document flow, the actual drawing order is still div#1->div#2->div#3->div#4->div#5.
However, when painting div#5, the affected elements are redrawn,
The order in which the rendered effect looks is div#5->div#1->div#2->div#3->div#4, and div#5 refers to the top.

Example 2:-the above comparison is based on the two div that does not form a stacking context.
"'

#divA Display:inline-block
#divB Float:left

. container{
position:relative;
Background: #ddd;
}
. Container > div{
width:200px;
height:200px;
}
. float{
Float:left;
Background-color:deeppink;
}
. inline-block{
Display:inline-block;
Background-color:yellowgreen;
margin-left:-100px;
}
"'

Presumably, it means that the two DIV with the common parent container overlaps together, whether the display:inline-block is stacked on top or float:left stacked on top.

Note here the order of the DOM, is Mr. Display:inline-block, and then generate Float:left. Of course, the two DOM sequence can also be reversed as follows:

<div class= "Container" >
<div class= "float" > #divB float:left</div>
<div class= "Inline-block" > #divA display:inline-block</div>
</div>

You will find that, regardless of the order, the Display:inline-block div is always stacked on top.

ways to create a cascading context –7 hierarchy level is valid in the same cascading context

1.html root elements create cascading contexts by default

2. Elements in the anchor element that Z-index not equal to auto, are values greater than 0

3. Element opacity not equal to 1 creates a cascading context

4.transform attribute value is not a meta of "none"
Vegetarian--so that's why transform doesn't cause re-layout in animations