前端小白——Css盒模型简介

css盒模型

   拿快递盒中的鸡蛋举例——由里向外：内容区content（鸡蛋）——内填充padding（泡沫）——盒子边框border（快递盒）——外边距margin（快递盒与快递盒之间的距离）

（一）padding内填充

作用：调整子元素在父元素中的位置关系

特点：

1. 会把盒子撑大，若想保留盒子原来大小，需要在盒子原来的基础上减去padding的值
2. 给单一方向设置padding的值：padding-left、padding-right、padding-top、padding-bottom
3. 设置方法：padding：；一个值代表四周，两个值代表上下，三个值代表上、左右、下，四个值代表上、右、下、左
4. Padding的值不能为负值
5. Padding不会对背景图造成影响
6. 若盒子未设置固定的宽高则添加padding，宽高不用减

（二）margin外边距

1.长在元素之外，控制同级元素之间的距离

2.不影响盒子的大小

3.给单一方向设置margin的值：margin-left、margin-right、margin-top、margin-bottom

4.设置方法：margin：；一个值代表四周，两个值代表上下，三个值代表上、左右、下，四个值代表上、右、下、左

5.可以为负值

6.margin：0 auto；让元素在父元素中水平居中显示

7.margin常出现的bug：当父元素与子元素都未浮动时，给第一个子元素添加margin-top，它会错误的将margin-top加在父元素身上；上下相邻的两个元素之间的margin会重合按照最大值处理；左右不会重合。