过期域名预定抢注

 找回密碼
 免费注册

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

[複製鏈接]
發表於 2010-12-15 17:11:56 | 顯示全部樓層 |閱讀模式
CSS有曰:
# {6 J' P/ B/ }! f1 x
. j) W& ~" W3 u: L8 N  n行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。
! {: c1 J2 S& ~2 J* K. w: Z0 @7 \1 v& B7 j$ r1 [6 l% S
但是,垂直內邊距、邊框和外邊距不影響行內框的高度。
  C8 a3 S0 ~' j& U0 z" L9 g8 q* L# d( U- A- X# r
由一行形成的水平框稱為行框(Line Box),行框的高度總是足以容納它包含的所有行內框。不過,設置行高可以增加這個框的高度。
5 X& j9 R; ^0 Z3 l8 E+ q; M& n' k  X/ c6 V9 U+ r
-----------------------------曰完了--------------------問問題,百思不得其解------------------的問題---------------------------------------
4 U0 E6 W$ g& `4 j* d
5 c% X* e6 \% w" X. R行內框諸如<span>和<strong>,這個沒問題。- u3 u$ s7 V4 k/ o& r

' k0 }* K. x0 Z1 m第一行「行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。」也好理解,增加或減少填充 框的寬度 外邊距調整行內框的間距;
' G$ K' b# E8 [4 `9 J8 C# y
! B$ t( U9 \6 m第二行問題大了,非常頭大,什麼叫「但是,垂直內邊距、邊框和外邊距不影響行內框的高度。」8 U/ \, G/ X! x

2 N  @& o+ H% h. j我在想,這個問題遲遲理解不了,存在兩種情況,我對框的高度定義理解錯誤,第二種,這個解釋錯了。先自我檢查下,什麼叫行內框的高度,我的理解是行內框的高度是元素內容高度+padding+margin+border width。因為在 CSS 中,width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸,但是會增加元素框的總尺寸。【我覺得我的這個理解沒問題的吧】,但是究竟為何「但是,垂直內邊距、邊框和外邊距不影響行內框的高度。」這句話非常糾結,糾結至今,無法解決,求解各位大大,這句話咋理解。  `6 A* A; o- }$ }

0 Z" v0 u# {& ?% o: L) P& Z1 L6 J第三行「由一行形成的水平框稱為行框(Line Box),行框的高度總是足以容納它包含的所有行內框。不過,設置行高可以增加這個框的高度。」理解的似是而非,有一行形成的水平框稱謂行框,這個是否意味著段落中的一行一行的每一行就是一個行框?我按照這個邏輯,這個行框當然可以包含行內框了,不然沒有行框哪裡來的行內框呢?
0 t5 {3 N1 ^! D3 G4 u" M; _; X) k2 T3 c/ E! z4 t4 m7 s4 F9 z, P
最後一句「不過,設置行高可以增加這個框的高度。」這個框的高度指的是行內框呢?還是行框呢?目前理解的是行框。
3 M% v# i0 q+ }$ @/ U9 j  w" A, T3 b- L. ^. L8 O  w8 Q
說到了行框,by the way 看看這個無比糾結的解釋,高手請通俗的講下什麼是行高和行間距6 L$ K9 t3 F8 [; i3 L1 G+ O
" v5 W7 ^2 L# [, M9 ]' e: \
CSS line-height 屬性2 @6 h1 X3 k! _+ t
定義和用法
' L' L2 S& c! h3 p! M1 P" m/ e+ k; g8 Q4 t
line-height 屬性設置行間的距離(行高)。* _! d6 q- ^% A- t. c
% v0 q3 T0 i& V) t8 o/ e: m
- f# ~- ?+ r/ z1 S9 k/ Q& d
說明《糾結開始》
  x3 c- J5 ^) \" B+ h
# s0 j8 C) _+ S  K$ Z該屬性會影響行框的佈局。在應用到一個塊級元素時,它定義了該元素中基線之間的最小距離而不是最大距離。% b2 j) x) S, @) A

6 I, v: ^5 o$ D/ `( Z$ l2 iline-height 與 font-size 的計算值之差(在 CSS 中成為「行間距」)分為兩半,分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。
: `% m7 X' S, H: C6 `9 P
; n! U2 ]: z. q原始數字值指定了一個縮放因子,後代元素會繼承這個縮放因子而不是計算值。《糾結結束》
- K' ~5 }. n& Y' c
3 W" A1 R: F/ O* \3 J, H, Y; o& T6 I; \7 B6 ~1 X; N
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是網頁中最簡單的,你想的太多了! [  S& j+ k3 h7 W' w
我建議你再說簡單的,不要寫那麼多中文,用最簡單的方式來描述你的問題# d2 _# K4 g. s0 @" L5 n! k; y
因為我都沒有看懂你中文裡面的那麼多名詞
& n& x6 p/ M) [3 F  [2 m/ |! Z/ y1 L9 p: D/ e
是不是就是line-height懂不起嗎,這個很簡單,來個形象的比喻
, _, d* v& a9 e; b; n7 Z8 n
9 S0 R& D* _6 Z) F2 T* Z7 Wline-height與height都是表示高,但是這2個詞表示的2個不同物體的高( o4 t8 T+ m- T( c- H! Y
3 k5 S$ ?4 T6 G
height表示外部高,line-height表示內部高
2 q: U" V; R5 q( }: I2 Q% |  `
0 e! w- [) k; `/ K. _# {0 R好比一個人,他身高1.7米,他的本身高度,我們叫內部高line-height就是1.7米8 ]' J' g, I" i% N& w3 x% I

; G$ s+ [( j9 N) `# ?  ?然後他買了一件衣服加褲子套裝,這個套裝總長度是1.8米,那麼我們可以看成是外部輪廓高height是1.8米
3 @0 T/ h: P. r& E
' |( h* q* u6 ^% ?line-height為1.7米,height為1.8米,顯然他們結合在一起,衣服長了,內部表現就有有一點變形短縮
  h# u: N6 Z# V; l6 X3 a$ O5 b. f7 ?
在html中,line-height表示行高,意思就是實際要裝的html元件的實際高度
1 o" L6 F9 _" @: yheight為裝這個元件的外部輪廓高度
回復 给力 爆菊

使用道具 舉報

發表於 2010-12-16 11:24:31 | 顯示全部樓層
5# 月光飛燕 + L) O( L. T/ m3 y+ R" C7 A+ h, \

2 _5 F9 r! D1 C* D. b; d! d. b; P% m/ J0 S, s: b, Y1 e6 P5 K7 X5 E9 o+ H
熱心的飛燕,頂
回復 给力 爆菊

使用道具 舉報

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

本版積分規則

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

點基

GMT+8, 2026-7-12 10:36

By DZ X3.5

小黑屋

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