盒模型：理解网页布局的第一步

网页中的每个 HTML 元素在渲染时都会被当成一个“盒子”来处理。这个盒子包含四个部分：content 内容区域、padding 内边距、border 边框、margin 外边距。

比如一个按钮：

button {
  padding: 10px;
  border: 2px solid #000;
  margin: 20px;
}


这就意味着，按钮的可见尺寸不仅是文字部分，还加上了内边距、边框和外边距。要精确控制总宽度，可以设置：

box-sizing: border-box;


这样，宽高就包含 padding 和 border，不会撑破布局。搞懂盒模型，就像会量尺寸的木匠，才能把页面搭得整整齐齐、不走样。