CSS-盒子模型详解对 CSS 中的盒子模型进行详细介绍，包含content、padding、border、margin

1. 认识盒子模型

照片墙
盒子模型组成属性:
- 内容（content）
  - 元素的内容width/height
- 内边距（padding）
  - 元素和内容之间的间距
- 边框（border）
  - 元素自己的边框
- 外边距（margin）
  - 元素和其他元素之间的间距

盒子有四边, 所以margin/padding/border都包括top/right/bottom/left四个边

2. content

设置内容是通过宽度和高度设置的:

宽度设置: width

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      background-color: #f00;

      /* width */
      /* auto 交给浏览器来决定 */
      /* 块级元素: 独占一行(父元素) */
      width: auto;
    }

    .title {
      /* 行内级: 包裹内容 */
      display: inline-block;
      width: auto;
    }

    img {
      width: auto;
      width: 200px;
    }
  </style>
</head>
<body>

  <div class="box">我是box</div>
  <span class="title">我是span元素</span>
  <img src="../images/aaa.jpg" alt="">

</body>
</html>

高度设置: height

注意: 对于行内级非替换元素来说, 设置宽高是无效的!

还可以设置如下属性:
- min-width：最小宽度，无论内容多少，宽度都大于或等于min-width
- max-width：最大宽度，无论内容多少，宽度都小于或等于max-width
```
.home {
  height: 2000px;
  background-color: #f00;

  /* 最大的宽度: 750px */
  max-width: 750px;

  /* 最小的宽度: 600px */
  min-width: 600px;

  /* 块级元素居中 */
  margin: 0 auto;
}
```
- 移动端适配时, 可以设置最大宽度和最小宽度
下面两个属性不常用:
- min-height：最小高度，无论内容多少，高度都大于或等于min-height
- max-height：最大高度，无论内容多少，高度都小于或等于max-height

3. padding

padding属性用于设置盒子的内边距, 通常用于设置边框和内容之间的间距
padding包括四个方向, 所以有如下的取值:
- padding-top：上内边距
- padding-right：右内边距
- padding-bottom：下内边距
- padding-left：左内边距
padding单独编写是一个缩写属性：
- padding-top、padding-right、padding-bottom、padding-left的简写属性
- padding缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左

padding并非必须是四个值, 也可以有其他值

<style>
    .box {
      /* 设置一个红色的实体边框 */
      border: 1px solid red;
      display: inline-block;

      /* line-height */
      /* line-height: 36px; */

      /* 内边距: padding */
      /* padding-top: 10px;
      padding-right: 20px;
      padding-bottom: 30px;
      padding-left: 40px; */

      /* 等价于: 缩写属性 */
      padding: 10px 20px 30px 40px;

      /* 其他值的情况 */
      /* 3个值 */
      /* 省略left -> 使用right */
      padding: 10px 20px 30px;
      /* 2个值 */
      /* 省略: left -> 使用right */
      /* 省略: bottom -> 使用top */
      padding: 10px 20px;
      /* 1个值 */
      /* 上下左右都使用同一个值 */
      padding: 10px;
    }
  </style>

4. border

border用于设置盒子的边框，边框相对于content/padding/margin来说特殊一些:
- 边框具备宽度width
- 边框具备样式style
- 边框具备颜色color

4.1 设置边框的方式

边框宽度
- border-top-width、border-right-width、border-bottom-width、border-left-width
- border-width是上面4个属性的简写属性
边框颜色
- border-top-color、border-right-color、border-bottom-color、border-left-color
- border-color是上面4个属性的简写属性
边框样式
- border-top-style、border-right-style、border-bottom-style、border-left-style
- border-style是上面4个属性的简写属性

4.2 边框的样式设置值

边框的样式有很多, 我们可以了解如下的几个:
- groove：凹槽, 沟槽, 边框看上去好象是雕刻在画布之内
- ridge：山脊, 和grove相反，边框看上去好象是从画布中凸出来
写法
```
div {
  border: 10px solid red;
}
```

4.3 border-radius

border-radius用于设置盒子的圆角
border-radius常见的值:
- 数值: 通常用来设置小的圆角, 比如6px
- 百分比: 通常用来设置一定的弧度或者圆形
border-radius事实上是一个缩写属性:
- 将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom-left-radius 简写为一个属性。
如果一个元素是正方形, 设置border-radius 大于或等于50% 时，就会变成一个圆

5. margin

5.1 外边距

margin属性用于设置盒子的外边距, 通常用于元素和元素之间的间距;

margin包括四个方向, 所以有如下的取值:
- margin-top：上内边距
- margin-right：右内边距
- margin-bottom：下内边距
- margin-left：左内边距
margin单独编写是一个缩写属性：
- margin-top、margin-right、margin-bottom、margin-left的简写属性
- margin缩写属性是从零点钟方向开始, 沿着顺时针转动的, 也就是上右下左
margin也并非必须是四个值, 也可以有其他值：

margin和padding的对比（希望子元素距离父元素的左上有一定的间距）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 300px;
      height: 300px;
      background-color: #f00;

      /* padding-left: 30px;
      box-sizing: border-box; */
      /* overflow: auto; */
      padding-top: 100px;
      box-sizing: border-box;
    }

    .container {
      width: 100px;
      height: 100px;
      background-color: #0f0;

      margin-left: 100px;
      /* margin-top: 100px; */
    }
  </style>
</head>
<body>

  <div class="box">
    <div class="container"></div>
  </div>

</body>
</html>

效果：

5.2 上下margin的传递

margin-top传递
- 如果块级元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素
margin-bottom传递
- 如果块级元素的底部线和父元素的底部线重叠，并且父元素的高度是auto，那么这个块级元素的margin-bottom值会传递给父元素
如何防止出现传递问题？
- 给父元素设置padding-top\padding-bottom
- 给父元素设置border
- 触发BFC: 设置overflow为auto
建议
- margin一般是用来设置兄弟元素之间的间距
- padding一般是用来设置父子元素之间的间距

5.3 上下margin的折叠

垂直方向上相邻的2个margin（margin-top、margin-bottom）有可能会合并为1个margin，这种现象叫做collapse（折叠）
- 水平方向上的margin（margin-left、margin-right）永远不会collapse
折叠后最终值的计算规则
- 两个值进行比较，取较大的值
如何防止margin collapse？
- 只设置其中一个元素的margin
上下margin折叠的情况
- 两个兄弟块级元素之间上下margin的折叠
- 父子块级元素之间margin的折叠

5.4 块级元素的水平居中

用margin进行水平居中

margin: 0 auto;

6. outline

outline表示元素的外轮廓
- 不占用空间
- 默认显示在border的外面
outline相关属性有
- outline-width: 外轮廓的宽度
- outline-style：取值跟border的样式一样，比如solid、dotted等
- outline-color: 外轮廓的颜色
- outline：outline-width、outline-style、outline-color的简写属性，跟border用法类似

◼ 应用实例

去除a元素、input元素的focus轮廓效果

a, input {
  outline: none;
}

7. box-shadow

box-shadow属性可以设置一个或者多个阴影
- 每个阴影用<shadow>表示
- 多个阴影之间用逗号,隔开，从前到后叠加
<shadow>的常见格式如下：

box-shadow: offset-x offset-y blur-radius spread-radius color
- offset-x：水平方向的偏移，正数往右偏移
- offset-y：垂直方向的偏移，正数往下偏移
- blur-radius：模糊半径
- spread-radius：延伸半径
- color：阴影的颜色，如果没有设置，就跟随color属性的颜色
- inset：外框阴影变成内框阴影
盒子阴影 – 在线查看
- 在线查看网址

8. text-shadow

text-shadow用法类似于box-shadow，用于给文字添加阴影效果

<shadow>的常见格式如下：

文字阴影.png

text-shadow: offset-x offset-y blur color;

相当于box-shadow, 它没有spread-radius的值

文字阴影 – 在线查看

在线查看网址

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      font-size: 50px;
      font-weight: 700;
      /* 文字阴影 */
      text-shadow: 5px 5px 5px orange, 10px 10px 5px blue, 15px 15px 5px green;
    }
  </style>
</head>

<body>

  <div class="box"> Hello CSS </div>

</body>
</html>

9. box-sizing

用来设置盒子模型中宽高的行为

content-box

padding、border都布置在width、height外边
border-box

padding、border都布置在width、height里边

10. 水平居中

行内级元素(行内非替换元素 span/a 行内替换元素img input)
- text-align: center
块级元素有宽度
- margin: 0 auto

11. 行内非替换元素的特殊性（span/a）

width/height/margin-top/margin-bottom 对于行内非替换元素是无效的
padding-top/bottom, border-top/bottom 对于行内非替换元素有特殊效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .content {
      background-color: #f00;
      color: white;

      /* 内容: width/height(不生效) */
      width: 300px;
      height: 300px;

      /* 内边距: padding */
      /* 特殊: 上下会被撑起来, 但是不占据空间 */
      /* padding: 50px; */

      /* 边框: border */
      /* 特殊: 上下会被撑起来, 但是不占据空间 */
      /* border: 50px solid orange; */

      /* 外边距: margin */
      /* 特殊： 上下的margin是不生效的 */
      margin: 50px;
    }
  </style>
</head>
<body>
  
  <span class="content">
    我是span内容, 哈哈哈
  </span>
  aaaaaaa
  <div>bbbbbb</div>

</body>
</html>

12. 背景和前景色设置的是哪些？

背景色有设置到border下面

前景色（color）会在border没有设置颜色的情况下, 显示出来

.box {
  width: 100px;
  height: 100px;
  background-color: skyblue;
  /* border用的是color的颜色 */
  border: 2px dashed;
  color: #f90;
}

背景色和前景色.png