CSS—盒子模型(a)

CSS—盒子模型(a)

---

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

---

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

• height、width

    
    
  
        content
    

  
  

  左侧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
  定义：设置一个元素所有外边距的宽度。

  
  

  左：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

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