本文介紹的是CSS世界中務(wù)必了解的專業(yè)術(shù)語，包括屬性、值、關(guān)鍵詞、變量、長度單位、功能符、屬性值、生命、聲明塊、規(guī)則或規(guī)則集、選擇器、關(guān)系選擇器、@規(guī)則以及CSS世界中的“未定義行為”。
“流”之所以影響了整個CSS世界，就是因為影響了CSS世界的基石HTML。HTNML標(biāo)簽通常分為兩類：塊級元素和內(nèi)聯(lián)元素。
注意： 按照W3C的CSS規(guī)范，這里應(yīng)該是“塊級元素”和“內(nèi)聯(lián)級元素”。但是在W3C的HTML規(guī)范里，已經(jīng)明確把HTML元素分為了“塊級元素”和“內(nèi)聯(lián)元素”。我們這里采用現(xiàn)實中常用的HTML的內(nèi)聯(lián)元素這一說法。
一、塊級元素（block-level element）
1.1 基本特性：
基本特性：換行特性（一個水平流上只能單獨顯示一個元素，多個塊級元素則換行顯示。）
注意：塊級元素的流體特性主要表現(xiàn)在水平方向上。
1.2 塊級元素和“display 為block 的元素”不是一個概念
display:list-item、display:table均塊級元素，因為他們符合塊級元素的基本特征，即換行特征。
1.3 用display值為block和list-item來配合clear屬性來清除浮動帶來的影響
不使用list-item的原因：字母比較多、會出現(xiàn)項目符號、ie瀏覽器不支持偽元素的display值為listitem。
如案例：
.clear: after {
content: '';
display: table; // 也可以是block，或者是list-item
clear: both;
}
二、list-item 元素會出現(xiàn)項目符號的原因
2.1 標(biāo)記盒子：
注意:標(biāo)記盒子可以理解為主塊級之外的附加盒子。
list-item 元素會出現(xiàn)項目符號是因為生成了一個附加的盒子，學(xué)名“標(biāo)記盒子”（marker box），專門用來放圓點、數(shù)字這些項目號。
IE瀏覽器下偽元素不支持list-item 或許就是無法創(chuàng)建這個“標(biāo)記盒子”導(dǎo)致的。
2.2 外在盒子和容器盒子
注意:容器盒子可以理解為內(nèi)在盒子。
內(nèi)在盒子：負(fù)責(zé)元素是一行顯示還是只能換行顯示。
容器盒子：負(fù)責(zé)寬高、內(nèi)容呈現(xiàn)等。
[按照display的屬性值我們可以知道：
- display值為block的元素由外在的“塊級盒子”和內(nèi)在的“塊級容器盒子”組成。
- display值為inline-block的元素由外在的“內(nèi)聯(lián)盒子”和內(nèi)在的“塊級容器盒子”組成。
- display值為inline的元素內(nèi)外均是“內(nèi)聯(lián)盒子”。
- display值為inline-table的元素外面是“內(nèi)聯(lián)盒子”，里面是“table 盒子”。
2.3 width/height 作用在“容器盒子”
案例結(jié)果：該元素和文字一行顯示，且表現(xiàn)如同真正的表格元素（子元素寬度等分）
三、width/height作用的細(xì)節(jié)
3.1 width默認(rèn)值auto的4種表現(xiàn)：
1、充分利用可用空間，寬度默認(rèn)100%于父級容器的。
比如：<div>、<p>這些元素的寬度默認(rèn)是100%于父級容器的。
這種充分利用可用空間的行為還有個專有名字，叫作fill-available。
2、自適應(yīng)大小，具有包裹性。
典型代表：浮動、絕對定位、inline-block 元素或table 元素。
3、收縮到最小
這個最容易出現(xiàn)在table-l表格ayout 為auto 的中：
當(dāng)一列空間都不夠時，文字能斷就斷，但中文隨便斷的，英文單詞不能斷。
4、超出容器限制
除非明確width的相關(guān)設(shè)置，否則上面3種都不會主動超過父級容器寬度的，但是存在一些特殊情況。例如：內(nèi)容很長的連續(xù)的英文和數(shù)字，或者內(nèi)聯(lián)元素被設(shè)置了white-space：nowrap,則表現(xiàn)為如下：
像這一種子元素既保持了inline-block元素的收縮性，又同時讓內(nèi)容寬度最大，直接無視父級容器的寬度限制，后來在CSS3中有了專門的屬性值描述，教室max-cintent.
上面的幾個只有第一個是“外部尺寸”，其余全部是“內(nèi)部尺寸”。而這唯一的“外部尺寸”，是“流”的精髓所在。
四、外部尺寸與流體特性
元素尺寸由外部的容器決定
正常流寬度是一種margin/border/padding和content 內(nèi)容區(qū)域自動分配水平空間的機制，盡量用無寬帶的流來布局。
格式化寬度：在position屬性值為absolute 或fixed 的元素中。在默認(rèn)情況下，寬度由內(nèi)部尺寸決定。當(dāng)left/top 或top/bottom 對立方位的屬性值同時存在的時候，元素的寬度表現(xiàn)為“格式化寬度”，其寬度大小相對于最近的具有定位特性（position 屬性值不是static）的祖先元素計算。margin、border、padding 和content 內(nèi)容區(qū)域同樣會自動分配水平（和垂直）空間
五、內(nèi)部尺寸與流體特性
元素尺寸由內(nèi)部元素決定，“內(nèi)部尺寸”有下面3 種表現(xiàn)形式：
包裹性:元素尺寸由內(nèi)部元素決定，但永遠(yuǎn)小于“包含塊”容器的尺寸（除非容器尺寸小于元素的“首選最小寬度”）按鈕:
按鈕就是inline-block 元素。
按鈕文字越多寬度越寬（內(nèi)部尺寸特性），但如果文字足夠多，則會在容器的寬度處自動換行（自適應(yīng)特性）。
<button>標(biāo)簽按鈕才會自動換行，<input>標(biāo)簽按鈕，默white-space:pre，
是不會換行的，需要將pre 值重置為默認(rèn)的normal。
按鈕最大寬度就是容器的240 像素
首選最小寬度:元素最適合的最小寬度.外部容器的寬度是240 像素，假設(shè)寬度是0，里面的inline-block 元素的寬度是首選最小寬度。具體表現(xiàn)規(guī)則：
東亞文字（如中文）最小寬度為每個漢字的寬度。
西方文字最小寬度由特定的連續(xù)的英文字符單元決定。并不是所有的英文字符都會組成連續(xù)單元，一般會終止于空格（普通空格）、短橫線、問號以及其他非英文字符等。
如果想讓英文字符和中文一樣，每一個字符都用最小寬度單元，可以試試使用CSS 中的word-break:break-all。
類似圖片這樣的替換元素的最小寬度就是該元素內(nèi)容本身的寬度。
最大寬度:是元素可以有的最大寬度。“最大寬度”實際等同于“包裹性”元素設(shè)置white-space:nowrap 聲明后的寬度。如果內(nèi)部沒有塊級元素或者塊級元素沒有設(shè)定寬度值，則“最大寬度”實際上是最大的連續(xù)內(nèi)聯(lián)盒子的寬度。
六、width 值作用的細(xì)節(jié)
width 是作用在“內(nèi)在盒子”上的，“內(nèi)在盒子”又被分成了4 個盒子，分別是content box、padding box、border box和margin box。
content box ： content-box，padding box ：padding-box，border box ：border-box。margin box沒有名字。
margin 的背景永遠(yuǎn)是透明的。
在CSS2.1 的規(guī)范中，有一段非常露骨的描述：content box 環(huán)繞著width 和height 給定的矩形。這種寬度設(shè)定和表現(xiàn)并不合理：
流動性丟失：對于塊狀元素，如果width:auto，則元素會如水流般充滿整個容器，而一旦設(shè)定了width具體數(shù)值，則元素的流動性就會被阻斷。
與現(xiàn)實世界表現(xiàn)不一致的困擾。
七、CSS 流體布局下的寬度分離原則
所謂“寬度分離原則”，就是CSS 中的width 屬性不與影響寬度的padding/border（有時候包括margin）屬性共存。寫法：
.father {
width: 180px;
}
.son {
margin: 0 20px;
padding: 20px;
border: 1px solid;
}
為何要寬度分離:當(dāng)一件事情的發(fā)展可以被多個因素所左右的時候，這個事情最終的結(jié)
果就會變數(shù)很大而不可預(yù)期。寬度在這里也是類似，由于盒尺寸中的4 個盒子都能影響寬度，自然頁面元素的最終寬度就很容易發(fā)生變化而導(dǎo)致意想不到的布局發(fā)生。使用“寬度分離”后，咱們不需要燒腦子去計算了，而且頁面結(jié)構(gòu)反而更穩(wěn)固。
八、改變width/height 作用細(xì)節(jié)的box-sizing
box-sizing 的作用：改變了width 作用的盒子。box-sizing:border-box 就是讓100 像素的寬度直接作用在border box上，從默認(rèn)的content box 變成border box。此時，content box 從寬度值中釋放，形成了局部的流動性，和padding 一起自動分配width 值。
box-sizing 并不支持margin-box。
如何評價*{box-sizing:border-box}。從純個人角度講，不喜歡這種做法的。
這種做法易產(chǎn)生沒必要的消耗，通配符*應(yīng)該是一個慎用的選擇器，因為它會選擇所
有的標(biāo)簽元素。
這種做法并不能解決所有問題。box-sizing 不支持margin-box，只有當(dāng)元素沒
有水平margin 時候，box-sizing 才能真正無計算，而“寬度分離”等策略則可以徹底解決
所有的寬度計算的問題。
替換元素css重置更合適：
input, textarea, img, video, object {
box-sizing: border-box;
}
九、關(guān)于height
對于width 屬性，就算父元素width 為auto，其百分比值也是支持的。
對于height 屬性，如果父元素height 為auto，只要子元素在文檔流中，其百分比值完全就被忽略了。百分比高度值要想起作用，其父級必須有一個可以生效的高度值。
如何讓元素支持height:100%效果：
設(shè)定顯式的高度值。
使用絕對定位。絕對定位元素的百分比計算和非絕對定位元素的百分比計算是有區(qū)別的，區(qū)別在于絕對定位的寬高百分比計算是相對于padding box 的，也就是說會把padding 大小值計算在內(nèi)，但是，非絕對定位元素則是相對于content box 計算的。
十、min-width/max-width和min-height/max-height
max-width 和max-height 的初始值是none,min-width/min-height 的初始值都是auto。
超越!important 指的是max-width 會覆蓋width，而且這種覆蓋不是普通的覆蓋，是超級覆蓋。
<img src="1.jpg" style="width:480px!important;">
img { max-width: 256px; }
答案是256px。
min-width覆蓋max-width，此規(guī)則發(fā)生在min-width和max-width沖突的時候。
任意高度元素的展開收起動畫技術(shù)：
.element {
height: 0;
overflow: hidden;
transition: height .25s;
}
.element.active {
height: auto; /* 沒有transition 效果，只是生硬地展開 */
}
可以試試下面方法
.element {
max - height: 0;
overflow: hidden;
transition: max - height .25s;
}
.element.active {
max - height: 666px; /* 一個足夠大的最大高度值 */
}
注意：即雖然說從適用范圍講，max- height 值越大使用場景越多，但是，如果max-height 值太大，在收起的時候可能會有“效果延遲”的問題。因此，我個人建議 max-height 使用足夠安全的最小值，這樣，收起時即使有延遲，也
會因為時間很短，很難被用戶察覺，并不會影響體驗。
十一、內(nèi)聯(lián)元素
塊級負(fù)責(zé)結(jié)構(gòu)，內(nèi)聯(lián)負(fù)責(zé)內(nèi)容。
“內(nèi)聯(lián)元素”的“內(nèi)聯(lián)”特指“外在盒子”，和“display 為inline的元素”不是一個概念。
“內(nèi)聯(lián)元素”的典型特征就是可以和文字在一行顯示。
內(nèi)容區(qū)域（content area）：域指一種圍繞文字看不見的盒子可以理解為把文本選中的背景色區(qū)域作為內(nèi)容區(qū)域。
注意：在IE 和Firefox 瀏覽器下，文字的選中背景總能準(zhǔn)確反映內(nèi)容區(qū)域范圍，但是Chrome 瀏覽器下，::selection 范圍并不總是準(zhǔn)確的，例如，和圖片混排或者有垂直padding 的時候，范圍會明顯過大，這一點需要注意。
內(nèi)聯(lián)盒子（inline box）：“內(nèi)聯(lián)盒子”不會讓內(nèi)容成塊顯示，而是排成一行，這里的“內(nèi)聯(lián)盒子”實際指的就是元素的“外在盒子”，用來決定元素是內(nèi)聯(lián)還是塊級。該盒子又可以細(xì)分為“內(nèi)聯(lián)盒子”和“匿名內(nèi)聯(lián)盒子”兩類：
內(nèi)聯(lián)盒子:外部含內(nèi)聯(lián)標(biāo)簽<span>、<a>和<em>等。
匿名內(nèi)聯(lián)盒子:光禿禿的文字。
行框盒子（line box）:每一行就是一個“行框盒子”（實線框標(biāo)注），每個“行框盒子”又是由一個一個“內(nèi)聯(lián)盒子”組成的。
包含盒子（containing box）:<p>標(biāo)簽就是一個“包含盒子”（實線框標(biāo)注），此盒子由一行一行的“行框盒子”組成。
十二、幽靈空白節(jié)點
在HTML5 文檔聲明中，內(nèi)聯(lián)元素的所有解析和渲染表現(xiàn)就如同每個行框盒子的前面有一個“空白節(jié)點”一樣。這個“空白節(jié)點”永遠(yuǎn)透明，不占據(jù)任何寬度，看不見也無法通過腳本獲取，就好像幽靈一樣，但又確確實實地存在，表現(xiàn)如同文本節(jié)點一樣，因此，我稱之為“幽靈空白節(jié)點”。
注意:這里有一個前提，文檔聲明必須是HTML5 文檔聲明，如果還是很多年前的老聲明，則不存在“幽靈空白節(jié)點”。
十三、致謝
本文內(nèi)容是我對張鑫旭老師《CSS世界》一書第三章的學(xué)習(xí)筆記，由衷的欽佩張鑫旭老師，向張鑫旭老師學(xué)習(xí)！也感謝閱讀本文的你給我的鼓勵!也歡迎來我的網(wǎng)頁踩踩哦,網(wǎng)頁里閱讀更輕松~網(wǎng)頁入口在這哦
作為一個前端小白，如果學(xué)習(xí)筆記中有錯誤的地方，還請不吝指點，謝謝！
