虽不是CSS3，但是它的寿命却不及他

一个严肃又严重的话题，作为公司里面的h5，不说别的知识如何，最起码我的CSS样式得过关吧，然而，最为今天的话题主义，很显然嘛，我并不合格，今天可以给自己打一个不合格的标签了

话题引入

由于后台数据的变更，可是我的样式并没有做了那么多的判断，故此，我的问题来了，我需要做改变，于是我做了如下改变

{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
}

以上是我解决的样式定位absolute后居中的问题，但是，按照UI的设计，当前DIV模块并不要求填充完整个屏幕，由此可见，以上方法使用的环境是在不要求宽高的时候，适宜用当前方法

{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

以上用法解决了我的需求问题，由此可见，他可以将元素转换成inline-block行内块级元素，同样，也不需要知道元素的大小，但是，兼容性并不是太好

{
    width:100px;
    height:200px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-100px;
    margin-left:-50px;
}

以上方法其实最古老的方法，因为他有种种的不全才会被一一代替，由于此方法必须要知道元素的大小，否则就只能用js来获取，这并不是我们的初衷，于是乎，有了transform这个方法，好了，对于position定位之后的居中我已经说完了，接下来该说说relative和absolute了。

今天老大的一席话真得让我惊讶了，原来我一直以来都是用书本上的知识，并没有全力拓展开，更没有说细心研究过，对于样式我觉得并没有太多的要求，代码不要总重复就好了，但是显然不是这个样子的，既然CSS是美化页面的，那就应该按照页面的标准流去行走，而我，并没有注意到这些

graph LR
position-->relative
relative-->absolute

以上是我一直以来用absolute的方式，就是使用position:relative以后才能使用absolute，至于为什么自己也搞不明白，只是上课的时候老师是这么说的，我也就这么跟着做了

relative	absolute
相对定位，跟着父级元素	绝对定位，以整个网页为坐标系
相对其它元素可以随意调整位置，但位置依然在	脱离文本流，位置已然不存在
总是相对于最近的父元素定位，而不论其父元素是何种定位方式	，参照的是最近的、position值设置为relative或者absolute的元素来进行定位

对于老师说的为什么要父元素用relative，子元素才能用absolute的说话

在设置父级元素position属性的时候，将其设置为static(其实默认值即为static)，其中的子元素将像第一种情况一样定位；如果将父级元素的position属性设为absolute，那么将会破坏父级元素的原来的布局，父级元素将会以父元素的父元素为参照，并根据top等值进行定位；只有在将父级元素的position设置为relative时，才不会破坏这个父元素的布局，而且其中的子元素将参照父元素的左上角，通过top等属性值来对子元素定位