8 Box model

http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html

分享一个网站http://w3help.org/zh-cn/kb/index.html，知识库里面有对盒模型、视觉格式化比较详细的说明。另外有很多兼容性的问题的问题列表和解决方案。

1、盒尺寸

每个盒都包含一个内容区和及其周围可选的padding,border,margin，如下图：

（摘自w3c）

如上，有4个区域，分别是content,padding,border,margin。每个区域有一个边界，因此一个盒中就会有4个边界。

1、内容边界或内缘：在标准盒模型中，内容边界包含了由widht和height给定的矩形，一般取决于元素的内要渲染的内容。这4个内容边界（上右下左）定义了内容盒

2、内边距边界：它从紧挨着边框的内侧开始，如果内边距宽度为0，那么内边距边界和内容边界是一样的。由内边距围绕而成的盒叫做内边距盒。

3、边框边界：从紧挨着边框的外侧的地方开始，边框区域是会显示元素背景的，如果边框为虚线的话。如果边框宽度为0，那么边框边界和内边距边界是一样的。由边框边界围绕而成的盒叫做边框盒。

4、外边距边界或外缘：外边距所构成的区域是透明的，也就是说元素的背景不会应用到margin区域，如果外边距的宽度为0，那么外边距边界和边框边界是一样的。由外边距边界围绕而成的盒叫外边距盒。

每个边界都可以拆分成top,right,bottom,left这4个边界。

一个盒的内容区域的尺寸——内容区域的宽度和高度——由以下几个因素决定：产生盒的元素是否设置了width或者height属性；盒内部是否包含了内容或者其他的盒子，盒子本事是否是一个table等等。这些在视觉格式化详情中会提到。

2、margin

margin适用于所有元素，但是对非替换的行内元素，垂直方向上的margin无效。

2.1、margin折叠

相邻的两个或多个盒子(未必是兄弟元素)的margin会合并成一个单独的margin。

其中所说的 margin 毗邻，可以归结为以下两点：

●这两个或多个外边距没有被非空内容、padding、border 或 clear 分隔开。

• ●这些 margin 都处于普通流中(in-flow，即非浮动，非绝对定位元素)
• 
  
• 需要注意的地方：

  浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠

  创建了块级格式化上下文的元素，不和它的子元素发生 margin 折叠

  元素自身的 margin-bottom 和 margin-top 相邻时也会折叠

• 
  

转载于:https://www.cnblogs.com/meekcrocodile/archive/2012/05/06/2486446.html