过期域名预定抢注

 找回密碼
 免费注册

問一個CSS中行內框高度的問題!

[複製鏈接]
發表於 2010-12-15 17:11:56 | 顯示全部樓層 |閱讀模式
CSS有曰:
& ]! |, v: U2 O  O  `. i
& a/ [7 Q- v; P( c: L行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。
# M1 c& r4 I2 P0 ^! e
. _5 X. o4 w# [1 U5 L" Y但是,垂直內邊距、邊框和外邊距不影響行內框的高度。8 x4 x3 D% S5 q. T5 J2 g

4 e: ?& j" [9 R8 L1 `/ O2 T- o由一行形成的水平框稱為行框(Line Box),行框的高度總是足以容納它包含的所有行內框。不過,設置行高可以增加這個框的高度。
: ~9 n& a1 n, ~) C  Q& A% t, Y4 \* k
$ |4 Z" ]8 M& u$ F$ ^3 t* g7 X5 ^-----------------------------曰完了--------------------問問題,百思不得其解------------------的問題---------------------------------------! ?1 E7 R+ U7 y- a, B
/ U/ @, E; j+ f$ M  U
行內框諸如<span>和<strong>,這個沒問題。5 y: Z5 u9 e7 B6 w2 k+ }

2 S/ F9 X, ~8 \9 e5 U8 ~% A3 i5 K第一行「行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。」也好理解,增加或減少填充 框的寬度 外邊距調整行內框的間距;
6 I2 r  z) M1 Y4 C4 e% Y2 d# {3 \: z) N% o3 [. j+ H
第二行問題大了,非常頭大,什麼叫「但是,垂直內邊距、邊框和外邊距不影響行內框的高度。」
- v0 p8 U0 X2 W
9 \0 \: Q4 K. ~我在想,這個問題遲遲理解不了,存在兩種情況,我對框的高度定義理解錯誤,第二種,這個解釋錯了。先自我檢查下,什麼叫行內框的高度,我的理解是行內框的高度是元素內容高度+padding+margin+border width。因為在 CSS 中,width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸,但是會增加元素框的總尺寸。【我覺得我的這個理解沒問題的吧】,但是究竟為何「但是,垂直內邊距、邊框和外邊距不影響行內框的高度。」這句話非常糾結,糾結至今,無法解決,求解各位大大,這句話咋理解。! }/ j8 p/ d) R/ l" B

- C' J7 U! ?4 v  i6 i6 A第三行「由一行形成的水平框稱為行框(Line Box),行框的高度總是足以容納它包含的所有行內框。不過,設置行高可以增加這個框的高度。」理解的似是而非,有一行形成的水平框稱謂行框,這個是否意味著段落中的一行一行的每一行就是一個行框?我按照這個邏輯,這個行框當然可以包含行內框了,不然沒有行框哪裡來的行內框呢?
6 q. O% M1 ~4 K
2 R! _- K9 c. d3 q& `# _- A3 X& g最後一句「不過,設置行高可以增加這個框的高度。」這個框的高度指的是行內框呢?還是行框呢?目前理解的是行框。6 W* q# q( i5 x2 i1 |

3 s) y# V9 M+ G4 b. f3 S說到了行框,by the way 看看這個無比糾結的解釋,高手請通俗的講下什麼是行高和行間距
) P& Q' v7 a2 R+ K  Q( H7 D' s& \$ d' i& W7 V7 Q. u8 \
CSS line-height 屬性
4 P1 n( T0 J# V) j0 Z4 Z! A定義和用法
$ @% ]% v" O# b: ^" ^8 A4 Z5 o6 y" K' g* j9 x9 C# }' b3 }' X
line-height 屬性設置行間的距離(行高)。/ N$ x: [+ i3 P- {+ M. V
4 i8 P6 A: ?6 j2 R4 G

/ s0 ?. e" V8 D4 C* S' e說明《糾結開始》* y% I' h/ ~# b/ s4 j# _) a
' Y" f- j, c: ^- A0 x
該屬性會影響行框的佈局。在應用到一個塊級元素時,它定義了該元素中基線之間的最小距離而不是最大距離。* Q& d. Q0 x/ [

9 p( l1 |! V  d! P# Oline-height 與 font-size 的計算值之差(在 CSS 中成為「行間距」)分為兩半,分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。+ ]. E: a  z& x5 ~8 u2 a" v

' U$ _+ y6 b- X# W原始數字值指定了一個縮放因子,後代元素會繼承這個縮放因子而不是計算值。《糾結結束》
) ]# b. O, |# \
- V% \) r+ x# r
5 m3 I- k+ O5 s2 t$ D* o$ FCSS學習就是一個不斷糾結與反糾結的過程,只有你把他們都反糾結了,豁然開朗。~~等著高手給我醍醐灌頂~
 樓主| 發表於 2010-12-15 17:14:40 | 顯示全部樓層
發完帖子又重新看了一遍,腦子都成漿糊了~
回復 给力 爆菊

使用道具 舉報

發表於 2010-12-15 20:28:32 | 顯示全部樓層
曾經拿過一本CSS書學,結果看了10頁就放一邊了,能體會到你的糾結
回復 给力 爆菊

使用道具 舉報

發表於 2010-12-15 21:22:36 | 顯示全部樓層
樓主最近學CSS發了不少貼啊,這帖問題太複雜,我也看成漿糊了.
回復 给力 爆菊

使用道具 舉報

發表於 2010-12-15 21:48:20 | 顯示全部樓層
CSS都過不了,你就無法做網頁,CSS是網頁中最簡單的,你想的太多了6 n0 K0 d  k1 b) j1 t2 @4 W% c, Y2 @% ]! c
我建議你再說簡單的,不要寫那麼多中文,用最簡單的方式來描述你的問題! W" y& K( b1 U: ~4 t
因為我都沒有看懂你中文裡面的那麼多名詞3 [5 J$ z1 g! n- J' i
' `6 J9 k9 h8 j8 r$ Q
是不是就是line-height懂不起嗎,這個很簡單,來個形象的比喻
, a( j) H6 b. ]+ q, N0 {
- S$ Z8 v; H4 s( A& s9 a) xline-height與height都是表示高,但是這2個詞表示的2個不同物體的高, w2 T1 s2 s9 T" t' m+ ]
+ r# {6 L; G! V
height表示外部高,line-height表示內部高$ Q$ j. t" k. L* _  ?
/ p  x! P4 U" u! N
好比一個人,他身高1.7米,他的本身高度,我們叫內部高line-height就是1.7米
2 z& A7 i) [+ a
  Y) `: r# H) V然後他買了一件衣服加褲子套裝,這個套裝總長度是1.8米,那麼我們可以看成是外部輪廓高height是1.8米
8 B( a* N( c: \' M
: R* y8 @6 f6 P$ Y* [: G3 f0 iline-height為1.7米,height為1.8米,顯然他們結合在一起,衣服長了,內部表現就有有一點變形短縮
) D6 s0 z: B2 I
' ^# K+ U, v5 Z在html中,line-height表示行高,意思就是實際要裝的html元件的實際高度4 b9 p& g9 A# V  H$ a5 X: u" n
height為裝這個元件的外部輪廓高度
回復 给力 爆菊

使用道具 舉報

發表於 2010-12-16 11:24:31 | 顯示全部樓層
5# 月光飛燕 : U5 u! h: q$ G# y5 Y

5 d0 r9 r7 j* F7 E$ B( }' i8 ]" j
( _2 ~2 z7 J$ S3 I2 y; K. a熱心的飛燕,頂
回復 给力 爆菊

使用道具 舉報

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

本版積分規則

點基跨境 數位編輯創業論壇

GMT+8, 2025-9-18 05:12

By DZ X3.5

小黑屋

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