div宽度100%和auto的区别-马育民老师

# 介绍

`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）

1. **默认 box-sizing: content-box（标准盒）**
上面例子的效果，100%极易溢出，auto自适应留白。

2. **box-sizing: border-box（推荐）**
 - `width:100%`：宽度包含 `border+padding`，总宽严格等于父宽，不溢出
 - `width:auto`：和 `content-box` 表现一致，自动收缩

# 子元素有margin外边距时

1. 子元素 width:100%
内容强制占满父宽，左右margin会直接**向外撑开**，整体超出父容器

2. 子元素 width:auto
块级元素左右margin会**向内挤压内容**，整体总宽度依旧等于父容器宽度

# 适用场景对比

### width: 100% 使用场景

1. 行内块/弹性/浮动元素需要强制填满父宽度
2. 配合 `box-sizing:border-box` 做全屏通栏布局
3. 图片、视频等替换元素铺满容器

### width: auto（块级默认）使用场景

1. 普通div、section、p等块状布局（原生自带，无需手动写）
2. 存在padding/border/margin，不想计算宽度、避免溢出
3. 自适应流式布局，自动适配容器大小

# 总结

1. 无padding、border、margin时：两者视觉效果完全一样；
2. 有内边距/边框：`auto` 自动缩小内容不溢出，`100%` 直接撑破父容器；
3. 块状元素优先用默认auto；行内/浮动/弹性元素铺满容器建议 `width:100% + border-box`。

### 示例代码直观演示
```html
<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>
```

原文出处：http://malaoshi.top/show_1GW3XJL9sU1t.html