css盒子模型

盒子模型

html文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒模型。盒模型通过四个边界来描述：margin（外边距），border（边框），padding（内边距），content（内容区域）。

盒子的两种初始状态

1.类似div的盒子一个盒子自动占据一行
特点：可以设置固定的宽高，margin，padding。
2.类似span盒子一个盒子中的内容会跟同类的盒子并排在一行出现-----类似文字的表现特性。
特点：宽高不能设定，而是由其内容“撑出”，margin和padding没有上下方面的表现。

盒子模型分类

盒子模型分为W3C标准盒子和IE盒子两种，如下图所示，

W3C标准盒子：盒模型的宽高只是内容（content）的宽高，box-sizing:content-box;

IE盒子：盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。

box-sizing:border-box;

padding

padding指盒子的内补间。“补间”这个词比较术语化，我们不妨将其理解为快递盒子内
快递商品外包裹的那层起保护作用的海绵。只是在 CSS 中，这个“海绵”默认是透明的。在现实世界中，海绵不会影响盒子的尺寸，但在 CSS 世界中，尺寸规则就有所不同了。

margin

padding 性格温和，负责内间距；而 margin 则比较激进，负责外间距。虽然都是间距，但是差别相当大，尤其是 margin，特异之处相当多。
“外部尺寸”有个很不一样的特性，就是尺寸的大小有可能是负数，没错，负尺寸。这和我们现实世界对尺寸的认知明显冲突了，因为现实世界没有什么物体的尺寸是负的。所以，我总是把“外部尺寸”理解为“元素占据的空间尺寸”，把概念从“尺寸”转换到 “空间”，这时候就容易理解多了。

border

顾名思义，border 就是“边框”，从名字就可以看出来 CSS 设计者设计此属性的目的就
是给元素弄个边框什么的。

盒子补充

1：只要是盒子，在盒子内部都会有布局流，也就是流式布局
2：在写页面布局的时候，尽量利用布局流，因为在使用布局流时候 父元素高度可以由子元素撑起来，可以避免兼容性问题
3：如何搭建盒子与盒子之间的关系，更加重要