層疊樣式表(英文全稱：Cascading Style Sheets) 1.介紹一下標準的CSS的盒子模型。低版本IE的盒子模型有什麼不同的。
1.1分類：IE盒子模型和標準W3C盒子模型
1.2盒子模型：content、padding、border、margin
1.3區別
W3C盒子模型中：元素的width=content的寬度
IE盒子模型中：元素的width=content+padding+border
例如一個盒子模型如下：margin:20px,border:10px,padding:10px;width:200px;height:50px;
如果用w3c盒子模型解釋，
那麼這個盒子模型佔用的寬度為：20 * 2+10 * 2+10 * 2+200=280px;
高度：20 * 2+10 * 2+20 * 2+50=130px;
盒子的實際寬度大小為:10 * 2+10 * 2+200=240px;
實際高度：10 * 2+10* 2+50=90px;
用ie的盒子模型解釋 ：盒子在網頁中佔據的大小為20*2+200=240px; 高：20 * 2+50=90px;
box-sizing–border-box 和 content-box
box-sizing: content-box|border-box|inherit;
我個人認為W3C定義盒子模型與IE定義的盒子模型，IE定義的比較合理，元素的寬度應該包含border（邊框）和padding（填充），這個和我們現實生活的盒子是一樣的，W3C也認識到自己的問題了，所以在CSS3中新增了一個樣式box-sizing，包含兩個屬性content-box 和 border-box。
（1） content-box(預設是content-box)
寬度和高度分別應用到元素的內容框。
在寬度和高度之外繪製元素的內邊距和邊框。
//元素寬度是250px.test1{ box-sizing:content-box; width:200px; padding:10px; border:15px solid #eee; }
（2）border-box
為元素設定的寬度和高度決定了元素的邊框盒。
就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。
通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
//元素寬度就是200px.test1{ box-sizing:border-box; width:200px; padding:10px; border:15px solid #eee; }
2.層疊順序（stacking level）和層疊上下文（stacking context）
控制元素的層級
1.z-index
2.層疊上下文
3.層疊水平(決定一個層疊上下文元素的層疊順序)
z-index
–為整數則會建立新的層疊上下文，auto不建立新的層疊上下文
1.auto，預設值。當設定為auto的時候，當前元素的層疊級數是0，同時這個盒不會建立新的層級上下文（除非是根項目，即）；
2.。指示層疊級數，可以使負值，同時無論是什麼值，都會建立一個新的層疊上下文；
3.inherit。父元素繼承
z-index只在定位元素（position=static除外，因為元素預設就是static，相當於沒用position樣式）中作用
.top{ width: 200px; height: 200px; background: black; z-index: 100;//雖然加了z-index，但是還是bottom覆蓋top，因為z-index只在定位元素中起作用}.bottom{ width: 200px; height: 200px; background: red; margin-top: -100px;}<div class="top"></div><div class="bottom"></div>
絕對位置元素覆蓋普通元素的原因
元素一旦成為定位元素，其z-index就會自動生效，此時其z-index就是預設的auto，也就是0層級，根據上面的層疊順序表，就會覆蓋inline或block或float元素。
著名的7階層疊水平–可以減少z-index的使用
層疊上下文中的每個元素都有一個層疊水平，決定了同一個層疊上下文中元素在z軸上的顯示順序。遵循“後來居上”和“誰大誰上”的層疊準則；
1.層疊上下文元素的邊框和背景色
2.擁有負 z-index 的子堆疊上下文元素 （負的越高越堆疊層級越低）
3.正常流式布局，非 inline-block，無 position 定位（static除外）的子項目
4.無 position 定位（static除外）的 float 浮動元素
5.正常流式布局， inline-block元素，無 position 定位（static除外）的子項目（包括 display:table 和 display:inline ）
6.擁有 z-index:0 /auto的子堆疊上下文元素以及“positioned”且層疊級數為0的後代元素；
7.擁有正 z-index: 的子堆疊上下文元素（正的越低越堆疊層級越低）
規則有點多，但簡單說，就是父元素會先繪製，接著是z-index為負值的子項目，然後是“non-positioned”元素，最後是按照層疊級數從0開始逐級繪製（這樣說比較簡單，省略了大量細節，因此並不是很準確）。如果層級相同，則按照元素在DOM樹中的順序來進行繪製。
例子1：
其中DIV#1和DIV#4是粉色框，position設定為absolute；
DIV#2和DIV#3是粉色框，position設定為relative；
DIV#5是黃色框，position為設定，預設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>
層疊的效果div5肯定是在最下面。但是
是瀏覽器在解析HTML的時候仍然是按照HTML文檔流的順序來解析的，實際的繪製順序仍然是DIV#1->DIV#2->DIV#3->DIV#4->DIV#5。
只不過，要繪DIV#5的時候，會對影響到的元素進行重新繪製，
其渲染的效果看上去的順序是DIV#5->DIV#1->DIV#2->DIV#3->DIV#4，將DIV#5提到了最前。
例子2：—上面的比較是基於兩個 div 都沒有形成 堆疊上下文 這個為基礎的
“`
#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;
}
“`
大概描述起來，意思就是擁有共同父容器的兩個 DIV 重疊在一起，是 display:inline-block 疊在上面，還是float:left 疊在上面。
注意這裡 DOM 的順序，是先產生 display:inline-block ，再產生 float:left 。當然也可以把兩個的 DOM 順序調轉如下:
<div class="container">
<div class="float"> #divB float:left</div>
<div class="inline-block">#divA display:inline-block</div>
</div>
會發現，無論順序如何，始終是 display:inline-block 的 div 疊在上方。
建立層疊內容相關的方法–7階層疊水平在同一個層疊上下文中有效
1.html根項目預設會建立層疊上下文
2.定位元素中z-index不等於auto的元素，是大於0的值
3.元素的opacity不等於1會建立層疊上下文
4.transform 屬性值不為 “none”的元
素—–所以這也是動畫中transform不會導致重新布局的原因
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
