外边距重叠问题解决
目錄
外邊距重疊問題
1.兄弟元素外邊距重疊
2.父子元素外邊距重疊問題?
1.對父元素設置一個外邊框
?3.偽類的解決辦法
如果學習到了定位和浮動這一塊的內容，并且開始著手構建項目的話，在編寫時往往會出現一些意料之外的布局問題，今天我們來詳細說說這些問題和解決辦法：
外邊距重疊問題
我們在前面簡單提到了這一問題，可是當時只是淺顯的了解，今天我們深入分析這個問題，并提供解決辦法：
所謂外邊距重疊，分為兩種，一種是兄弟元素的外邊距重疊代碼演示如下：
1.兄弟元素外邊距重疊
<style>.inner-box1,.inner-box2 {width: 100px;height: 100px;background-color: yellow;margin-left: 20px;border: 1px solid;}.inner-box1 {margin-bottom: 10px;}.inner-box2 {margin-top: 20px;} </style><body><div class="inner-box1"></div><div class="inner-box2"></div> </body>此時兩個盒子之間的距離由兩個外邊距之中較大的決定，也就是20px，如果兩個盒子的距離都是負值則由絕對值較大的決定：
<style>.inner-box1,.inner-box2 {width: 100px;height: 100px;background-color: yellow;margin-left: 20px;border: 1px solid;}.inner-box1 {margin-bottom: -10px;}.inner-box2 {margin-top: -20px;} </style>此時樣式：
此時兩個盒子的間距就是-20px,而如果兩者的間距一正一負盒子之間的間距就是兩者相加的值，這點有點不同，需要特殊記憶
<style>.inner-box1,.inner-box2 {width: 100px;height: 100px;background-color: yellow;margin-left: 20px;border: 1px solid;}.inner-box1 {margin-bottom: -10px;}.inner-box2 {margin-top: 20px;}</style>此時樣式如圖：
此時兩個盒子之間的距離就是20px-10px=10px
2.父子元素外邊距重疊問題?
上面的兄弟元素外邊距重疊一般來說問題不是很大，可是父子元素外邊距重疊問題會影響頁面布局，需要及時解決。
所謂父子元素外邊重疊問題，便是子元素的外邊距會傳遞個父元素，導致父子元素同時移動，從而達不到應有的效果，這樣說還是有些抽象，直接上代碼：
<style>.out-box{width: 300px;height: 300px;background-color: pink;}.inner-box1 {width: 100px;height: 100px;background-color: yellow;margin-left: 20px;border: 1px solid;}</style><body><div class="out-box"><div class="inner-box1"></div></div></body>?如果想把上方的黃盒子移動到大盒子下方，怎么辦？很自然的我們想到設置小盒子上外邊距的大小，那這樣可行嗎？我們試一試：將小盒子添加一行：
.inner-box1 {margin-top: 20px;}此時再看看：
我們發現，大盒子隨著小盒子向下移動了20px，這就是我們說的子元素外邊距傳遞給了父元素，對我們來說，本來想要對小盒子進行操作，現在這種情況會對我們進行困擾，因此需要解決，
那么又該如何解決呢？
我們提供了以下幾種方法來解決：
?
1.對父元素設置一個外邊框
這是一種最簡單的處理方法，可以解決此類問題，不過一般情況下，并不推薦使用這種方法我們來看看實際代碼：
.out-box{width: 300px;height: 300px;background-color: pink;border: 1px solid ;}此時效果：
此時小盒子相對于大盒子向下移動了，之前說的不推薦使用這種方式，原因很簡單，添加了邊框樣式，在我們編寫代碼處理問題時要盡量避免添加樣式來處理問題，之后要將的消除浮動也是如此，添加一個div改變了代碼的結構，這些都是不利于我們項目的檢查和編寫的，最優的方式是不改變原有結構來處理問題。
2.對父元素添加overflow：hidden 開啟元素的BFC
所謂開啟BFC，也叫格式化上下文，全稱是Block formatting context，在開啟元素的BFC后，元素會變成一個獨立的布局區域，不會在布局上影響到外面的元素，這里一并介紹幾種開啟BFC的方法
1.設置元素浮動也就是設置float，可是元素浮動會導致新的問題，也就是父元素寬度丟失，這點在我們明天要說的解決高度塌陷的問題中會詳細介紹
2.設置元素為inline-block，寬度也會同樣丟失，也會出現其他問題(例如三像素問題)
3.將元素overflow設置為非visible，副作用較小，推薦使用
4.絕對定位 寬度同樣丟失
注意：這幾點都是開啟BFC的方法并不是解決外邊距重疊的方法，解決外邊距重疊可以使用其中的第三個方法，注意這句話的語序
同樣的看看代碼演示和實例效果：
.out-box{width: 300px;height: 300px;background-color: pink;overflow: hidden;}可以很清楚的看到，在沒有設置大盒子外邊框的情況下，我們依舊解決了這個問題。
?3.偽類的解決辦法
本來這點是想明天說高度塌陷一并解決的，想想還是提前解釋一下比較好，所謂偽類解決辦法，如果經常查看網頁源碼的會發現，在一些網頁的base.css庫中經常有著
.clearfix:before,.clearfix:after{content:'';display:table;clear:both;}的一段代碼，需要清除浮動或父子元素外邊距重疊的地方，會給父元素添加clearfix類來解決，其實這就是偽類的解決辦法，通過before偽類，添加display：table，可以有效解決父子元素的外邊距重疊問題。
今天就介紹到這里，明天會給大家介紹高度塌陷的解決辦法，喜歡的話就關注我吧~~~
總結
- 上一篇： 计算机文档xsl,跟我学XSL（一）——
- 下一篇： 手动推导计算AES中的s盒的输出