css三大定位機制：標準文件流、浮動布局、絕對定位布局。
一、標準文件流：
1.特點：從上到下，從左到右輸出文字。
標準文件流裡面又分兩種情況，即塊級元素和行級元素，也可以說標準文件流是由塊級標籤和行級標籤組成的。
塊級元素特點：從左到右撐滿頁面，獨佔一行，觸碰到頁面邊緣時會自動換行，常見的塊級標籤有div、ul、li、dl、dt、p…。
行級元素特點：能在同一行顯示，不影響html文件結構。
例：a.專注前端100年
b.專注前端
a和b顯示效果是一樣的，即都是顯示排列在一行。常見的行級標籤有：span、strong、img、input…
注：塊級元素和行級元素都是盒子模型。
2.標準文件流布局的應用：自動一列居中布局
主要應用到3個關鍵點：
a.標準文件流的垂直自上而下排列的特點；
b.塊元素獨佔一行的特點；
c.margin屬性:為所有的塊設定乙個包括層，把這些塊包含在內，或者說把整個頁面給包裹起來，然後再給這個包裹層新增樣式：#***；
注：①width一般設定乙個固定的寬度值，然後裡面的塊的寬度設定為100%，即裡面的塊元素會繼承父元素的寬度值；
②auto的意思是會根據瀏覽器的寬度自動設定兩邊的外邊距，也就是自適應。
③當包裹層同時設定了浮動或者絕對定位的話，那麼auto是起不到自動居中的作用的；
二、 浮動布局：首先我們要清楚什麼情況下會出現或者說會需要用到浮動？浮動通常是出現在多個塊狀元素需要在併排顯示時，因為塊狀元素的特點，乙個塊狀元素是獨佔一行的，所以要想多個塊狀元素併排顯示，這時候就需要用到浮動。
浮動(float)：
a. 當設定了float以後，可以理解為塊/盒子脫離了標準文件流浮動起來，漂浮在標準文件流上面，但要注意的是，雖然設定了浮動的元素脫離了標準文件流，但是元素的內容還在標準文件流裡面，還佔據空間，而且後面緊鄰的元素雖然佔據了漂浮元素的空間，但是不會覆蓋它的內容:
浮動前（注："siderbar"層和"content"層位於"mainbody"裡面）：
「content」設定浮動後：
清除浮動:什麼是清除浮動呢？或者說什麼時候會用到清除浮動呢？我們知道浮動會對標準文件流裡面的其他元素產生影響，從而使得頁面可能會變得很亂，例如上面的"content"設定浮動後，對緊鄰在它後面的"footer"層產生了影響，而且對它的父級元素"content"層也產生了影響，使得整個頁面變得凌亂不堪，那如何消除這個影響呢？這時候就要用到浮動了：
常用的清除浮動有：
1.clear:
clear:left;
clear:right;
clear:both;
它的意思是清除元素的左側浮動或者右側浮動或者兩側浮動。
clear這種清除浮動一般常用於受浮動元素影響的緊鄰於浮動元素後面的元素的這種浮動；
2.設定元素的寬度width100%（或者固定的值）+overflow:hidden：
overflow清除浮動常用於：當乙個父塊裡面有兩列，而這兩列都設定了浮動，由於父塊沒有設定浮動，所以父塊的高度就沒辦法擴充套件了，可能出現的情況是父塊的背景被覆蓋住不能顯示，而這兩列的內容就會溢位，這時就需要用清除浮動了（在父塊的樣式裡面新增上該種方法），overflow:hidden除了可以理解為清除浮動之外，也可以理解為是把溢位內容進行隱藏。
清除浮動後：
浮動布局的常用應用：橫向兩列布局（一側定寬另一側自適應）
主要應用的關鍵點：
1.float屬性：使塊狀元素橫向排列；
2.margin屬性：設定兩列之間的間距；
三、絕對定位布局：利用position屬性定位的布局
position屬性又可以設定3種常見的屬性定位：相對定位（relative）、絕對定位（absolute）以及固定定位（fixed）.
1.相對定位（relative）的特點：
a.相對於自身原有位置進行偏移（偏移後寬度不變）；
b.仍然處於標準文件流中，仍然佔據文件流的空間；
c.偏移後擁有偏移屬性（即在樣式中設定了「position:relative;」之後，那麼就可以設定top、left等方向的方向屬性），以及z-index屬性（即空間z軸方向堆疊，例如設定了「position:relative;」之後，會出現和其他塊重合將其遮蓋的情況）；
2.絕對定位（position）特點：
a.完全脫離了標準文件流，不再對文件流裡面的其他元素造成影響；
b.隨著擁有偏移屬性和z-index屬性；
需要注意的是：
①當沒有設定偏移量時，無論是否存在已經定位的祖先元素，它都會保持在元素的初始位置，但是它會脫離標準文件流；
②當設定了偏移量時：
⑴沒有已經定位的祖先元素:偏移參照物為;
⑵有已經定位的祖先元素：偏移參照物為距離其最近的已經定位的祖先元素；
（注：已經定位的祖先元素是指設定了相對定位（常用，較穩定）、絕對定位、固定定位中的任何一種。）
c．當乙個元素設定了絕對定位之後但沒有設定寬度，那麼元素的寬度會根據元素的內容進行自動調節；
3.固定定位（fixed）：很容易理解，固定定位fixed就是相對於當前瀏覽器視窗的固定定位，也就是相對於當前視窗固定不動。
4.絕對定位布局主要應用：橫向兩列布局（一側定寬，另一側自適應）
主要關鍵點：
①relative：父元素相對定位；
②absolute:自適應寬度元素絕對定位；
（注：固定寬度列的高度要大於自適應寬度列的高度）
（注：它與浮動定位布局應用的
橫向兩列布局的不同之處在於：應用絕對定位的橫向兩列布局不需要用float
）最後需要注意的是，在網頁設計時，高度一般不設定，在瀏覽器中根據自身的內容進行自適應。
CSS關於flex布局
注意 flexbox布局最適合應用程式的元件和小規模布局，而grid布局則適用於更大規模的布局 談flex布局前先了解下flex的基本屬性 flex的基本屬性有flex basis flex direction flex wrap flex flow flex grow flex shrink六個 ...
CSS關於位置布局
平常布局 關於fixed。fixed所在的div層，會在整個可視介面定位，不會隨滾動條而移動，始終處在你所能看見的介面的相應位置 相當於你在電腦螢幕上貼了一張紙貼，你的電腦在上下移動，但在電腦螢幕上的紙貼卻隨電腦而動，在螢幕上貼著的紙還是在那裡貼著。fixed所在的div層也不會隨視窗的變化而移動位...
關於CSS的布局 position屬性
position有五個屬性值 relative absolute fixed static inherit，w3school給出了如下的 說明 下面以乙個demo來說明不同屬性值之間的區別以及對於頁面布局的影響 id parent id sub1 sub1div id sub2 sub2div di...