在CSS樣式中，有時(shí)候我們會需要某些元素跳出其父級元素的樣式。這在網(wǎng)頁布局中非常常見，尤其是在響應(yīng)式布局中。

.parent{
background-color: #ccc;
padding: 20px;
}
.child{
background-color: #fff;
padding: 10px;
margin: 10px;
}

以上是一個簡單的CSS樣式，其中.parent是父級元素，.child是子級元素。我們能夠看到，子級元素的背景顏色和父級元素相同，這就是由于樣式的繼承所導(dǎo)致的。如果我們想讓子級元素跳出父級元素的樣式，該怎么做呢？

有兩種常見的方法：

1.使用inherit

.parent{
background-color: #ccc;
padding: 20px;
}
.child{
background-color: inherit;
padding: 10px;
margin: 10px;
}

可以看到，我們在子級樣式中使用了inherit屬性，這個屬性可以繼承父級元素的某些樣式，這樣就能夠使子元素的背景顏色跟隨父元素，但是其它樣式仍舊可以自由地定義。

2.使用position

.parent{
background-color: #ccc;
padding: 20px;
position: relative;
}
.child{
background-color: #fff;
padding: 10px;
margin: 10px;
position: absolute;
left: 0;
top: 100%;
}

這種方法需要在父級元素中使用position屬性，并且需要子元素使用position屬性為absolute，并且定義left和top的值，這樣就能夠使子元素完全跳出父級元素的樣式。

以上是兩種常見的方法，通過這些方法我們就能夠輕松地讓子元素跳出父元素的樣式。