CSS框模型要点笔记

一、概述

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

元素框最内部分是实际的内容，直接包围内容的是内边距，内边距的边界就是边框。边框外面则就是外边距，外边距是透明的，不会遮挡其他元素。

CSS中，width和height指的是实际内容区域的宽度和高度。

二、内边距

内边距的设置值可以是具体的数值，也可以是百分比。当使用百分比时，是相对其父元素的width计算的，并会随之变化。

三、边框

border主要有三个属性：style、width、color。并且可以分别对上右下左的边框单独进行设置。

四、外边距

外边距如通过百分比设置，同样是相对于其父元素的width来计算的。

需要注意的是两个元素相邻时，如都设置了外边距，则两元素之间的距离并非是两者的外边距之和，而是会合并，具体数值选取两者中较大的。（除了设置了浮动、绝对定位的情况）