這篇“CSS邊距重疊怎么辦”文章,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要參考一下,對于“CSS邊距重疊怎么辦”,小編整理了以下知識點,請大家跟著小編的步伐一步一步的慢慢理解,接下來就讓我們進入主題吧。
成都創新互聯公司專注于烏蘭察布企業網站建設,響應式網站建設,商城網站建設。烏蘭察布網站建設公司,為烏蘭察布等地區提供建站服務。全流程定制制作,專業設計,全程項目跟蹤,成都創新互聯公司專業和態度為您提供的服務
提出問題:在使用CSS排版布局時,會發現兄弟或者父子節點設置的上下外邊距會發生重疊現象,如下圖所示
<style> .out { width: 100%; background-color: pink; } .out>div { height: 100px; width: 100%; background-color: rgb(223, 136, 23); margin: 5px 0 10px; } </style> <section class="out"> <div>11</div> <div>22</div> <div>33</div> </section>
當我們查看整個section的高度時,其實本應該是345px的,由于父子和兄弟的外邊距的重疊,會發現高度為320px。那么如何在實際應用中解決這個問題呢?
創建BFC(全程塊級格式化上下文)可以解決這個問題,首先明確下BFC的原理
BFC內的元素與外界元素之間互不影響,是一個相對獨立的封閉區域;
相鄰的BFC之間不會發生垂直邊距的重疊,也就是說,想要元素外邊距不重疊,就要創建一個BFC區域;
BFC區域不會與浮動元素的box重疊;
BFC在計算高度時,浮動元素也會被算在內;
如何創建BFC?
1.設置overflow屬性不為visible;
2.float不為none;
3.position的值不為static或者是relative;
4.display屬性為table時;
<style> .out { width: 100%; background-color: pink; overflow: hidden; } .out>div { height: 100px; width: 100%; background-color: rgb(223, 136, 23); margin: 5px 0 10px; /* overflow: hidden; */ float: left; } </style> <section class="out"> <div>11</div> <div>22</div> <div>33</div> </section>
當我們再次查看section的高度的時候,會發現高度已經恢復345px了,同時也證明了BFC計算高度時,會把浮動的子元素的高度也算在內;
以上是“CSS邊距重疊怎么辦”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注創新互聯行業資訊頻道!
文章標題:CSS邊距重疊怎么辦
當前鏈接:http://m.newbst.com/article44/pgcshe.html
成都網站建設公司_創新互聯,為您提供虛擬主機、小程序開發、網站營銷、企業建站、面包屑導航、網頁設計公司
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯