盒模型及定位体系

css盒模型是在网页设计中经常用到的css技术，你可以想像成一个纸箱子。

在网页中，css盒模型主要4个部分组成，从里到外有Content（内容）-Padding（内边距） -Border（边框）-Margin（外边距）
　　
　　在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容，元素的补白，元素的边框，元素的边界四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

一般可以将一个块元素看成一个盒子形状的模型。这个模型的主体部分是元素的内容部分。用来显示元素中的主要信息，这个部分由width（宽度）属性和height（高度）属性来控制。在内容部分之外是补白部分，由padding（补白）属性控制。在补白部分之外是元素的边框，由border（边框）属性控制。在盒模型的最外面是边界部分，由margin（边界）属性控制

定位体系

视觉格式化模型（visual formatting model）：

CSS的一种机制（视觉格式化模型属于CSS范畴

），它规定了页面中的多个盒子如何布局（HTML中的每个元素都会在页面中生成盒子）。

视觉格式化模型是一套非常复杂的机制，包含错综复杂的CSS规范。

视口（viewport）：可视窗口，通常指浏览器的可视区：
视口的尺寸仅受到浏览器可视窗口大小的影响，和内容无关
当网页内容的尺寸超过视口尺寸时，浏览器会出现滚动条

包含块（containing block）：
每个元素都有一个包含块，它是指元素在页面中摆放的区域。
通常情况下，元素的包含块是它父元素的内容盒（content-box）

定位体系概述：

视觉格式化模型要求，所有的元素必须放置在它的包含块中；
元素在包含块中的尺寸和位置，主要受到两个因素的影响：
元素的盒模型；元素的定位体系。

什么是定位体系：
视觉格式化模型规定，定位体系一共有三种：
常规流（normal flow）、
浮动（float）、
绝对定位（absolute positioned）。

任何一个元素，必须属于其中一种定位体系

不同的定位体系中，元素在包含块中的尺寸和位置会有一些差异。

定位体系
1、常规流：对auto值的影响；对盒子在包含块中位置的影响。

2、浮动：对auto值的影响；对盒子在包含块中位置的影响。

3、绝对定位：对auto值的影响；对盒子在包含块中位置的影响。

如果某个元素，分别为它声明了下面的样式：
position:absolute;定位体系是：绝对定位；

float:left;定位体系是：浮动；

position:absolute; float:left;定位体系是：绝对定位

position:static; float:left;定位体系是：浮动；

常规流-盒模型中的auto值：

常规流：

常规流，又叫做普通流、文档流、普通文档流；常规流是最常见的定位体系，所有元素默认状态下都是常规流定位。

常规流盒模型中的auto值：

水平方向：

常规流盒子水平方向上的尺寸必须等于包含块的宽度；如果不行，则强行将margin-right设置为auto。

垂直方向：

margin为auto：0px

height为auto：适应内容的高度

盒子位置：

盒子在包含块的垂直方向上依次摆放；

依次摆放：按照HTML元素的书写顺序从上到下摆放。

盒子在包含块中占据的尺寸是整个盒子的尺寸。

垂直方向上，若两个外边距相邻，则进行合并（折叠）。

垂直方向：

水平方向上的外边距不会合并。

外边距相邻：两个外边距之间没有border、padding和content。

合并：

均为正数取最大，均为负数取最小，一正一负则相加。

浮动-盒模型中的auto值：

浮动：

当元素的float属性取值为left或right时，元素属于浮动定位。

左浮动的盒子向上向左排列

右浮动的盒子向上向右排列

浮动盒子的顶边不得高于上一个盒子的顶边

若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动。

对最后一个子元素使用clear:both，可防止父元素高度坍塌。