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%是前端开发中非常常用的属性。通过灵活运用，可以实现多种布局效果。