了解盒模型

一、盒模型概述：

通过对日常生活中的盒子和网页中单个模块内部结构的分析，我们发现它们的结构是非常类似的，由外到内分别是：外边距、边框、内边距、内容。是用来布局网页的重要容器。网页布局中的盒模型运用是非常广泛的，所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。
二、盒模型基本结构：

三、盒模型的相关属性：

边框（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属性会使这个对象彻底消失（看不见也摸不到）。