如何在css中使用position屬性?很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細講解,有這方面需求的人可以來學習下,希望你能有所收獲。
成都創(chuàng)新互聯(lián)專注于安次網(wǎng)站建設服務及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供安次營銷型網(wǎng)站建設,安次網(wǎng)站制作、安次網(wǎng)頁設計、安次網(wǎng)站官網(wǎng)定制、成都微信小程序服務,打造安次網(wǎng)絡公司原創(chuàng)品牌,更為您提供安次網(wǎng)站排名全網(wǎng)營銷落地服務。
position 屬性值的含義:
static
元素框正常生成。塊級元素生成一個矩形框,作為文檔流的一部分,行內元素則會創(chuàng)建一個或多個行框,置于其父元素中。
relative
元素框偏移某個距離。元素仍保持其未定位前的形狀,它原本所占的空間仍保留。
absolute
元素框從文檔流完全刪除,并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉,就好像元素原來不存在一樣。元素定位后生成一個塊級框,而不論原來它在正常流中生成何種類型的框。
fixed
元素框的表現(xiàn)類似于將 position 設置為 absolute,不過其包含塊是視窗本身。
事實上默認的static和fixed這兩種情況是比較容易辨別的,而容易混淆的是relative和absolute。
用更簡單的說法就是absolute是將原本在文檔流中所占的位置去掉,并以第一個非static定位的父元素進行定位,一般這樣我們都會用top,left等來控制位置,這就是絕對定位。
而relative這種定位方式則是,在原有的文檔流位置(也就是未設置POSITION屬性的時候的位置)基礎上移動。
所以當我們一般需要讓某些元素隨父元素移動而不會因為瀏覽器窗口大小變動而變形時,一般我們會把父元素定義為relative,而子元素定義為absolute,也就是說absolute是以第一個非static定位的父元素作為參考對象。
而一般我們會讓內容居中,讓margin:0 AUTO;就好了。
至于top和margin-top的區(qū)別,有些人可能分不清什么時候用,經(jīng)常會用margin-top來實現(xiàn)定位,事實上這種做法是錯誤的,margin它是外邊距,是占內容的,往往用這個來勉強實現(xiàn)定位都會使其他元素位置改變或導致其他效果,而這個效果并非我們想要的。
所以要認清absolute和relative的區(qū)別和用法,加上TOP LEFT RIGHT BOTTOM來定位就可以減少錯誤了。
順帶一提,CSS3之后多了挺多新屬性的,自己還沒一個個看,暫時記一下,background-size:cover;這個是本身就有還是后來才有的?我用DW8的時候并沒有這個屬性提示;
另外CSS3有很多屬性IE是不能支持的,即使有那也是9甚至10以上才能兼容,所以在寫的時候要注意瀏覽器的判斷,根據(jù)不同瀏覽器設計不同的樣式
除IE外都可識別
看完上述內容是否對您有幫助呢?如果還想對相關知識有進一步的了解或閱讀更多相關文章,請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝您對創(chuàng)新互聯(lián)的支持。