为什么有时需要 width:100% 和 height:100%？一文读懂

在网页布局中，width:100%和height:100%的使用差异源于CSS盒模型的特性。当元素设置为width:100%时，实际占用宽度为父容器内容区的100%，而height:100%要生效则必须保证父级元素有明确的高度定义。

块级元素（display:block）默认会横向撑满父容器，此时width:auto和width:100%效果等同。但在以下特殊场景必须显式声明：
元素被设置为浮动（float）
使用绝对定位（position:absolute）
父容器采用flex/grid布局
存在box-sizing:border-box的特殊盒模型

与宽度不同，height属性没有默认撑满机制。当父容器高度未明确设置时，子元素的height:100%会失效。这是许多开发者遇到布局问题的常见根源。

<input>、<textarea>等表单元素默认具有固有宽度。要实现响应式布局时，必须显式设置：
“`css
.input-field {
width: 100%;
box-sizing: border-box;
}
“`

当元素设置float属性后，其宽度会收缩为内容宽度。此时需要强制恢复宽度：
“`css
.floating-box {
float: left;
width: 100%; / 覆盖浮动导致的宽度收缩 /
}
“`

绝对定位元素脱离文档流后，其宽度基准变为最近定位祖先元素。要确保完全覆盖容器时：
“`css
.overlay {
position: absolute;
left: 0;
top: 0;
width: 100%; / 基于定位父元素的宽度 /
height: 100%;
}
“`

从html到body的链式高度继承是实现全屏布局的关键：
“`css
html, body {
height: 100%; / 建立根节点高度基准 /
}
.container {
height: 100vh; / 备用方案 /
}
“`

在flex容器中，子元素的height:100%可能失效。此时应改用flex属性控制伸缩：
“`css
.parent {
display: flex;
height: 500px;
}
.child {
flex: 1; / 替代height:100% /
}
“`

当元素设置为display:table-cell时，height:100%会产生特殊效果：
“`css
.table-container {
display: table;
width: 100%;
}
.cell {
display: table-cell;
height: 100%; / 自动等高效果 /
}
“`

当元素设置padding或border时，width:100%可能导致溢出：
“`css
/ 错误示例 /
.box {
width: 100%;
padding: 20px;
border: 1px solid ccc;
}

/ 正确方案 /
.box {
box-sizing: border-box; / 包含padding和border /
width: 100%;
}
“`

100vh ≠ 100%的本质差异：
“`css
.full-section {
height: 100vh; / 相对于可视区域 /
width: 100%; / 相对于父容器 /
}
“`

结合max-width实现弹性布局：
“`css
.responsive-img {
width: 100%;
max-width: 1200px; / 防止过度拉伸 /
height: auto;
}
“`