CSS的彈性盒模型和網格布局可以實現網頁元素的自適應布局，但在實際開發中我們還需要考慮父級元素寬度變化對子元素的影響。此時，我們可以使用CSS3的新屬性flex和calc，以及傳統的百分比單位來實現子元素隨父級寬度變化的效果。

.parent{
width: 100%;
display: flex;
flex-wrap: wrap;
}
.child{
width: calc((100% - 30px) / 3); /*減去間距的寬度，再平分*/
margin-right: 10px;
margin-bottom: 10px;
box-sizing: border-box;
}

上面的代碼中，我們首先將父級元素的寬度設為100%，并使用flex布局實現自適應布局。然后，我們使用calc來計算每個子元素的寬度，將子元素的margin和padding也考慮在內。最后，我們使用百分比單位將間距的寬度劃分給每個子元素。

此外，還有一些其他的方法可以實現子元素隨父級寬度變化：

• 使用百分比單位或em單位來定義子元素的寬度、邊框、padding和margin，這樣子元素的尺寸就可以隨著父級元素的寬度變化。
• 使用媒體查詢來根據屏幕尺寸變化調整子元素的樣式。
• 使用JavaScript監聽窗口寬度變化，然后根據寬度變化調整子元素的樣式。

總之，在實際開發中，我們需要綜合運用多種技術來實現子元素隨父級寬度變化的布局效果。