我们如果以面向对象的角度去考虑CSS提供的盒子模型，可以建立一个BOX对象进行表示：
public class Box{
// 外边距：控制与父级元素的距离
public Margin margin;
// 边框：控制边框的样式
public Border border;
// 内边距：控制元素与边框之间的距离(又称之为填充)
public Padding pad;
// 元素内容：显示的文字内容
public Content con;
}
如下图所示
<html>
<head>
<title>CSS盒子模型</title>
<style type="text/css">
div{
/*设置元素部分的宽高*/
width:100px;
height: 100px;
/*设置边框*/
border-style:solid;
border-color: #22DDDD;
border-width:5px;
/*设置该样式后，元素外框变大了*/
padding-left: 20px;
padding-top: 50px;
/*设置外边距*/
margin-left:50px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="ele" style="background-color: #66ffff">
元素内容
</div>
</body>
</html>
效果图如下：
盒子正如其名，想象一下我们收到的快递包裹，在买的物品<content>外面有一个盒子，盒子与物品直接有填充物<padding>防止物品损坏，盒子本身具有一定的厚度和高度<border>，而假设盒子被放在箱子(或任何容器，只要方便理解)中，箱子与盒子之间的距离就是外边距<margin>。
我们知道，在平面显示中，需要确定上下左右的距离才能进行定位，在CSS中，定位也是一样的操作，如果同样使用面向对象进行理解，可以有如下对象：
public class Margin{
public String top;//上：表示为margin-top
public String bottom;//下：表示为margin-bottom
public String left;//左：表示为margin-left
public String right;//右：表示为margin-right
}外边距有上下左右四个属性，用来对元素进行定位以及分别设置不一样的样式，举个栗子：
border-style:dotted solid double dashed其代表的顺序是边框的上、右、下、左分别不同的样式设置。
CSS盒子模型标准分IE版和W3C版，一般都会选择W3C版作为显示标准，当然，如果不加以规定的话，在不同浏览器上显示效果可能有比较大的差异，浏览器的默认解析标准并不相同，所以一般会加上doctype 声明，告诉浏览器使用什么标准进行解析：
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
最后，希望本文能帮助到有需要的朋友