1. 首頁 > 生活 > >

兩個div并排顯示 兩個div怎么并列

小知識



文章插圖
兩個div并排顯示 兩個div怎么并列

文章插圖
對于前端來說寫頁面是最基礎的東西了，但是想不到還是有人不理解邊距合并的問題，昨天有網友問我為什么設置的margin不是我設置的實際效果？
好吧，廢話不多說，下面來說一下關于margin合并的問題 。
解決margin合并的方法有好多種：
首先說一下嵌套關系的margin合并問題 。
1.給父元素添加padding-top值和padding-bottom值
2.給父元素添加border值
3.給父元素添加屬性overflow:hidden
4.給父元素或者子元素聲明浮動float
5.給父元素添加屬性： positon:relative，給子元素聲明絕對定位position:absolute
6.給父元素或子元素聲明絕對定位：position:absolute
在這里的父級div是a01，嵌套著子級div a02,如果在沒有設置a01的合并解決方式的時候就會發生margin合并 。如圖
要解決這個問題，可以這樣做(overflow:hidden)
可以說這個是最方便簡單的了，一行代碼搞定 。
效果圖：
還可以這樣寫：(padding-top和padding-bottom)
【兩個div并排顯示 兩個div怎么并列】利用padding來設置效果也是一樣的，開發是時候也是比較常用的，因為如果想讓上或下某一邊有邊距合并，這樣設置就可以控制了 。
雖然overflow:hidden很方便，但是不要固定死一個方法，這兩個方法是在實際開發解決用得比較多的 。
當然還可以這樣：(border)
效果圖：
還可以這樣：（給父元素float）
效果圖：
還可以這樣：（給子級元素float）
效果圖：
還可以這樣：（給父元素添加position）
效果圖：
還可以這樣：（給子元素添加position）
效果圖：
還可以這樣：（給父元素添加屬性： positon:relative，給子元素聲明絕對定位position:absolute）
效果圖：
接下來是：
沒有嵌套關系的margin合并問題
當兩個元素沒有嵌套關系的時候（即兄弟關系），不管是否有border或者overflow屬性時，兩者始終會存在外邊距合并問題 。
在使用的時候記得取的是最大值 。
效果圖：
好了，到這里應該你也了解了邊距合并問題和怎么去解決它了，如果有什么地方表達得不夠清楚的，歡迎留言 。