我的記憶力不行，所以會花很多時間研究相同的事物，這不我又來了。
我研究CSS有一段時間了，卻無情的發現一個事實，學的越多，懂的越少，卑微的人類啊！
回想我幾次看CSS權威指南，第一次草草而過毫無所獲，第二次醍醐灌頂，第三次迷迷糊糊鮮有所得，第四次卻變得疑惑了！
當你發現你將書翻來翻去找不到答案時候，那就是一個恐怖的開始！事實上無論js或者CSS或者其它慢慢的找不到答案了。。。
比如，其實此文其實應該叫CSS04的，怎麼變為05了呢？因為04的名字叫做：
我當時準備做個什麼來著呢？我想知道我們的常用表情在不具有CSS時候的表現，比如ul的margin與padding，比如h1的字型大小，他的margin，比如dl的表現又是怎麼樣的。。。。。。。
最後我我思考了很久後發現，什麼也寫不出來，於是我睡著了。。。下午鬱悶的看了“三傻大鬧寶萊塢”話說確實不錯啊！
然後就到了此時此刻了，於是我開始思考，我錯過了什麼嗎？各位，你們錯過了什麼嗎？？？？
我錯過了什麼這個問題看似深奧，其實簡單：我錯過了精彩的產品！
沒錯，我錯過了精彩的前端項目，說實話，就學習而言，我還是比較用功的，會產生記不住的原因只有兩個：
1 我智商低
2 我用的少
我當然不會承認我智商低，於是我只能承認我前端項目不足的事實了，這裡說的經驗不足倒不是說做的不夠（事實上我前端經驗還真不夠），更重要的是在版面配置階段中缺少思考！
我們在版面配置階段中或多或少的都會碰到一些問題，我們總會找各種各樣的方案將它解決，但是卻由於種種原因放棄去追尋他真正的原理！
因為真相是昂貴的，要追尋一個真相比完成一個功能難10倍以上，所以我們會放棄追尋。
所以上面的答案是錯誤的，真正的答案是：
前端項目經驗不足，或者機械式的工作，沒有了追尋真相的熱情。
雖然自己平時碰到一個問題就會做一個demo，但還是缺少大項目的洗禮，比如一個電商項目，比如一個sns項目，這個就是我所需要的，這個也是我現在饑渴的想要的東西！！！
真正的一個產品才是騰飛的開始，紙上談兵總來得沒有底氣。
所以看CSS權威指南獲得不了知識並不是將它吃透了，而是它傳授的東西自己無法接收罷了，騷年，再努力吧！
為何葉小釵？此段原本可以省略，但是還是性別引發的風波，我這裡覺得有必要再強調下。。。。
當年葉小釵還是一個真正的“屌絲”的時候，經名師（半駝廢）指導，讓其透悟“只手之聲”，葉小釵無論如何都不能捂透而導致一夜白頭，最後再經人提點，只手之聲就是其實就是無聲之聲！葉小釵一個屌絲怎能體悟什麼是無聲之聲，相當於要一個普通人體會無招的境界，那不扯淡嗎？所以葉小釵割下了自己的舌頭去找半駝廢，半駝廢便將自己的寶劍贈與葉小釵，並為他的刀劍題上“刀狂劍癡”四字，這也是老夫刀狂劍癡葉小釵的由來了。
既然葉小釵並未體悟只手之聲，為何半駝廢會為他題上刀狂劍癡呢？因為半駝廢看到了葉小釵的純粹（決心太淺了，實在太淺了，必須是純粹），所以相信葉小釵。
經過漫長的歲月，葉小釵自然領悟了只手之聲，並體會到了更高的境界，有心入無劍。
當人問他何為刀何為劍時，他答曰刀狂劍癡；當人問若是刀劍不存呢？他答曰心劍；當人問初心不複呢？他答曰般若禪！
......
華麗的分割線，有必要隔開。。。
很多年以後，又一個真正的屌絲自稱葉小釵，妄想成為國內優秀前端技術人員，經由名師“部落格園文章、張鑫旭部落格、阮一峰部落格......”提點去領悟如何成為國內優秀前端技術人員。
想葉小釵一個溫飽都成問題的屌絲如何能知道優秀前端的境界呢？那不扯淡嗎？於是葉小釵發了一篇部落格，將自己的願望寫了出來表明自己的決心（必須是決心，純粹達不到。。。），於是開始學習摸索以期能領悟絕學，到達頂峰！
葉小釵現在正在經過漫長的歲月，還不能完全體悟“之手之聲”，希望轉瞬即逝的兩年後這枚屌絲能變為“刀狂劍癡”，請記住，這枚屌絲是男的喲。
算了，扯的再多也沒用，想成為劍聖就要做好的產品、好的前端產品不是想有就能有的，我們還是進入今日的學習吧。。。
containing block不錯，又是這個傢伙，包含塊！
我們的瀏覽器要繪製一個元素，就必須知道其定位與尺寸（所以我們用js才能獲得其offset）。
定位有三種，nomal flow，absolute以及floats（雖然不應該定義為布局元素，但他確實應該在此出現）。
以上三種無論如何都會先找到自己的“支點“，也就是其包含快containing block，說白了就是其容器。
CSS中的元素由其框組成，有框便能看做一個個盒子，所以小盒子如何擺放需要看大盒子的臉色，大盒子自然要看更大盒子的擺放，以此類推。
PS：我之前說過，無論使用者體驗還是程式設計其實都是在類比人類的生活，果不其然。
所以，瀏覽器需要確定一個元素的包含快（containing block），position確定：
1 static/relative ，元素的父元素的內容框（簡單說，除去padding的部分）
2 absolute 向上找最近的定位元素（absolute或者relative元素）
3 fixed一律為根項目
4 float包含快為最近的區塊層級元素
BFCblock formatting context（塊級格式化上下文），一種布局特性，可以理解為隔開小盒子的隔板。
bfc其實就是為了一個盒子不影響零一個盒子，而產生的，要形成bfc可以這麼幹：
① float不為none
② overflow不為visible
③ display的值為table-cell，table-caption，inline-block中的任何一個
④ position不為relative和static
PS：之前經過資料整理與學習，我這裡形成了一個想法，float引起元素坍塌是因為破壞了高度，這裡我覺得是不是導致了其bfc失效達到的目的呢？
我們這裡來理一理之前好不容易勾踐起來的知識體系：
① normal flow（普通流）中，元素按照html中先後位置至上而下的布局，行內元素水平排列，區塊層級元素獨佔一行
② floats（浮動）布局中，元素首先按照普通流位置出現，然後根據浮動的方向儘可能靠左或者靠右移，不做處理，其父級元素的高度將發生坍塌。
③ 絕對位置中，元素徹底脫離普通文檔流，因此父級元素直接將忽略其存在
BFC應用時屬於普通流的，所以絕對位置時候，BFC便沒有意義了。
PS：BFC的提出就是為了消除元素彼此間的影響，若是元素都飄了起來，他自然就無意義了。
所以，具有BFC的元素與普通容器一樣，只不過他隔離了獨立容器，致使兩個元素不會發生相互影響，簡單來說，bfc就是一種屬性，他將影響元素的定位以及兄弟元素之間的作用。
bfc與margin collapse兩個相連的div在垂直外邊距上會發生疊加，我們之前就見過了：
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title></title> 4 <style type="text/css"> 5 body { background: #ECECEC; } 6 .outer { background: white; border: 1px solid #CCCCCC; width: 300px; } 7 .inner { margin: 10px; padding: 8px; background: none repeat scroll 0 0 #1C87D5; color: white;} 8 </style> 9 </head>10 <body>11 <div class="outer">12 <h1 class="inner">13 來個測試走</h1>14 </div>15 </body>16 </html>
若是我們將代碼做一點改變：“將外層元素border”去掉；那麼。。
這個到底是不是BUG呢？我們之前一直沒有明確認識，我們這裡來怎麼理解這一現象呢？
在兩個區塊層級元素相鄰並且在同一個塊級格式上下文時，他們的垂直方向之間的外邊距會發生疊加。
PS：兩個區塊層級元素在一堆，一個是浮動的，一個是absolute的，他們不在一個bfc中便不會疊加。
我們先忽略以上問題看看這個例子：
1 <div style="margin: 10px 0; background-color: Gray;"> 2 <div style="margin: 10px 0; background-color: Gray;"> 3 刀狂劍癡葉小釵</div> 4 </div> 5 <div style="margin: 10px 0; background-color: Gray;"> 6 <p style="margin: 10px 0; background-color: Gray;"> 7 刀狂劍癡葉小釵</p> 8 </div> 9 <div style="margin: 10px 0; background-color: Gray; overflow: hidden;">10 <div style="margin: 10px 0; background-color: Gray;">11 刀狂劍癡葉小釵</div>12 </div>
以上三個div包含了各自的div標籤，內部div皆有margin屬性，但是只要第三個未與父級元素摺疊，說明第三個元素擁有了自己的BFC，以上的div同用一個BFC，我們現在做一點更改：
1 <div style="margin: 10px 0; background-color: Gray; padding:1px; "> 2 <div style="margin: 10px 0; background-color: Gray;"> 3 刀狂劍癡葉小釵</div> 4 </div> 5 <div style="margin: 10px 0; background-color: Gray;"> 6 <p style="margin: 10px 0; background-color: Gray; padding: 1px; border: 1px solid white; "> 7 刀狂劍癡葉小釵</p> 8 </div> 9 <div style="margin: 10px 0; background-color: Gray; overflow: hidden;">10 <div style="margin: 10px 0; background-color: Gray;">11 刀狂劍癡葉小釵</div>12 </div>
我們發現給外層div設定padding後他也會擁有自己的BFC，但是這個想法是錯誤的！！！
因為按照之前的定義，設定padding並不能產生新的BFC，那麼我們為外層設定padding後為什麼達到了我們想要的效果呢？
原因其實可能很簡單，因為內部margin與外部margin彼此看不見了，他們被一道門（padding、border）隔開了，所以他們仍然處於同一BFC！（若是有誤請指出）
float的破壞與重建我之前說過float其實破壞了元素的高度，並將之變為一個類似於inline-block元素，這裡也許有了其它的解釋：
float破壞了元素的BFC，所以元素間的隔板沒啦，所以上面的元素便壓了下來，我們為float元素設定overflow: hidden 可以清楚浮動的原理便是觸發了父級元素的BFC特性，讓其可以重新包裹浮動元素，閉合浮動元素。
這裡來個簡單的例子：
1 <div style=" background-color: orange; float: left; ">刀狂劍癡</div>2 <div style=" background-color: Gray; ">葉小釵,葉小釵葉小釵葉小釵葉小釵葉小釵葉
小釵葉小釵葉小釵葉小釵葉小釵葉小釵葉小釵葉小釵葉小釵葉小釵葉小釵葉小釵葉小
釵葉小釵葉小釵</div>
此處若是觸發第二個div的BFC的話：
1 <div style=" background-color: orange; float: left; ">刀狂劍癡</div>2 <div style=" background-color: Gray; overflow: hidden; ">葉小釵,葉小釵葉小
釵葉小釵葉小釵葉小釵葉小釵葉小釵葉小釵葉小釵葉小釵葉小釵葉小釵葉小釵葉小釵葉小釵葉小釵葉
小釵葉小釵葉小釵葉小釵</div>
因為兩個元素處在不同的BFC，所以第二個div不會覆蓋第一個div的。
BFC與haslayout其所IE6/7會有這樣那樣的BUG，他的根本原因就是他不具有BFC，對的，ie之前有一個理念，內部元素不會突破其盒子，所以不存在框以及隔離板的說法，但是事實上就出現了，元素可能超過他的框。所以IE6/7為了補救便活生生的搞了一個haslayout屬性出來！
haslayout與BFC類似，只不過haslayout的問題多一些便有了IE6/7這樣那樣的bug，比如我們的z-indexBUG，就很有可能是他造成的。
我們觸發他推薦使用：zoom: 1；
擁有layout的元素便由布局控制自己的尺寸和定位；
沒有layout的便只能依賴其父元素了，若其父元素還沒有layout就只能找爺爺了（總有祖宗有錢）。
一些元素與生俱來具有layout（王侯將相）
哪些元素有哪些沒有，如何觸發我這裡便不一一說明了。。。
算了，以免忘記，我還是說下吧：
body and htmltable, tr, th, tdimghrinput, button, file, select, textarea, fieldsetiframeembed
這些傢伙事王侯將相，還有一些淹沒在曆史中了我們就真不關注了。
這些傢伙事王侯將相的情人，可以觸發之：
float: (left 或 right)position: absolutedisplay: inline-blockwidth: (除 auto 外任何值)height: (除 auto 外任何值)writing-mode: tb-rlzoom: min-width: (包含 0 在內的任意值)max-width: (除 none 外任意值)min-height: (包含 0 在內的任意值)max-height: (除 none 外任意值)overflow 除了 visible 以外的值（hidden，auto，scroll）position: fixed
在此特別說明一下，我們有時候為span或者a設定樣式讓其看起來像個按鈕，在IE7以下卻跟個馬大哈似的，這個時候就要考慮觸發layout了。
因為span沒有layout，沒有背景還好，有背景的話，不具有layout屬性的傢伙背景不會顯示的。
結語今天的學習暫時到這裡，我們明天繼續。
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
