CSS框模型以及maigin、border、padding属性

一、框模型（Box Model）

    在CSS中所有元素都是框，都有高度（height）、宽度（width）、内边距（padding）、边框（border）、外边距（margin）等属性。框模型规定了元素框处理元素内容、内边距、边框和外边距的方式。

    元素框的最内部分是实际内容，向外依次是内边距、边框和外边距。外边距默认是透明的，因此不会遮挡其后的任何元素。内边距、边框和外边距都是可选的，默认值是0。

    注意：背景应用于内容和内边距、边框组成的区域。

    在CSS中，width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

    元素框的高 = Height + padding-top + padding-bottom +margin-top + margin-bottom;

    元素框的宽 = width + padding-left + padding-right + margin-left + margin-right;

    注意：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。

            外边距可以是负值，内边距不允许是负值。

二、外边距合并

    外边距合并（叠加），指当两个垂直外边距相遇时，它们将形成一个外边距。合并后外边距的高度，等于发生合并的外边距的高度中的较大者。

    注意：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

    外边距合并详细信息见：链接。

转载于:https://www.cnblogs.com/haidaojiege/p/6798745.html