css学习笔记之盒模型

转自： https://segmentfault.com/q/1010000005057015/a-1020000005057235

           http://www.cnblogs.com/xiaohuochai/p/6252163.html

盒模型
  盒模型又叫框模型，由宽高、内边距、边框和外边距组成

四个盒子结构
1、元素框是指 margin box
   元素框: width/height + padding + border + margin

2、可视区域是指 border box
[注意]关于可视区域，一直都有两个争论，一个指border box，另一个指padding box。但从字面去理解，可视区域应该就是指可以看到的区域，应该以border box为准
可视区域：width/height + padding + border

3、客户区是指 padding box
[注意]关于客户区这种说法来源于javascript中的clientWidth和clientHeight
客户区：width/height + padding

4、内容区是指 content box
内容区：width/height




  

两种盒子模型

一般称IE8及其以上为标准盒子模型（w3c盒子模型），范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

IE8以下的为IE 盒子模型，范围也包括 margin、border、padding、content，和标准盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。

行内盒子

1.不支持width和height

行级盒子的content box的高/宽不是通过height/width设置的。
 content box/area的高由font-size决定的；
 content box/area的宽等于其子行级盒子的外宽度(margin+border+padding+content width)之和。

2.当行内盒子宽度大于父容器宽度（自身width无效）时会被拆分成多个行内盒子。

3.margin和padding对行内盒子的影响（亲自做了测试是这种情况 但不清楚原理）

左右的margin和padding都是有效果的，就不多说了。

上下的margin对行内盒子是无效果的。

上下padding对行内盒子的内容是无效果的（line-height不变），但是对background和border是有影响的，而且影响不同。

首先background，padding-top会覆盖掉相邻的元素包括背景和内容，padding-bottom只会覆盖掉相邻元素的背景，内容并不会。

再是border，padding-top和padding-bottom对border的影响是一样的，都是有效果的。