標籤：ddl 錯誤 時代 高度 針對 contain ext http block
本文同時發佈於本人的個人網站www.yaoxiaowen.com
百度創辦的前端技術學院，是一個面向大學生的前端技術學習平台。雖然只有大學生才有資格報名，提交代碼進行比賽排名。但是這並不妨礙我們這些初學者也可以按照他們的工作清單，進行刷題。雖然ife名義上是針對初學者，但是我看了一下工作清單，那些任務還並不是那麼簡單。所以很適合初學者把任務刷一遍，我覺的，把這些任務都刷完，那麼前端算是入門了。
對於代碼學習來講，除了實際的去敲，還有其他更好的學習方法嗎？因此我計劃按照ife的任務都刷一遍，代碼提交到我的github，同時將刷題過程中，碰到的問題，疑痛點都用我的部落格記錄下來，一來做為自己的總結和反思，二來也希望我的文字和記錄能夠為其他初學者提供一些細微的協助。
所以那些熟悉前端的同學，就不要閱讀我的這些基礎性的部落格來浪費時間了。。當然，我理解錯誤的地方，或者總結的不到位的地方，歡迎打臉批評。
1，關於chrome瀏覽器的快速鍵，開發人員調試， window下是f12，mac下是command＋option＋i； 重新整理 ：window下是 f5，mac下是 command ＋ shift＋ r；
2，關於css reset的概念。，在未接觸前端之前，就知道瀏覽器亂象了。雖然現在h5的出現，總算可以結束大部分的紛爭。但是且不說面對之前各箇舊版本瀏覽器的相容， 就說最新的各個瀏覽器，面對不同的標籤，顯示上依舊會有細微差別。比如strong標籤的加粗，em標籤的傾斜。而我們開發的目標自然是在不同瀏覽器上有完全相通的表現，所以為了避免這些差異，那麼我們可以在css的最開頭，將瀏覽器的預設樣式都去掉（嚴格點說，是叫做覆蓋，而不是去掉，將不同瀏覽器提供的一些預設樣式覆蓋掉），通過我們寫的css，來重新定義一些預設的標籤樣式，這就叫做css reset。
最初的，也是最簡單粗暴的css reset內容如下
1 * { 2 padding: 0; 3 margin: 0; 4 border: 0; 5 }
當然，我們也可以寫更多內容。比如我們可重設button的相關屬性，這樣不同瀏覽器就可以統一表現。但是，凡事有利必有弊，寫了很多代碼，那麼必然會造成冗餘，或者對速度效能有所影響，比如那個簡單粗暴的＊，萬用字元必然需要遍曆整個DOM樹，這不影響效能才怪呢。所以這中間都有取捨。。不過我們打造自己的 css reset檔案，就是在學習的過程當中不斷的總結，完善自己的css reset檔案，這樣項目當中直接引用，那是最好的。
3，關於清除浮動。我在寫任務三：三欄式布局時的任務時，注意到這個問題的。。要求是左右內容固定，中間內容的高度自適應，並且整個背景的寬度是三欄當中的最大高度.那麼自然的，我們就想到使用浮動，一個浮動到左邊，一個浮動到右邊，中間設定左右margin，那麼代碼如下：
css代碼
1 #allContent{ 2 background-color: #eee; 3 } 4 5 #leftContent{ 6 float: left; 7 width: 200px; 8 } 9 #rightContent{10 float: right;11 width: 200px;12 }13 #middleContent{14 margin-left: 240px;15 margin-right: 240px;16 }
html代碼
1 <div id="allContent"> 2 <div id="leftContent"> 3 <img src="img/flower.png"/> 4 </div> 5 <div id="rightContent"> 6 <img src="img/pu_gong_ying.png"/> 7 <img src="img/pu_gong_ying.png"/> 8 </div> 9 10 <div id="middleContent">11 <p>/** 實際內容省略，節約篇幅 **/</p>12 </div>13 </div>
而實際的顯示效果呢
左右伸縮一下瀏覽器寬度可以發現，背景高度其實是只和middleContent有關，仔細思考，就可以知道原因，左右部分既然float，那麼就已經脫離了流，所以整個背景已經感受不到左右部分了。自然就和左右部分的高度沒關係。當然初學者很容易想到，middleContent部分可以clear：both，但是再細想，這樣設定之後會產生什麼效果呢，那就是middleContent部分會在左右兩部分的下面，而不是和左右並列呢。聰明的同學可以想到一個解決方案，那就是我能不能在這三部分的下面設定了實際上沒內容的地區，但是clear：both，從而起到支撐高度的作用呢。我們先試試再說 。
1 <style> 2 /** ...... **/ 3 #middleContent{ 4 margin-left: 240px; 5 margin-right: 240px; 6 } 7 #bottomContent{ 8 clear: both; 9 }10 </style>11 <body>12 <div id="allContent">13 <div id="leftContent">14 <img src="img/flower.png"/>15 </div>16 <div id="rightContent">17 /** ...... **/18 </div>19 20 <div id="middleContent">21 /** ...... **/22 </div>23 <div id="bottomContent"></div>24 </div>25 </body>
再看看實際效果：達到了我們想要的效果。左右展開一下瀏覽器，改變其大小，再試試。效果很完美。
也就是說，我們通過在底部設定一個（實際沒內容的）地區，同時clear：both來完美的實現了我們的要求，但是有沒有更優雅的辦法呢。畢竟html負責展現實際內容，我們這樣寫，實際上是屬於多了冗餘內容，在維護時，也容易造成誤解。。所以我們就尋求一種在css中，更優雅的辦法去滿足我們的要求。首先，我們先刪除之前代碼html內容的 bottomContent 那個div，同時代碼在上述內容的基礎上做如下修改：
1 /** ...... */ 2 <style> 3 .clearContent { 4 /** 觸發 hasLayout，關於IE的一個特性，但是這個其實我好不瞭解 **/ 5 zoom:1; 6 } 7 .clearContent:after { 8 content:‘‘; 9 display:block; 10 clear:both; 11 visibility: hidden;12 }13 </style>14 /** ...... */15 16 <div id="allContent" class="clearContent" >17 /** ...... */
我們通過測試可以看到，依舊可以達到我們的效果，所以我們可以通過修改css的內容來實現我們的效果，這幾句代碼其實是這個意思.
：after是個虛擬元素。代表一個元素之後最近的元素，並且可以被各個不同瀏覽器安全色，那句代碼的意思就是說，我們在clearContent元素末尾添加了一個塊元素（所以看不到），而我們設定了這個塊元素clear：both，所以它可以支撐的起這個高度，所以說白了。這和我們上面添加在html中添加空地區做法差不多，但是這種方式更加優雅，避免冗餘，因為歸根到底，html負責內容，css負責樣式。
後記：
這是我的第二篇部落格，距離上一篇部落格過了一個多月，中間刷ife任務的github代碼提交也沒時間，很慚愧，沒有完成自己的計劃，因為上個月老闆突然宣布公司解散，這讓我深切的體會到了一臉懵逼的感受，也體會到在魔都生活重壓之下失業的惶恐，所以急著找工作，終於入職新公司，但是新的項目太急，加班太多了，累成了狗，所以空閑時間太少了。但是不管怎麼樣，記得自己的夢想，去努力的提高自己。完善自己。。且行且努力。
ife任務刷題總結（一）－css reset與清除浮動
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
