1.文件流：是css世界中的一種基本的定位和佈局機制 ，是引導元素排列和定位的一條看不見的流。流向只能是正向的。浮動定位會脫離文件流。

2.流體 佈局：曾經風靡的“div+CSS 佈局”，實際上指的就是這裡的“流體 佈局”

3.table 的世界 :<table>有著自己的世界，“流”的特性對<table>並不適用,一些 CSS 屬性的表現，如單元格的 vertical-align，也和普通的元素不一樣。 雖然 CSS2.1 加強了和<table>的聯絡，如對 table 類別的 display 屬性值的支援等

4.CSS 新世界——CSS3

 （1）佈局更為豐富。

• 移動端的崛起，催生了 CSS3 媒介查詢以及許多響應式佈局特性的出現，如圖片元素 的 srcset 屬性、CSS 的 object-fit 屬性。

• 彈性盒子佈局（flexible box layout）

• 格柵佈局（grid layout）姍姍來遲。

（2）視覺表現長足進步。

• 圓角、陰影和漸變讓元素更有質感。

• transform 變換讓元素有更多可能。

• filter 濾鏡和混合模式讓 Web 輕鬆變成線上的 Photoshop；

• animation 讓動畫變得非常簡單。 上面提到的全部都是 CSS3 的新屬性。因為 CSS3 的設計初衷是為了實現更豐富、更復雜 的網頁，所以基本上和“流”的關係並不大。

5.長度的劃分

<number> + 長度單位 = <length>

長度單位又可以分為相對長度單位和絕對長度單位。

（1）相對長度單位。相對長度單位又分為相對字型長度單位和相對視區長度單位。

• 相對字型長度單位，如 em 和 ex，還有 CSS3 新世界的 rem 和 ch（字元 0 的寬度）。

• 相對視區長度單位，如 vh、vw、vmin 和 vmax。

（2）絕對長度單位：最常見的就是 px，還有 pt、cm、mm、pc 等了解一下就可以，在我 看來，它們實用性近乎零。

 6.後代選擇器：

選擇所有合乎規則的後代元素。空格連線。

• 相鄰後代選擇器：僅僅選擇合乎規則的兒子元素，孫子、重孫元素忽略，因此又稱“子 選擇器”。>連線。適用於 IE7 以上版本。 •             • 兄弟選擇器：選擇當前元素後面的所有合乎規則的兄弟元素。~連線。適用於 IE7 以上 版本。

• 相鄰兄弟選擇器：僅僅選擇當前元素相鄰的那個合乎規則的兄弟元素。+連線。適用於 IE7 以上版本。

7.塊級元素

“塊級元素”對應的英文是 block-level element，常見的塊級元素有<div>、<li>和<table> 等。

“塊級元素”和“display 為 block 的元素”不是一個概念。例如，<li>元 素預設的 display 值是 list-item，<table>元素預設的 display 值是 table，但是它們 均是“塊級元素”，因為它們都符合塊級元素的基本特徵，也就是一個水平流上只能單獨顯示一 個元素，多個塊級元素則換行顯示。 正是由於“塊級元素”具有換行特性，因此理論上它都可以配合 clear 屬性來清除浮動 帶來的影響。

8.為什麼 list-item 元素會出現專案符號 在 CSS 世界中

很多看似“理所當然”的現象的背後，實際上可能有一整套的體系支撐。 挖掘簡單現象背後的原因，會讓你學到很多別人很難學到的 CSS 技能和知識。此問題牽扯到 CSS 世界中各種盒子， 創造 CSS 的之人原本的想法很簡單：我要創造一個世界，這 個世界只有塊級盒子（block-level box）和內聯盒子（inline box）。塊級盒子就負責結構，內聯 盒子就負責內容。 原本以為塊級盒子一套就夠用了，也就是所有“塊級元素”就只有一個“塊級盒子”，但 是，半路殺出個 list-item，其預設要顯示專案符號的，一個盒子解釋不了，怎麼辦？給 list-item 再重新命名一個盒子，就叫“附加盒子”。好了，這下順了，所有的“塊級元素”都有一個“主塊級盒子”，list-item 除此之外還有一個“附加盒子”。 現在大家知道上面問題的答案了吧！之所以 list-item 元素會出現專案符號是因為生成 了一個附加的盒子，學名“標記盒子”（marker box），專門用來放圓點、數字這些專案符號。

IE 瀏覽器下偽元素不支援 list-item 或許就是無法建立這個“標記盒子”導致的。 碰到了真正的特殊的 display:inline-block 元素。 穿著 inline 的皮藏著 block 的心，現有的幾個盒子根本沒法解釋啊，怎麼辦？又新增一個盒子，也就是每個元素都兩個盒子， 外在盒子①和內在盒子。外在盒子負責元素是可以一行顯示，還是隻能換行顯示；內在盒子負責 寬高、內容呈現什麼的。叫“內在盒子”雖然容易理解，但是未免 有些俗氣，又想了一個更專業的名稱，叫作“容器盒子”。 於是，按照 display 的屬性值不同，值為 block 的元素的盒子實際由外在的“塊級盒子” 和內在的“塊級容器盒子”組成，值為 inline-block 的元素則由外在的“內聯盒子”和內 在的“塊級容器盒子”組成，值為 inline 的元素則內外均是“內聯盒子”。 現在，大家應該明白為何display屬性值是inline-block的元素既能和圖文一行顯示， 又能直接設定 width/height 了吧！因為有兩個盒子，外面的盒子是 inline 級別，裡面的盒 子是 block 級別。 實際上，如果遵循這種理解，display:block 應該腦補成 display:block-block，

display:table 應該腦補成 display:block-table，我們平時的寫法實際上是一種簡寫。