在开始之前,先回顾些知识点。
一、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 部分。
二、结论
这里给出几条实践后的结论
- 子元素设置为 width:100% 或 width:auto 将得到父元素 content 的宽度,子元素再进一步分配
- width:100%
- 子元素的 width 为父元素的 content 的宽度。其中子元素的 width 遵循 box-sizing 的设置,分为 content-box 和 border-box 两种情况
- 若子元素设置了 margin,将移动子元素,导致超出父元素 content 的区域 - width:auto
- 无论 box-sizing 设置为哪种盒模型,表现形式为子元素的 margin + border + padding + content 等于父元素的 content 的宽度 - 绝对定位的情况:子元素绝对定位,父元素相对定位
- 子元素的 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