1、盒子模型

所有的HTML元素可以看成一个盒子，它由外边距（margin）、边框（border）、内填充（padding，叫内边距也行）、内容区（content）组成。

外边距、边框、内边距等又分为top（上）、right（右）、bottom（下）、left（左）。内容区大小则由width、height设置。

所以一个盒子的高度是（margin-top）+（border-top）+（padding-top）+height+（padding-bottom）+（border-bottom）+（margin-bottom）。宽度也是同理加一起。

盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。

盒子模型.png

2、Content(内容)

内容区是指可放置其他元素的区域，Content大小由width、height设置。
准备两个边长为100px、不同颜色的div，下面都用他俩来演示。

image.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div {
                height: 100px;
                width: 100px;
            }
        </style>
    </head>
    <body style="">
        <div style="background-color: #009688;s">
            我是小绿
        </div>
        <div style="background-color: #EB7350;">
            我是小橙
        </div>
    </body>
</html>

3、margin（外边距）

外边距是两个元素之间的距离，对方存在外边框就是到外边框的距离，没有就找边框，再没有就找内边距等，知道找到存在的为止。（外边距类似于兽王王的领地，虽然我用不了这么大地方睡觉，但是你别的动物也不能靠近我的小树林）

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。

margin赋值的四种方式(注意值之间以空格连接)
（1）、margin: 100px:上下左右（上下左右边距都是100px）
（2）、margin: 100px 20px：上下左右（上下边距是100px，左右是20px）
常用他来对元素进行居中处理margin: 0px aoto
（3）、margin: 10px 20px 30px：上左右下（上边距是10px，左右是20px，下边距是30px）
（4）、margin: 10px 10px 20px 30px：上右下左（上右下左边距分别是10px、10px、20px、30px）
对小橙div添加一个100px的下边距：margin-top: 100px;，两个div之间会留下100px的距离。
  <div style="background-color: #EB7350;margin-top: 100px;">
      我是小橙
  </div>
因为小绿只有内容区的大小，所以他俩之间的距离就是小橙的下边距100px。

image.png

4、border（边框）

默认是没有边框的，边框可以设置宽度（border-width）、颜色（border-color）、样式（border-style）它们也具有上面margin的四种赋值方式，栗子：border-color: #0000FF #008000;

常用的赋值方式：border: 1px #1E9FFF solid;将宽度、样式、颜色写在一起，用空格连接，顺序无所谓。

border-color的设置方式可参考：https://www.jianshu.com/p/974bb6d62f32

border-style：常用的就是solid。

image.png

设置边框后可变成圆角:border-radius:25px;，25px可根据情况更改，越大越圆。

下面为小橙添加了，3px、实线、淡蓝色圆角边框。

image.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div {
                height: 100px;
                width: 100px;
                
            }
            div:nth-last-of-type(1){
                margin-top: 100px;
                border: 3px solid #01AAED;
                border-radius: 20px ;
            }
        </style>
    </head>
    <body style="">
        <div style="background-color: #009688;s">
            我是小绿
        </div>
        <div style="background-color: #EB7350;">
            我是小橙
        </div>
    </body>
</html>

5、padding（内边距、内填充）

内边距是内容区到边框的距离，没有边框就是到margin距离，没有margin就是到其他元素的距离。

赋值方式和margin一样（四种）。

下面为小橙添加了内边距（边框更改了一下），来演示他们之间的距离。

image.png
说明:

1、2位置：和以前的不一样了，内容并不是贴着边界，而是再上面、左面各空出30px大小后，才开始放内容。
3位置：小橙和小绿的大小发生了改变。宽了（10+30+10）px，高也一样。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div {
                height: 100px;
                width: 100px;
                
            }
            div:nth-last-of-type(1){
                border: 10px solid #01AAED;
                padding-left: 20px;
                padding-top: 20px;
            }
        </style>
    </head>
    <body style="">
        <div style="background-color: #009688;s">
            我是小绿哈哈
        </div>
        <div style="background-color: #EB7350;">
            我是小橙哈哈
        </div>
    </body>
</html>