HTML盒模型基础

HTML盒模型基础

盒模型是网页布局的基石，从盒子的内部到盒子的外围分别是：
1.内容（content）
2.内填充（padding）
3.盒子本身（border）
4.外边距（margin）

下面就让我们来说说一些基础的盒模型的css属性

一.内填充（padding）

1. padding的作用：让文本和盒子的周围产生间距，主要控制子元素和盒子内部。

2. 关于 padding的注意事项：
   （1）padding是长在内容和盒子之间的距离
   （2）padding是长在盒子里面的
   （3）padding是添加在父元素上面的
   （4）padding可以把盒子撑大
   （5）padding不会对背景图的位置造成影响
   （6）padding不能为负值

3. 单一方向上设置padding的值：
   （1）padding-left
   （2）padding-right
   （3）padding-top
   （4）padding-bottom
   

4. padding的设置方法：
   （1）padding：一个值 四周都是padding
   
   （2）padding：两个值 上下 左右
   
   （3）padding：三个值 上 左右 下
   
   （4）padding：四个值 上右下左
   
   二.外边距（margin）
   1.margin的作用：让两个盒子（同级的盒子）之间，产生一定距离，盒子的周围产生间距
   2.关于margin的注意事项：
   （1）margin是用来控制当前元素 与 其他同级元素的位置关系
   （2）margin 是长在盒子外围的
   （3）margin不会改变盒子内部的大小
   （4）margin是可以设置负值的
   （5）7:margin常出现的BUG:
   a: 同级元素 上下 之间的margin的margin值，不会叠加，会重合，按照最大值设置。
   
   b: 当父元素 和 第一个子元素 都没有浮动，给第一个子元素添加margin-top: 会错误的把margin-top:添加在父元素上面
   

3.单一方向上设置margin的值
（1）margin-right
（2） margin-left
（3） margin-top
（4） margin-bottom

4.padding的设置方法：
（1）margin：一个值 四周都是margin

（2）margin：两个值 上下 左右

（3）margin:三个值 上 左右 下

（4）margin:四个值 上右下左