使用百分比宽度可使盒子按父元素比例显示，.child设置width:50%时宽度为父容器300px的一半即150px，需注意padding和border会额外增加宽度，导致溢出；通过box-sizing:border-box可将内边距和边框包含在宽度内，确保尺寸准确；结合Flex布局时，设置display:flex与flex:1可让子元素平分父容器空间，适用于响应式设计。关键在于理解百分比基于父级宽度，并配合box-sizing和弹性布局实现精确控制。
要让盒子的宽度按父元素的比例显示，主要通过 百分比宽度 来实现。CSS 中设置宽度为百分比时，其计算依据是父容器的宽度。
使用百分比设置宽度
将子元素的 width 属性设为百分比值，即可使其宽度相对于父元素。
例如：
.parent {
width: 300px;
height: 200px;
background-color: #f0f0f0;
}
.child {
width: 50%; / 宽度为父元素的 50% /
height: 100px;
background-color: #007bff;
}
此时 .child 的宽度就是 150px（300px × 50%）。
注意盒模型的影响
如果子元素设置了 padding 或 border，默认情况下这些会增加总宽度，可能导致超出父容器。
立即学习“前端免费学习笔记（深入）”；
解决方法是使用：
.box-sizing: border-box;
这样 padding 和 border 会被包含在 width 内，确保百分比宽度准确。
配合 Flex 布局更灵活控制
在弹性布局中，可以使用 flex-grow、flex-basis 等属性实现比例分配。
示例：两个子元素平分父容器宽度
.parent {
display: flex;
}
.child-1,
.child-2 {
flex: 1; / 平均分配可用空间 /
}
这种方式在响应式设计中非常实用。
基本上就这些，关键是理解百分比基于父元素宽度，再结合 box-sizing 和布局方式灵活使用。
