CSS中的width: 100%在前端開發中扮演著至關重要的角色。這個屬性可以讓元素的寬度被設置為父元素的100%，這樣多個元素可以在同一行進行顯示。

.parent {
width: 500px;
}
.child {
width: 100%;
}

在上面的代碼中，我們可以看到父元素的寬度是設置為500像素，而子元素的寬度是設置為100%。這將使子元素充滿父元素的寬度，從而實現多個元素同行顯示的效果。

一個更常見的用法是將寬度設置為瀏覽器視口的100%，從而實現響應式布局的效果。

.container {
width: 100%;
}
.box {
width: 50%;
float: left;
}

在上面的代碼中，我們可以看到容器的寬度設置為100%，這將使容器充滿整個瀏覽器視口。而子元素則通過設置寬度為50%和浮動來實現兩列布局的效果。

需要注意的是，如果元素內部存在padding或border等屬性，其實際寬度可能會超出父元素的寬度，因此需要進行緊密的跟蹤和調整。

.parent {
width: 500px;
}
.child {
width: calc(100% - 20px);
padding: 10px;
box-sizing: border-box;
}

在上面的代碼中，我們使用了calc()函數來計算子元素的寬度，將它減去了padding的值。同時，我們使用了box-sizing: border-box屬性來讓子元素的padding和border計算在內，從而避免超出父元素的寬度。

綜上所述，width: 100%是前端開發中非常常用的屬性。通過靈活運用，可以實現多種布局效果。