在前端開發(fā)中，CSS 是必不可少的一部分。它是用來控制網(wǎng)頁樣式的語言，除了能夠制作出優(yōu)美的頁面外，還有許多實(shí)用的功能。其中，子元素溢出是 CSS 中一項(xiàng)重要的功能。

.parent {
width: 200px;
height: 200px;
border: 1px solid black;
overflow: hidden;
}
.child {
width: 300px;
height: 300px;
background-color: red;
}

上面代碼中，我們設(shè)置了一個父元素的寬高并添加了邊框。我們希望在父元素中放置一個子元素，并讓子元素超出父元素的邊界。為此，我們將子元素的寬高設(shè)置為 300px，超出父元素的寬高。

此時，我們會發(fā)現(xiàn)子元素的內(nèi)容已經(jīng)超出了父元素，由于我們在父元素中設(shè)置了 overflow:hidden，所以子元素的超出部分將不會被顯示。

如果我們想讓子元素的內(nèi)容能夠顯示出來，有以下三種解決方案：

一、修改父元素的 overflow 屬性為 auto 或者 scroll。

.parent {
width: 200px;
height: 200px;
border: 1px solid black;
overflow: auto;
}
.child {
width: 300px;
height: 300px;
background-color: red;
}

二、設(shè)置子元素的 position 為 absolute，然后通過 left、top、bottom、right 屬性來控制子元素的位置。

.parent {
width: 200px;
height: 200px;
border: 1px solid black;
position: relative;
}
.child {
width: 300px;
height: 300px;
background-color: red;
position: absolute;
left: -50px;
}

三、使用 transform 屬性來控制子元素的位置。

.parent {
width: 200px;
height: 200px;
border: 1px solid black;
overflow: hidden;
}
.child {
width: 300px;
height: 300px;
background-color: red;
transform: translate(-50px, -50px);
}

以上就是 CSS 中關(guān)于子元素溢出的解決方案。我們可以根據(jù)實(shí)際需求選擇合適的方法，并通過 CSS 創(chuàng)造出符合我們需求的優(yōu)美頁面。