* {
box-sizing: border-box;
}
/* 现在，100px 就是 100px。
墙壁和缓冲垫会往里面挤，
而不会把盒子撑大。 */
任务： 计算盒子的总宽度。
问题：width: 200px; padding: 20px; border: 5px; (默认 box-sizing)。总宽度是多少？
大卫的勇士们不能挤在一起，也不能离得太远。我们用 Margin 和 Padding 来排兵布阵！
文字需要呼吸空间。Padding 让文字不贴着边框。
.warrior-btn {
/* 上下 10px，左右 20px */
padding: 10px 20px;
background: #e5e7eb;
border: 2px solid #333;
}
按钮之间需要间隔。Margin 推开周围的元素。
.warrior-btn {
/* 彼此保持 10px 的距离 */
margin-right: 10px;
}
为了防止按钮忽大忽小，加上“布局的盾牌”。
.warrior-btn {
box-sizing: border-box;
display: inline-block; /* 让它们排成一行 */
}