css两边留白中间自适应

CSS开发中，我们经常需要为页面内容设置左右留白。但对于中间内容自适应的情况，对于初学者而言，可能会遇到一些困惑。本文将带大家一起探究如何实现这种布局效果。

/* 设置左右留白的样式 */
.container {
  margin: 0 20px;
}

/* 实现中间内容自适应的样式 */
.content {
  max-width: 100%;
}

/* HTML布局 */
<div class="container">
  <div class="content">
    这里是中间的内容，会自适应宽度。
  </div>
</div> 

首先，我们需要为页面容器(.container)设置左右的留白。可以通过设置margin属性的值实现。在此我们将左右留白设置为20px，样式如下所示：

.container {
  margin: 0 20px;
} 

接着，我们需要为中间内容(.content)设置自适应宽度的样式。这里我们可以通过设置max-width为100%实现。注意，这里不能使用width: 100%，因为这样设置的话，内容区域将会占据整个父容器的宽度，无法实现左右留白的效果。样式如下所示：

.content {
  max-width: 100%;
} 

最后，我们将设置好的样式应用到HTML布局中。将中间内容(.content)放置在父容器(.container)中，即可实现左右留白且中间内容自适应的布局效果。HTML布局如下所示：

<div class="container">
  <div class="content">
    这里是中间的内容，会自适应宽度。
  </div>
</div> 

借助这种布局技巧，我们可以实现更加美观和合理的页面布局，并且能够提升用户体验。