width: 100% 是什么意思？第一反应就是父元素宽度的 100%，这里说的父元素的宽度包括父元素的 padding 和 border 吗？先说结论：不包括。接下来，看例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap1{
width: 300px;
padding: 20px;
box-sizing: border-box;
background-color: black;
}
.wrap2{
width: 300px;
padding: 20px;
box-sizing: content-box;
background-color: black;
margin-top: 30px;
}
.inner{
width: 100%;
height: 30px;
background-color: red;
}
</style>
</head>
<body>
<div class="wrap1">
<div class="inner"></div>
</div>
<div class="wrap2">
<div class="inner"></div>
</div>
</body>
</html>
| 父元素 | 子元素 | |
|---|---|---|
| 父元素：box-szing: border-box | ||
| 父元素：box-szing: content-box |
可以看到无论父元素的 box-szing 是 border-box 还是 content-box，子元素设置 100% 的含义是父元素的宽度的 100%(不包括父元素的 padding 和 border的宽度)
实际用途
搞清楚 width:100% 的含义后，平时在写页面布局的时候，一般会遇到卡片或者是 h5 页面中会留着左右间距，这个时候就可以让父元素设置 padding:XX; 然后子元素大胆使用 width:100%
