过期域名预定抢注

 找回密碼
 免费注册

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

[複製鏈接]
發表於 2010-12-15 17:11:56 | 顯示全部樓層 |閱讀模式
CSS有曰:
& W9 W  w  J* X, C4 ~7 x' o- C  {* k  \1 m' G, @  J+ W
行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。
: [1 j. o  ^; W5 H) Z: k/ b
8 v6 n+ r3 f; u6 Y9 x9 p但是,垂直內邊距、邊框和外邊距不影響行內框的高度。* `( `3 m" c" b; {: e6 F; x! B/ V

/ j! P& _* T6 F; j' M# N$ Z$ c4 ]& J由一行形成的水平框稱為行框(Line Box),行框的高度總是足以容納它包含的所有行內框。不過,設置行高可以增加這個框的高度。+ q8 L) o: }! P1 W* B4 O$ u

/ S, m) U9 G3 i-----------------------------曰完了--------------------問問題,百思不得其解------------------的問題---------------------------------------, ~5 P3 a, A; ~/ p0 K( y
) W, G: o% c3 }2 l8 Q$ P2 T
行內框諸如<span>和<strong>,這個沒問題。
% Q$ e( m  k( f3 J8 e. M; q" t1 `7 T, A
第一行「行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。」也好理解,增加或減少填充 框的寬度 外邊距調整行內框的間距;
; w# M' n, j$ V  c. y( B, \+ r  k* m# f
第二行問題大了,非常頭大,什麼叫「但是,垂直內邊距、邊框和外邊距不影響行內框的高度。」
$ [; G! v- b5 J2 G/ C- q/ i$ \1 u3 j7 L1 e
我在想,這個問題遲遲理解不了,存在兩種情況,我對框的高度定義理解錯誤,第二種,這個解釋錯了。先自我檢查下,什麼叫行內框的高度,我的理解是行內框的高度是元素內容高度+padding+margin+border width。因為在 CSS 中,width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸,但是會增加元素框的總尺寸。【我覺得我的這個理解沒問題的吧】,但是究竟為何「但是,垂直內邊距、邊框和外邊距不影響行內框的高度。」這句話非常糾結,糾結至今,無法解決,求解各位大大,這句話咋理解。$ d- x1 b/ Y+ t" H; Q( h$ s% A

/ P% ?7 O0 u" [. {( P; c第三行「由一行形成的水平框稱為行框(Line Box),行框的高度總是足以容納它包含的所有行內框。不過,設置行高可以增加這個框的高度。」理解的似是而非,有一行形成的水平框稱謂行框,這個是否意味著段落中的一行一行的每一行就是一個行框?我按照這個邏輯,這個行框當然可以包含行內框了,不然沒有行框哪裡來的行內框呢?
2 ~5 _6 Y3 Q0 Q) d9 s0 @9 f
7 P, \: l, K% l  J7 j最後一句「不過,設置行高可以增加這個框的高度。」這個框的高度指的是行內框呢?還是行框呢?目前理解的是行框。5 C$ x3 y2 O& Y

1 w& T* D5 k0 g9 o說到了行框,by the way 看看這個無比糾結的解釋,高手請通俗的講下什麼是行高和行間距* x* D/ J% J/ r, H9 {: T

7 ^! B- f/ K8 g: O. R6 D& K4 wCSS line-height 屬性
5 a0 _" ]4 m% h! w2 z定義和用法
% x* q) K/ R* }* d) F
" b/ i, L/ o" v. t. yline-height 屬性設置行間的距離(行高)。3 K5 s) s0 w1 ?* ?' d- M  N8 X

. i1 Q* z: b% |% M) p- i6 l4 G
  ]0 a" X0 Z/ P- y3 k; K4 k+ @& d* e說明《糾結開始》
3 E0 w' B8 G/ G5 L0 d/ v  Y
! g2 \+ X! F/ t7 l; l8 H7 W6 _6 m該屬性會影響行框的佈局。在應用到一個塊級元素時,它定義了該元素中基線之間的最小距離而不是最大距離。: w; f5 E" v. x5 K
& f) v3 S; Y9 z$ `( P
line-height 與 font-size 的計算值之差(在 CSS 中成為「行間距」)分為兩半,分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。# |: V- X, V6 U

* v2 w6 w! |4 R7 {原始數字值指定了一個縮放因子,後代元素會繼承這個縮放因子而不是計算值。《糾結結束》
! V9 U( q% G7 T% M6 N$ b. J
5 m" a' g- c% z/ `. s( ]7 o
/ P! N0 f$ q& s8 s- ICSS學習就是一個不斷糾結與反糾結的過程,只有你把他們都反糾結了,豁然開朗。~~等著高手給我醍醐灌頂~
 樓主| 發表於 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, o: ]# o1 z9 Q* k/ m我建議你再說簡單的,不要寫那麼多中文,用最簡單的方式來描述你的問題# E) J& k( [( X
因為我都沒有看懂你中文裡面的那麼多名詞+ `1 U0 u  t6 Y, w
% _* v4 f9 g$ U( T$ A' J5 Y3 B
是不是就是line-height懂不起嗎,這個很簡單,來個形象的比喻/ o/ o- e2 l- @5 H5 s" G/ H
4 s8 m1 y* G7 n7 o" x
line-height與height都是表示高,但是這2個詞表示的2個不同物體的高
/ @+ i: S5 x. `0 N8 M3 ?$ `6 S9 I- \. v9 x% `
height表示外部高,line-height表示內部高
" g- j# {8 d3 x$ c8 @2 P1 M" B% D( F* I$ V! Z0 E( R9 H
好比一個人,他身高1.7米,他的本身高度,我們叫內部高line-height就是1.7米
; D8 I9 b" F% y. W. w) N* [) V- z) L
然後他買了一件衣服加褲子套裝,這個套裝總長度是1.8米,那麼我們可以看成是外部輪廓高height是1.8米3 \" j* D' M; w- E4 s0 X" F0 e
4 G. ^1 C' E6 }' G
line-height為1.7米,height為1.8米,顯然他們結合在一起,衣服長了,內部表現就有有一點變形短縮- i; x% l0 Q: G4 V
/ n6 i% D5 M8 ?8 I1 h7 n' J4 [
在html中,line-height表示行高,意思就是實際要裝的html元件的實際高度" [) b$ \& b! o- ^6 z5 ~  p
height為裝這個元件的外部輪廓高度
回復 给力 爆菊

使用道具 舉報

發表於 2010-12-16 11:24:31 | 顯示全部樓層
5# 月光飛燕   t( p# s' }3 R+ }2 S

; e6 \$ ~$ F# S( Z
- h7 a3 |1 F4 c7 D熱心的飛燕,頂
回復 给力 爆菊

使用道具 舉報

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

本版積分規則

點基

GMT+8, 2026-8-11 10:26

By DZ X3.5

小黑屋

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