过期域名预定抢注

 找回密碼
 免费注册

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

[複製鏈接]
發表於 2010-12-15 17:11:56 | 顯示全部樓層 |閱讀模式
CSS有曰:) j. K# U7 S( m0 y! B

( T8 d$ R2 |4 W% ^/ m# G/ J) f行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。8 Z, a/ F2 k8 T" |  U* p% `

9 ^' R+ ]6 s! g' Z+ \1 E# ~2 a但是,垂直內邊距、邊框和外邊距不影響行內框的高度。& R: L" {  I  F

% h$ D+ G0 ?8 R  B由一行形成的水平框稱為行框(Line Box),行框的高度總是足以容納它包含的所有行內框。不過,設置行高可以增加這個框的高度。
1 c0 \( Y; D  e, t+ B2 L0 B/ N2 Y" f6 W2 t
-----------------------------曰完了--------------------問問題,百思不得其解------------------的問題---------------------------------------# n$ f; R; B* _3 _2 m. _

% G. P) {0 @+ N7 d  Q) |. g" p行內框諸如<span>和<strong>,這個沒問題。
/ G- u. a$ C3 c
1 V+ J" ]' g, e+ }- C" G第一行「行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。」也好理解,增加或減少填充 框的寬度 外邊距調整行內框的間距;
! k" ]0 ^6 }9 C& u# J! Z' Y0 r- Y2 {% J7 k+ X0 g
第二行問題大了,非常頭大,什麼叫「但是,垂直內邊距、邊框和外邊距不影響行內框的高度。」
1 r$ c/ j4 l) Y% n, U" F* T. g& P0 Q
我在想,這個問題遲遲理解不了,存在兩種情況,我對框的高度定義理解錯誤,第二種,這個解釋錯了。先自我檢查下,什麼叫行內框的高度,我的理解是行內框的高度是元素內容高度+padding+margin+border width。因為在 CSS 中,width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸,但是會增加元素框的總尺寸。【我覺得我的這個理解沒問題的吧】,但是究竟為何「但是,垂直內邊距、邊框和外邊距不影響行內框的高度。」這句話非常糾結,糾結至今,無法解決,求解各位大大,這句話咋理解。% l, A- @( |5 _$ N1 p. R

* _( q/ N' P  X! F2 N! O* `第三行「由一行形成的水平框稱為行框(Line Box),行框的高度總是足以容納它包含的所有行內框。不過,設置行高可以增加這個框的高度。」理解的似是而非,有一行形成的水平框稱謂行框,這個是否意味著段落中的一行一行的每一行就是一個行框?我按照這個邏輯,這個行框當然可以包含行內框了,不然沒有行框哪裡來的行內框呢?
+ z% z- G+ m. e* q- _3 T; Z$ }* O& m' J3 c9 K- [9 S
最後一句「不過,設置行高可以增加這個框的高度。」這個框的高度指的是行內框呢?還是行框呢?目前理解的是行框。# ^) ~5 W: M% o: p/ u
8 u  E- o" [1 K3 g; ]% V/ c
說到了行框,by the way 看看這個無比糾結的解釋,高手請通俗的講下什麼是行高和行間距
' J/ k& j( \* `  [& `% t
+ N4 }& @9 ^4 u1 f  ~CSS line-height 屬性: K5 f& V3 C9 h7 h$ v
定義和用法/ j3 G9 C$ P+ L4 ^% }7 B  N
/ H) S8 Y: ~1 i/ W% r
line-height 屬性設置行間的距離(行高)。
4 h! _1 Y: Q  r7 W! F# j
0 v4 h: f' t4 k
& s/ u* [7 ?/ \" D說明《糾結開始》
* {& t7 z$ W) H$ ^# ?) f6 o7 U$ N* B
該屬性會影響行框的佈局。在應用到一個塊級元素時,它定義了該元素中基線之間的最小距離而不是最大距離。2 q& {0 W4 x& o9 \% Z  n, \

  v; W0 [" a' p9 x2 Vline-height 與 font-size 的計算值之差(在 CSS 中成為「行間距」)分為兩半,分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。0 {# Q- J2 k- G0 g
- X" G  q1 T0 ~( |! _6 F2 C
原始數字值指定了一個縮放因子,後代元素會繼承這個縮放因子而不是計算值。《糾結結束》
+ D/ o& N* n) t6 v, X$ ~5 n: _" v8 T8 A5 \
# B7 [  d4 v" V  {$ S  ?" m2 ~
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是網頁中最簡單的,你想的太多了( m+ J; N1 ?& S6 i, w6 t
我建議你再說簡單的,不要寫那麼多中文,用最簡單的方式來描述你的問題: D% |( q0 h. I, a7 A/ q0 D
因為我都沒有看懂你中文裡面的那麼多名詞# m3 J9 h4 f; e2 d" s; I, K" z

3 n3 E7 l# A: i9 K7 m% g( m( _是不是就是line-height懂不起嗎,這個很簡單,來個形象的比喻: Q6 f. F6 z; q# E6 h5 E8 U8 p
  N0 Q2 `  r: ^- i8 }! A
line-height與height都是表示高,但是這2個詞表示的2個不同物體的高
5 `2 }4 f9 n$ e: r( c' `/ U9 \7 t3 H) T2 q' ^; s/ g
height表示外部高,line-height表示內部高
) Z8 \/ f8 i+ Z9 f5 D: C
: f6 i6 Q! d6 @( q* i好比一個人,他身高1.7米,他的本身高度,我們叫內部高line-height就是1.7米4 H& u+ y6 `6 ^+ }  g2 m/ d8 W; O

3 w" ~8 D2 g' o$ z6 x! H' G然後他買了一件衣服加褲子套裝,這個套裝總長度是1.8米,那麼我們可以看成是外部輪廓高height是1.8米
) f1 I: a: c+ y3 M! B) s8 ^) |  ]  u0 U5 `/ w: z
line-height為1.7米,height為1.8米,顯然他們結合在一起,衣服長了,內部表現就有有一點變形短縮7 Y" n1 u6 N. u7 r: C1 H

) K$ Z$ q  A) m. Y9 @在html中,line-height表示行高,意思就是實際要裝的html元件的實際高度
- G1 C5 e5 e" L. K$ _3 ]" F5 \" k1 ~3 ?height為裝這個元件的外部輪廓高度
回復 给力 爆菊

使用道具 舉報

發表於 2010-12-16 11:24:31 | 顯示全部樓層
5# 月光飛燕 2 _8 y9 p# G9 {

" w  E! k2 H" r9 B; L
- x' q( G% p' e3 y* a9 }. a7 s0 v熱心的飛燕,頂
回復 给力 爆菊

使用道具 舉報

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

本版積分規則

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

4um點基跨境網編創業社區

GMT+8, 2024-10-30 15:24

By DZ X3.5

小黑屋

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