前言
我的記憶力不行，是以會花很多時間研究相同的事物，這不我又來了。
我研究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包含快為最近的塊級元素
BFC
block 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; ">
6 <p style="margin: 10px 0; background-color: Gray; padding: 1px; border: 1px solid white; ">
我們發現給外層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的話：
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 html
table, tr, th, td
img
hr
input, button, file, select, textarea, fieldset
iframe
embed
這些家夥事王侯将相，還有一些淹沒在曆史中了我們就真不關注了。
這些家夥事王侯将相的情人，可以觸發之：
float: (left 或 right)
position: absolute
display: inline-block
width: (除 auto 外任何值)
height: (除 auto 外任何值)
writing-mode: tb-rl
zoom:
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屬性的家夥背景不會顯示的。
結語
今天的學習暫時到這裡，我們明天繼續。
本文轉自葉小钗部落格園部落格，原文連結http://www.cnblogs.com/yexiaochai/archive/2013/06/12/3132201.html如需轉載請自行聯系原作者
![Docker：安裝Docker Compose[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)