介绍
width 属性只控制 内容区
1. width: 100%
元素内容宽度 = 父容器内容宽度
计算公式：内容区宽度 = 父元素都内容宽度 × 100%
2. width: auto（块级元素默认值）
浏览器自动计算宽度，自动填充父容器剩余空间，块级元素默认就是auto。
关键差异
带 边框/内边距 时差距最大
场景：父宽 300px，div设置 border:10px; padding:10px
子元素设置 width:100%
子元素内容区宽度 = 父元素都内容宽度 × 100% = 300px
总占用宽度 = 300(子元素内容区宽度) + 20(左右padding) + 20(左右border) = 340px
注意： 会溢出父容器，出现横向滚动条
子元素设置 width:auto
浏览器自动压缩内容宽度，预留padding+border
子元素内容区宽度 = 300 - 20padding -20border = 260px
总占用宽度 = 260+20+20 = 300px
注意： 不会溢出，完美贴合父容器
盒模型影响（box-sizing）
默认 box-sizing: content-box（标准盒）
上面例子的效果，100%极易溢出，auto自适应留白。box-sizing: border-box（推荐）
width:100%：宽度包含border+padding，总宽严格等于父宽，不溢出width:auto：和content-box表现一致，自动收缩
子元素有margin外边距时
子元素 width:100%
内容强制占满父宽，左右margin会直接向外撑开，整体超出父容器子元素 width:auto
块级元素左右margin会向内挤压内容，整体总宽度依旧等于父容器宽度
适用场景对比
width: 100% 使用场景
- 行内块/弹性/浮动元素需要强制填满父宽度
- 配合
box-sizing:border-box做全屏通栏布局 - 图片、视频等替换元素铺满容器
width: auto（块级默认）使用场景
- 普通div、section、p等块状布局（原生自带，无需手动写）
- 存在padding/border/margin，不想计算宽度、避免溢出
- 自适应流式布局，自动适配容器大小
总结
- 无padding、border、margin时：两者视觉效果完全一样；
- 有内边距/边框：
auto自动缩小内容不溢出，100%直接撑破父容器； - 块状元素优先用默认auto；行内/浮动/弹性元素铺满容器建议
width:100% + border-box。
示例代码直观演示
<style>
.parent {
width: 300px;
background: #eee;
margin: 20px 0;
}
.box1 {
width: 100%;
padding: 10px;
border: 10px solid #666;
background: skyblue;
}
.box2 {
width: auto; /* 可省略，块级默认 */
padding: 10px;
border: 10px solid #666;
background: lightgreen;
}
</style>
<div class="parent">
<div class="box1">width:100%（溢出）</div>
</div>
<div class="parent">
<div class="box2">width:auto（贴合）</div>
</div>