CSS布局总结——盒模型，position定位，尺寸，水平居中垂直居中，浮动float，BFC

1.盒模型

盒子模型：每个元素，都会形成一个矩形块，主要包括四部分：margin(外边距)+border(边框)+padding(内边距)+content(内容)

css中存在两种不同的盒子模型，可以通过box-sizing设置不同的模型。两种盒子模型，主要是width的宽度不同。如图：

IE盒模型宽度=padding+content+border+margin

 

标准盒模型宽度=content

可以通过box-sizing来设置使用哪种盒模型：

box-sizing:border-box || content-box || inherit

• 当使用content-box时：页面将采用标准模式来解析计算，content-box也是默认模式
• 当使用border-box时，页面将采用怪异模式解析计算，怪异模式也称为IE模式
• 当使用inherit时：页面将从父元素继承box-sizing的值

2.position定位

position的六个属性值：static、relative、absolute、fixed、sticky和inherit。

• static(默认)：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分；行内元素则会创建一个或多个行框，置于其父元素中。
• relative：元素框相对于之前正常文档流中的位置发生偏移，并且原先的位置仍然被占据。发生偏移的时候，可能会覆盖其他元素。
• absolute：元素框不再占有文档流位置，并且相对于包含块进行偏移(所谓的包含块就是最近一级外层元素position不为static的元素)
• fixed：元素框不再占有文档流位置，并且相对于视窗进行定位
• sticky：(这是css3新增的属性值)粘性定位，官方的介绍比较简单，或许你不能理解。其实，它就相当于relative和fixed混合。最初会被当作是relative，相对于原来的位置进行偏移；一旦超过一定阈值之后，会被当成fixed定位，相对于视口进行定位。demo地址

简单地，介绍一下position的属性值的含义后，在来看一下偏移量top、right、bottom、left四个属性。当初在初学css的时候，会不会与margin这个属性混淆？其实，它们之间是很容易去辨识地。因为这四个属性值，其实是，定位时的偏移量。偏移量不会对static的元素起到作用。而margin，相对应的是盒子模型的外边距，它会对每个元素框起到作用，使得元素框与其他元素之间产生空白。

3.尺寸

尺寸的单位有：px，em，rem，百分比。

• 百分比：百分比的参照物是父元素，50%相当于父元素width的50%
• rem：这个对于复杂的设计图相当有用，它是html的font-size