網頁布局的三種方式-標准流、浮動和定位

網頁布局的三種方式

網頁布局的本質——用CSS 來擺放盒子。把盒子擺放到相應位置

CSS 提供了三種傳統布局方式(簡單說,就是盒子如何進行排列順序)：

• 普通流（標准流）
• 浮動
• 定位

標准流

標准流定義

所謂的標准流:，就是標簽按照規定好默認方式排列

1. 塊級元素會獨占一行，從上向下順序排列。

常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

2. 行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行

常用元素：span、a、i、em 等

以上都是標准流布局，標准流是最基本的布局方式。

浮動

浮動定義

浮動最典型的應用：可以讓多個塊級元素一行內排列顯示。

網頁布局第一准則：多個塊級元素縱向排列找標准流，多個塊級元素橫向排列找浮動。

float 屬性用於創建浮動框，將其移動到一邊，直到左邊緣或右邊緣觸及包含塊或另一個浮動框的邊緣。

語法：

選擇器{ float: 屬性值; }

屬性值：

值	描述
left	元素向左浮動。
right	元素向右浮動。
none	默認值。元素不浮動，並會顯示在其在文本中出現的位置。
inherit	規定應該從父元素繼承 float 屬性的值。

浮動特性

一、脫離標准普通流的控制（浮）移動到指定位置（動）, （俗稱脫標），且浮動的盒子不再保留原先的位置

​ 如同其名字的意義一樣，浮動，即浮動到元素上方，可以這樣來理解：標准流在最底層，浮動的元素在標准流的上方，即脫離了標准流的控制。同時它位於標准流的上層，所以標准流里不會再存在它的位置。但也會有特殊的情況，即文字和浮動元素位於同一個父元素里時，浮動元素不會蓋住文字，而是環繞文字，這是因為浮動設計的初衷就是類似word圖片和文字的浮動效果，所以不會出現浮動元素蓋住文字的情況出現。

二、如果多個盒子都設置了浮動，則它們會按照屬性值一行內顯示並且頂端對齊排列

例如三個在同一個父盒子下的子盒子，都設置左浮動

例如在同一個父盒子下的兩個子盒子分別設置左浮動和右浮動

注意：浮動的元素是互相貼靠在一起的（不會有縫隙），如果父級寬度裝不下這些浮動的盒子，多出的盒子會另起一行對齊

三、浮動元素會具有行內塊元素特性

任何元素都可以浮動。不管原先是什么模式的元素，添加浮動之后具有行內塊元素相似的特性。

1. 如果塊級盒子沒有設置寬度，默認寬度和父級一樣寬，但是添加浮動后，它的大小根據內容來決定
2. 浮動的盒子中間是沒有縫隙的，是緊挨着一起的
3. 行內元素同理

注意點

1. 為了約束浮動元素位置, 我們網頁布局一般采取的策略是:

   ​ 先用標准流的父元素排列上下位置, 之后內部子元素采取浮動排列左右位置. 符合網頁布局第一准則

2. 浮動的盒子只會影響浮動盒子后面的標准流,不會影響前面的標准流.

清除浮動

由於父級盒子很多情況下，不方便給高度，但是子盒子浮動又不占有位置，最后父級盒子高度為0 時，就會影響下面的標准流盒子。

由於浮動元素不再占用原文檔流的位置，所以它會對后面的元素排版產生影響。

語法：

選擇器{clear:屬性值;}

值	描述
left	在左側不允許浮動元素。
right	在右側不允許浮動元素。
both	在左右兩側均不允許浮動元素。
none	默認值。允許浮動元素出現在兩側。
inherit	規定應該從父元素繼承 clear 屬性的值。

一般情況下，用到的都是clear: both;

• 清除浮動的本質是清除浮動元素造成的影響
• 如果父盒子本身有高度，則不需要清除浮動
• 清除浮動之后，父級就會根據浮動的子盒子自動檢測高度。父級有了高度，就不會影響下面的標准流了

清除浮動一般采用兩種方法，給父盒子添加屬性，可直接粘貼，代碼如下：

1. :after 偽元素法

.clearfix:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix { /* IE6、7 專有*/
	*zoom: 1;
}

• 優點：沒有增加標簽，結構更簡單
• 缺點：照顧低版本瀏覽器
• 代表網站：百度、淘寶網、網易等

2. 雙偽元素清除浮動

.clearfix:before,.clearfix:after {
	content:"";
	display:table;
}

.clearfix:after {
	clear:both;
}

.clearfix {
	*zoom:1;
}

• 優點：代碼更簡潔
• 缺點：照顧低版本瀏覽器
• 代表網站：小米、騰訊等

定位

定位定義

定位：將盒子定在某一個位置，所以定位也是在擺放盒子，按照定位的方式移動盒子。

定位= 定位模式+ 邊偏移。

定位模式用於指定一個元素在文檔中的定位方式。邊偏移則決定了該元素的最終位置。

一、定位模式

定位模式決定元素的定位方式，它通過CSS 的position 屬性來設置，其值可以分為四個：

值	描述
absolute	生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
fixed	生成絕對定位的元素，相對於瀏覽器窗口進行定位。 元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
relative	生成相對定位的元素，相對於其正常位置進行定位。 因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。
static	默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
inherit	規定應該從父元素繼承 position 屬性的值。

二、邊偏移

邊偏移就是定位的盒子移動到最終位置。有top、bottom、left 和right 4 個屬性

屬性	描述
bottom	設置定位框的底部外邊距邊緣。
left	設置定位框的左側外邊距邊緣。
right	設置定位框的右側外邊距邊緣。
top	設置定位框的頂部外邊距邊緣。

靜態定位

靜態定位是元素的默認定位方式，無定位的意思。

語法：

選擇器{ position: static; }

• 靜態定位按照標准流特性擺放位置，它沒有邊偏移
• 靜態定位在布局時很少用到

相對定位relative

相對定位是元素在移動位置的時候，是相對於它原來的位置來說的。

語法：

選擇器{ position: relative; }

相對定位的特點：

1. 它是相對於自己原來的位置來移動的（移動位置的時候參照點是自己原來的位置）。
2. 原來在標准流的位置繼續占有，后面的盒子仍然以標准流的方式對待它。因此，相對定位並沒有脫標。它最典型的應用是給擁有絕對定位的子元素的父盒子設置屬性的。

絕對定位absolute

絕對定位是元素在移動位置的時候，是相對於它祖先元素來說的。

語法：

選擇器{ position: absolute; }

絕對定位的特點：

1. 如果沒有祖先元素或者祖先元素沒有定位，則以瀏覽器為准定位（Document 文檔）。
2. 如果祖先元素有定位（相對、絕對、固定定位），則以最近一級的有定位祖先元素為參考點移動位置。
3. 絕對定位不再占有原先的位置。（脫標），所以絕對定位是脫離標准流的。

子絕父相

子絕父相是定位中最常用的一種方式這句話的意思是：子級是絕對定位的話，父級要用相對定位。

1. 子級絕對定位，不會占有位置，可以放到父盒子里面的任何一個地方，不會影響其他的兄弟盒子。
2. 父盒子需要加定位限制子盒子在父盒子內顯示。
3. 父盒子布局時，需要占有位置，因此父親只能是相對定位。

這就是子絕父相的由來，所以相對定位經常用來作為絕對定位的父級。

總結：因為父級需要占有位置，因此是相對定位，子盒子不需要占有位置，則是絕對定位

當然，子絕父相不是永遠不變的，如果父元素不需要占有位置，子絕父絕也會遇到。

固定定位fixed

固定定位是元素固定於瀏覽器可視區的位置。主要使用場景：可以在瀏覽器頁面滾動時元素的位置不會改變。

語法：

選擇器{ position: fixed; }

固定定位的特點：（務必記住）

1. 以瀏覽器的可視窗口為參照點移動元素。

• 跟父元素沒有任何關系
• 不隨滾動條滾動。

2. 固定定位不在占有原先的位置。
   固定定位也是脫標的，其實固定定位也可以看做是一種特殊的絕對定位。

定位疊放次序z-index

在使用定位布局時，可能會出現盒子重疊的情況。此時，可以使用z-index 來控制盒子的前后次序(z軸)

語法：

選擇器{ z-index: 1; }

1. 數值可以是正整數、負整數或0, 默認是auto，數值越大，盒子越靠上
2. 如果屬性值相同，則按照書寫順序，后來居上
3. 數字后面不能加單位
4. 只有定位的盒子才有z-index 屬性

拓展

一、絕對定位的盒子居中

加了絕對定位的盒子不能通過margin:0 auto 水平居中，但是可以通過以下計算方法實現水平和垂直居中。

left: 50%;/*讓盒子的左側移動到父級元素的水平中心位置。*/
margin-left: -100px/*讓盒子向左移動自身寬度的一半。*/

二、定位特殊特性

絕對定位和固定定位也和浮動類似。

1. 行內元素添加絕對或者固定定位，可以直接設置高度和寬度。
2. 塊級元素添加絕對或者固定定位，如果不給寬度或者高度，默認大小是內容的大小。

三、脫標的盒子不會觸發外邊距塌陷

浮動元素、絕對定位(固定定位）元素的都不會觸發外邊距合並的問題。

總結

通過盒子模型，清楚知道大部分html標簽是一個盒子。

1. 標准流
   可以讓盒子上下排列或者左右排列，垂直的塊級盒子顯示就用標准流布局。

2. 浮動
   可以讓多個塊級元素一行顯示或者左右對齊盒子，多個塊級盒子水平顯示就用浮動布局。

3. 定位
   定位最大的特點是有層疊的概念，就是可以讓多個盒子前后疊壓來顯示。如果元素自由在某個盒子內移動就
   用定位布局。

一個完整的網頁，是標准流、浮動、定位一起完成布局的，每個都有自己的專門用法。
通過CSS浮動、定位可以讓每個盒子排列成為網頁。

元素的顯示和隱藏

display

display 屬性用於設置一個元素應如何顯示。

語法：

display: block;/*block為屬性值*/

值	描述
none	此元素不會被顯示。
block	此元素將顯示為塊級元素，此元素前后會帶有換行符。
inline	默認。此元素會被顯示為內聯元素，元素前后沒有換行符。
inline-block	行內塊元素。（CSS2.1 新增的值）
list-item	此元素會作為列表顯示。
run-in	此元素會根據上下文作為塊級元素或內聯元素顯示。
compact	CSS 中有值 compact，不過由於缺乏廣泛支持，已經從 CSS2.1 中刪除。
marker	CSS 中有值 marker，不過由於缺乏廣泛支持，已經從 CSS2.1 中刪除。
table	此元素會作為塊級表格來顯示（類似 <table>），表格前后帶有換行符。
inline-table	此元素會作為內聯表格來顯示（類似 <table>），表格前后沒有換行符。
table-row-group	此元素會作為一個或多個行的分組來顯示（類似 <tbody>）。
table-header-group	此元素會作為一個或多個行的分組來顯示（類似 <thead>）。
table-footer-group	此元素會作為一個或多個行的分組來顯示（類似 <tfoot>）。
table-row	此元素會作為一個表格行顯示（類似 <tr>）。
table-column-group	此元素會作為一個或多個列的分組來顯示（類似 <colgroup>）。
table-column	此元素會作為一個單元格列顯示（類似 <col>）
table-cell	此元素會作為一個表格單元格顯示（類似 <td> 和 <th>）
table-caption	此元素會作為一個表格標題顯示（類似 <caption>）
inherit	規定應該從父元素繼承 display 屬性的值。

日常中常用的其實只有none，block，inline，inline-block。

display 隱藏元素后，不再占有原來的位置。

visibility

visibility 屬性用於指定一個元素應可見還是隱藏。

語法：

visibility: visible;

值	描述
visible	默認值。元素是可見的。
hidden	元素是不可見的。
collapse	當在表格元素中使用時，此值可刪除一行或一列，但是它不會影響表格的布局。被行或列占據的空間會留給其他內容使用。如果此值被用在其他的元素上，會呈現為 "hidden"。
inherit	規定應該從父元素繼承 visibility 屬性的值。

visibility 隱藏元素后，繼續占有原來的位置。

overflow

overflow 屬性指定了如果內容溢出一個元素的框（超過其指定高度及寬度）時，會發生什么。

語法：

overflow: hidden;

值	描述
visible	默認值。內容不會被修剪，會呈現在元素框之外。
hidden	內容會被修剪，並且其余內容是不可見的。
scroll	內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
auto	如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
inherit	規定應該從父元素繼承 overflow 屬性的值。