过期域名预定抢注

 找回密碼
 免费注册

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

[複製鏈接]
發表於 2010-12-15 17:11:56 | 顯示全部樓層 |閱讀模式
CSS有曰:
, E& Q6 n0 v$ X/ ~8 Y
( ?/ `9 B* X0 A4 E, v4 O& b; V+ Q行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。
2 I) L% M, I% U7 e' T) J$ d* _7 K. }! D% j
但是,垂直內邊距、邊框和外邊距不影響行內框的高度。
, y# W  N: S! C; v9 _/ z  L5 l# [7 T- V0 y
由一行形成的水平框稱為行框(Line Box),行框的高度總是足以容納它包含的所有行內框。不過,設置行高可以增加這個框的高度。
  h, x4 x; t! p* l* k# ?9 {* d$ Z8 `9 k5 }% p4 l
-----------------------------曰完了--------------------問問題,百思不得其解------------------的問題---------------------------------------
/ Y6 D1 Q1 v1 t$ I) b0 {$ S
% S) U0 T0 D- `  }行內框諸如<span>和<strong>,這個沒問題。
( Y9 @, N7 G. _' o5 u  W. M+ I( Y* g. ^
第一行「行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。」也好理解,增加或減少填充 框的寬度 外邊距調整行內框的間距;
9 R5 I% k# S/ N$ z) z; B
/ C+ X. M3 I: V; \  J. a2 C第二行問題大了,非常頭大,什麼叫「但是,垂直內邊距、邊框和外邊距不影響行內框的高度。」: W: G5 O4 t5 R, M/ V% ~8 b  _

+ t1 G$ [" G7 h$ I- S+ \0 Q我在想,這個問題遲遲理解不了,存在兩種情況,我對框的高度定義理解錯誤,第二種,這個解釋錯了。先自我檢查下,什麼叫行內框的高度,我的理解是行內框的高度是元素內容高度+padding+margin+border width。因為在 CSS 中,width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸,但是會增加元素框的總尺寸。【我覺得我的這個理解沒問題的吧】,但是究竟為何「但是,垂直內邊距、邊框和外邊距不影響行內框的高度。」這句話非常糾結,糾結至今,無法解決,求解各位大大,這句話咋理解。+ x: R& O  j( f+ L5 {* _0 o- d
' Z8 `- o8 Q! K1 w7 [. g
第三行「由一行形成的水平框稱為行框(Line Box),行框的高度總是足以容納它包含的所有行內框。不過,設置行高可以增加這個框的高度。」理解的似是而非,有一行形成的水平框稱謂行框,這個是否意味著段落中的一行一行的每一行就是一個行框?我按照這個邏輯,這個行框當然可以包含行內框了,不然沒有行框哪裡來的行內框呢?
0 `1 U$ |- Y0 F' U9 M6 d) a1 [1 X& ~3 j; U! b( }0 A( c# e( w
最後一句「不過,設置行高可以增加這個框的高度。」這個框的高度指的是行內框呢?還是行框呢?目前理解的是行框。
. s9 q9 d3 s$ I/ j; X3 R' M1 z5 R% c- X5 \" O) y$ \
說到了行框,by the way 看看這個無比糾結的解釋,高手請通俗的講下什麼是行高和行間距
6 w+ t! @% V, y5 L7 I( f  H- l( |' Y$ \9 `
CSS line-height 屬性3 V# _4 K; {0 b; z! C
定義和用法
% X: O& L1 a& _3 ~: D9 O
( {8 ^2 x8 ]* Y0 ~$ bline-height 屬性設置行間的距離(行高)。; k+ k. I# v2 K: \$ ?1 x
2 z! l, ~1 k0 I5 {5 D/ L' U

/ V: }4 L7 u" X. E說明《糾結開始》* o9 O: ?* G$ B
9 G5 F/ j) Q; W: M" v$ b" C1 k) [: D
該屬性會影響行框的佈局。在應用到一個塊級元素時,它定義了該元素中基線之間的最小距離而不是最大距離。
  [8 |! P  O) `  Y, o: ?8 U9 I+ Q* W) n4 `7 p; c6 n! L
line-height 與 font-size 的計算值之差(在 CSS 中成為「行間距」)分為兩半,分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。
8 a. C6 Z9 \+ S( [/ a/ V  b; Q% m: m! o# R
原始數字值指定了一個縮放因子,後代元素會繼承這個縮放因子而不是計算值。《糾結結束》
; \" c7 I8 d& ?7 v) F3 Q8 x
  z9 [; }# \" s; m# P! q" m* r$ [' A: l# A% G
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 B4 L/ h4 s7 s' @/ z
我建議你再說簡單的,不要寫那麼多中文,用最簡單的方式來描述你的問題5 p( v6 E2 A1 P5 j7 k
因為我都沒有看懂你中文裡面的那麼多名詞) p# |- T7 H3 D, {2 |
& E, j3 l" ~! J) k+ n7 y, ^8 E
是不是就是line-height懂不起嗎,這個很簡單,來個形象的比喻5 f8 r  c0 c6 L: O+ P" W

& N8 Z: M5 A( {1 X2 `/ `line-height與height都是表示高,但是這2個詞表示的2個不同物體的高( M4 @" w* r4 T8 e! q% Z) D3 L

+ q* \. L- r# Y8 {$ p# l( Eheight表示外部高,line-height表示內部高
* N7 L* v# s( v) m3 u% z& b; Y
: j. }) A- s  n: D* a0 b6 i- X好比一個人,他身高1.7米,他的本身高度,我們叫內部高line-height就是1.7米; k% {3 _- a$ L% p% `  I- x
% ]9 g; ~7 W, ?$ x
然後他買了一件衣服加褲子套裝,這個套裝總長度是1.8米,那麼我們可以看成是外部輪廓高height是1.8米1 |- H4 K7 v6 u2 x

0 C' O: Z/ w3 h. [8 D  U2 rline-height為1.7米,height為1.8米,顯然他們結合在一起,衣服長了,內部表現就有有一點變形短縮2 x  b6 C3 e% c* z; j
. J( Z9 g' e3 i6 ]( }0 C8 c; k. y
在html中,line-height表示行高,意思就是實際要裝的html元件的實際高度3 G! m' u1 |8 v9 O: Y; ?& V2 D6 _
height為裝這個元件的外部輪廓高度
回復 给力 爆菊

使用道具 舉報

發表於 2010-12-16 11:24:31 | 顯示全部樓層
5# 月光飛燕 7 @. ?* ]/ _: L1 `
6 n* O/ L9 C& I: N

6 B5 N$ }! O. d% S3 A* ^熱心的飛燕,頂
回復 给力 爆菊

使用道具 舉報

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

本版積分規則

點基

GMT+8, 2026-6-12 11:49

By DZ X3.5

小黑屋

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