CSS中流體布局、元素以及尺寸的介紹

這篇文章給大家介紹的內容是關於CSS中流體布局、元素以及尺寸的介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

一、 流體布局引出的幾種網頁布局方式

布局方式	描述	特點	情境
靜態布局	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的布局的方式

二、為什麼 list-item 元素會出現項目符號

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

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

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

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

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

1. width:auto; 的塊級盒子

2. 格式化寬/高的盒子

三、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%;的設定會影響盒子的“流動性”，

四、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

1. 超越最大；超越最大指的是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;  }}

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

1. 內容地區：文本選中的背景色地區作為內容地區；

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

3. 行框盒子：每一行就是一個“行框盒子”，每個“行框盒子”又是由一個個“內聯盒子” 組成的

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

幽靈空白節點：

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

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

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

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

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