資訊專欄INFORMATION COLUMN
摘要：概述在世界這本書中有一些黑魔法給列舉出來，在結合自己的理解。篇幅有點長，希望大家能夠堅持看完，一定會有收獲以下是摘自每章內一些重要的概念與技巧。
概述
在《css世界》這本書中有一些“黑魔法”給列舉出來，在結合自己的理解。篇幅有點長，希望大家能夠堅持看完，一定會有收獲?。?！
以下是摘自每章內一些重要的概念與技巧。其中有解決圖片間隙的問題、小圖標與文字居中問題等;
ps: 特別是 “line-height、vertical-align”內容需要反復仔細研究閱讀
何為“流”成為文檔流，將窗體自上而下分成一行一行，并在每行中按從左至右依次排放元素 （引導元素排列和定位）什么是流體布局
利用元素“流”的特性實現的各類布局效果。因為“流”本身具有自適應特性，所以“流體布局”往往都是具有自適應性。“未定義行為”
元素寬度按照分辨率寬度進行長度、寬度的調整，但布局不變。
當某個瀏覽器中出現與其他瀏覽器不一樣的行為或樣式表現；currentColor 變量
Web應用場景千變萬化，Web標準也是不可能面面俱到的，也會存在規范描述以外的場景，此時，各大瀏覽器廠家只能根據自己的理解與喜好去實現，一旦個性化就會出現差異
當前的文字顏色;凡事需要使用顏色值的地方，都可以使用currentColor替換，比方說背景色 – background-color, 漸變色 – gradient, 盒陰影 – box-shadow, SVG的填充色 – fill等等
div { color:#3c3c3c; border: 1em solid currentColor; }
currentColor-CSS3超高校級好用CSS變量
塊級元素默認情況下，塊級元素會新起一行;占據其父元素（容器）的整個空間
塊級盒子負責結構
內聯盒子負責內容
應用正是由于“塊級元素”具有換行特性，因此理論上它都可以配合clear屬性來清除浮動帶來的影響
.clear:after {
content: "";
display: table; // 也可以是block，或者是list-item
clear: both;
}
為什么 list-item 元素會出現項目符號
list-item（“附加盒子”）名“標記盒子”；因為生成了一個附加的盒子，學名“標記盒子”（marker box），專門用來放圓點、數字這些項目符號；display:inline-block 或者 display:xx-xx 理解（容器盒子）
元素都兩個盒子，外在盒子和內在盒子；深藏不露的 width:auto 充分利用可用空間
外在盒子：外在的“內聯盒子”（inline）
內在盒子：內在的“塊級容器盒子”（block）
、這些元素的寬度默認是100%于父級容器的 收縮與包裹
浮動、絕對定位、inline-block元素或table元素收縮到最小出現在table-layout為auto的表格中；當每一列空間都不夠的時候，文字能斷就斷，但中文是隨便斷的，英文單詞不能斷超出容器限制內容很長的連續的英文和數字，或者內聯元素被設置了white-space:nowrap“內部尺寸”和“外部尺寸”“內部尺寸”:尺寸由內部元素決定外部尺寸與流體特性 正常流寬度
“外部尺寸”:寬度由外部元素決定、這些元素的寬度默認是100%于父級容器；display:block; 流動性
寬度100%顯示，格式化寬度margin/border/padding和content內容區域自動分配水平空間
觸發條件
“絕對定位?！保?strong>position屬性值為absolute或fixed的元素中）
表現
絕對定位元素的寬度表現是“包裹性”，寬度由內部尺寸決定特殊
當left/top或top/bottom對立方位的屬性值同時存在，元素的寬度表現為“格式化寬度”，
其寬度大小相對于最近的具有定位特性（position屬性值不是static）的祖先元素計算
div { position: absolute; left: 20px; right: 20px; } div { position: absolute; top: 20px; bottom: 20px; } // 但不知道為什么不行內部尺寸與流體特性 包裹性除了“包裹”（max-width:100%），還有“自適應性（元素尺寸由內部元素決定，但永遠小于“包含塊”容器的尺寸）”著名的“按鈕”元素：極具代表性的inline-block元素
按鈕上的文字個數比較有限，沒機會換行
應用文字少的時候居中顯示，文字超過一行的時候居左顯示
.box { padding: 10px; background-color: #cd0000; text-align: center; } .content { display: inline-block; text-align: left; }首選最小寬度文字內容
元素最適合的最小寬度東亞文字（如中文）最小寬度為每個漢字的寬度:font-size:14px;
西方文字最小寬度由特定的連續的英文字符單元決定（一般會終止于空格（普通空格）、短橫線、問號以及其他非英文字符等）
最大寬度是元素可以有的最大寬度（如果內部沒有塊級元素或者塊級元素沒有設定寬度值,實際上是最大的連續內聯盒子的寬度）如何評價*{box-sizing:border-box} box-sizing 發明的初衷解決替換元素寬度自適應問題易產生沒必要的消耗通內聯元素（非圖片等替換元素），box-sizing無論是什么值，對其渲染表現都沒有影響
search類型的搜索框，其默認的box-sizing就是border-box（如果瀏覽器支持），因此，*對search類型的而言也是沒有必要的消耗
關于 height:100%父元素height為auto，只要子元素在文檔流中，其百分比值完全就被忽略了;百分比高度值要想起作用，其父級必須有一個可以生效的高度值;為何height:100%無效包含塊的高度沒有顯式指定（即高度由內容決定），并且該元素不是絕對定位，則計算值為auto"auto" * 100/100 = NaN如何讓元素支持height:100%效果設定顯式的高度值
使用絕對定位
width:100%效width:100%有效包含塊的寬度取決于該元素的寬度，那么產生的布局在CSS 2.1中是未定義的CSS min-width/max-width 和 min-height/max-height max-* 初始值是none假如說max-width初始值是auto,我們的width永遠不能設置為比auto計算值更大的寬度值min-* 初始值 0（實踐為auto）min-wdith/height值為auto合法
數值變化無動畫
max-width 超越!important，超越最大max-width會覆蓋width,不是普通的覆蓋，是超級覆蓋;比直接在元素的style屬性中設置CSS聲明還要高min-width超越最大min-width和max-width沖突;遵循“超越最大”規則（注意不是“后來居上”規則），min-width覆蓋任意高度元素的展開收起動畫技術我們展開的元素內容是動態的，換句話說高度是不固定的.element { max-height: 0; overflow: hidden; transition: max-height .25s; } .element.active { max-height: 666px; /* 一個足夠大的最大高度值 */ }max-height值比height計算值大的時候，元素的高度就是height屬性的計算高度
注意max-height不能設置很大，如果延遲時間長，會有延遲的感覺。
內聯元素 內聯世界深入的基礎—內聯盒模型 內容區域（content area）圍繞文字看不見的盒子，其大小僅受字符本身特性控制,本質上是一個字符盒子（character box）；內聯盒子但是有些元素，如圖片這樣的替換元素，其內容顯然不是文字，不存在字符盒子之類的，因此，對于這些元素，內容區域可以看成元素自身
元素的“外在盒子”，用來決定元素是內聯還是塊級、和等行框盒子由一個一個“內聯盒子”組成的包含盒子（“包含塊”）由一行一行的“行框盒子”組成(CSS規范中，并沒有“包含盒子”的說法，更準確的稱呼應該是“包含塊”)幽靈空白節點內聯元素的所有解析和渲染會有前面有一個“空白節點”；不占據任何寬度，看不見也無法通過腳本獲?。?strong>文檔聲明必須是HTML5文檔聲明（HTML代碼如下））div { background-color: #cd0000; } span { display: inline-block; }深入理解 content 替換元素過修改某個屬性值呈現的內容就可以被替換的元素; 如“img”特性 內容的外觀不受頁面上的CSS的影響需要類似appearance屬性，或者瀏覽器自身暴露的一些樣式接口，例如::-ms-check{}有自己的尺寸其默認的尺寸（不包括邊框）是300像素×150像素，如