css html让盒子里的卡片内外边距加上卡片的宽度不超过盒子宽度100%，如何布局

可以使用CSS的`box-sizing`属性来控制盒模型的大小计算方式，将其设置为`border-box`可以使内外边距和边框计算在盒子的总宽度内。然后可以使用`flexbox`来布局卡片，通过设置`flex-wrap`属性为`wrap`可以让卡片在一行排不下时自动换行。最后，可以将卡片的宽度设置为百分比，并根据需要调整卡片内外边距的大小，以确保卡片的宽度加上内外边距不超过父元素的100%。

以下是一个示例代码：

HTML:

<div class="container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
  <div class="card">Card 5</div>
</div>

CSS:

.container {
  display: flex;
  flex-wrap: wrap;
}
.card {
  box-sizing: border-box;
  width: 30%; /* 设置卡片宽度为30% */
  margin: 1%; /* 设置卡片外边距为1% */
  padding: 10px; /* 设置卡片内边距为10px */
  background-color: #f5f5f5;
  border: 1px solid #ccc;
}

这样就可以实现卡片内外边距加上卡片的宽度不超过盒子宽度100%的布局效果。