文檔流
- 定義：將窗體自上而下分成一行行, 並在每行中按從左至右的順序排放元素,即爲文檔流
- 佔用文檔流：我們將網頁比作一張二維平面，那麼掛載在該平面的網頁對象就稱爲佔用了文檔流。網頁中大部分對象默認是佔用文檔流。
- 不佔文檔流：不掛在文檔流這個平面上的對象，則稱爲不佔用文檔流。主要方式有：
- 設置float
- 設置position爲fixed
- 設置position爲absolute
- 父類元素與子類元素的關係
內聯元素和塊元素
- 區分：所佔寬度是否是佔用了全部寬度
- 塊元素：佔用了全部寬度，在前後都是換行符。eg：
<p>
<h1>
<div>
- 內聯元素：只需要必要的寬度，不強制換行。
<span> 、<a>
- 改變元素的顯示方式：** display **
- 將內聯元素改爲塊元素：display:block;
- 將塊元素改爲內聯元素：display:inline;
- 【注】：一個內聯元素設置爲display:block是不允許有它內部的嵌套塊元素。
定位
-
定義：CSS中元素可以使用top,bottom,left,right來設置元素的定位。position的值不一樣，這些屬性所參考的位置不一樣。
-
static：HTML元素的默認值，即沒有定位，元素出現在正常的流中。使用該定位方式（靜態方式）的元素不會受到 top, bottom, left, right影響。
-
fixed：元素的位置相對於瀏覽器窗口是固定位置。即使窗口是滾動的它也不會移動。
-
Fixed定位使元素的位置與文檔流無關，因此不佔據空間。（脫離文檔流）
-
Fixed定位的元素和其他元素重疊。（和其他元素不在同一平面）
-
relative：相對定位元素的定位是相對其正常位置。
-
相對定位的元素可以和其他元素重合，但它仍然處於文檔流這一平面中，所以該元素仍然佔文檔流空間。
-
與相對定位的元素重合的其他元素，毋庸置疑，也佔文檔流。
-
相對定位元素經常被用來作爲絕對定位元素的容器塊。
-
absolute：絕對定位的元素的位置相對於最近的已定位父元素，如果元素沒有已定位的父元素，那麼它的位置相對於<html>
-
總結：
- static元素不會受到left，top,right,bottom等屬性影響，但可以通過box-model的屬性來改變它們的位置。eg：
<span style="position:static;left:100px;">static定位</span> <br> <span style="position:static;margin-left:100px;">static定位</span>- fixed定位與absolute定位的聯繫與區別
- fixed定位是相對於瀏覽器窗口固定，而absolute是相對於文檔（最近的父類元素，即使沒有父類元素，也是相對於html標籤）固定
- 都脫離了文檔流,都不佔文檔流的空間
浮動 Float
- 定義：CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。
- 方式：元素的水平方向浮動，意味着元素只能左右移動而不能上下移動。
- 特點：
- 一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框爲止。
- 浮動元素之後的元素將圍繞它。
- 浮動元素之前的元素將不會受到影響。
- 如果圖像是右浮動，後面的對象流將環繞在它左邊。
- 彼此相鄰的浮動元素：幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰
- 清除浮動： 使用 clear
- 素浮動之後，周圍的元素會重新排列，爲了避免這種情況，使用 clear 屬性。
- clear 屬性指定元素兩側不能出現浮動元素。
脫離文檔流的方式總結
- position：absolute；
- position：fixed；
- float：left/right；
- 父元素脫離文檔流，則子元素也會脫離。