css完整总结：第一篇（定位和布局）

这次对CSS中所有的语法进行一次综合性的总结，后续的文章，将侧重与JavaScript和PHP，微信开发（小程序），以及Linux运维方面。css中设计到定位，布局，尺寸，外补白，内补白，边框，背景，颜色，字体，文本，文本装饰，书写模式，伸缩盒，装换，过渡，动画，媒体查询，伪类等等。我会集中对上述所说的方面进行详细的书写和说明，结合实例，让大家更好更快的掌握css3.0.那下面我们闲话少啥，拿起键盘就是敲.

1.定位属性：主要针对position,z-index,,top,right,bottom,left,clip讲述关于定位的知识点

2.position的使用.这个属性的取值有static，relative，absolute,fixed,center,page,sticky等.

从书面的定义上，我们知道对于定位最多的描述就是文档流的叙述。static表述的就是遵循常规流。static： 对象遵循常规流。此时4个定位偏移属性(top,bottom,left,right)不会被应用。 relative： 对象遵循常规流，并且参照自身在常规流中的位置通过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。 absolute： 对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。

盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。 fixed： 与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。 center： 与absolute一致，但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。（CSS3）

page： 与absolute一致。元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，否则取决于每个absolute模式。（CSS3）

sticky： 对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。

该属性的表现是现实中你见到的吸附效果。（CSS3）

当position的属性为非常规流，其层叠级别就可以通过z-index属性定义。 

一般定位的属性在居中布局和排版运用的还是十分广泛的。父亲相对定位，孩子绝对定位，这样的使用方式在项目中是使用最多. 

3. z-index的使用，对于非常规流的元素使用，可以实现层叠显示。同一个层叠上下文中，层叠级别大的显示在上面，反之显示在下面。 

同一个层叠上下文中，层叠级别相同的两个元素，依据它们在HTML文档流中的顺序，写在后面的将会覆盖前面的。后面级别的大小是根据数字的大小进行判断的。 

4. 方向上的四个属性，top，left，right，bottom，指定四个方向的距离。 

5. clip 属性剪裁绝对定位元素。唯一合法的形状值是：rect (top, right, bottom, left)，目前只支持正方形的裁剪，在对应的位置写入数字，即裁剪尺寸，如果写入0或者auto，默认不裁剪。 

6. 布局主要集中在display和浮动，overflow，visibility等属性。 

7. display的属性比较多，主要集中在

对于display的使用，主要针对行内和块级元素的转化。在布局中是使用比较频繁的一种样式。

8. float取值为如下：

float在绝对定位和display为 none的时候不生效。浮动在布局中主要用于将块级元素变为行内元素。改变布局的方式。不过对于浮动的使用，容易造成父元素的塌陷，所以这个时候就延伸出清除浮动的方法。对于浮动的方法，我们可以有很多，不过我推荐四种，最推荐的就是使用伪类来处理。

visibility主要针对可见性的使用：取值为如下

overflow处理溢出隐藏的，对于内容超出对象宽度和高度的情况。取值主要为：