过期域名预定抢注

 找回密碼
 免费注册

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

[複製鏈接]
發表於 2010-12-15 17:11:56 | 顯示全部樓層 |閱讀模式
CSS有曰:
6 j( X9 u: @) e0 L' y
. G/ V! Q8 G  e% W- M行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。
; U  U: o5 J  O4 w  H: O3 P
# f* j8 y; d+ u7 X  t: Y7 g" e但是,垂直內邊距、邊框和外邊距不影響行內框的高度。) I, Z$ S/ D& U7 ^7 k- l' Z
% d( l: B) ^+ Y; m( A
由一行形成的水平框稱為行框(Line Box),行框的高度總是足以容納它包含的所有行內框。不過,設置行高可以增加這個框的高度。$ y2 e! O3 L% D1 ^
9 F0 S& d0 Q2 Y$ z6 s# H. |: j4 E
-----------------------------曰完了--------------------問問題,百思不得其解------------------的問題---------------------------------------- o$ e, k8 l& X( p: Z* C
9 X$ q# N$ `5 J0 z8 b
行內框諸如<span>和<strong>,這個沒問題。9 W! C8 y9 \- F/ A
$ D1 J  C( k) P+ m( g$ p: o
第一行「行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。」也好理解,增加或減少填充 框的寬度 外邊距調整行內框的間距;' i! a4 x9 @$ b% U0 R! z
% W) P. E. Z& D4 E' K
第二行問題大了,非常頭大,什麼叫「但是,垂直內邊距、邊框和外邊距不影響行內框的高度。」
' y1 K4 s2 {1 s" O9 t- ^9 q- A1 h! @6 ?! F  a. g1 Y8 ~$ G( b
我在想,這個問題遲遲理解不了,存在兩種情況,我對框的高度定義理解錯誤,第二種,這個解釋錯了。先自我檢查下,什麼叫行內框的高度,我的理解是行內框的高度是元素內容高度+padding+margin+border width。因為在 CSS 中,width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸,但是會增加元素框的總尺寸。【我覺得我的這個理解沒問題的吧】,但是究竟為何「但是,垂直內邊距、邊框和外邊距不影響行內框的高度。」這句話非常糾結,糾結至今,無法解決,求解各位大大,這句話咋理解。0 O& Z/ P  X+ A" A/ q  o. C
6 d. B$ y, k( h0 d# B) T
第三行「由一行形成的水平框稱為行框(Line Box),行框的高度總是足以容納它包含的所有行內框。不過,設置行高可以增加這個框的高度。」理解的似是而非,有一行形成的水平框稱謂行框,這個是否意味著段落中的一行一行的每一行就是一個行框?我按照這個邏輯,這個行框當然可以包含行內框了,不然沒有行框哪裡來的行內框呢?
/ a: f; W. u& \% V7 S$ Q; @1 M
4 C* }& ?2 W+ O. F5 E; l9 `1 v最後一句「不過,設置行高可以增加這個框的高度。」這個框的高度指的是行內框呢?還是行框呢?目前理解的是行框。
- W8 B" ?- i) d8 y$ [+ c* a* q# U4 K# o4 R) D
說到了行框,by the way 看看這個無比糾結的解釋,高手請通俗的講下什麼是行高和行間距( {" j- c6 Q0 R  S: a% `

9 q5 B1 p# I* Y1 bCSS line-height 屬性
% M- u& v" G2 d2 j6 G8 s- W/ U定義和用法
& |# ]- l# M; k+ I+ N# S
5 k# u  j, P6 \  D0 d, \. hline-height 屬性設置行間的距離(行高)。
6 [3 J6 ?8 ]  ^# {. p: T7 A  \! X3 D7 s2 |- t% Z6 u: V* h. h
  r5 }/ |( Y6 Q! ^' V
說明《糾結開始》: v9 w% s1 h* o' r* T/ M

: u+ }6 X0 `+ k9 w該屬性會影響行框的佈局。在應用到一個塊級元素時,它定義了該元素中基線之間的最小距離而不是最大距離。
! l. ?0 ^' A5 w- P# {3 h2 m; c' M& K1 D! A0 x
line-height 與 font-size 的計算值之差(在 CSS 中成為「行間距」)分為兩半,分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。
  n( p$ r. J& h4 m
! e  j5 m! S% v: t2 l原始數字值指定了一個縮放因子,後代元素會繼承這個縮放因子而不是計算值。《糾結結束》" _- S4 M7 F! ^( I' R4 e" q( L

9 Y# T, e$ _' {7 N0 ~2 ]5 z* D4 ]0 k' z4 v( G* h9 Y
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是網頁中最簡單的,你想的太多了3 }- ^" i/ M# Y6 i, B7 n/ O  f2 A
我建議你再說簡單的,不要寫那麼多中文,用最簡單的方式來描述你的問題
; r9 ~* H$ h5 J+ I& V  g, q' `. R因為我都沒有看懂你中文裡面的那麼多名詞- j" B+ Z! Z) c$ p. v7 @

+ i5 x* x$ [- {& t* O' U是不是就是line-height懂不起嗎,這個很簡單,來個形象的比喻
4 r- y. s% T3 @. R3 }1 D* r9 p( [8 l. l
line-height與height都是表示高,但是這2個詞表示的2個不同物體的高4 a3 F: U  p  k- e

" Y; c5 X$ i6 d  Eheight表示外部高,line-height表示內部高, S8 o) j2 P) w5 z2 K5 O

3 u  e$ E/ m6 T" \* p! [好比一個人,他身高1.7米,他的本身高度,我們叫內部高line-height就是1.7米; ?$ E3 S! ?$ f9 G2 Q/ Q- w; n
; `: o' W; e6 u1 H+ ~; t
然後他買了一件衣服加褲子套裝,這個套裝總長度是1.8米,那麼我們可以看成是外部輪廓高height是1.8米2 }! D# B7 ~7 s/ p8 L

# X+ p0 e0 T- J) S2 X" bline-height為1.7米,height為1.8米,顯然他們結合在一起,衣服長了,內部表現就有有一點變形短縮
. i% A( n) z( `4 c. ?1 C  k3 Q* ]- j3 Q. I1 N5 s  u% ?
在html中,line-height表示行高,意思就是實際要裝的html元件的實際高度! A4 K& _6 {3 j- j  f
height為裝這個元件的外部輪廓高度
回復 给力 爆菊

使用道具 舉報

發表於 2010-12-16 11:24:31 | 顯示全部樓層
5# 月光飛燕 3 g. v# {9 L- V% N  ~1 u

# V) }* U) L$ H
: O1 d& D" O4 N熱心的飛燕,頂
回復 给力 爆菊

使用道具 舉報

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

本版積分規則

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

點基

GMT+8, 2026-6-12 09:53

By DZ X3.5

小黑屋

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