CSS邊框折疊是CSS盒模型的一個(gè)特性，用于解決子元素嵌套時(shí)產(chǎn)生的額外邊框問(wèn)題。這個(gè)問(wèn)題很容易發(fā)生，比如當(dāng)一個(gè)div內(nèi)部包含多個(gè)子元素，每個(gè)子元素都有自己的邊框。此時(shí)，元素之間的邊框會(huì)發(fā)生錯(cuò)位現(xiàn)象，導(dǎo)致多余的邊框出現(xiàn)。這個(gè)問(wèn)題可以使用CSS邊框折疊來(lái)解決。

.parent {
border: 1px solid black; /* 父元素邊框 */
padding: 10px;
}
.child {
border: 1px solid red; /* 子元素邊框 */
padding: 5px;
}
/* 當(dāng)父元素和子元素都有邊框時(shí)會(huì)產(chǎn)生折疊 */
/* CSS邊框折疊的解決方案 */
.parent {
border: 1px solid black;
padding: 10px;
overflow: auto; /* 觸發(fā)邊框折疊 */
}
.child {
border: 1px solid red;
padding: 5px;
margin: -1px; /* 抵消邊框折疊效果 */
}
/* 使用邊框折疊后的方案 */

以上代碼演示了如何使用CSS邊框折疊解決子元素邊框錯(cuò)位問(wèn)題。在父元素中設(shè)置overflow屬性為auto可以觸發(fā)邊框折疊，從而消除多余的邊框。在子元素中設(shè)置margin為負(fù)值可以抵消邊框折疊的效果，從而使子元素仍然擁有自己的邊框樣式。