之前經常看別人的博客,自己也沒寫過,突然發現自己有很多東西在用的時候都注意到過,也用到過,可就是沒有總結過,這些知識點在我的腦子里很亂。為了能把以前的東西匯總起來,並且更好的學習新的知識技術,從今天氣,我將每天一博,來記錄我的每一點成長過程。很多年沒寫過文章,這寫起來文字都有些生硬,呵呵,需要努力提高啊。大笑 那么今天就先說說CSS的外邊距吧。 圍繞在元素邊框的空白區域是外邊距。這是W3CSchool給我們的解釋。這句話看起來很模糊,說的不是那么明確。請看下面的圖,就對邊距的理解很清晰了。
我習慣把 圖中所示的margin邊界稱為外邊距,padding填充部分稱之為內邊距。設置外邊距最好的一個方法就是設置margin值,同理,設置內邊距的最好 辦法就是設置padding了。設置內邊距沒什么好說的,設置的值是多少就是多少,不會出現什么異常,即瀏覽器的兼容性方面,但外邊距就不一樣了。
設置外邊距,首先想到的是應該是雙邊距的問題。如果設這邊距的這個元素同時設置了浮 動,那么浮動的這個方向如果有margin值的話,那么在ie6里面的實際距離是設置值的雙倍。要解決這個問題不復雜,只要給這個元素加個 display:inline屬性即可,但不建議這么做,因為這無形中增加了代碼的質量,帶寬很貴的哦,最好的辦法就是在浮動的方向不設置margin 值,因為這個可以用其他的方法實現的,比如padding,或者設置在父層節點的style。
在一個問題就是垂直雙編劇的合並問題。當兩個垂直的雙邊距相遇時,它們將形成一個邊距,合並后的邊距等於發生合並的邊距的較大值。
<style type="text/css"> *{padding:0;margin:0;} .box{width:200px;height:120px;margin:0 auto;background:#FFC;} .d1,.d2{height:40px;width:100%;overflow:hidden;} .d1{background:#f00;margin-bottom:20px;} .d2{background:#0033CC;margin-top:10px;} </style> <div class="top" style="height:100px;width:100%;"></div> <div class="box"> <div class="d1"></div> <div class="d2"></div> </div>
看到這樣的代碼,順着代碼的思維看,這段代碼的效果應該是d1模塊和d2模塊有個間距,間距值是d1的margin-bottom的20和d2的margin-top的10相加的和,但其實不然。看一下效果圖吧。
實際兩個模塊的間距是20,這就是垂直雙編劇的合並問題了。有時候遇到這樣的情況不知所然,不知怎么回事,后來才知道了垂直雙邊距。知道了問題 的根源,那么解決這個問題的最好辦法就是避免這個問題的出現了。我是這么做的,比較懶惰的作法,不過絕對有效哈。
還有一個很不人性化的規范,就是一 個盒子,即一個模塊如果沒有上邊距(margin-top)或者上邊框(border-top),那么這個盒子的上邊距會和這個盒子的第一個子元素的上邊 距重合。不說什么了,把代碼和效果貼上,直觀,易理解。知道了問題所在就知道了怎么避免問題的出現了。
<style type="text/css"> *{padding:0;margin:0;} .box{width:200px;height:120px;margin:0 auto;background:#FFC;} .d1,.d2{height:40px;width:100%;margin-top:10px;overflow:hidden;} .d1{background:#f00;} .d2{background:#0033CC;} </style> <div class="top" style="height:100px;width:100%;"></div> <div class="box"> <div class="d1">我想和老不死的分家我想和老不死的分家</div> <div class="d2"></div> </div>
我對這些的理解都是基於css中的盒子模型,不知道大家有沒關注過,我會在后來博文中補上盒子模型這一點,希望大家關注。第一次寫博客,感覺有點不習慣,我會堅持,提高自己的文字水平,努力讓自己有一個提高,同時也能將我的觀點和大家分享。