CSS學習中關於框模型與浮動中有助於理解的幾張圖

; C7 N- [$ B$ k  B# w7 |6 WCSS學習中關於框模型與浮動中有助於理解的幾張圖

這期間學習CSS整理的文字筆記和圖片匯總 這塊內容一般不好理解 有了圖方便了許多。
/ m( D8 o8 V5 s8 P  j- z4 e, K
0 P- O. |- O' H3 L' I2 g/ @+ nCSS 框模型概述
9 Z: [  c1 @) K1 j3 o2 L# Z如圖：
, C) C& k  y0 h( }
2 m) M# L/ [0 C7 G在 CSS 中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，
1 H1 F8 b3 t) ^9 F& t- b但是會增加元素框的總尺寸。
. H+ W9 [7 r* Y/ p  k2 w) F
" J$ J( M# S# C$ ^假設框的每個邊上有 10 個像素的外邊距和 5 個像素的內邊距。
/ n) T( _9 L4 F' C如果希望這個「元素框」（注意這個元素框的稱謂與內容的聯繫）達到 100 個像素，就需要將內容的寬度設置為 70 像素，
4 V2 ^& P# n9 B4 H, x5 d6 I0 w如圖
: S$ E6 `9 D7 k9 A0 x4 E1 u
; Z) ]" K4 u3 s8 ^  R  ~CSS 浮動
3 T* f4 q* ]; J/ |- ]6 {# o6 R) j
請看下圖，當把框 1 向右浮動時，它脫離文檔流並且向右移動，直到它的右邊緣碰到包含框的右邊緣：
3 f' ~8 r1 t; O( v; g
0 n8 M  r1 c4 T  q* U* Z$ I

當框 1 向左浮動時，它脫離文檔流並且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處於文檔流中，
/ g- A; h* N; h  h' N: c所以它不佔據空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。
如果把所有三個框都向左移動，那麼框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。

- H" a* X# `# g5 d; N% C' V
如下圖所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。
如果浮動元素的高度不同，那麼當它們向下移動時可能被其它浮動元素「卡住」：
: B9 |( {  Z7 Q7 ~/ X
1 x2 M$ ^7 o7 @# n
當然了 更多的知識，在http://www.w3school.com.cn有詳細說明，圖例也很多。比看書好多了，好多未解問題，在這個線上網站搞定了~

# c. O$ m: r* w8 ]% f一圖解百惑！哈哈 希望對學習CSS的有幫助~框模型和浮動的理解在佈局中應用廣泛~

編輯完帖子 順便再複習下 由於使用的筆記工具是notepad++學習中不能圖文並茂 發個帖子更好看了

這個好呀　　感謝分享　！

3# dahuie 嘿嘿 很好的東西

這個對我來說有點深

樓主離你的原創WP主題不遠了

6# hlzone 嘿嘿 謝謝鼓勵 加油哇

圖解是最直接的，很喜歡

這個對於CSS美化還是很有幫助的。

那個地方我也常去