在进行前端开发时，CSS中的box-sizing属性，经常被应用于组织元素的布局方式。该属性有三个值：
1. content-box： 默认值，元素的width和height只包含内容的宽度和高度，不包含border和padding的宽度和高度。
2. border-box：元素的width和height包含内容的宽度和高度，还包含border和padding的宽度和高度。
3. inherit：继承父元素的box-sizing属性。
/* 例子 */
.content-box {
box-sizing: content-box;
width: 200px;
height: 200px;
padding: 20px;
border: 10px solid black;
}
.border-box {
box-sizing: border-box;
width: 200px;
height: 200px;
padding: 20px;
border: 10px solid black;
}
在这个例子中，.content-box和.border-box都设置了一个200×200的盒子，都有20px的padding和10px的border。然而，使用content-box时，整个盒子的宽度为260px，而使用border-box时，整个盒子的宽度为240px。
那么，我们可以利用box-sizing属性来撑大一个盒子。比如：
.box {
box-sizing: border-box;
height: 200px;
padding: 20px;
border: 10px solid black;
}
.box .sub-box {
width: 100%;
height: 100%;
background-color: red;
}
上例中，我们定义了一个.box盒子，使用了border-box和一些padding和border。现在，我们希望.box里面的一个子元素.sub-box，能够填满整个盒子。我们可以将.sub-box的宽度和高度都设置为100%。这时，.sub-box的宽度将会是.box的宽度减去padding和border的宽度（200-20-20-10-10=140），而.height：200px则保证了.sub-box的高度填满.box。
随着CSS无限的可能性，box-sizing属性可以帮助我们更好地控制页面的布局。在合理地使用该属性时，我们能够更加灵活地控制元素的尺寸和间距，实现各种美观的页面效果。
