CSS盒模型简单介绍

一、概念

1.盒模型：就是把HTML页面中的元素看作是以一个矩形的盒子，也就是一个装东西的容器。

2.盒模型包含四部分：内容（content）、内边距也称之为补白和填充区（padding）边框（border）外边距（margin）

二、盒模型的组成

1）padding：是盒子边框和内容之间的填充区。

作用是用来控制父元素于子元素之间的距离，或者用来控制容器与内容之间的间距。

设置方式:

padding-left：左内边距
padding-right：右内边距
padding-top：上内边距
padding-bottom：下内边距
padding:复合写法

2)margin：是元素即盒子边框以外的区域，margin是占位置的。

作用是用来控制同辈元素的间距或者位置关系。

设置方式：

margin-left：左外边距
margin-right：右外边距
margin-top：上外边距
margin-bottom：下外边距
margin:复合写法

3）border：边框是加在元素大小之外的，即边框是占位置的。

4）内容：

内容区的宽 ​ width
内容区的高 ​ height

三、盒子的计算大小

1.元素的总宽度：为内容的宽度+padding-right值+padding-left值+border-right值+border-left值+margin-right值+margin-left值

2.元素的总高度：为内容的高度+padding-top值+padding-bottom值+border-top值+border-bottom值+margin-top值+margin-bottom值