最近看了《css 世界》，颇有体会，总结一下它的作用细节。
首先回顾一下盒模型：
中心的content,padding ,border,margin,这些又被分成4个盒子，content box(content-box),padding box(padding-box), border box(border-box), margin-box(透明)。
width的默认值是auto,至少包含以下4种不同的宽度的表现
- 充分利用可用空间。fill-available
- 收缩与包裹。fit-content
- 收缩到最小min-content
- 超出容器限制。
<style>
.father{
width:150px;
background-color: aqua;
white-space: nowrap;
}
.child{
display: inline-block;
background-color: red;
}
</style>
</head>
<body>
<div class='father'>
<div class="child">恰似一江春水向东流，流到断崖不回头，不回头，不回头！！！</div>
</div>
</body> .father{
background:red;
height:40px;
width:700px;
font-size:30px;
color:#fff;
height:80px;
}
.child{
background:green;
height:40px;
width:100%;
padding-left: 20px;
width:auto;
}
</style>
</head>
<body>
<div class='father'>
<div class="child">恰似一江春水向东流，流到断崖不回头，不回头，不回头！！！</div>
</div>