CSS框模型是指将内容分层展现，以方便对页面布局进行控制的方式。它将元素看作一个带有外边距、内边距、边框和实际内容的方块。

当浏览器渲染网页时，CSS框模型会基于以下4个方面来控制每个元素的大小和布局。

1. 内容（content）: 指网页元素自己的实际内容区域，一般由文本、图片、视频等生成。
2. 内边距（padding）: 指网页元素的内部留白，影响内容和边框之间的距离。
3. 边框（border）: 指网页元素周围的线框，边框可以设定厚度、样式和颜色等。
4. 外边距（margin）: 指网页元素和其他元素之间的留白，影响元素之间的距离。

CSS框模型中共有两种形式：标准框模型和IE框模型。

标准框模型下的元素宽度是由内容（content）、内边距（padding）、边框（border）三部分组成，不包括外边距（margin）。而IE框模型下的元素宽度是由内容（content）、内边距（padding）、边框（border）和外边距（margin）四部分组成。

标准框模型： 
|--------content--------|
|--------padding--------|
|--------border--------|
IE框模型： 
|--------content--------|
|--------padding--------|
|--------border--------|
|--------margin--------

一定要清楚CSS框模型的概念，才能更好的实现页面布局效果。