在前端開發中，CSS 是構建網頁布局和樣式的重要工具。其中 CSS 過渡（CSS Transition）是一種讓網頁元素在屬性值發生變化時平滑地變化的特效。在這篇文章中，我們將探討如何使用 CSS 過渡來實現父元素寬度的平滑過渡。 首先，我們需要在 HTML 中創建一個父元素，如下所示：

<div class="parent">
<div class="child"></div>
</div>

接下來，我們需要給父元素添加一些 CSS 樣式，如下所示：

.parent {
width: 100px;
height: 100px;
background-color: #f0f0f0;
transition: width 1s ease;
}
.child {
width: 50px;
height: 50px;
background-color: #00bcd4;
}

在上面的代碼中，我們為父元素設置了寬度為 100 像素，高度為 100 像素，并且添加了一個過渡效果，當寬度發生變化時，需要 1 秒鐘的時間來完成變化，變化的速度設置為 ease（漸變）。同時，我們在子元素中設置了寬度為 50 像素和高度為 50 像素。 現在，我們需要添加一個事件，以便在單擊某個按鈕時，改變父元素的寬度：

<button onclick="document.querySelector('.parent').style.width='200px'">Enlarge</button>
<button onclick="document.querySelector('.parent').style.width='100px'">Shrink</button>

在上面的代碼中，我們創建了兩個按鈕：一個用于增加父元素的寬度，另一個用于減少父元素的寬度。函數中使用 `document.querySelector('.parent').style.width` 來獲取父元素寬度，從而實現寬度的改變效果。 現在，我們可以在瀏覽器中查看結果，當我們單擊“放大”按鈕時，父元素的寬度將從 100 像素平滑地過渡到 200 像素，當我們單擊“縮小”按鈕時，父元素的寬度將從 200 像素平滑地過渡到 100 像素。 總結：使用 CSS 過渡可以實現平滑地過渡效果，可以讓網頁變得更加生動有趣。在處理父元素寬度變化時，使用 CSS 過渡可以讓頁面顯得更加流暢和自然。希望本文能夠對你有所幫助。