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

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

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

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

話題引入

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

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

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

{
    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等屬性值來對子元素定位

云服務器 GPU云服務器迫不及待它的訪問地址為 python ?卻? 親卻服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112202.html

數據中心運維祖訓“沒有折騰，就沒有故障”

摘要：數據中心運維也喜靜不喜動，少動慎動，這能最大程度減少故障發(fā)生。不過，的確是應該最大限度地去主動降低數據中心操作頻率，盡量少動，這樣可極大降低故障發(fā)生概率。作為數據中心的運維人，要時刻牢記祖訓。沒有折騰，就沒有故障這句話雖糙，但卻很有道理，尤其在運維上。據有關咨詢機構統(tǒng)計，數據中心的故障中有百分之七十是人為故障，也就是與人的活動強相關，可見人對于數據中心來說是多么可怕。人為故障其中也可以分為有...

FleyX 2019-04-28 19:36 評論0 收藏0
游戲雖易，游戲云不易，且行且珍惜

摘要：發(fā)布會選在了高大上的北京盤古七星酒店，創(chuàng)業(yè)邦雜志手冊茶館游戲葡萄等十余家行業(yè)媒體和上百名游戲云計算行業(yè)知名人士出席。借用即將流行的一句話作為本篇的結尾游戲雖易，游戲云不易，且行且珍惜。結束了半個多月的北京之行，UCloud市場部的女漢子們和男苦力都回到了上海大本營。回首這半個月的活動猶如過江之鯽。今天就簡單回顧一下3月份的活動。 0320：UCloud移動游戲開發(fā)者沙龍這是今年U...

CoffeX 2019-06-28 10:47 評論0 收藏0
“蟬原則”與CSS3隨機多背景隨機圓角等效果

摘要：那蟬原則對我們網頁設計有什么啟示呢那就是可以以最小成本實現更自然的隨機效果。本文就演示兩個借助蟬原則和特性實現隨機效果的例子。一、什么是蟬原則？蟬原則，英文稱作cicada principle，是一種讓事物的重復出現符合自然隨機性的規(guī)則，為什么這么說呢？蟬原則源自于北美，中國似乎并未有這樣的說法，這背后是有有故事的：北美和東亞蟬的種群是不一樣的，在東亞蟬的幼蟲生活在土中3年5年或7...

crossoverJie 2019-04-23 13:44 評論0 收藏0
由淺入深的前端面試題和矯情的“浪漫主義”詩句

摘要：好吧，我承認太標題黨了，這篇文章是通過一道前端面試題引出的純技術討論。我先要矯情無比的從中外詩歌說起。這一星期陸陸續(xù)續(xù)面試了不少于個人，其中不乏工作履歷突出的候選者。這樣做的問題在于循環(huán)并沒有要求枚舉對象的修改與當前循環(huán)保持一致。好吧，我承認太標題黨了，這篇文章是通過一道前端面試題引出的純技術討論。我先要矯情無比的從中外詩歌說起。傳統(tǒng)的佛學經典里，被世人熟知的有這樣一句話：一花一世...

JerryZou 2019-08-21 11:33 評論0 收藏0
由淺入深的前端面試題和矯情的“浪漫主義”詩句

摘要：好吧，我承認太標題黨了，這篇文章是通過一道前端面試題引出的純技術討論。我先要矯情無比的從中外詩歌說起。這一星期陸陸續(xù)續(xù)面試了不少于個人，其中不乏工作履歷突出的候選者。這樣做的問題在于循環(huán)并沒有要求枚舉對象的修改與當前循環(huán)保持一致。好吧，我承認太標題黨了，這篇文章是通過一道前端面試題引出的純技術討論。我先要矯情無比的從中外詩歌說起。傳統(tǒng)的佛學經典里，被世人熟知的有這樣一句話：一花一世...

lk20150415 2019-08-01 16:27 評論0 收藏0