（三）盒子模型+问题处理

盒子模型

从里到外：内容区、内填充、边框、外边距

padding

1、padding设置在内容和父元素之间，在父元素内部

2、padding的作用：控制子元素在父元素里面的位置关系

3、padding会把盒子撑大

4、添加padding之后想让盒子保持原来的大小，需要在宽高的基础上减掉padding的值

5、给单一方向设置padding的值:padding-top/right/bottom/left

6、padding值的设置
    一个值：四周
    两个值：上下、左右
    三个值：上、左右、下
    四个值：上、右、下、左
    
7、padding的值不会对背景图的位置造成影响

8、padding不能设置负值

9、注意！！！如果父元素没有设置宽高，父元素是被内容撑开的，添加padding之后不需要去除宽高值

border

1、border在盒子里面，占空间，想要保持盒子原来的大小，需要在原有宽高的基础上减掉border的值

margin

1、margin值是在盒子边框外面的

2、margin值在页面中是占据空间的

3、margin的作用：调整盒子与盒子之间的距离

4、margin不会撑开盒子的宽高

5、给单一方向设置margin值：margin-top/right/bottom/left

6、margin值的设置
    一个值：四周
    两个值：上下、左右
    三个值：上、左右、下
    四个值：上、右、下、左
    
7、margin值可以设置负数

8、让子元素在父元素中左右居中 margin:0 auto;

9、margin常见的bug：
    (1)一个父元素和第一个子元素，在没有添加浮动的情况下，会错误的将第一个元素的margin-top值加在父元素上
    (2)两个同级元素之间上下的margin值不会叠加，会按照两者之间最大值设置，左右是正常的，会叠加

img标签之间有间距

img标签左右排列处理空白间距方法：

1、设置父元素的font-size为0；
2、设置float
3、使用负值margin消除间距
4、给img设置display:block

img标签上下排列处理空白间距的方法：

img标签具有文字的属性，首先需要去除行高line-height的影响
1、line-height:0;

文本在网页中显示是基于基线对齐的，如果先要让上下两者中间没有间距，也要消除对齐方式的影响，将垂直对齐方式设置为中线对齐。
2、virtical-align:middle

margin间距超出处理

1、对需要进行margin间距隐藏的标签使用div1包起来
2、给div1设置宽高，宽高为整段标签的合计宽高，包括超出的margin部分
3、给div1的直接父元素标签添加溢出隐藏overflow:hidden;