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

初讀《css世界》還是在深圳，屬於換工作前的充能。那時候除了工作，其他時間基本都在這本書裡了，因為它的確吸引人。之前看過《css揭密》，不過是對css3知識的講解和一些應用，但是《css世界》這本書將css作為乙個體系講解，顛覆了以往對css的認知。這是「二進宮」了，想著我是應該寫點什麼的。

布局方式

描述特點

場景靜態布局

static layout，傳統web設計，網頁上的所有元素的尺寸一律使用px作為單位。不管瀏覽器尺寸具體是多少，網頁布局始終按照最初寫**時的布局來顯示。一般需要設定最小寬度

不能根據使用者的螢幕尺寸做出不同的表現

傳統pc網頁

流式布局

liquid layout，頁面元素的寬度按照螢幕解析度進行適配調整，但整體布局不變。代表作柵欄系統（網格系統）

網頁中主要的劃分區域的尺寸使用百分數（搭配min-、max-屬性使用）

螢幕解析度變化時，頁面裡元素的大小會變化而但布局不變

自適應布局

adaptive layout，使用@media分別為不同的螢幕解析度定義布局，即建立多個靜態布局，每個靜態布局對應乙個螢幕解析度範圍

螢幕解析度變化時，頁面裡面元素的位置會變化而大小不會變化

-響應式布局

responsive layout，乙個頁面在所有終端上（各種尺寸的pc、手機、手錶、冰箱的web瀏覽器等等）都能顯示出令人滿意的效果

每個螢幕解析度下面會有乙個布局樣式，即元素位置和大小都會變

多終端頁面

彈性布局

rem/em布局，包裹文字的各元素的尺寸採用em/rem做單位，而頁面的主要劃分區域的尺寸仍使用百分數或px做單位

理想狀態是所有螢幕的高寬比和最初的設計高寬比一樣，或者相差不多，完美適應

移動端結論：

如果只做pc端，那麼靜態布局（定寬度）是最好的選擇；

如果做移動端，且設計對高度和元素間距要求不高，那麼彈性布局（rem+js）是最好的選擇，乙份css+乙份js調節font-size搞定；

如果pc，移動要相容，而且要求很高那麼響應式布局還是最好的選擇，前提是設計根據不同的高寬做不同的設計，響應式根據**查詢做不同的布局。

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

所謂「流體布局」，指的是利用元素「流」的特性實現的各類布局效果。因為「流」本身 具有自適應特性，所以「流體布局」往往都是具有自適應性的。但是，「流體布局」並不等同於 「自適應布局」。「自適應布局」是對凡是具有自適應特性的一類布局的統稱，「流體布局」要狹窄得多。例如，**布局也可以設定為100%自適應，但**和「流」不是一路的，並不屬於「流體布局」。

display

外在盒子

容器盒子

表現inline-block

inline

block

尺寸可定義，一行顯示多個

block

block

block

尺寸可定義，單行顯示

inline

inline

inline

尺寸不可定義，一行顯示多個

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

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

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

width:auto;的塊級盒子

格式化寬/高的盒子

寬度值的作用區域與當前盒子的box-sizing相關，預設的box-sizing: content-box;，寬度值等於盒子content寬度，新增padding和border時盒子佔位會擴大。box-sizing: border-box;時，寬度值等於盒子border*2+padding*2+content，佔位不變，內容區域會改變。

絕對定位的寬高百分比計算是相對於 padding box 的，也就是說會把 padding 大小值計算在內，但是，非絕對定位元素則是相對於 content box 計算的

width:100%;的設定會影響盒子的「流動性」，

特性1：超越!important；超越!important指的是max-width會覆蓋width，即使在width上新增!important

// 此刻，展示寬度為256px

.container 

// 此刻，container展示為至少1400px

/* 使用max-height實現任意高度元素的展開收起動畫 */

@mixin slide-vertical($maxheight, $initmaxheight:0, $duration:.25s) 
}

內聯盒子：光禿禿的文字-匿名內聯盒子；由行內元素包裹的屬於內聯盒子

行框盒子：每一行就是乙個「行框盒子」，每個「行框盒子」又是由乙個個「內聯盒子」 組成的

包含盒子：由行框盒子組成

幽靈空白節點：

「幽靈空白節點」是內聯盒模型中非常重要的乙個概念，具體指的是:在 html5 文件宣告中，內聯元素的所有解析和渲染表現就如同每個行框盒子的前面有乙個「空白節點」一樣。這個「空白節點」永遠透明，不佔據任何寬度，看不見也無法通過指令碼獲取，就好像幽靈一樣，但又確確實實地存在，表現如同文字節點一樣，因此，我稱之為「幽靈空白節點」。

div 

span 

CSS世界（一）流與元素

流者，動也，切來由 流水落花春去也,天上人間 css的流方向 預設從左至右 從上之下good father son 乙個盒子包裹另乙個盒子，當包裹盒子沒有設定border和padding且div包裹盒子裡沒有內容，裡邊盒子的設定的上邊距不會起作用。css元素分 內聯級元素 和 塊級元素 內聯級元素 ...

靠什麼建立世界一流大學

編者按 本文的兩位作者是在各自研究領域成就卓著的海外青年學者。帶著拳拳報國之心，如今他們全身心地回到國內 帶著對中國強盛的熱切期盼，他們又將關注的目光投向自己並不 專業 的領域。在世界一流大學學習 任教的經歷，使他們更加強烈地認識到，建立中國自己 的世界一流大學何其重要。施一公 美國普林斯頓大學分子...

六家世界一流公司的過冬經驗

中國改革開放三十多年中，企業真正市場化的時間也就不過二十多年，而在這二十多年的高速增長中，基本上沒有經歷過大的經濟危機。即使在上個世紀末的亞洲金融危機，對中國的影響也是有限的。與此對應的是，西方大部分一流企業，特別是象寶潔，福特，惠普都經歷過多次經濟危機。寶潔成立於1837年，總部位於美國俄亥俄州辛...