前言
一件非常重要的事情！！！很多朋友問我是不是妹子！！！
哎，想我刀狂劍痴葉小釵堂堂七尺男兒居然一而再再而三的被調戲，真是愧對中原劍聖之名，所以今后請不要再問我性別啦！
獨在異鄉為異客！哎，出門在外啊！今天過節，我這里牢騷幾句。
今年職業規划上發生了很大的變化，前段時間失業了。毫無預料的失業帶來的就是近兩年的計划付諸東流，這里我就不得不思考一個問題
我現在會面臨失業問題，今后可能也會，我現在年輕還無所謂，之后年紀大一點呢？工作不那么好找了呢？所以我很是惶恐啊！
因為家庭上一些原因，我從小就很敏感，缺乏安全感，而公司從來就不是有情有義的存在，創造價值你就留下，創造不出價值你就滾蛋
這是很合理的，所以我們得武裝自己，以應付風雲變幻的職場啊！
於是，我離開了我的家鄉，離開了我親愛的女朋友，獨自一人來到外地求生存、求發展，也希望能有一頁書寫自己的傳奇，但世事如棋、乾坤莫測，誰又能真正自詡笑盡英雄呢？
咳咳！！！！！尼瑪今天端午節，老夫居然變得文藝了，就此打住，進入今天的正題吧！！！！各位，端午節快樂！
關於CSS，我一直是帶着敬畏的心理對待的，因為自己搞過幾年服務器端的開發，也組織做過很多小項目，所以學習js時還相對簡單，但CSS就給我留下了高深莫測的印象。
后來，實習時候進入公司做的第一個單頁產品，就寫了不下1w行的js代碼，也因此正式進入前端行業。做出來的產品還很有APP的味道呢，但是當時公司完全不重視CSS，乃至很多莫名其妙的布局問題居然無人找得到原因！！！
其中非常經典的就是，我看到一個框沒有“高度”，當時跟看到一個人沒有影子一樣神奇！
最后那個產品做了8個月左右我就離開了，其后續也不太清楚了，但是以我現在的想法。
沒有CSS熟手的支持，這個產品死路一條，當然這里說的有些嚴重了。
再后來，我開始切圖，開始熟悉CSS，但從來都不敢像很多其他同事一樣任務CSS很淺，會用就是了。
所以，我這里依舊帶着敬畏的心情，來看一看CSS中的塊級元素吧。
塊級元素
大家對塊級元素必定都相當熟悉了，但我們這里還是簡單回顧一下下：
塊級元素很霸道，會獨占一行作為自己的王國，一般一個元素的width被定義為從做內邊距到右內邊距的距離（IE6對盒模型解釋有誤）。margin、padding、width、height可以確定文檔布局。
多數情況下文檔高寬我們不太關心，寬度一般會鋪滿瀏覽器，高度會自己延生。
水平格式化
<p style="width: 200px; padding: 10px; margin: 20px;"> 刀狂劍痴葉小釵</p>
本來p元素寬度是200，但是由於padding問題寬度就變為220了，外邊距再延生40，所以整個寬度就是260了，這樣便隱式的增加了width的值！ 但是，其右邊距卻不是20，因為CSS還有一個規則：正常流塊級元素的margin，width，padding，border之和必須等於包含塊的內容區域，所以右邊距會被重置為auto。
所以我們要將一個元素居中會這樣設置
<div style="margin: 0 auto;"></div>
在寬度確定的情況下，做外邊距與右外邊距的值會被設置為相等的值（IE6忽視之，他會將之設置為0）。
負外邊距
由於margin可以被設置為負值，所以整個情況又會變得比較復雜，因為按照我們上面的規則，width便有可能超過其包含塊！！！
<div style=" margin: 20px auto; width: 300px; background: gray; padding: 10px;"> <p style=" background-color: Orange;"> 刀狂劍痴葉小釵</p> </div>
<div style=" margin: 20px auto; width: 300px; background: gray; padding: 10px;"> <p style=" background-color: Orange; margin: 0 -20px;"> 刀狂劍痴葉小釵</p> </div>
所以，我們平時操作負邊距時候，其實是增加了高寬，若是高寬確定的情況下，那邊是其他幾個屬性被增加了，帶來了元素移動的錯覺。
垂直格式化
塊級元素的高度默認由其內容決定，我們可以為元素顯示設置高度，但是這樣的話，元素框便不會自動增加了。
垂直居中
在水平情況下設置auto后，會取相同的值，當在垂直情況下，情況有所不同，margin: auto 0;這種情況下，上下外邊距會被重置為0，元素框失去了外邊距（定位元素有所不同）。
<div style=" margin: 20px auto; width: 300px; height: 200px; background: gray; padding: 10px; position: relative;"> <p style=" background-color: Orange; width: 130px; height: 20px; margin: auto; position: absolute; "> 刀狂劍痴葉小釵</p> </div>
外邊距合並
外邊距合並的問題大家都知道，上下外邊距會發生合並現象，但是有種情況會讓事情變得比較復雜：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> body { background: #ECECEC; } .outer { background: white; border: 1px solid #CCCCCC; width: 300px; } .inner { margin: 10px; padding: 8px; background: none repeat scroll 0 0 #1C87D5; color: white;} </style> </head> <body> <div class="outer"> <h1 class="inner"> 來個測試走</h1> </div> </body> </html>
若是我們將代碼做一點改變：“將外層元素border”去掉；那么。。
他這種合並方法就徹底讓我傻眼了。。。。。
以上是之前的研究，很淺的介紹了一下我們的塊級元素，今天我們來看看其它東西。
block與position
單說塊級元素其實意義不大，前面部分可能的說的七七八八了，單說塊級元素師應該用以布局的，所以position才是block的戰場。
position有這么多值：
其中static便是默認值，這樣的塊級元素在文檔流之中，我們暫時不予關注，我們來看看其它的東西。
昨天我們說到行內元素與float時，我們認為float是白蟻，而absolute是會飛的白蟻（會飛的inline-block），他們會破壞會重建，所以我們首先看看這個例子：
1 <div>我在之前</div> 2 <div style="background-color: Gray; padding: 10px; margin: 10px;"> 3 刀狂劍痴葉小釵是男兒</div> 4 <div>我在之后</div>
毫無疑問的占滿了一行，於是我們將之布局改一下下：
1 <div>我在之前</div> 2 <div style="background-color: Gray; padding: 10px; margin: 10px; position: absolute;"> 3 刀狂劍痴葉小釵是男兒</div> 4 <div>我在之后</div>
這里無論是absolute或者fixed，他的高與寬都被先破壞然后在重建了同一道理（XX膜破壞與修復），但是他已不食人間煙火，和我們正常留不屬於同一緯度啦：
relative
relative就跟七仙女一樣，他雖然可以飛，雖然是神仙，但是他在人間還有一個家，所以其文檔布局還在：
絕對定位的破壞性
我們昨天看了float的破壞性，今天連着絕對定位的一起看看唄，看看誰更厲害：
① imgfloat引起父元素高度坍塌
<div style="background-color: Gray; padding: 10px; "> <img src="1.png" style=" float: left; " /></div>
② 父元素漂浮拯救自我坍塌
<div style="background-color: Gray; padding: 10px; float: left; "> <img src="1.png" style=" float: left; " /></div>
③ 絕對元素引起父元素升天
<div style="background-color: Gray; padding: 10px; "> <img src="1.png" style=" position: absolute; " /></div>
④ 父元素漂浮能否拯救子元素？
<div style="background-color: Gray; padding: 10px; float: left; "> <img src="1.png" style=" position: absolute; " /></div>
事實證明，他若要走，誰都攔不住啊！！
PS：此處absolute與fixed是表現一致的。
絕對定位的位置
絕對定位的元素一般情況下還是應該放到body后面的。
不要為了實現一個下拉菜單的功能而把它搞到dom（表格神馬的）里面，越深的dom回流越厲害
而且僅僅為了實現一個下拉操作，可能還需要將父標簽設置為relative，得不償失啊！
如此一來，z-index引起的bug也不會出現了，以下是我用到的一點東西：
里面的提示信息就完全在body里面，不用relative限制依舊可以實現的。
然后，若是絕對定位元素不在body后面而是需要在某些dom節點中才能實現其效果的話，dom節點淺還不用說，深的話就要考慮是否有其它方案了。
優化之元素隱藏
元素隱藏我們用的最多的一定是display屬性，但是他不一定是最好的實現方案。為什么這么說呢？
我這里有一個明確的體會，就是前段時間一個需求，我的廣告div標簽在最前面，他的背景是圖片，我原想開始隱藏將圖片加載完成，后面慢慢展示實現特效，但是背景在display: none的情況下根本不會加載的！！！
也許我們這里可以以此特性搞個延遲加載的其它方案實現，但是若是這個家伙可能引起回流與渲染哦！！！！
以上和這一小節的東西扯得有點遠，我們還是來看看我們的隱藏吧。
我所用到以absolute做的隱藏有以下幾種：
<div> 我在之前</div> <div style="background-color: Gray; padding: 10px; margin: 10px; position: absolute; top: -9999px;"> 刀狂劍痴葉小釵是男兒 </div> <div> 我在之后</div>
<div> 我在之前</div> <div style="background-color: Gray; padding: 10px; margin: 10px; position: absolute; visibility: hidden; "> 刀狂劍痴葉小釵是男兒 </div> <div> 我在之后</div>
我暫時就用到了這兩種方式，尤其是第二種用得較多，騰訊微博的下拉菜單也是這么干的。
兩欄等高布局
兩欄等高布局是非常常用的，也是面試題經常中的，我們可能這樣做：
1 <div style="overflow: hidden;"> 2 <div style="float: left; width: 300px; background-color: Orange; margin-bottom: -3000px; 3 padding-bottom: 3000px;"> 4 邊欄</div> 5 <div style="margin-left: 310px; background-color: Gray; margin-bottom: -3000px; padding-bottom: 3000px;"> 6 主區域</div> 7 </div>
其實這個代碼是不好的，因為不是內容優秀的做法，我們應該將主要內容標簽提前。
這個實現原理其實是非常巧妙的：
因為padding是包括背景色的，而外層高度的計算方式我們知道是margin+padding+border+height。
所以事實上，我們這里元素其實已經延伸了3000px了，但是由於overflow: hidden，由於margin，其高度其實是沒有的，我們一旦設置高度就會撐開父元素，無論怎么撐開其兩邊背景都是存在的，所以貌似等高，其實沒有等高了。。。
然后，我們現在知道了絕對定位的元素無高度，無寬度，那么我們是不是也可以用它實現呢？
其實我們可以設置一個absolute/fxied的東東擺在中間就實現啦。。。。
<div style="position: relative; overflow: hidden; background-color: Gray;"> <div style="width: 300px; background-color: Orange; position: absolute; height: 3000px; z-index: 1;"> </div> <div style="width: 300px; float: left; position: relative; z-index: 2; "> 邊欄</div> <div style="margin-left: 310px; background-color: Gray;"> 主區域</div> </div>
代碼有點惡心，大家不必細看。。。
block與relative的故事
之前我們就說了relative是七仙女，雖然可以飛，但是編制在人間。
relative因為是七仙女就具有z-index特性，可以垂直升空。
relative因為是玉帝的女兒，權限很大，所以被他包裹着的神仙absolute都飛不出他的區域。。。
IE6與relative的愛情故事
ie7以下有個嚴重的bug，就是z-index需要依賴其父元素的z-index才行，否則兒子再高，但是父元素低，他依舊會被別人擋着。
這個問題我之前討論過，這里就不管他了。
這是一個例子
之前，我們為了實現一個功能：廣告得出現在屏幕的中間，我開始任務這個東西很簡單便沒有關注，但后面點看到了一個實現：
在body后面加了一個div，而且這個div有一個屬性：
<div style=" position: relative;"></div>
然后用這個div包裹着了所有其它標簽。
我一看其實有點傻了的。因為這將影響很大，最嚴重的情況是頁面布局全部壞了!
這里我就想給我們的前端規范加上一條：相對定位一點要最小的影響。
這樣做是有道理也有原因的，是想其中若是出現其他定位元素，豈不是會發現悲劇。
一個形象的例子，relative要對其下的布局元素負責，我們運用了此元素，就得負責下面所有的布局元素的展示，一個考慮不到就要悲劇。
結語
今天我們一起學習了塊級元素的東東，后面點繼續學習CSS與bootstrap吧。各位端午節快樂。
參考：