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的属性比较多，主要集中在

none： 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间 
inline： 指定对象为内联元素。 
block： 指定对象为块元素。 
list-item： 指定对象为列表项目。 
inline-block： 指定对象为内联块元素。
table： 指定对象作为块元素级的表格。类同于html标签<table>
inline-table： 指定对象作为内联元素级的表格。类同于html标签<table> 
table-caption： 指定对象作为表格标题。类同于html标签<caption>
table-cell： 指定对象作为表格单元格。类同于html标签<td> 
table-row： 指定对象作为表格行。类同于html标签<tr> 
table-row-group： 指定对象作为表格行组。类同于html标签<tbody> 
table-column： 指定对象作为表格列。类同于html标签<col> 
table-column-group： 指定对象作为表格列组显示。类同于html标签<colgroup>
table-header-group： 指定对象作为表格标题组。类同于html标签<thead> 
table-footer-group： 指定对象作为表格脚注组。类同于html标签<tfoot> 
run-in： 根据上下文决定对象是内联对象还是块级对象。（CSS3） 
box： 将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3） 
inline-box： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3） 
flexbox： 将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3） 
inline-flexbox： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3） 
flex： 将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3） 
inline-flex： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）

对于display的使用，主要针对行内和块级元素的转化。在布局中是使用比较频繁的一种样式。
8. float取值为如下：

none： 设置对象不浮动 
left： 设置对象浮在左边 
right： 设置对象浮在右边 

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

方式一:使用overflow属性来清除浮动
.ovh{
  overflow:hidden;
}
先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden,就是清除这个父元素中的子元素浮动对页面的影响.
注意：一般情况下也不会使用这种方式，因为overflow:hidden有一个特点，离开了这个元素所在的区域以后会被隐藏（overflow:hidden会将超出的部分隐藏起来）.
方式二:使用额外标签法
.clear{
 clear:both;
}
在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.
a.内部标签：会将这个浮动盒子的父盒子高度重新撑开.
b.外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子.
注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签，造成结构的混乱.
方法三:使用伪元素来清除浮动(after意思:后来,以后)
.clearfix:after{
    content:"";//设置内容为空
    height:0;//高度为0
    line-height:0;//行高为0
    display:block;//将文本转为块级元素
    visibility:hidden;//将元素隐藏
    clear:both//清除浮动
}
.clearfix{
  zoom:1;为了兼容IE(可以不写，因为对于ie基本很多公司不再考虑)
}
方法四:使用双伪元素清除浮动
.clearfix:before,.clearfix:after {
        content: "";
        display: block;
        clear: both;
}
.clearfix {
   zoom: 1;
}
总结:第一种方法会将超出部分隐藏在某些时候我们想清除浮动并且保留超出部分时做不到,第二种方法会增加许多不必要的标签,
所以我们尽量使用第三种方法来清除浮动,为什么不选择第四种方法呢?因为第四种是第三种的改良版虽然比较简便,但是不严谨!第三种方法也是很多前端所说的万能清浮动的方法。

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

visible： 设置对象可视 
hidden： 设置对象隐藏 
设置或检索是否显示对象。与display属性不同，此属性为隐藏的对象保留其占据的物理空间，这一点是和display为none是有区别的。所以大家应该重视起来。
如果希望对象为可视，其父对象也必须是可视的。 
对应的脚本特性为visibility。

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

visible： 对溢出内容不做处理，内容可能会超出容器。 
hidden： 隐藏溢出容器的内容且不出现滚动条。 
scroll： 隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。 
auto： 当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为body对象和textarea的默认值。 

上述的介绍，重点就是浮动和定位，浮动和清除浮动的原理以及为什么要这么做，希望能够有一个清除的认识，在实际的页面布局使用这两个知识点还是比较多的。我的github对于css的使用，有专门的仓库，有很多优秀的动画插件和写法。欢迎关注和star

github