CSS—盒子模型(a)

---

W3C组织，建议把所有网页上的对象都放在一个“盒子”中—盒子模型。
盒子模型主要适用于块级元素。
盒子模型主要定义元素的四个区域：内容，内边距，边框，外边距；分别对应元素的四个属性：content、padding、border、margin。
设计师，通过控制盒子的属性，进而完成网页设计。
盒子模型的在页面中所占的宽度是：左外边距+左边宽+左内边距+内容+右内边距+右边框+右外边距。
以上是盒子模型的定义，如果笔试问道，在画一个图，应该就可以了。

---

理解了盒子模型的构成，还需要知道如何为盒子模型的属性赋值，以控制盒子模型的大小位置。

• height、width
  <style type="text/css">
  div{
  height: 100px;
  width: 100px;
  background: red;
  padding: 20px;
  border: 5px solid blue;
  }
  </style>
  <div>
  content
  </div>
  

  左侧IE5.x效果，右侧非IE5.x效果
  如图，可以发现，在IE5.x版本height与width包括了border、padding、content。当新增padding值时，其实就是向内占据空间。
  其他版本，height与width则只是指代content部分的大小。
  【验证默认：height、width】
  【观察】
  左：IE5.x 中：IE6、7 右:IE8及现代浏览器
  【结论】width自动占据整个父元素的宽度，高度根据自身内容而定。

• margin、padding
  定义：设置一个元素所有外边距的宽度。
  <style type="text/css">
  body{

            border: 1px solid red ;//目的：标识
        }
        div{
            height: 100px;
            width: 100px;
            background: red;
            border: 5px solid blue;
        }
    </style>
  

左：IE5.x 中：IE6、7 右:IE8及现代浏览器
上面这三个对比是在不设置margin与padding之后的对比图。
【验证:padding】
*{padding:0;}
【观察】以上三个图没有变化。
【结论】浏览器未对body、div设置默认padding值。
【验证：margin】
body{margin:0;}
【观察】
左：IE5.x 中：IE6、7 右:IE8及现代浏览器
【结论】浏览器未对div设置margin，对body设置了margin，但是在IE5.xbody默认margin的方式有点诡异。当对IE5.x的body设置margin时，也是向内增加边距。
接下来设置分别设置margin、padding观察区别。
【设置：margin】
div{margin：20px;}
【观察】
左：IE5.x 中：IE6、7 右:IE8及现代浏览器
【结论】ie5.x内部div对于margin的设置与其对于父元素bodymargin的设置效果一样。IE6、7对于div下外边距的设置不是很好。IE8、及现代浏览器可以满足。
【设置：padding】
body{padding：10px;}
【观察】
左：IE5.x 中：IE6、7 右:IE8及现代浏览器
【结论】
对于padding的兼容还是不错的。
\
通过以上对于margin、padding的对比，我认为，学习设置之前，还是有必要了解一下，浏览器对于各个元素默认的padding、margin的设置。
这里有关于元素的默认边距值。实际上，在我们编写代码时，我还是建议
body p ol ul form h1 h2 {
padding: 0;
margin: 0;
}
尽可能将这些被设了默认边距的元素，进行初始标准化设置，有些人会问可以用通配符统一设置，效率低啊，原因之前介绍过啦。

【11.22日补充】
默认定位??情况下，margin的垂直外边距会相互重叠，元素之间的垂直间距，会等于=max((上)magin-bottom,(下)margin-top)
但是元素被设置了float后，与其他元素的垂直外边距不会重叠，元素之间的垂直间距，会等于=(上)magin-bottom+(下)margin-top

需要注意的是，以上的设置均是在普通流定位模型下的情况。关于定位，我马上就要写这一篇啦。

欢迎补充与指正☺