CSS学习<7>

一、CSS框模型概述

CSS框模型(box model)规定了元素处理元素内容、内边距、边框、外边距的方式。

框模型图

CSS学习<7>_第1张图片

元素框的最内部分是内容,直接包围内容是内边距。内边距呈现了元素的背景,内边距的边缘是边框,边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。

提示:背景应用于内容、内边距和边框组成的区域。

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

二、CSS内边距属性

CSS学习<7>_第2张图片

三、CSS边框属性

CSS学习<7>_第3张图片

四、CSS外边距

围绕在元素边框的空白区域就是外边距。设置外边距会在元素外创建额外的空白。

设置外边距最简单的方法就是使用margin属性。

CSS学习<7>_第4张图片

五、外边距合并

外边距合并指的是:当两个垂直外边距相遇时,他们将形成一个外边距。(注意此合并只针对于垂直方向)

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

CSS学习<7>_第5张图片

外边距合并的目的在于:

CSS学习<7>_第6张图片


你可能感兴趣的:(CSS框模型)