过期域名预定抢注

 找回密碼
 免费注册

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

[複製鏈接]
發表於 2010-12-6 16:27:40 | 顯示全部樓層 |閱讀模式
本帖最後由 myadvertise 於 2010-12-6 22:00 編輯
  C. I/ w, B9 |6 }* s4 l- _+ v8 L7 R% x3 y. ~+ @: K
CSS學習中關於框模型與浮動中有助於理解的幾張圖
2 e' n. }) d- z& `
: l, k; c8 [5 v0 ]3 D這期間學習CSS整理的文字筆記和圖片匯總 這塊內容一般不好理解 有了圖方便了許多。6 J# ~, Q# ?% a4 W

, ^' g- U& I6 L# z" I- E, Z$ ZCSS 框模型概述4 S# j+ i: v- z1 |: K6 B( K8 @) \% w
如圖:, m9 f5 b2 Z" i, M3 k3 `
! P) K6 k& T0 b# I
在 CSS 中,width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸,7 r* ]% y0 I- y! B# A! K
但是會增加元素框的總尺寸。$ l# k6 U- k0 ?! j3 d

* c* k2 ?! C- Z假設框的每個邊上有 10 個像素的外邊距和 5 個像素的內邊距。
7 n. \, I3 D  m3 a# I4 K2 H7 b. V5 `如果希望這個「元素框」(注意這個元素框的稱謂與內容的聯繫)達到 100 個像素,就需要將內容的寬度設置為 70 像素,
- N3 ~3 A5 x+ y$ Y0 Y- W
如圖
% ?, z8 G  T- q  p3 N1 n% S8 y& e: J# R* f# t
CSS 浮動+ K2 K' i2 q9 C7 A! x3 P* y+ n# _

/ B/ }9 M5 S" p4 V請看下圖,當把框 1 向右浮動時,它脫離文檔流並且向右移動,直到它的右邊緣碰到包含框的右邊緣:/ E/ K6 S1 e0 |5 O

2 N, ?. J; L3 T1 w0 ?2 h* x0 [' i3 f& e* c
4 v: H$ w) a" s' e9 y9 S3 }. h3 V
當框 1 向左浮動時,它脫離文檔流並且向左移動,直到它的左邊緣碰到包含框的左邊緣。因為它不再處於文檔流中,
+ c. n9 V( |1 h! a. {2 K所以它不佔據空間,實際上覆蓋住了框 2,使框 2 從視圖中消失。
% e7 o( A# P5 t! P如果把所有三個框都向左移動,那麼框 1 向左浮動直到碰到包含框,另外兩個框向左浮動直到碰到前一個浮動框。
8 N' W4 L6 a5 C& z' I/ C  C
4 t* Z  C& E2 a7 z% n* \

; a9 O" c( l) b8 y9 l  \/ d如下圖所示,如果包含框太窄,無法容納水平排列的三個浮動元素,那麼其它浮動塊向下移動,直到有足夠的空間。- c6 P' w+ q+ f, O
如果浮動元素的高度不同,那麼當它們向下移動時可能被其它浮動元素「卡住」:
" v! |/ p* N' s8 w; c0 \
+ x- D* l" j* w! F# w( p4 s0 m

4 t+ a; a7 y& i- p( ?' s0 G當然了 更多的知識,在http://www.w3school.com.cn有詳細說明,圖例也很多。比看書好多了,好多未解問題,在這個線上網站搞定了~
, E  C( C# Y4 w9 a" K- B% }# W7 t/ E: P
一圖解百惑!哈哈 希望對學習CSS的有幫助~框模型和浮動的理解在佈局中應用廣泛~

評分

參與人數 2點點 +3 收起 理由
swqlgcj + 2
morea + 1

查看全部評分

 樓主| 發表於 2010-12-6 16:28:56 | 顯示全部樓層
編輯完帖子 順便再複習下 由於使用的筆記工具是notepad++學習中不能圖文並茂 發個帖子更好看了
回復 给力 爆菊

使用道具 舉報

發表於 2010-12-6 19:26:10 | 顯示全部樓層
這個好呀  感謝分享 !
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2010-12-6 21:59:46 | 顯示全部樓層
3# dahuie 嘿嘿 很好的東西
回復 给力 爆菊

使用道具 舉報

發表於 2010-12-7 20:40:45 | 顯示全部樓層
這個對我來說有點深
回復 给力 爆菊

使用道具 舉報

發表於 2010-12-7 20:57:11 | 顯示全部樓層
樓主離你的原創WP主題不遠了
回復 给力 爆菊

使用道具 舉報

 樓主| 發表於 2010-12-8 08:46:11 | 顯示全部樓層
6# hlzone 嘿嘿 謝謝鼓勵 加油哇
回復 给力 爆菊

使用道具 舉報

發表於 2010-12-11 22:37:44 | 顯示全部樓層
圖解是最直接的,很喜歡
回復 给力 爆菊

使用道具 舉報

發表於 2010-12-12 21:01:28 | 顯示全部樓層
這個對於CSS美化還是很有幫助的。
回復 给力 爆菊

使用道具 舉報

發表於 2010-12-15 14:40:01 | 顯示全部樓層
那個地方我也常去
回復 给力 爆菊

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 免费注册

本版積分規則

4um點基跨境網編創業社區

GMT+8, 2024-10-30 13:25

By DZ X3.5

小黑屋

快速回復 返回頂部 返回列表