关于js-盒模型

在我们的网页当中，整个网页的构成可以分为：结构（html）、表现（css）、行为(javasrcipt)三部分。
盒模型就是网页布局的基石，是搭建整个网页结构的基本框架，是结构组成的砖与瓦。简单点说，盒模型就是在结构中对于一定区域的划分，我们可以通过css对它进行大小、形状等等的设置，对于盒模型本身而言，它也可以分为四个部分：
一：内容是指我们所放入信息所占有的区域（图片、文本、视频等等）。
二：填充（padding）是指盒模型本身区域边缘至内容之间的间距。
三：边框（border）是指盒模型本身。
四：外边距（margin）是指相邻两个盒子之间的间距。
如图：

理解盒模型：
整个网页结构就如一片土地，我们需要对齐划分成一块一块的形状，分别中上不同的农作物，方便种植与管理，而这一块块土地我们就可以当做盒模型。

1：内容就比如我们所种植的农作物所占据的范围。
2：填充（padding）是指所种植农作物至区域边缘之间的距离。
3：边框（border）是指每一块土地边缘的厚度。
4：外边距（margin）是指一块土地与另一块土地之间的间距。

一： 填充（padding）

1. padding是盒子内部，内容与边缘的距离；
2. padding的作用是控制内容子元素和父元素之间的距离关系；
3. padding的值并不会对父元素的背景图造成影响。
4. padding的值会撑大父元素的宽高，如果父元素拥有宽高值，那么需要对父元素减掉所撑大的值；如果父元素没有设置宽高，那么子元素的大小就会使得父元素被撑大，不用减掉；
5. 对单一方向添加padding：
   ① padding-top 上
   ② padding-right 右
   ③ padding-bottom 下
   ④ padding-left 左
   如图：
   
6. 多个值添加padding：
   ① padding:10px四周
   ② padding：10px 10px 上下 左右
   ③ padding：10px 10px 10px 上 左右 下
   ④ padding：10px 10px 10px 10px 上 右 下 左
   如图：
   

二：边框（border）

1 .默认情况下边框是生成在元素之外的；
2. 复合式写法 border：1px solid red;
① 属性拆分：
1): border-width（边框大小）
2):border-color （边框颜色）
3):border-style（边框类型）
如图：

对单一方向添加border：
① border-top:10px solid red; 上
② border-right:10px solid red;右
③ border-bottom:10px solid red;下
④ Border-left：10px solid red;左
如图：

3. 利用边框实现三角形：
① 标签宽高设置为0；
② 统一设置四个方向的边框为透明；
③ 调整某个方向边框颜色；
如图：

4. 边框类型：
① solid 实线
② dashed 虚线
③ dotted 点状线
④ double 双线
⑤ none 没有线条

第三：外边距（margin）

1. margin是指元素外围的距离，它的值不会撑大元素大小
2. 对单一方向添加margin:
   ① marign-top 上
   ② margin-right右
   ③ margin-bottom下
   ④ margin-left 左
   如图：
   
3. 多个值添加margin：
   ① margin:10px;四周
   ② margin:10px 10px;上下 左右
   ③ margin：10px 10px 10px; 上 左右 下
   ④ margin：10px 10px 10px 10px; 上 右 下 左
   如图：
   
4. margin:0 auto（是指当前元素在父元素内部水平居中)
5. margin常出现的bug
   ① 当两个元素上下显示时，对两个元素分别添加上下margin值，两个margin值不会叠加，会重叠，按照值大的显示。
   如图：
   
   ② 当子元素与父元素都没有添加浮动的情况下对子元素添加margin-top值，这个margin值会错误的添加到父元素上面。
   如图：