首先，盒模型是什么？

        盒模型是在网页设计中经常用到的css技术所使用的一种思维模型。盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界(外边距)这就是盒模型。

        盒模型具有的属性：

        网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模型都具备这些属性。如下图

        盒模型的组成：

        padding属性：填充padding是在盒子里面，是在内容区和边框之间的空间。padding的作用：控制子元素在父元素里面的位置关系。padding会把盒子撑大。如果想让盒子保持原有的大小：在宽高基础上减掉。（ 如果一个元素是被内容撑开的，没有设置固定的宽高，padding直接撑开。不用减掉 ）

        border属性：边框是环绕内容区和填充的边界。

        margin属性：margin位于盒子的最外围，是添加在边框外周围的空间，不会撑大元素的大小。作用:控制元素与元素之间的间距，使盒子之间不会紧凑地连接在一起。但两个相邻盒模型的margin值 不会叠加，而是按照较大值设置。