CSS定位机制之标准文档流

   前端小白今天来签到。关于CSS的定位机制媛媛我真是不甚了解。所以找来资料进行学习。以下也是我的学习笔记。如有不对，欢迎给我指正。

   这篇博文就来记录下CSS定位机制中的标准文档流。什么是标准文档流呢，就是从上到下，从左到右输出文档内容。他是有块级元素和行级元素组成。块级元素就是独占一行进行显示的元素（例如我们的div就是典型的块级元素）。行级元素就是能在一行内显示的元素（例如span标签）。

    块级元素和行级元素都是盒子模型。盒子模型是网页布局的基石，它由4个部分组成，边框border，外边距margin，内边距padding和内容content。以下图片为我简化的一张图片。关于margin和padding都有4个方向，我们可以对其赋值达到我们想要的效果。margin之后跟4个值，就是按照顺时针上左下右。margin之后跟3个值，第一个值代表上，地二个值代表左右，第三个值代表下。margin后面跟2个值就是第一个值代表上下，第二个值代表左右。margin之后跟1个值，代表上下左右。

 

既然说到margin，它可以实现居中的效果。对我们的块级元素设置margin：0 auto，这个0你也可以设置为10等你想设置的距离，第二个值一定要是auto就可以实现居中显示。要注意的是，你的这个元素如果设置了float或是postion的定位，这个就实现不了居中了。