从0到1掌握盒子模型：精准控制网页布局的秘诀

引言

html页面中任何元素都是一个盒子（box）。学好css的基础是理解盒模型的工作原理。也是爬虫选择器入门的基础

盒子模型基础解剖

内容和大小

盒子的大小可以有两种控制方式：

extrinsic sizing : 显式设置盒子的width和height为固定尺寸，例如设置width和height为400px、600px，那么盒子的大小就固定了。
intrinsic sizing : 不设置盒子的大小，或者设置盒子的大小为非固定尺寸，例如设置width和height属性值为min-content或者max-content, 此时盒子的大小由浏览器决定，浏览器会根据内容自动调整盒子的大小。

盒子的四层结构

css 复制代码

/* 可视化盒子模型 */
.element {
  width: 300px;         /* 内容宽度 */
  padding: 20px;        /* 内边距（内容与边框的距离） */
  border: 3px solid #f06; /* 边框 */
  margin: 30px;         /* 外边距（边框外部的宽带） */
  background: #f0f8ff;  /* 背景延伸到边框 */
}

box-sizing属性

box-sizing定义了如何去计算一个元素的高度和宽度。当你设置了元素的width和height尺寸时，默认情况下设置的是content区域的尺寸，这意味着盒子最终的大小为会加上borderSize和paddingSize，而不是你设置的尺寸。我们可以设置box-sizing为border-box, 覆盖这一默认行为，此时我们设置的width和height尺寸就是盒子最终的尺寸（包括边框和内边距）。

box-sizing可以设置如下两种值：

content-box: 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box: 你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

高级布局实战技巧举例

精准尺寸计算

css 复制代码

/* 完美等宽三栏布局 */
.grid {
  display: flex;
}

.column {
  flex: 1;                   /* 基础比例 */
  padding: 15px;
  margin: 0 10px;
  border: 1px solid #ddd;
  
  /* 精确宽度 = 100% - margin*2 - padding*2 - border*2 */
  box-sizing: border-box;    /* 关键！ */
}

负margin的黑科技

css 复制代码

/* 经典圣杯布局 */
.container {
  padding: 0 200px; /* 左右预留空间 */
}

.main {
  width: 100%;
  float: left;
}

.left {
  width: 200px;
  float: left;
  margin-left: -100%; /* 关键！ */
  position: relative;
  left: -200px;
}

.right {
  width: 200px;
  float: left;
  margin-left: -200px; 
  position: relative;
  right: -200px;
}

总结

如果你喜欢本教程，记得点赞+收藏！关注我获取更多JavaScript开发干货。