雖不是CSS3，但是它的壽命卻不及他

geekidentity 發(fā)布于2019-08-29 12:52 / 3434人閱讀

摘要：一個嚴肅又嚴重的話題，作為公司里面的，不說別的知識如何，最起碼我的樣式得過關(guān)吧，然而，最為今天的話題主義，很顯然嘛，我并不合格，今天可以給自己打一個不合格的標簽了話題引入由于后臺數(shù)據(jù)的變更，可是我的樣式并沒有做了那么多的判斷，故此，我的問題

一個嚴肅又嚴重的話題，作為公司里面的h5，不說別的知識如何，最起碼我的CSS樣式得過關(guān)吧，然而，最為今天的話題主義，很顯然嘛，我并不合格，今天可以給自己打一個不合格的標簽了

話題引入

由于后臺數(shù)據(jù)的變更，可是我的樣式并沒有做了那么多的判斷，故此，我的問題來了，我需要做改變，于是我做了如下改變

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

以上是我解決的樣式定位absolute后居中的問題，但是，按照UI的設(shè)計，當前DIV模塊并不要求填充完整個屏幕，由此可見，以上方法使用的環(huán)境是在不要求寬高的時候，適宜用當前方法

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

以上用法解決了我的需求問題，由此可見，他可以將元素轉(zhuǎn)換成inline-block行內(nèi)塊級元素，同樣，也不需要知道元素的大小，但是，兼容性并不是太好

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

以上方法其實最古老的方法，因為他有種種的不全才會被一一代替，由于此方法必須要知道元素的大小，否則就只能用js來獲取，這并不是我們的初衷，于是乎，有了transform這個方法，好了，對于position定位之后的居中我已經(jīng)說完了，接下來該說說relative和absolute了。

今天老大的一席話真得讓我驚訝了，原來我一直以來都是用書本上的知識，并沒有全力拓展開，更沒有說細心研究過，對于樣式我覺得并沒有太多的要求，代碼不要總重復(fù)就好了，但是顯然不是這個樣子的，既然CSS是美化頁面的，那就應(yīng)該按照頁面的標準流去行走，而我，并沒有注意到這些

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

以上是我一直以來用absolute的方式，就是使用position:relative以后才能使用absolute，至于為什么自己也搞不明白，只是上課的時候老師是這么說的，我也就這么跟著做了

relative	absolute
相對定位，跟著父級元素	絕對定位，以整個網(wǎng)頁為坐標系
相對其它元素可以隨意調(diào)整位置，但位置依然在	脫離文本流，位置已然不存在
總是相對于最近的父元素定位，而不論其父元素是何種定位方式	，參照的是最近的、position值設(shè)置為relative或者absolute的元素來進行定位

對于老師說的為什么要父元素用relative，子元素才能用absolute的說話

在設(shè)置父級元素position屬性的時候，將其設(shè)置為static(其實默認值即為static)，其中的子元素將像第一種情況一樣定位；如果將父級元素的position屬性設(shè)為absolute，那么將會破壞父級元素的原來的布局，父級元素將會以父元素的父元素為參照，并根據(jù)top等值進行定位；只有在將父級元素的position設(shè)置為relative時，才不會破壞這個父元素的布局，而且其中的子元素將參照父元素的左上角，通過top等屬性值來對子元素定位