关于前端: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），然而不能够写这个值，不然会导致暗影有效
- 设置暗影不占盒子空间，不影响盒子排列