前言

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充和实际内容。

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

属性

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。（默认情况下padding=0）
Content(内容) - 盒子的内容，显示文本和图像。

计算方式

最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度(width)+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

CSS box model ：盒子模型_CSS

例子

<head>
    <meta charset="utf-8">
    <title>CSS盒模型</title>
    <style type="text/css">
    div{
      width: 300px;/*这是宽度*/
      padding: 25px;/*左右填充一共是50px*/
      border: 25px green solid;/*左右边框一共是50px*/
      margin: 25px;/*左右边距一共是50px*/
    }
    </style>
  </head>
  <body>
    <h>这是一个盒模型，元素的总宽度就是450px</h>
    <div>hello worder</div>
  </body>

如果觉得不是很容易看，我们可以利用截图看一下参数：

CSS box model ：盒子模型_边距_02

宽度350px，这就是width+2padding（左右填充）

接下来我们看一下盒模型中border的用法：

边框border，边框属于盒子的边缘 边框里面属于盒子的内部，除了边框就是盒子的外部

border-width边框宽度

border-style边框类型

border-color边框颜色

使用border-width可以指定四条边的边框宽度

<head>
    <meta charset="utf-8">
    <title>盒模型</title>
    <style type="text/css">
    #main{
          height: 200px;
          width: 200px;
          border: 2px red solid;
          background-color: #00BFFF;
          border-width: 10px 20px 30px 40px;
        }
     </style>
   </head>
  <body>
    <div  id="main">
    hello world
    </div>
  </body>

运行结果：

CSS box model ：盒子模型_边距_03

我们就发现了：

当我们给定border-width四个值都做设定的时候，就能发现值的顺序是上 右 下 左 按照顺时针的而方向来设定

当然，我们还可以只给它设定三个值、两个值、一个值，来看一下各个效果：

CSS box model ：盒子模型_盒模型_04

CSS box model ：盒子模型_边距_05

除了border-width，在CSS中还提供了四个属性：border-xxxx-width，其中，这四个值分别是：top right bottom left,这四个值就是用来直接指定设置哪一条边的，我们就来演示一种，看一下效果：

CSS box model ：盒子模型_盒模型_06

并且border-style和border-color 的设定方法和border-xxxx-width 的方法相同
border-style 用来设定边框类型，取值有：
none：默认值没有边框
double：双线
solid：实线
dotted：点状线
dashed：虚线

在这里就不一 一赘述了。

以上就是对CSS model的介绍了，如有不足之处，还请指正，万分感谢！

CSS box model ：盒子模型_边距_07