过期域名预定抢注

 找回密碼
 免费注册

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

[複製鏈接]
發表於 2010-12-15 17:11:56 | 顯示全部樓層 |閱讀模式
CSS有曰:3 n* ]  s! r7 Z0 n+ Z, N; c2 h

' A) Q- c2 d, i) A+ t  R行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。
- @3 _' w, `! Y  w
. E/ X; ~' E) F' x但是,垂直內邊距、邊框和外邊距不影響行內框的高度。0 L6 ?* ~; ^+ x- O! i

. X  l0 n3 c# ~" d+ l0 g3 S6 Q由一行形成的水平框稱為行框(Line Box),行框的高度總是足以容納它包含的所有行內框。不過,設置行高可以增加這個框的高度。9 F- H! f& J5 C# R6 Y% @+ h

. G% g4 H3 }, q-----------------------------曰完了--------------------問問題,百思不得其解------------------的問題---------------------------------------
( |& A5 C# m- A2 Q/ K9 a/ n+ ^4 |9 B* E+ V" G4 f1 }6 [
行內框諸如<span>和<strong>,這個沒問題。$ X/ f3 _4 P% }% w& l

) t% k$ v$ V/ V3 n2 g" ^第一行「行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。」也好理解,增加或減少填充 框的寬度 外邊距調整行內框的間距;
8 {8 U3 w  y8 x& t( n" ]- y$ F' G5 s. m0 Y
第二行問題大了,非常頭大,什麼叫「但是,垂直內邊距、邊框和外邊距不影響行內框的高度。」
% ]6 w/ U; G7 N: N& {& V
2 |5 l1 U& @: d! s我在想,這個問題遲遲理解不了,存在兩種情況,我對框的高度定義理解錯誤,第二種,這個解釋錯了。先自我檢查下,什麼叫行內框的高度,我的理解是行內框的高度是元素內容高度+padding+margin+border width。因為在 CSS 中,width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸,但是會增加元素框的總尺寸。【我覺得我的這個理解沒問題的吧】,但是究竟為何「但是,垂直內邊距、邊框和外邊距不影響行內框的高度。」這句話非常糾結,糾結至今,無法解決,求解各位大大,這句話咋理解。
* D& p" w6 Y4 D6 |! w# u# _" l' I/ R
第三行「由一行形成的水平框稱為行框(Line Box),行框的高度總是足以容納它包含的所有行內框。不過,設置行高可以增加這個框的高度。」理解的似是而非,有一行形成的水平框稱謂行框,這個是否意味著段落中的一行一行的每一行就是一個行框?我按照這個邏輯,這個行框當然可以包含行內框了,不然沒有行框哪裡來的行內框呢?+ c: C2 m2 G  t6 g( e/ t  L
1 R. B$ n5 {2 v$ J: ^
最後一句「不過,設置行高可以增加這個框的高度。」這個框的高度指的是行內框呢?還是行框呢?目前理解的是行框。9 l1 P, d% y3 u. }- V' A# ?7 J

; {/ R9 p* I( M- u- o& o說到了行框,by the way 看看這個無比糾結的解釋,高手請通俗的講下什麼是行高和行間距
6 m2 w+ {# G/ b' ~, U. n) j
  L# I1 h& u' }& nCSS line-height 屬性
6 z$ R& H4 E8 Z" x, W定義和用法
$ i6 B/ Z9 T+ Y% {  @
' M. d8 O7 t- k. e/ ]! N  Yline-height 屬性設置行間的距離(行高)。3 W5 _6 v9 c# d2 \+ Z  E

  S. H4 P- F! z1 z$ ^' x5 g3 Q. q" v4 F' G
說明《糾結開始》
4 K$ Y8 Q! S1 w* c( D9 v( V2 k" X
該屬性會影響行框的佈局。在應用到一個塊級元素時,它定義了該元素中基線之間的最小距離而不是最大距離。# p; f( T1 m6 _+ U

" Z  g% D, w' V' j! X( K' xline-height 與 font-size 的計算值之差(在 CSS 中成為「行間距」)分為兩半,分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。, x, d$ r6 ]5 d9 p" @; c7 e
  h+ P$ {# Q/ r0 x7 Q
原始數字值指定了一個縮放因子,後代元素會繼承這個縮放因子而不是計算值。《糾結結束》% W1 l) i. B, G/ l0 d

$ B# E- ~, t3 h+ O( f* E7 c, y, V" o
) p8 h: r- Q4 E  M' w& R: 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是網頁中最簡單的,你想的太多了
% M  I8 {1 u( C! L4 N5 j; l我建議你再說簡單的,不要寫那麼多中文,用最簡單的方式來描述你的問題
" N: d' Y* F. |, z因為我都沒有看懂你中文裡面的那麼多名詞
+ Z; z# i6 E- T: O7 O' z2 n6 X5 B5 ~5 C- W' C
是不是就是line-height懂不起嗎,這個很簡單,來個形象的比喻
3 Z0 }: w* x% \3 ^6 G; s' ~5 _' u
line-height與height都是表示高,但是這2個詞表示的2個不同物體的高# _, r6 M( F8 C+ D# H9 C
$ [* k/ g( B! ]6 n
height表示外部高,line-height表示內部高
& l1 J/ K* h' R" w
! g/ {2 i2 \- \1 w好比一個人,他身高1.7米,他的本身高度,我們叫內部高line-height就是1.7米
9 H# d! @5 e. Z9 K3 I
8 k. Y- q- v/ b9 f6 A/ E然後他買了一件衣服加褲子套裝,這個套裝總長度是1.8米,那麼我們可以看成是外部輪廓高height是1.8米1 R, l5 }$ r3 {7 k% o
) G2 l% Z# u4 B' P$ o6 W$ }" g6 R' {
line-height為1.7米,height為1.8米,顯然他們結合在一起,衣服長了,內部表現就有有一點變形短縮
5 w- ?8 B5 `  j' z. I! r' s! y, ], C3 e( ?8 t
在html中,line-height表示行高,意思就是實際要裝的html元件的實際高度- e& A8 L1 r, b, y  h1 e) K8 ~; e
height為裝這個元件的外部輪廓高度
回復 给力 爆菊

使用道具 舉報

發表於 2010-12-16 11:24:31 | 顯示全部樓層
5# 月光飛燕
) J) v3 n* e" o% o* z8 }, T; s. r% ^( D. B! m" J8 z! ~, }' Y* w
; g  F! L% g/ l' Z2 W2 g
熱心的飛燕,頂
回復 给力 爆菊

使用道具 舉報

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

本版積分規則

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

GMT+8, 2025-7-12 09:01

By DZ X3.5

小黑屋

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