width:100%、width:auto、绝对定位、box-sizing:border-box、box-sizing:content-box 的混搭结论分析

在开始之前，先回顾些知识点。

一、CSS盒模型

CSS的盒模型由外到内分别为 margin、border、padding、content。分为标准盒模型与IE盒模型，可使用 box-sizing 属性去切换盒模型。

• 标准盒模型：box-sizing:content-box; 意味着该盒子的 width 包裹的是 content 盒子即 content 部分。
• IE盒模型：box-sizing:border-box; 意味着该盒子的 width 包裹的是 border 盒子即 border + padding + content 部分。
  

二、结论

这里给出几条实践后的结论

1. 子元素设置为 width:100% 或 width:auto 将得到父元素 content 的宽度，子元素再进一步分配
2. width:100%
   - 子元素的 width 为父元素的 content 的宽度。其中子元素的 width 遵循 box-sizing 的设置，分为 content-box 和 border-box 两种情况
   - 若子元素设置了 margin，将移动子元素，导致超出父元素 content 的区域
3. width:auto
   - 无论 box-sizing 设置为哪种盒模型，表现形式为子元素的 margin + border + padding + content 等于父元素的 content 的宽度
4. 绝对定位的情况：子元素绝对定位，父元素相对定位
   - 子元素的 width 为父元素 content + padding。其中子元素的 width 遵循 box-sizing 的设置，分为 content-box 和 border-box 两种情况

三、分析

<style>
  * {
    box-sizing: content-box; // 盒模型切换
  }
  .parent {
      height: 200px;
      width: 200px;
      padding: 10px;
      border: 20px solid red;
  }
  .child1 {
      width: 100%;
      padding: 10px;
      border: 20px solid blue;
      /* margin: 30px; */
  }
  .child2 {
      width: auto;
      padding: 10px;
      border: 20px solid blue;
      margin: 30px;
  }
</style>

<div class="parent">
  <div class="child1"></div>
</div>
<br>
<div class="parent">
  <div class="child2"></div>
</div>

width:100%

box-sizing:content-box; 子元素的 width（包含content）为父元素的 content，都为200px

box-sizing:border-box; 子元素的 width（包含content + padding + border）为父元素的 content，都为140px

设置了 margin 后，子元素移动 margin 距离为30px，超出父元素 content 部分刚好为 padding + border = 30px

width:auto
box-sizing:content-box; 子元素的 margin + border + padding + content 等于父元素的 content 的宽度，为200px

box-sizing:border-box; 子元素的 margin + border + padding + content 等于父元素的 content 的宽度，为140px

绝对定位:

<style>
	.parent2 {
		position: relative;
	    height: 200px;
	    width: 200px;
	    padding: 10px;
	    border: 20px solid red;
	}
	.child3 {
	    position: absolute;
	    width: 100%;
	    padding: 10px;
	    border: 20px solid blue;
        margin: 30px;
	}
</style>
<div class="parent2">
  <div class="child3">
  </div>
</div>

box-sizing:content-box; 子元素的 width（包含content）为父元素的 content + padding，都为220px

box-sizing:border-box; 子元素的 width（包含content + padding + border）为父元素的 content + padding，都为160px