本文分析一个常见的CSS布局难题：如何使绝对定位的子元素宽度精确匹配父元素的内容区域宽度（排除padding影响）。
问题： 父元素采用相对定位并设置了padding属性，其内部的绝对定位子元素宽度设置为100%。然而，由于绝对定位的特性，子元素的宽度基于父元素的边框计算，包含了padding，导致子元素宽度超出预期。
代码示例：
<div class="container"> <div class="info"></div> </div>
body {
background: red;
}
.container {
position: relative;
width: 400px;
height: 400px;
background: blue;
padding: 20px;
}
.info {
position: absolute;
width: 100%;
height: 100%;
background: #fff;
}问题根源： 绝对定位子元素的定位起点是父元素的padding边界，而非内容区域边界。因此，width: 100% 指的是父元素的总宽度（包含padding）。
立即学习“前端免费学习笔记（深入）”；
解决方案：
为了让子元素宽度仅占据父元素内容区域，需将子元素的left和top属性设置为0。这将使子元素的定位起点移动到父元素内容区域的左上角，从而使其宽度精确等于父元素内容区域的宽度。
修改后的CSS代码：
.info {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #fff;
}通过设置left: 0; top: 0;，完美解决了子元素宽度超出父元素内容区域的问题，实现预期的布局效果。
以上就是CSS布局：如何让绝对定位子元素宽度精准匹配父元素内容区域？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
910
收藏
