首页 > 代码库 > CSS框模型以及maigin、border、padding属性

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;

技术分享

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

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

二、外边距合并

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

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

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

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