过期域名预定抢注

 找回密碼
 免费注册

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

[複製鏈接]
發表於 2010-12-15 17:11:56 | 顯示全部樓層 |閱讀模式
CSS有曰:
" v3 o% J4 ~* N3 z* c+ E! x$ _0 d- u6 Q- N% R
行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。
3 ]. v. s. t+ M$ i9 `8 q
: d% ^; H9 u6 N但是,垂直內邊距、邊框和外邊距不影響行內框的高度。
4 \( X! w2 Q# X2 S# c
+ D" r. Q' D; `, Q由一行形成的水平框稱為行框(Line Box),行框的高度總是足以容納它包含的所有行內框。不過,設置行高可以增加這個框的高度。
( t2 i' x7 i5 J. _" _/ L7 i9 [7 ~# t( O2 U9 T. ^. @; Y* y9 Y$ P
-----------------------------曰完了--------------------問問題,百思不得其解------------------的問題---------------------------------------& {, v& X7 C) I- W" e: @/ z
4 j: }! W4 v8 K. ]2 ?" b( D$ v1 t$ D4 |
行內框諸如<span>和<strong>,這個沒問題。* `4 |8 l6 r, t; B

7 o# e6 r& S# I% ^- b第一行「行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。」也好理解,增加或減少填充 框的寬度 外邊距調整行內框的間距;( ~# I% Z. b* x+ c* C* t; c
5 |- t: y1 `! h4 H
第二行問題大了,非常頭大,什麼叫「但是,垂直內邊距、邊框和外邊距不影響行內框的高度。」
5 T/ Y( ?( e+ z" s* Z: q6 n6 K& i% A5 C2 @& T8 U0 k4 k4 x
我在想,這個問題遲遲理解不了,存在兩種情況,我對框的高度定義理解錯誤,第二種,這個解釋錯了。先自我檢查下,什麼叫行內框的高度,我的理解是行內框的高度是元素內容高度+padding+margin+border width。因為在 CSS 中,width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸,但是會增加元素框的總尺寸。【我覺得我的這個理解沒問題的吧】,但是究竟為何「但是,垂直內邊距、邊框和外邊距不影響行內框的高度。」這句話非常糾結,糾結至今,無法解決,求解各位大大,這句話咋理解。3 [* z' H8 G( Y

: k6 H2 t/ D. m" x1 i第三行「由一行形成的水平框稱為行框(Line Box),行框的高度總是足以容納它包含的所有行內框。不過,設置行高可以增加這個框的高度。」理解的似是而非,有一行形成的水平框稱謂行框,這個是否意味著段落中的一行一行的每一行就是一個行框?我按照這個邏輯,這個行框當然可以包含行內框了,不然沒有行框哪裡來的行內框呢?
, E* W/ w" M  `& L$ j0 B1 u! V0 h+ _# `* p  D( a2 r9 d
最後一句「不過,設置行高可以增加這個框的高度。」這個框的高度指的是行內框呢?還是行框呢?目前理解的是行框。
& V$ d) @0 i) E# o7 Y
: n1 J! b6 p" g: u! m說到了行框,by the way 看看這個無比糾結的解釋,高手請通俗的講下什麼是行高和行間距
3 w0 z$ j4 s: j* c  P1 T
' J( N! D6 E2 U3 r% S, u. jCSS line-height 屬性
. Y. Z6 i/ }! C( g! c定義和用法8 ~8 C0 _$ H( ^0 H4 J" R. ?" J

1 n1 q1 q  Z+ ^1 sline-height 屬性設置行間的距離(行高)。
: R0 g9 r5 W" m" b: [# ], u, z2 c0 n1 _: i
; |4 i+ Q0 d# A) Q2 H; ~' X
說明《糾結開始》
. L3 o+ k9 N1 N$ h( @$ e/ N$ j( p8 x. r5 b; a; o) f
該屬性會影響行框的佈局。在應用到一個塊級元素時,它定義了該元素中基線之間的最小距離而不是最大距離。9 M- d- J( W6 v0 S0 \/ P

. r6 }0 u6 v& |3 d5 E" B. o2 oline-height 與 font-size 的計算值之差(在 CSS 中成為「行間距」)分為兩半,分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。5 S/ \- d& k* `3 f

) J, j' v3 c. D. T  ~- r" K原始數字值指定了一個縮放因子,後代元素會繼承這個縮放因子而不是計算值。《糾結結束》1 Z) }; J) Y: j( w6 P
/ [& J& F6 C3 R( \) Y4 d

: g. `3 I$ D: D  D2 mCSS學習就是一個不斷糾結與反糾結的過程,只有你把他們都反糾結了,豁然開朗。~~等著高手給我醍醐灌頂~
 樓主| 發表於 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是網頁中最簡單的,你想的太多了& X2 M. q3 ~( M- F9 b
我建議你再說簡單的,不要寫那麼多中文,用最簡單的方式來描述你的問題
7 D* |4 v% Z. g因為我都沒有看懂你中文裡面的那麼多名詞& H4 `( P5 S+ n% v
( ]$ C0 f6 P% {
是不是就是line-height懂不起嗎,這個很簡單,來個形象的比喻  n# r  a& f, w8 Y/ p
+ t3 E) P$ f  q  w8 |9 M' p
line-height與height都是表示高,但是這2個詞表示的2個不同物體的高
7 V& o( n, C0 f9 e& W& \
2 b; \) C8 K. u; K9 \: rheight表示外部高,line-height表示內部高! w' ]. f! s8 F
; F+ @+ V! S6 k  o9 @
好比一個人,他身高1.7米,他的本身高度,我們叫內部高line-height就是1.7米$ ?+ }- v1 n/ ~( Y, T3 T
2 I6 N0 \- s6 j9 L2 t9 P7 `& v
然後他買了一件衣服加褲子套裝,這個套裝總長度是1.8米,那麼我們可以看成是外部輪廓高height是1.8米
6 F& l9 V0 i. z6 Q# ^/ i. p  b' B! v* R7 u9 e
line-height為1.7米,height為1.8米,顯然他們結合在一起,衣服長了,內部表現就有有一點變形短縮
, s: Z, k; R, ^. l5 T7 ~
" f: O9 c3 \9 b# {; k在html中,line-height表示行高,意思就是實際要裝的html元件的實際高度
, O/ s1 n% J+ t2 z" d3 ~5 i. ~( v. Wheight為裝這個元件的外部輪廓高度
回復 给力 爆菊

使用道具 舉報

發表於 2010-12-16 11:24:31 | 顯示全部樓層
5# 月光飛燕
: L( j2 g1 `7 e- L" S! P! t0 W% [) \$ c8 e
/ s6 t% ?# V1 F
熱心的飛燕,頂
回復 给力 爆菊

使用道具 舉報

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

本版積分規則

點基

GMT+8, 2026-6-12 10:58

By DZ X3.5

小黑屋

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