關於position和float的初級理解和對將來的一些想法

時間 2019-11-07

標籤關於 position float 初級理解將來一些想法欄目 CSS 简体版

原文原文鏈接

在如今傳統的網頁佈局裏通常都離不開float和position，由於這段時間用純html和css編寫代碼，對一些頁面佈局也有了本身的一些理解，而且也看了一些大神對於float和position的一些觀點，因此寫這篇博客總結一些。 javascript

在網頁佈局中我喜歡而且習慣用float來對總體進行佈局，一些局部的小東西會用absolute來定位。這兩個誰好誰壞沒有明確標準，float不能起到精確的定位，而是讓層飄起來，這種漂浮會帶來不少問題，而position則能夠精肯定位，而且兼容性比float好，可是若是總體用position來定位，會形成一些不一樣分辨率的顯示錯誤（配合javascript能夠修正這些錯誤），總的來講，大多數人仍是用float來總體的佈局。可是經過這短期的學習和理解，我以爲他們說成是專門用來佈局的兩個css屬性有點牽強，首先是float，float的最初是爲了用在文字環繞圖片而出現的，如今大量的用在佈局上，感受是對float做用的一種變向使用，不過效果很好，這是確定的，第二個position感受更偏向與佈局，由於position能夠精確的定出內容該出如今頁面的哪個地方，這對佈局也產生了靈活性，可是對每個板塊都寫出left和top也實在是有點麻煩，並且position中的絕對定位是徹底的脫離文檔流來定位，這其實和佈局感受有點不符合，佈局應該是文檔流中各元素之間的相互分佈，從這點來看，我卻是以爲inline-block比這兩個更像是佈局的。 css

不過這些都不影響，至少咱們如今還在用這些佈局。或許是由於兩個屬性對佈局的不完善，因此在css3中加入了一些新的屬性來特別的控制佈局，好比flex box，layout，column，這些屬性看上去更像是頁面佈局的屬性，而且這些屬性在移動端已經開始使用，而且移動web已經不多用float來佈局了，html5和css3在移動端已經有了很好的推廣，pc端因爲各類瀏覽器的兼容性還須要一段時間。 html

如今咱們仍是使用float+position的方式來作好佈局，合理的運用和搭配會起到意想不到的結果。 html5

最後說一點，咱們如今的佈局仍是在二維上的一種佈局，我以爲能夠引入ps中圖層的概念，對網頁進行分層佈局，而後在對每一個層進行二維佈局，在疊加以後，用戶在瀏覽器上觀看的效果也不會有改變。 java

下面這個想法或許有點天真，全當菜鳥的幾句吐槽吧，加入這種分層的想法後，能夠在每一個層用一個<html>標籤或者其餘標籤（能夠專門設計一個），每一個層的DOM樹都是獨立的，可是共用一樣的css和js，當頁面出現css迴流和重繪的時候，只會在一個層中的DOM樹裏執行，這樣能夠減小css迴流和重繪的時間，提升效率。小白想法，全當拋磚引玉。 css3

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。