过期域名预定抢注

 找回密碼
 免费注册

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

[複製鏈接]
發表於 2010-12-15 17:11:56 | 顯示全部樓層 |閱讀模式
CSS有曰:
9 G6 k; k, v" o9 c- y7 o, P1 |( K2 M
$ C9 J3 L' V, j' k行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。! z9 R: V9 g1 I  g7 }- ?0 F
* s% B3 P/ s1 z0 N' W
但是,垂直內邊距、邊框和外邊距不影響行內框的高度。
  J  r6 p2 G- h0 f  T6 F2 Y+ V
( J  \& u: Y) v由一行形成的水平框稱為行框(Line Box),行框的高度總是足以容納它包含的所有行內框。不過,設置行高可以增加這個框的高度。
# n3 M, D$ U- E- J  e* P% U
, d  c# ]' i0 v1 K-----------------------------曰完了--------------------問問題,百思不得其解------------------的問題---------------------------------------9 W$ q6 |1 k% ?$ H/ u/ w

  F% P- B6 H' P. M行內框諸如<span>和<strong>,這個沒問題。4 ?5 b# f/ n9 g4 X; Q: R
6 M3 V( m$ f$ _
第一行「行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。」也好理解,增加或減少填充 框的寬度 外邊距調整行內框的間距;0 l* E) E, n: x9 ?7 J) A- G

' E0 o3 h& V: {5 U) N$ y* R7 o第二行問題大了,非常頭大,什麼叫「但是,垂直內邊距、邊框和外邊距不影響行內框的高度。」
! k# c# t# G) y2 c0 x# n- n2 e7 e5 a0 w$ l! }$ O
我在想,這個問題遲遲理解不了,存在兩種情況,我對框的高度定義理解錯誤,第二種,這個解釋錯了。先自我檢查下,什麼叫行內框的高度,我的理解是行內框的高度是元素內容高度+padding+margin+border width。因為在 CSS 中,width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸,但是會增加元素框的總尺寸。【我覺得我的這個理解沒問題的吧】,但是究竟為何「但是,垂直內邊距、邊框和外邊距不影響行內框的高度。」這句話非常糾結,糾結至今,無法解決,求解各位大大,這句話咋理解。
7 c* U$ r1 v3 l$ q, [8 G' s9 r& P* A7 s0 M. \
第三行「由一行形成的水平框稱為行框(Line Box),行框的高度總是足以容納它包含的所有行內框。不過,設置行高可以增加這個框的高度。」理解的似是而非,有一行形成的水平框稱謂行框,這個是否意味著段落中的一行一行的每一行就是一個行框?我按照這個邏輯,這個行框當然可以包含行內框了,不然沒有行框哪裡來的行內框呢?
' X, i) |) Y* S4 H
3 o6 `  K) i# D# s) D6 t最後一句「不過,設置行高可以增加這個框的高度。」這個框的高度指的是行內框呢?還是行框呢?目前理解的是行框。
$ }5 l8 Z6 w% R1 I" p* b' O1 K
& g' n0 L/ g  l$ ]1 R! ]9 v4 D說到了行框,by the way 看看這個無比糾結的解釋,高手請通俗的講下什麼是行高和行間距
  A# t% M- x6 b% ?8 P
1 Y; p, G+ w9 GCSS line-height 屬性+ ~9 W3 [) |: ~4 ?( v
定義和用法
( N7 ^) M1 p$ P9 A6 E& r1 e* L) N. ?( K* c" B
line-height 屬性設置行間的距離(行高)。) Q; c5 R1 ?& }

- r6 S) A0 v# k( O
- X, v' b& {0 ~1 G3 T. D8 }說明《糾結開始》
1 e6 c; y2 g) `* E* R5 \$ Z% ]0 O7 b
該屬性會影響行框的佈局。在應用到一個塊級元素時,它定義了該元素中基線之間的最小距離而不是最大距離。
0 w) J, O" T. n7 R& b0 Z8 J9 p: H" ?
line-height 與 font-size 的計算值之差(在 CSS 中成為「行間距」)分為兩半,分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。
; E5 O3 v# t9 B
5 x/ M7 ?5 b. V2 m  Q. o. c7 D原始數字值指定了一個縮放因子,後代元素會繼承這個縮放因子而不是計算值。《糾結結束》
. W. L8 d! u/ ?) F/ R) |; |) R
/ o+ U8 k; F3 |/ l8 [0 G% S8 q+ T. k" h  \
CSS學習就是一個不斷糾結與反糾結的過程,只有你把他們都反糾結了,豁然開朗。~~等著高手給我醍醐灌頂~
 樓主| 發表於 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是網頁中最簡單的,你想的太多了
: ]/ `& i5 W, I2 G我建議你再說簡單的,不要寫那麼多中文,用最簡單的方式來描述你的問題2 O5 _3 S! C- E8 L
因為我都沒有看懂你中文裡面的那麼多名詞
7 X% ?3 O0 H/ t$ ], P. m% w4 v. C+ {* |; o
是不是就是line-height懂不起嗎,這個很簡單,來個形象的比喻
2 W, @  g  _  J7 |  F5 W  h
5 G9 k) ^& C: O3 }9 Fline-height與height都是表示高,但是這2個詞表示的2個不同物體的高
2 @! y+ ?0 g) W% ~. S8 h: q+ P
height表示外部高,line-height表示內部高/ y: _: y" Y5 N4 _
2 F. J! d% \0 A1 \3 r# v
好比一個人,他身高1.7米,他的本身高度,我們叫內部高line-height就是1.7米
$ v2 G& {5 ~( u7 v3 p+ K
1 w4 I, z; u# k$ W; A0 A然後他買了一件衣服加褲子套裝,這個套裝總長度是1.8米,那麼我們可以看成是外部輪廓高height是1.8米
' K9 N! a  I) Y; ]
" C1 d* ~% {9 ]3 h1 [line-height為1.7米,height為1.8米,顯然他們結合在一起,衣服長了,內部表現就有有一點變形短縮# U/ Q4 z5 G; P, |  L* s* V' n, q
) ]1 k5 ]- h0 w, O( Y
在html中,line-height表示行高,意思就是實際要裝的html元件的實際高度6 o  H4 u: r- P; w+ Q, b" P1 P1 X! c
height為裝這個元件的外部輪廓高度
回復 给力 爆菊

使用道具 舉報

發表於 2010-12-16 11:24:31 | 顯示全部樓層
5# 月光飛燕
0 a8 e# a7 s# G3 g. D
$ g3 z( ^$ v$ x7 ?% o7 g& }2 L0 V% h, m
熱心的飛燕,頂
回復 给力 爆菊

使用道具 舉報

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

本版積分規則

过期高净值品牌域名预定抢注

點基

GMT+8, 2026-7-12 11:17

By DZ X3.5

小黑屋

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