今天周六要過來上班，閑來無事就又研究了一下css的問題，前一段時(shí)間去面試，被問到邊框塌陷的問題，我是一個(gè)小白，只是知道并沒有深入的去了解，今天在網(wǎng)上查了一下，自己也去敲了一遍，終于有所了解。下面是我寫的一個(gè)demo。

打開瀏覽器，我想有些小白肯定和我想的一樣，樣式呈現(xiàn)出來如下：

如果認(rèn)為如上圖的話 那么你就錯(cuò)了，其實(shí)是下面的樣子：

我一頭霧水的去查了一下，發(fā)現(xiàn)是邊框塌陷的問題，因?yàn)镃SS中存在一個(gè)margin collapse，即邊界塌陷或者說邊界重疊。對于上下兩個(gè)并列的div塊而言，上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下兩者margin里最大值作為顯示值，所以從這個(gè)意義上說：CSS及瀏覽器的設(shè)計(jì)者們希望我們在布局時(shí)，如果遇到上下兩個(gè)并排內(nèi)容塊的安排，最好只設(shè)置其中每個(gè)塊上或下margin的一處即可。

但對于父塊DIV內(nèi)含子塊DIV的情況，就會按另一條CSS慣例來解釋了，那就是：對于有塊級子元素的元素計(jì)算高度的方式,如果元素沒有垂直邊框和填充,那其高度就是其子元素頂部和底部邊框邊緣之間的距離。所以對于代碼：<div?class="father"></div>father這個(gè)div的高度為0，因?yàn)槔锩鏇]有能夠撐開div的內(nèi)容。如果變?yōu)?#xff1a;?<div?class="father">I?am here.</div> 則高度就是文字的高度，因?yàn)榇藭r(shí)文字在撐著這個(gè)DIV。

話說回來，一個(gè)DIV和它的子DIV特別重視垂直邊框或填充，也就好像是，一口鍋，里面放個(gè)盆，能不能扣住里面的盆，主要看鍋蓋了，垂直邊框或填充就是這個(gè)“鍋蓋”。于是解決的方式至少有以下兩種： ?結(jié)論： ??? 解決父子DIV中頂部margin cllapse的問題，需要給父div設(shè)置： ??? 1、邊框，當(dāng)然可以設(shè)置邊框?yàn)橥该?/span>border:1px?solid?transparent或border-top:1px?solid?transparent???
????2、為父DIV添加padding，或者至少添加padding-top; 此外，還可以通過over-flow來解決，給父DIV寫入：over-flow:hidden; 希望對某些小白有所幫助，也希望大佬多多指教。

總結(jié)

以上是生活随笔為你收集整理的边框塌陷的问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。