[分享]css中宽100%两边留边距

CSS中的宽100属性实现的是元素宽度与其父元素宽度相等，也就是宽度占满整个父容器。但是如果直接设置宽度为100可能会导致元素过于拥挤，无法达到良好的视觉效果，因此我们需要使用留白技巧来让元素更加舒适...

CSS中的宽100%属性实现的是元素宽度与其父元素宽度相等，也就是宽度占满整个父容器。但是如果直接设置宽度为100%可能会导致元素过于拥挤，无法达到良好的视觉效果，因此我们需要使用留白技巧来让元素更加舒适自然。

 /* 设置外层容器样式 */
  .container {
    display: flex;
    justify-content: center;
  }

  /* 设置元素样式 */
  .box {
    width: 100%;
    max-width: 1200px; /* 设置最大宽度避免过于拥挤 */
    margin: 0 16px; /* 设置左右留白距离 */
    box-sizing: border-box; /* 避免元素宽度超出 */
  } 

上面代码中，我们通过设置元素的最大宽度和左右方向的留白距离来优化它的宽度样式。并且为了避免留白影响元素宽度，需要设置box-sizing值为border-box来包含元素内边距和边框在内的宽度计算。

通过这种方式，我们可以方便地实现CSS中宽度100%的元素样式美化，达到更好的效果和用户体验。同时，这种留白技巧也可以应用在其他样式设计中，使得元素布局更加美观和合理。