盒子模型详解（新手入门）

很多在学习前端初级阶段的小白对盒子模型的学习可谓是抓破了头脑，今天跟着小T的步伐，梳理知识点，解决你的困扰！

什么叫盒子模型？

盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。
盒模型的组成：内容区、补白/填充、边框、边界/外边距。

盒子平面图

css盒子模型属性（内部到外部布局）

css盒子有：内容（content）、内边距（padding）、边框（border）、外边距（margin）四个属性；

1：内容(content)

内容就是盒子里装的东西，content可以是图片，文本，视频…等等

2：内边距(padding)

内边距也叫内填充，可理解为填充泡沫，在content周边填充泡沫（padding）使内容与盒子（border）之间产生间距，以保护内容。
padding有以下几个特点：
< 1 >：padding是长在 内容 和 盒子之间的距离
< 2 >：padding是长在盒子里面的。
< 3 >：padding的作用：主要控制子元素在盒子内部的位置关系。
< 4 >：padding是添加在父元素上面。
< 5 >: padding可以把盒子撑大！
如果想让盒子保持原有的大小，需要在宽高的基础上减掉padding !!
注：如果一个盒子没有固定大小（被内容撑开），添加padding 不用减。
-------------------- padding的用法-------------------
< 1 >：单一方向上设置padding值：
padding-left:
padding-right:
padding-top:
padding-bottom:
< 2 >:padding的设置方法：
padding:一个值 四周都padding
padding:两个值 上下 左右
padding:三个值 上 左右 下
padding:四个值 上右下左
< 3 >：padding不会对背景图的位置造成影响。
< 4 >：padding不能为负值。

3：边框(border)

border就是盒子本身。

1. 按顺序有以下属性
   border-width: 边框大小
   border-color: 边框颜色
   border-style: 边框类型

复合式写法 border:10px solid blue;

2. border-style: solid 实线
   dashed 虚线
   dotted 点状线
   double 双线
   none 没有线条
3. 单独一个方向设置边框：
   border-left:10px solid red;
   border-right:10px solid red;
   border-bottom:10px solid red;
   border-top:10px solid red;

4：外边距(margin)

为了 让两个盒子（同级的盒子）之间，产生一定距离。 盒子（border）的外围产生间距。
margin有以下几个特点：
<1>:margin 是长在盒子外围的。
<2>：margin 控制当前元素 与 其他同级元素的位置关系。
<3>：margin不会改变盒子内部的大小。
-------------------- padding的用法-------------------
<1>：给元素的单一一个方向设置margin值
margin-right:
margin-left:
margin-top:
margin-bottom:
<2>:margin设置方法（同padding）：
margin:一个值 四周
margin:两个值 上下 左右
margin:三个值 上 左右 下
margin:四个值 上右下左
<3>:margin是可以设置负值的！
注意：margin常出现的BUG
A: 同级元素 上下 之间的margin的margin值，不会叠加，会重合，按照最大值设置。
B: 当父元素 和 第一个子元素 都没有浮动，给第一个子元素添加margin-top: 会错误的把margin-top:添加在父元素上面

盒子模型计算

盒子的宽=width+2border+2margin+2padding
盒子的高=height+2border+2margin+2padding

小结

在页面布局时，使用盒子模型就看两点，盒子撑大（填充）用padding，盒子与盒子之间的间距用margin。