CSS盒子模型是网页设计中非常重要的概念之一，它是在浏览器渲染网页时使用的一种模型，通常我们可以将网页元素看作一个个盒子。这里介绍CSS盒模型的三种排版模型:

CSS盒子模型

.box {
  width: 200px;
  height: 100px;
  border: 1px solid #000;
  padding: 10px;
  margin: 20px;
}

CSS盒子模型包含content，padding，border和margin四个部分。其中，宽度和高度只代表了包含content的部分。

CSS盒子模型——border-box

.box {
  width: 200px;
  height: 100px;
  border: 1px solid #000;
  padding: 10px;
  margin: 20px;
  box-sizing: border-box;
}

border-box模型中，元素的宽高代表了包含content，padding和border的部分。即，元素的宽高为200px与100px，并不包括padding和border的尺寸。

CSS盒子模型——margin-box

.box {
  width: 200px;
  height: 100px;
  border: 1px solid #000;
  padding: 10px;
  margin: 20px;
  box-sizing: margin-box;
}

margin-box模型中，元素的宽高包含content，padding，border和margin的部分。即，元素的宽高为240px与140px。

以上三种CSS盒子模型各有各的特点，根据不同的排版需求可以选择相应的模型进行排版。