content
{{ contentW }}px
{{ contentW }}px
{{ padding }}px
{{ border }}px
{{ margin }}px
box-sizing:
margin
border
padding
实际占用宽度
{{ total }}px
{{ contentW }} + {{ padding }}×2 + {{ border }}×2 + {{ margin }}×2 = {{ total }}px
{{ contentW }}px（已包含 padding 和 border） + {{ margin }}×2 = {{ total }}px
三个卡片需要 {{ total * 3 }}px，超出容器 900px，第三个会掉下去
三个卡片共 {{ total * 3 }}px，可以放下
CSS
.box {
box-sizing: {{ boxSizing }};
width: {{ contentW }}px;
padding: {{ padding }}px;
border: {{ border }}px solid #ccc;
margin: {{ margin }}px;
}