第三章 流、元素與基本尺寸

1.<a>、<button>等元素在使用鍵盤進行Tab鍵切換時可以被選中，即獲取到焦點，表現為虛框或者外發光，這類元素為焦點元素；非焦點元素<div>、<span>等沒有設定tabindex屬性，即無法被tab鍵獲取。在ie6/7瀏覽器下，非焦點元素對:active置若罔聞。(這裡涉及到ie6，7的相容性)

2.ie瀏覽器不支援偽元素的display值為list-item，即：:before、:after等偽元素。。。

3.大小不固定的圖片和多行文字的垂直水平居中：http://www.zhangxinxu.com/study/200908/img-text-vertical-align.html

4.width:auto的4種不同寬度表現：（1）充分利用可用空間。即、預設寬度是父容器的寬度。（2）收縮與包裹。即、寬度等於內容的寬度，而不是父容器的寬度。（3）收縮的最小。即：數字與英文單詞不會像漢字一樣輕易斷開而跑到下一行，造成的效果如下圖所示：不過遇到必須要換行的情況可以使用word-break:break-all;只對英文起作用，以字母作為換行依據和word-wrap:break-word; 只對英文起作用，以單詞作為換行依據來實現強制換行。（4）超出容器限制。和第三種情況一樣，也可以通過設定white-space:nowrap強制不換行。

5.“鑫三無準則”，即“無寬度，無圖片，無浮動”，無寬度是為了保持“外部尺寸”的流動性。

6.包裹性擁有自適應性，指的是元素尺寸由內部元素決定，但永遠小於“包含塊”容器的尺寸（除非容器尺寸小於元素的“首選最小寬度”）。按鈕是包裹性最好的例子，也是極具代表性的inline-block元素。其中<button>標籤按鈕會自動換行，<input>標籤按鈕，預設white-space:pre,是不會換行的，需要將pre值重置為預設的normal。除了inline-block元素，浮動元素以及絕對定位元素都具有包裹性，均有類似的智慧寬度行為。

7.首選最小寬度，指的是元素最適合的最小寬度。當外部容器寬度為0時，內部元素的寬度分中文與英文兩種情況，中文時最小寬度為每個漢字的寬度，英文時寬度由特定的連續的英文字元單元決定，一般會終止於空格、短橫線、問號以及其他非英文字元等。

8.寬度分離原則。就是css中的width屬性不與影響寬度的padding/border（有時候包括margin）屬性共存。把它們分離開來，width獨佔一層標籤，而padding，border，margin利用流動性在內部自適應呈現。

9.max-width和max-height的初始值為none，min-width/height的初始值為auto。

10.超越!important指的是max-width會覆蓋width。超越最大指的是min-width覆蓋max-width，此規則發生在min-width和max-width衝突的時候。

11.任意高度元素的展開收起動畫技術。很多時候height的值是不固定的（即動態的），因此height使用的值是預設的auto，auto是個關鍵字值，並非數值，正如height:100%的100%無法和auto相計算一樣，從0px到auto也是無法計算的，因此無法形成過渡或動畫效果。解決方法：在展開的css（即：.element.active）中的height:auto換成max-height:666px;並不一定要666，只需要設定為保證比展開內容高度大的值就可以。因為max-height值比height計算值大的時候，元素的高度就是height屬性的計算高度，也就是height:auto時候的高度值。這樣，一個高度不定的任意元素的展開動畫效果就實現了。有一點要注意，不要把max-height的值設定太大，這樣頁面展開關閉會有延遲。

12.如何辨別內聯元素。（1）從定義看：內聯元素的內聯特指“外在盒子”，和“display為inline的元素”不是一個概念！inline-block和inline-table都是“內聯元素”，因為他們的“外在盒子”都是內聯盒子，所以即使它們的“內在盒子”分別為block和table等塊狀元素依然為內聯元素。button按鈕元素也是內聯元素，因為其display預設值是inline-block；img圖片元素也是內聯元素，其display預設值是inline。（2）從表現看：“內聯元素”的典型特徵就是可以和文字在一行顯示。因此，文字是內聯元素，圖片是內聯元素，按鈕是內聯元素，原生表單控制元件等都是內聯元素。