盒模型

盒模型

盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系，css定义所有的元素都可以拥有像盒子一样的外形和平面空间。其在学习web前端中必须要深入理解。

下面本篇文章将会从以下几个方面谈谈学习盒模型（标准盒模型和怪异盒模型）该注意的问题：

1. 标准盒模型和怪异盒模型所占位置的组成
2. 如何用CSS设置标准盒模型和怪异盒模型
3. Padding margin在盒模型中的用法
4. margin值重叠问题实例及其解决办法
5. margin-top的bug实例及其解决方法
6. li设置padding问题解释

一.标准盒模型和怪异盒模型所占位置的组成

标准盒模型 的所占位置的组成：
宽高（content）+padding+border+margin
元素宽度实际占位置大小： 宽+左右padding+左右border+左右 margin
元素高度实际占位置大小： 高+上下padding+上下border+上下margin
怪异盒模型的所占位置的组成：
元素的宽度：width（content+border+padding）+margin

二.CSS设置标准盒模型和怪异盒模型

标准盒模型  box-sizing:content-box; 
怪异盒模型.box-sizing:border-box;

三. Padding margin在盒模型中的用法

padding

padding就是用来控制父子元素之间的位置关系的（如图1中div1 和div3是父子关系）。
Padding的使用方法：
添加padding值之后，会把原有元素撑大，
方法一：

 padding-top:   ;            上填充
 padding-right:   ;          右填充
 padding-bottom:   ;     下填充
 padding-left:   ;         左填充

方法二：

padding：  上          右        下       左  （4个值）
padding：   上        左和右      下          （3个值）
padding： 上和下      左和右                  （2个值）
padding： 上右下左                            （1个值）

使用padding注意事项：

1.添加了padding值之后，padding值会把元素原有的大小撑大；  如果让元素原本大小不变得话，需要在元素的宽高上减掉所加的padding；
2. padding属性对背景图片 是不起作用的，可以说背景图片的位置，是不受padding的影响的。                                 
3.背景色会延展到padding区域。
4. padding不可以写负值

margin

margin就是用来控制同辈元素之间的位置关系（如图1中div1 和div2是同辈关系）。

margin的使用方法：
方法一：

 margin-top:   ;         上外边距
 margin-right:   ;        右外边距
 margin-bottom:   ;      下外边距
 margin-left:   ;         左外边距

方法二：

margin：   上          右          下       左（4个值）
margin：   上        左和右         下         （3个值）
margin： 上和下      左和右（2个值）
margin： 上右下左                                 （1个值）

实现元素水平居中的方法：

margin：0 auto；  
margin-left:auto;   margin-right:auto;

使用margin注意事项：

margin是现在是在元素边框以外的空白区。
margin 是可以写负值的
margin不会影响元素的实际宽高，但是也会曾加的他的所占区域；

四. margin值重叠问题实例及其解决办法

如图2 代码及运行结果，可以很清楚的看出，按照图2的代码预想两个div之间的间隙应该是60px，而实际只有30px

如图3 代码及运行结果，可以很清楚的看出，当把下面的div margin-top改为50px，间隙改变，变成50px

原因及解决办法：

上下的两个元素之间的margin值会重叠显示；谁的值大 就以谁的margin值来显示。（BFC 解决）

五．margin-top的bug实例及其解决方法

当 下面五种条件同时满足时，子元素（块元素）添加margin-top的时候，会错误的把margin-top值添加给父元素。

1.子元素是父元素的第一个子元素

2.父元素没有内填充

3.父元素没有边框

4.子元素没有浮动

5.父元素没有浮动

解决方法: bfc

 1.给父元素添加overflow：hidden；  
 2. 推荐使用父元素和子元素添加浮动属性；
 3.可以给父元素添加边框     
 4.把margin改成padding

六．li设置padding问题解释

li是块状元素，当不给他设置width属性的时候，他默认的宽度是100%，也就是跟父元素等宽，这时候当你给他添加padding左右值得时候，li他会从新去进行宽度的计算，也就是加上padding值之后，依然等于父元素的宽度。

例子如下：