使用百分比宽度可使盒子按父元素比例显示，.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;
}
<p>.child {
width: 50%;  /<em> 宽度为父元素的 50% </em>/
height: 100px;
background-color: #007bff;
}</p>

此时 .child 的宽度就是 150px（300px × 50%）。

注意盒模型的影响

如果子元素设置了 padding 或 border，默认情况下这些会增加总宽度，可能导致超出父容器。

解决方法是使用：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

.box-sizing: border-box;

这样 padding 和 border 会被包含在 width 内，确保百分比宽度准确。

配合 Flex 布局更灵活控制

在弹性布局中，可以使用 flex-grow、flex-basis 等属性实现比例分配。

示例：两个子元素平分父容器宽度

.parent {
  display: flex;
}
<p>.child-1,
.child-2 {
flex: 1; /<em> 平均分配可用空间 </em>/
}</p>

这种方式在响应式设计中非常实用。

基本上就这些，关键是理解百分比基于父元素宽度，再结合 box-sizing 和布局方式灵活使用。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！