元素分類
- 塊級(jí)元素 block
- 內(nèi)聯(lián)元素 inline
- 內(nèi)聯(lián)塊級(jí)元素 inline-block
通過display可以改變?cè)氐恼故緺顟B(tài)
塊級(jí)元素
- 每個(gè)塊級(jí)元素都是另起一行巡莹，并且獨(dú)占一行
- 元素的盒模型屬性都可以設(shè)置
- 元素寬度默認(rèn)是父容器寬度的100%
內(nèi)聯(lián)元素
- 內(nèi)聯(lián)元素和其他內(nèi)聯(lián)元素都在一行展示
- 元素的盒子屬性設(shè)置無效
- 元素的寬度是包含文字或圖片的寬度贩挣，不可改變
內(nèi)聯(lián)塊級(jí)元素
同時(shí)具備內(nèi)聯(lián)和塊級(jí)的特征
整體對(duì)外展示內(nèi)聯(lián)特性驳癌，對(duì)內(nèi)展示塊級(jí)特性腔丧。
- 和其非塊級(jí)元素在一行上
- 元素的盒子屬性可以設(shè)置
盒模型
從內(nèi)向外依次是 實(shí)際內(nèi)容 -> 內(nèi)填充 -> 邊框 -> 邊界
content -> padding -> border -> margin
布局模型
- 流動(dòng)模型 Flow
- 浮動(dòng)模型 Float
- 層模型 Layer
流動(dòng)模型 FLow
流動(dòng)Flow是網(wǎng)頁的默認(rèn)布局，默認(rèn)情況所有的HTML元素都是根據(jù)流動(dòng)模型來分布網(wǎng)頁內(nèi)容尘吗。
流動(dòng)布局有兩個(gè)特征：
- 塊狀元素都會(huì)在所處的包含元素內(nèi)自上而下按順序垂直延伸分布
- 內(nèi)聯(lián)元素都會(huì)在所處的包含元素內(nèi)從左到右水平分布
浮動(dòng)模型
任何元素在默認(rèn)情況下都是不能浮動(dòng)的锄俄，可以通過css定義為浮動(dòng)。
浮動(dòng)的框可以向左或向右移動(dòng)冰肴，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?/p>
float取值有 left right none inherit
通常所說的float元素脫離了文檔流屈藐，一般情況看上去沒問題，
但 float最初的目的是實(shí)現(xiàn)文字環(huán)繞效果熙尉，從這點(diǎn)看联逻，似乎又沒脫離流，這一點(diǎn)我不解检痰，
可能mdn給的這個(gè)就是解釋吧
float CSS屬性指定一個(gè)元素應(yīng)沿其容器的左側(cè)或右側(cè)放置包归，允許文本和內(nèi)聯(lián)元素環(huán)繞它。該元素從網(wǎng)頁的正常流動(dòng)中移除铅歼，盡管仍然保持部分的流動(dòng)性公壤。
就是保持了部分流動(dòng)性。
層布局
層布局模型椎椰，就像是Photoshop中的圖層厦幅，每一層都能精確定位，
但在網(wǎng)頁設(shè)計(jì)領(lǐng)域慨飘，由于網(wǎng)頁大小的活動(dòng)性确憨，層布局沒收到熱捧。
如何讓html元素在網(wǎng)頁中精確定位，css定義了一組定位屬性position來支持層模型布局：
Position
- absolute
- relative
- fixed
relative
設(shè)置position:relative（表示相對(duì)定位）缚态，它通過left、right堤瘤、top玫芦、bottom屬性確定元素在正常文檔流中的偏移位置。相對(duì)定位完成的過程是首先按static(float)方式生成一個(gè)元素(并且元素像層一樣浮動(dòng)了起來)本辐，然后相對(duì)于以前的位置移動(dòng)桥帆，移動(dòng)的方向和幅度由left、right慎皱、top老虫、bottom屬性確定，偏移前的位置保留不動(dòng)茫多。雖然div元素相對(duì)于以前的位置產(chǎn)生了偏移祈匙，但是div元素以前的位置還是保留著。
absolute
設(shè)置position:absolute(表示絕對(duì)定位)天揖，這條語句的作用將元素從文檔流中拖出來夺欲，然后使用left、right今膊、top些阅、bottom屬性相對(duì)于其最接近的一個(gè)具有定位屬性的父包含塊進(jìn)行絕對(duì)定位。如果不存在這樣的包含塊斑唬，則相對(duì)于body元素市埋，即相對(duì)于瀏覽器窗口。
由于relative沒有脫離文檔流恕刘，所以可以設(shè)置父元素為relative缤谎，設(shè)置子元素為absolute 就可以使用上下左右讓子元素相對(duì)父元素移動(dòng)了。
fixed
設(shè)置position:fixed（表示固定定位）雪营，與absolute定位類型類似弓千，但它的相對(duì)移動(dòng)的坐標(biāo)是視圖（屏幕內(nèi)的網(wǎng)頁窗口）本身。由于視圖本身是固定的献起，它不會(huì)隨瀏覽器窗口的滾動(dòng)條滾動(dòng)而變化洋访，除非你在屏幕中移動(dòng)瀏覽器窗口的屏幕位置，或改變?yōu)g覽器窗口的顯示大小谴餐，因此固定定位的元素會(huì)始終位于瀏覽器窗口內(nèi)視圖的某個(gè)位置姻政，不會(huì)受文檔流動(dòng)影響，這與background-attachment:fixed?屬性功能相同岂嗓。
