【正視CSS03】block與position，出門在外的朋友端午節快樂

範大腳腳發表於2017-12-21
CSSBloC
前言
一件非常重要的事情！！！很多朋友問我是不是妹子！！！
哎，想我刀狂劍痴葉小釵堂堂七尺男兒居然一而再再而三的被調戲，真是愧對中原劍聖之名，所以今後請不要再問我性別啦！
獨在異鄉為異客！哎，出門在外啊！今天過節，我這裡牢騷幾句。
今年職業規劃上發生了很大的變化，前段時間失業了。毫無預料的失業帶來的就是近兩年的計劃付諸東流，這裡我就不得不思考一個問題
我現在會面臨失業問題，今後可能也會，我現在年輕還無所謂，之後年紀大一點呢？工作不那麼好找了呢？所以我很是惶恐啊！
因為家庭上一些原因，我從小就很敏感，缺乏安全感，而公司從來就不是有情有義的存在，創造價值你就留下，創造不出價值你就滾蛋
這是很合理的，所以我們得武裝自己，以應付風雲變幻的職場啊！
於是，我離開了我的家鄉，離開了我親愛的女朋友，獨自一人來到外地求生存、求發展，也希望能有一頁書寫自己的傳奇，但世事如棋、乾坤莫測，誰又能真正自詡笑盡英雄呢？
咳咳！！！！！尼瑪今天端午節，老夫居然變得文藝了，就此打住，進入今天的正題吧！！！！各位，端午節快樂！
關於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吧。各位端午節快樂。
本文轉自葉小釵部落格園部落格，原文連結：http://www.cnblogs.com/yexiaochai/archive/2013/06/10/3130632.html如需轉載請自行聯絡原作者


相關文章