CSS 盒子模型

盒子模型，就是把 HTML 页面中的元素看成一个个矩形的盒子，也就是一个能盛装内容的容器。

CSS 盒子模型包括：边框、外边距、内边距、实际内容。

1、边框（border）

div {
  width: 200px;
  height: 200px;

  /* border-width 边框粗细，一般指定为具体像素值 */
  border-width: 5px;

  /* border-style 边框样式，常用的有：
     solid: 实线边框 ｜dashed: 虚线边框 ｜dotted: 点线边框 */
  border-style: solid;

  /* border-color 边框颜色 */
  border-color: blue;
}

边框属性可以简写为：

border: 5px solid blue;

我们还可以单独设置某个边框的样式：

border-top: 5px solid blue;

在表格中，每一个单元格是一个盒子，在设置单元格边框时，相邻单元格的边框会叠加，变成 2 倍的 border-width，此时可以用 border-collapse 合并边框：

border-collapse: collapse;

需要注意的是，边框会影响盒子实际的大小，在上面的代码中，盒子宽高都是 200px，边框为 5px，那么盒子实际大小为 210px * 210px。

2、内边距（padding）

padding 属性用于设置内边距，即边框与内容之间的距离。

padding-left: 8px;     /*左内边距*/
padding-right: 8px;    /*右内边距*/
padding-top: 8px;      /*上内边距*/
padding-bottom; 8px;   /*下内边距*/

内边距属性简写可以有一到四个值：

• padding: 8px; （ 代表上下左右的内边距都是 8px ）
• padding: 8px 10px; （ 代表上下内边距为 8px，左右内边距为 10px ）
• padding: 8px 10px 20px; （ 代表上内边距为 8px，左右内边距为 10px，下内边距为 20px ）
• padding: 8px 10px 16px 20px; （ 代表上内边距为 8px，右内边距为 10px，下内边距为 16px，左内边距为20px，记忆：顺时针方向 ）

当我们为盒子添加 padding 后，内容与边框之间有了距离，padding 影响了盒子的实际大小

如果 盒子已经有了宽度和高度，设置 padding 会撑大盒子；如果 盒子本身没有指定width/height，则设置 padding 不会撑大盒子。

3、外边距（margin）

margin 属性用于设置外边距，即盒子和盒子之间的距离。

外边距的用法和 padding 一致。

在实际开发中，外边距可以让 块级盒子水平居中：

.box {
  width: 500px;    /* 1、为盒子设置宽度 */
  margin: 0 auto;    /* 2、设置盒子的左右外边距都为 auto */
}

如果想让 行内元素或者行内块元素水平居中，可以给其父元素添加 text-align: center;

相邻块元素垂直外边距的合并

当上下两个相邻的块元素相遇，如果上面的元素设置了 margin-bottom，下面的元素有 margin-top，则他们之间的垂直距离不是二者之和，而是取两个值中的较大者，这种现象被称为 相邻块元素垂直外边距的合并。

.box1 {
  margin-bottom: 20px;
}
.box2 {
  margin-top: 10px;
}
<div>
  <!-- 两个盒子的实际间距为 20px -->
  <div class="box1">盒子 1</div>
  <div class="box2">盒子 2</div>
</div>

这种情况，我们 只给其中一个盒子设置 margin 即可。

嵌套块元素垂直外边距的塌陷

对于两个嵌套关系的块元素，父元素有上外边距，同时子元素也有上外边距，此时 父元素会塌陷较大的外边距。

.father {
  margin-top: 20px;
}
.child {
  margin-top: 50px;
}
<div>
  <!-- 父元素实际上外边距为 50px -->
  <div class="father">
    <div class="child">我是子元素</div>
  </div>
</div>

解决方案有三种：

1. 为父元素设置上边框（ border-top ）
2. 为父元素定义上内边距（ padding-top ）
3. 为父元素添加属性 overflow: hidden

4、CSS3 新特性

4.1 圆角边框

在 CSS3 中新增了圆角边框样式，这样我们可以给盒子设置圆角了。

border-radius: 20px;
border-radius: 50%;

参数可以是数值，也可以是百分比，如果盒子是个正方形，设置 border-radius 为 50%，就可以将盒子设置成一个圆形。

border-radius 是个简写属性，我们也可以单独设置盒子某个角的圆角样式：

• border-top-left-radius
• border-top-right-radius
• border-bottom-left-radius
• border-bottom-right-radius

4.2 盒子阴影

在 CSS3 中新增了 box-shadow 属性，可以为盒子添加阴影。

/* 语法：box-shadow: h-shadow v-shadow blur spread color inset */
box-shadow: 10px 10px 6px 4px rgba(0,0,0,.3);

- 默认的是外阴影（outset），但是不可以写这个值，不然会导致阴影无效- 设置阴影不占盒子空间，不影响盒子排列