CSS 盒模型

199 阅读3分钟

总结

  1. CSS 盒模型有两种,标准盒模型和 IE 盒模型,两者区别在于 width 的计算。标准盒模型中,width 为 content 宽度,ie 盒模型中,width 为 content\padding\border 三者的宽度。
  2. 可以用 css3 中的box-sizing 属性更改浏览器默认的盒模型,设置为 border-box 为 ie 盒模型,content-box 为标准盒模型。
  3. 外边距合并是指普通文档流中的块元素的垂直边框发生宽度合并的现象,可能发生在兄弟元素间、父子元素间及自身元素上。外边距合并是为了优化段落布局

CSS 盒模型

CSS 盒模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。

W3C 盒模型和 IE 盒模型:

盒模型

IE 的盒模型与 W3C 盒模型的区别在于 width 的计算。

改变标准 css 盒模型

CSS3 box-sizing 属性

content-box:标准盒模型,CSS定义的宽高只包含 content 的宽高 border-box:IE盒模型,CSS定义的宽高包括了 content,padding 和 border

外边距合并

1.外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。只有普通文档流中的块元素框的垂直外边距才会发生边距合并。条件如下:

  • 普通文档流(窗体自上而下分为一行一行,并在每行中按从左到右的依次排放顺序)
  • 块元素
  • 垂直外边框

2.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

3.外边距合并可能出现在兄弟元素间、父子元素间、元素自身。

  • 当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。

    兄弟元素间

  • 当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。

    父子元素间

  • 外边距甚至可以与自身发生合并。假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并:

    元素自身
    如果这个外边距遇到另一个元素的外边距,它还会发生合并:
    元素自身与其他元素

为什么会进行外边距合并

这就是一系列的段落元素占用空间非常小的原因,因为它们的所有外边距都合并到一起,形成了一个小的外边距。

外边距合并初看上去可能有点奇怪,但是实际上,它是有意义的。以由几个段落组成的典型文本页面为例。

  • 第一个段落上面的空间等于段落的上外边距。如果没有外边距合并,后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并,段落之间的上外边距和下外边距就合并在一起,这样各处的距离就一致了。

外边距合并作用