《CSS世界》筆記一：流/元素/尺寸

下一篇：《CSS世界》筆記二：盒模型四你們族

寫在前面

初讀《CSS世界》仍是在深圳，屬於換工做前的充能。那時候除了工做，其餘時間基本都在這本書裏了，由於它的確吸引人。以前看過《CSS揭密》，不過是對CSS3知識的講解和一些應用，可是《CSS世界》這本書將CSS做爲一個體系講解，顛覆了以往對CSS的認知。這是「二進宮」了，想着我是應該寫點什麼的。

1、 流體佈局引出的幾種網頁佈局方式

佈局方式	描述	特色	場景
靜態佈局	Static Layout，傳統Web設計，網頁上的全部元素的尺寸一概使用px做爲單位。無論瀏覽器尺寸具體是多少，網頁佈局始終按照最初寫代碼時的佈局來顯示。通常須要設置最小寬度	不能根據用戶的屏幕尺寸作出不一樣的表現	傳統PC網頁
流式佈局	Liquid Layout，頁面元素的寬度按照屏幕分辨率進行適配調整，但總體佈局不變。表明做柵欄系統（網格系統）	網頁中主要的劃分區域的尺寸使用百分數（搭配min-、max-屬性使用）	屏幕分辨率變化時，頁面裏元素的大小會變化而但佈局不變
自適應佈局	Adaptive Layout，使用@media分別爲不一樣的屏幕分辨率定義佈局，即建立多個靜態佈局，每一個靜態佈局對應一個屏幕分辨率範圍	屏幕分辨率變化時，頁面裏面元素的位置會變化而大小不會變化	-
響應式佈局	Responsive Layout，一個頁面在全部終端上（各類尺寸的PC、手機、手錶、冰箱的Web瀏覽器等等）都能顯示出使人滿意的效果	每一個屏幕分辨率下面會有一個佈局樣式，即元素位置和大小都會變	多終端頁面
彈性佈局	rem/em佈局，包裹文字的各元素的尺寸採用em/rem作單位，而頁面的主要劃分區域的尺寸仍使用百分數或px作單位	理想狀態是全部屏幕的高寬比和最初的設計高寬比同樣，或者相差很少，完美適應	移動端

結論：

1. 若是隻作pc端，那麼靜態佈局（定寬度）是最好的選擇；
2. 若是作移動端，且設計對高度和元素間距要求不高，那麼彈性佈局（rem+js）是最好的選擇，一份css+一份js調節font-size搞定；
3. 若是pc，移動要兼容，並且要求很高那麼響應式佈局仍是最好的選擇，前提是設計根據不一樣的高寬作不一樣的設計，響應式根據媒體查詢作不一樣的佈局。

《CSS世界》中，提出了「流體佈局」的概念：

所謂「流體佈局」，指的是利用元素「流」的特性實現的各種佈局效果。由於「流」自己 具備自適應特性，因此「流體佈局」每每都是具備自適應性的。可是，「流體佈局」並不等同於 「自適應佈局」。「自適應佈局」是對凡是具備自適應特性的一類佈局的統稱，「流體佈局」要狹窄得多。例如，表格佈局也能夠設置爲100%自適應，但表格和「流」不是一路的，並不屬於「流體佈局」。

通俗的說，流體佈局就是在width:auto;或者格式化寬/高中，經過設定margin/border/padding來影響content的佈局的方式

2、爲何 list-item 元素會出現項目符號

每一個元素都兩個盒子， 外在盒子和內在盒子（容器盒子）。外在盒子負責元素是能夠一行顯示，仍是隻能換行顯示；內在盒子負責 寬高、內容呈現什麼的

display	外在盒子	容器盒子	表現
inline-block	inline	block	尺寸可定義，一行顯示多個
block	block	block	尺寸可定義，單行顯示
inline	inline	inline	尺寸不可定義，一行顯示多個

相對應的，外在盒子有外部尺寸，內部盒子有內部尺寸。外部尺寸盒子表現爲「充分利用可用空間」，既有「流」的特性

所謂流動性，並非看上去的寬度100%顯示這麼簡單，而是一種 margin/border/padding 和 content 內容區域自動分配水平空間的機制

如何建立具備流動性的盒子：

1. width:auto; 的塊級盒子
2. 格式化寬/高的盒子

3、width 注意點

1. 寬度值的做用區域與當前盒子的box-sizing相關，默認的box-sizing: content-box;，寬度值等於盒子content寬度，添加padding和border時盒子佔位會擴大。box-sizing: border-box;時，寬度值等於盒子border*2+padding*2+content，佔位不變，內容區域會改變。
2. 絕對定位的寬高百分比計算是相對於 padding box 的，也就是說會把 padding 大小值計算在內，可是，非絕對定位元素則是相對於 content box 計算的
3. width:100%;的設置會影響盒子的「流動性」，

4、max-/min- width/height

特性1：超越!important；超越!important指的是max-width會覆蓋width，即便在width上添加!important

<img src="1.jpg" style="width:480px!important;">
img { max-width: 256px; }

// 此刻，圖片展現寬度爲256px

特性2：超越最大；超越最大指的是min-width覆蓋max-width，此規則發生在min-width和 max-width衝突的時候

.container {
    min-width: 1400px;
    max-width: 1200px;
}
// 此刻，container展現爲至少1400px

應用：

/* 使用max-height實現任意高度元素的展開收起動畫 */
@mixin slide-vertical($maxHeight, $initMaxHeight:0, $duration:.25s) {
  max-height: $initMaxHeight;
  overflow: hidden;
  transition: max-height $duration;
  &.active {
    max-height: $maxHeight;
  }
}

5、內聯盒模型基本概念理解

1. 內容區域：文本選中的背景色區域做爲內容區域；
2. 內聯盒子：光禿禿的文字-匿名內聯盒子；由行內元素包裹的屬於內聯盒子
3. 行框盒子：每一行就是一個「行框盒子」，每一個「行框盒子」又是由一個個「內聯盒子」 組成的
4. 包含盒子：由行框盒子組成

幽靈空白節點：

「幽靈空白節點」是內聯盒模型中很是重要的一個概念，具體指的是:在 HTML5 文檔聲明中，內聯元素的全部解析和渲染表現就如同每一個行框盒子的前面有一個「空白節點」同樣。這個「空白節點」永遠透明，不佔據任何寬度，看不見也沒法經過腳本獲取，就好像幽靈同樣，但又確確實實地存在，表現如同文本節點同樣，所以，我稱之爲「幽靈空白節點」。

證實幽靈空白節點存在的最簡單案例：

<div><span></span></div>

div {
  background-color: #cd0000;
}
span {
  display: inline-block;
}

代碼中沒有設置高度，最終的頁面卻有高度。這個能夠由幽靈空白節點解釋

下一篇：《CSS世界》筆記二：盒模型四你們族