CSS文件流
什麼是流
“流”實際上是CSS 世界中的一種基本的定位和佈局機制。
CSS世界構建的基石是HTML，而HTML最具代表的兩個基石<div>和<span>正好是CSS
世界中塊級元素和內聯級元素的代表。
所以，所謂“流”，就是 CSS 世界中引導元素排列和定位的一條看不見的“水流”。
流體佈局
所謂“流體佈局”，指的是利用元素“流”的特性實現的各類佈局效果。因為“流”本身
具有自適應特性，所以“流體佈局”往往都是具有自適應性的。但是，“流體佈局”並不等同於“自適應佈局”。“自適應佈局”是對凡是具有自適應特性的一類佈局的統稱，“流體佈局”要狹窄得多。例如，表格佈局也可以設定為100%自適應，但表格和“流”不是一路的，並不屬於“流體佈局”。
因此，曾經風靡的“div+CSS 佈局”，實際上指的就是這裡的“流體佈局”。
css3世界
（1）佈局更為豐富。
• 移動端的崛起，催生了CSS3 媒介查詢以及許多響應式佈局特性的出現，如圖片元素
的srcset 屬性、CSS 的object-fit 屬性。
• 彈性盒子佈局（flexible box layout）終於熬出了頭。
• 格柵佈局（grid layout）姍姍來遲。
（2）視覺表現長足進步。
• 圓角、陰影和漸變讓元素更有質感。
• transform 變換讓元素有更多可能。
• filter 濾鏡和混合模式讓Web 輕鬆變成線上的Photoshop；
• animation 讓動畫變得非常簡單。
上面提到的全部都是CSS3 的新屬性。因為CSS3 的設計初衷是為了實現更豐富、更復雜
的網頁，所以基本上和“流”的關係並不大。
css中的專業術語
- 屬性
- 值：整數值，數值，百分比值，長度值，顏色值等
- 關鍵字：常見的solid、inherit 等
- 變數：CSS 中目前可以稱為變數的比較有限，CSS3 中的currentColor 就
是變數，非常有用。 - 長度單位：CSS 中的單位有時間單位（如s、ms），還有角度單位（如deg、rad 等），但最常見的自然還是長度單位（如px、em 等）。需要注意的是，諸如2%後面的百分號%不是長度單位。再說一遍，%不是長度單位！因為2%就是一個完整的值，就是一個整體，我想你一定認為0.02 是值，沒錯，2%也同樣是值。<number> + 長度單位 = <length>，
如果繼續細分，長度單位又可以分為相對長度單位和絕對長度單位。
（1）相對長度單位。相對長度單位又分為相對字型長度單位和相對視區長度單位。
. 相對字型長度單位，如em 和ex，還有CSS3 新世界的rem 和ch（字元0 的寬度）。
. 相對視區長度單位，如vh、vw、vmin 和vmax。
（2）絕對長度單位：最常見的就是px，還有pt、cm、mm、pc 等 - 功能符：值以函式的形式指定（就是被括號括起來的那種），主要用來表示顏色（rgba 和hsla）、背景圖片地址（url）、元素屬性值、計算（calc）和過渡效果等。
- 屬性值：屬性冒號後面的所有內容統一稱為屬性值。
- 宣告：屬性名加上屬性值就是宣告，例如：color: transparent;
- 宣告塊：宣告塊是花括號（{}）包裹的一系列宣告。
- 規則或規則集：出現了選擇器，而且後面還跟著宣告塊。
- 選擇器：選擇器是用來瞄準目標元素的東西，ID選擇器，類選擇器等。
- @規則：@規則指的是以@字元開始的一些規則，像@media、@font-face、@page 或者@support，諸如此類。
瞭解CSS 世界中的“未定義行為”
當某個瀏覽器中出現與其他瀏覽器不一樣的行為或樣式表現的時候，我們總會習慣把這種
不一樣的表現認為是瀏覽器的bug。實際上，此時遇到的表現差異並不是瀏覽器的bug，用
計算機領域的專業術語描述應該是“未定義行為”（undefined behavior）。像這種規範顧及不到的細枝末節的實現，就稱為“未定義行為”。
HTML 常見的標籤有<div>、<p>、<li>和<table>以及<span>、<img>、<strong>
和<em>等。雖然標籤種類繁多，但通常我們就把它們分為兩類：塊級元素（block-level element）和內聯元素（inline element）。
塊級元素
“塊級元素”對應的英文是block-level element，常見的塊級元素有<div>、<li>和<table>
等。需要注意是，“塊級元素”和“display 為block 的元素”不是一個概念。例如，<li>元
素預設的display 值是list-item，<table>元素預設的display 值是table，但是它們
均是“塊級元素”，因為它們都符合塊級元素的基本特徵，也就是一個水平流上只能單獨顯示一個元素，多個塊級元素則換行顯示。正是由於“塊級元素”具有換行特性，因此理論上它都可以配合clear 屬性來清除浮動帶來的影響。
display
width 值作用的細節
content box 環繞著width 和height 給定的矩形。
如果設定了寬度，則存在兩個缺點：
（1）流動性丟失。
（2）與現實世界表現不一致的困擾。
CSS 流體佈局下的寬度分離原則
很簡單，分離，width 獨立佔用一層標籤，而padding、border、margin 利用流動性在內部自適應呈現。
寬度分離的目的是便於維護。
改變width/height 作用細節的box-sizing
box-sizing 被直譯為“盒尺寸”，改變了width 作用的盒子。
理論上，box-sizing 可以有下面這些寫法：
.box1 { box-sizing: content-box; }
.box2 { box-sizing: padding-box; }
.box3 { box-sizing: border-box; }
.box4 { box-sizing: margin-box; }
實際
理論美好，現實殘酷。實際上，支援情況如下：
.box1 { box-sizing: content-box; } /* 預設值 */
.box2 { box-sizing: padding-box; } /* Firefox 曾經支援 */
.box3 { box-sizing: border-box; } /* 全線支援 */
.box4 { box-sizing: margin-box; } /* 從未支援過 */
相對簡單而單純的height:auto
height:auto 要比width:auto 簡單而單純得多。，CSS 的預設流是水平方向的，寬度是稀缺的，高度是無限的。因此，寬度的分配規則就比較複雜，高度就顯得比較隨意。