最近被CSS懟成傻逼，總結一下平時沒有注意的點雳殊，持續(xù)更新擒贸。
- 問題1：一個沒有設置寬度的div臀晃，它的寬度是多少？
- 問題2：把問題1里面的div設置為float為left呢介劫？
- 問題3：float脫離了文檔流嗎徽惋？
- 問題4：脫離了文檔流文字為什么還會環(huán)繞呢？
- 問題5：postion:absolute脫離了文檔流嗎座韵？
- 問題6：postion:absolute沒有設置left與top险绘，div位置在哪，寬度如何？
- 問題7：與absolute搭配的往往有z-index這個屬性宦棺。那么如果有一個父元素z-index為1000瓣距，子元素z-index為100，誰在上面渺氧？
- 問題8：為什么margin:0 auto可以水平居中元素旨涝？
- 問題9：postion:absolute;left:0;right:0;top:0;bottom:0;margin:auto;為什么可以水平垂直居中？
問題1：一個沒有設置寬度的div侣背，它的寬度是多少白华？
回答一：div為塊級元素，每個塊級元素默認占一行,自動充滿父級元素的內(nèi)容區(qū)域贩耐。
W3C:div元素沒有特定的含義弧腥。除此之外，由于它屬于塊級元素潮太，瀏覽器會在其前后顯示折行管搪。
問題2：把問題1里面的div設置為float為left呢？
回答二：設置了float:left后铡买，如果沒有設置寬度更鲁，寬度是被內(nèi)容撐開的，如果設置了寬度就是該寬度奇钞。
W3C:如果浮動非替換元素澡为，則要指定一個明確的寬度；否則景埃，它們會盡可能地窄媒至。
注：替換元素是瀏覽器根據(jù)其標簽的元素與屬性來判斷顯示具體的內(nèi)容，如input/img/select等等谷徙。
問題3：float脫離了文檔流嗎拒啰？
問題4：脫離了文檔流文字為什么還會環(huán)繞呢？
回答三：脫離了文檔流完慧，但仍然保持著部分的流動性谋旦。
回答四：同上。
MDN:float CSS屬性指定一個元素應沿其容器的左側或右側放置屈尼，允許文本和內(nèi)聯(lián)元素環(huán)繞它册着。該元素從網(wǎng)頁的正常流動中移除，盡管仍然保持部分的流動性（與絕對定位相反）鸿染。
問題5：postion:absolute脫離了文檔流嗎指蚜？
回答五：脫離了文檔流
MDN:絕對定位的元素不再存在于正常文檔布局流程中.相反，它坐在它自己的層獨立于一切涨椒。
問題6：postion:absolute沒有設置left與top摊鸡，div位置在哪绽媒，寬度如何？
回答六：如果沒有設置left,top又沒有設置right免猾，bottom是辕，它跟static時的位置一樣。也就是說猎提，如果其前面還有一個div获三，他就在這個div后面，和static時一樣锨苏，不會浮在上面疙教，也不會在左上角（當然，如果前面沒有元素就在左上角了）伞租。
測試：
.wrapper{
width: 500px;
height: 500px;
background-color: grey;
position: relative;
}
.upper{
height:100px;
background-color: yellow;
}
.inner{
width:200px;
height:200px;
background-color: red;
}
<div class="wrapper">
<div class="upper"></div>
<div class="inner"></div>
</div>
結果如圖：
我們再來給inner加上position: absolute;
.inner{
width:200px;
height:200px;
background-color: red;
}
結果如圖：
可以看出贞谓，設置了postion:absolute后，inner并沒有如我們預想的那樣和left:0 top:0一般蹲到左上角葵诈，而是乖乖的呆在了upper后面裸弦，和之前static一樣。
問題7：與absolute搭配的往往有z-index這個屬性作喘。那么如果有一個父元素z-index為1000理疙，子元素z-index為100，誰在上面泞坦？
回答七：子元素在上面窖贤。
先看代碼：
<div class="par">
<div class="child"></div>
</div>
.par{
position: absolute;
width:300px;
height:300px;
z-index:1000;
background-color: #000;
}
.child{
position: absolute;
width:150px;
height:150px;
z-index:500;
background-color: #fff;
}
效果如下：
子元素在上面，即使父元素的z-index遠遠大于子元素的z-index
以下轉(zhuǎn)自segmentfault
根據(jù)規(guī)范暇矫，z-index是應用到定位元素的主之，也就是position屬性不為relative的元素择吊，否則李根，設置z-index是沒有意義的；
z-index的作用有兩點几睛，一是設置在當前堆疊上下文(stacking context)中的層級房轿；二是創(chuàng)建一個新的堆疊上下文；
z-index并不是設置的值越高所森，就會越靠近用戶囱持，還和堆疊上下文有關系；
- 在同一個堆疊上下文中的元素焕济，z-index越高越靠近用戶纷妆；
- 在不同堆疊上下文中的元素，如果堆疊上下文一距離用戶更近晴弃，那么它的所有子元素都在另一個堆疊上下文子元素的前面掩幢，也就是離用戶更近逊拍，不同堆疊上下文中的子元素不可能發(fā)生交叉；
- 所以际邻，z-index其實不是一個絕對值芯丧，而是一個相對值；
