通过对日常生活中的盒子和网页中单个模块内部结构的分析，我们发现它们的结构是非常类似的，由外到内分别是：外边距、边框、内边距、内容。是用来布局网页的重要容器。网页布局中的盒模型运用是非常广泛的，所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。
二、盒模型基本结构：
边框（border）、内边距(padding)、外边距(margin)、宽度(width)、高度(height)等。
*width、height（可设固定值或百分比，如果设百分比则是占据父级容器的百分比）
*margin：margin-top/margin-bottom/margin-left/margin-right（可设负值）
*padding：padding-top/padding-bottom/padding-left/margin-right
*border：border-top/border-bottom/border-left/border-right
四、盒模型的简写形式：
按照规定的顺序，给出2个、3个或者4个属性值，它们的含义将有所区别，具体含义如下：
*如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性；
*如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性；
*如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。
五、盒模型的其他相关属性：
*溢出：
overflow:hidden、visible、auto、scroll
*可见性：
visibility: visible、hidden
*呈现：
display：none、inline、block、list-item、table-cell等
Display:none与visibility: hidden的区别
使用 visibility:hidden属性会使对象不可见，但该对象在网页所占的空间没有改变（看不见但摸得到），等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失（看不见也摸不到）。