在网页设计中，我们经常需要对元素进行样式的调整。而CSS就是用来控制样式的语言之一。在CSS中，我们可以使用子元素来撑开宽度。

.parent {
width: 500px;
height: 200px;
background-color: #ccc;
}
.child {
width: 100%;
height: 50px;
background-color: #f00;
}

上面的代码中，我们首先定义了一个父元素的样式，并设置了它的宽度和高度。然后我们再定义一个子元素，并通过设置其宽度为100%来让它的宽度撑满了父元素。

这样做的好处是，当我们需要在父元素中添加其他元素时，子元素的宽度会自动调整，不会被其它元素覆盖。同时，在不同的浏览器和设备上，子元素的宽度表现也会比较统一。

然而，有时候子元素的宽度并不是我们想要的，这时候我们可以使用盒子模型中的“box-sizing”属性来改变子元素的尺寸算法。将“box-sizing”属性设置为“border-box”可以让子元素的宽度包括其内边距和边框。

.child {
box-sizing: border-box;
width: 100%;
height: 50px;
padding: 10px;
border: 1px solid #000;
background-color: #0f0;
}

上面的代码中，我们将“box-sizing”设置为“border-box”，并设置了子元素的内边距、边框，以及背景颜色。这样一来，子元素的宽度将包括它的内边距和边框，不会受到其它元素的影响。

总之，在设计网页时，掌握子元素撑开宽度的技巧可以帮助我们更好地控制元素的尺寸和排版，在不同的设备和浏览器上呈现出更好的效果。