HTML+CSS重难点（一） 盒子模型及标准流下的定位

② 内容区域的宽度可通过width和height属性设置。增加填充、边框和边界不会影响内容区域的尺寸，但会增加盒子的总尺寸；（元素盒子的实际宽度=左边界+左边框+左填充+内容宽度+右填充+有边框+右边界）

③ 默认情况下绝大多数元素的盒子边界、边框和填充宽度都是0，盒子的背景是透明的。所以，在不设置CSS样式的情况下看不到元素的盒子；

④ 当对盒子设置了背景颜色和背景图像后，那么背景会覆盖padding和内容组成的范围。并且，默认情况下背景图像是以padding的左上角为基准点在盒子中平铺的；

⑤ 边界margin值可为负，填充padding值不可为负；

⑥ 行内元素的盒子永远只能在浏览器中得到一行高度的空间；（行高由line-height属性决定，如果没设置该属性，则是内容的默认高度）

⑦ 对行内元素增大上下边框或填充值，则会使行内元素的盒子与其上下元素的盒子发生重叠，对行内元素设置width和height是不起作用的。（行内元素占据的宽度，是刚好能容纳元素中内容的最小宽度）因此，一般将行内元素设置为块级元素显示，再应用盒子属性；

⑧ 当增加行内元素a的边界和填充值时，行内元素a占据浏览器的高度并没有增加，下面这个div块仍在原来的位置，导致行内元素的盒子的上下部分和其他元素的盒子发生重叠（在Firefox中他将遮盖住其它盒子，在IE6中他将被其它盒子遮盖）而左右不分不会受影响；

⑨ A. display：block； 使元素以块级元素显示；
   B. display：inline； 使元素以行内元素显示；
   C. display：none；  隐藏元素；
   其中，当某个元素被设置成（display：none；）之后，浏览器会完全忽略掉这个元素，该元素将不会被显示，也不会占据文档中的位置；（title元素默认就是此类型）

⑩ 列表项元素（display：list-item；）
   在HTML中只有li元素默认是此类型，将元素设置为列表项元素并设置列表样式后，它的左边将增加小黑点；

⑪ 上下margin合并问题
  A.指当有两个块级元素的盒子上下排列时，它们之间的边界margin将发生合并。也就是说，两个盒子边框之间的距离等于着两个盒子边界值的较大者；（块级元素上下margin叠加的一个例子是，由个段落p元素组成的典型文本页面）
  B.第一个P元素上面的空白等于段落P和段落P之间的空白宽度；这说明了段落之间ed上下margin发生了合并，从而使段落各处的距离相等了；

⑫ 父子元素空白边叠加问题
  A.当一个元素包含在其父元素中时，若父元素的边框和填充为0，此时父元素和子元素的margin挨在一起。那么父元素的上下margin，会和子元素的上下margin发生合并，但是左右margin不会发生合并现象；
  B.若父元素的边框和填充不为0，或父元素中还有其他内容，那么父元素和子元素的margin会被分隔开。因此，不存在margin合并的问题；
  C.（经验：）如果有盒子嵌套，要调整外面盒子和里面盒子之间的距离，一般用外面盒子的padding爱调整，不要用里面盒子的margin。这样就可避免父子元素上下margin合并问题；

⑬ 左右margin不会合并
   行内元素的左右margin等于相邻两边之和，不会发生合并；

⑭ 嵌套盒子在IE和Firefox中的不同显示
   当一个块级元素包含在另一个块级元素当中时，若对父块设置高度，但父块的高度不足以容纳子块时，IE将使父块的高度自动伸展，达到能容纳子块的最小高度为止。有时，若设置了子块高度，IE还将使自动压缩，直到能容纳内容的最小高度为止。而Firefox对父块和子块均以定义的高度为准，父块高度不会伸展，任其子块露在外面，子块高度也不会压缩；