本帖最後由 myadvertise 於 2010-12-6 22:00 編輯 - ^" L8 @8 I- F! @+ f
. Y, G, U; N8 ACSS學習中關於框模型與浮動中有助於理解的幾張圖2 R) ]0 ^# A F w6 l" k
# _9 m" [+ ?6 t% r L) {
這期間學習CSS整理的文字筆記和圖片匯總 這塊內容一般不好理解 有了圖方便了許多。
7 }9 Y- S8 V5 }. z& o# ~% m: R( C( ~) v
CSS 框模型概述
/ L. r# X! R+ N0 X如圖： + }8 h% | }! f4 g( R8 d/ ^
7 x6 d, K, w3 e& M# I o V
在 CSS 中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，. n* m$ d$ s# |7 c
但是會增加元素框的總尺寸。) u5 k4 v. j* W, Y) P+ R
( k* F2 b4 w+ S# L8 ^
假設框的每個邊上有 10 個像素的外邊距和 5 個像素的內邊距。/ L* e- D0 W9 L+ t" `
如果希望這個「元素框」（注意這個元素框的稱謂與內容的聯繫）達到 100 個像素，就需要將內容的寬度設置為 70 像素，
$ o$ D# @9 u* Y, Z8 F l如圖 5 H2 o. W# f3 ^ Y% B
1 {* {4 I/ Y+ {) P2 p& w' `0 LCSS 浮動' w& C. t: z+ o: s& l V
+ w0 C: F1 }0 M2 m: u請看下圖，當把框 1 向右浮動時，它脫離文檔流並且向右移動，直到它的右邊緣碰到包含框的右邊緣：4 f& x) O( v, \# X R# R% W
4 x- w5 i- ]3 g" [% q+ K9 U
( ~ {% Q$ Q% f; N: w$ q. m1 ]" I' D' i) I# `: n% m$ _% V5 ^
當框 1 向左浮動時，它脫離文檔流並且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處於文檔流中，
, z0 p1 z5 J, A9 B- W7 k) Y所以它不佔據空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。
: [- E" R0 k' @' A. ~3 t如果把所有三個框都向左移動，那麼框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。
4 ]9 M3 C/ B4 V1 K& I+ I3 P ' u1 ^ I. z# g# z9 z9 A8 E
) R- l; x7 |8 U! ]" f: H如下圖所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。
1 N9 d' m S$ F0 [8 o. T如果浮動元素的高度不同，那麼當它們向下移動時可能被其它浮動元素「卡住」：& e. w2 i [$ G3 O3 y1 b* z/ ]
 - z' @% F f1 J1 u
+ G* M8 N: Q2 A/ P2 h3 H
當然了 更多的知識，在http://www.w3school.com.cn有詳細說明，圖例也很多。比看書好多了，好多未解問題，在這個線上網站搞定了~ I+ ^# _# A4 v# q0 Y* m
2 f0 p1 e d7 c! S, D5 `6 j; Z
一圖解百惑！哈哈 希望對學習CSS的有幫助~框模型和浮動的理解在佈局中應用廣泛~ |
評分
-
查看全部評分
|
發表於 2010-12-6 16:27:40
提升卡
沉默卡
变色卡