过期域名预定抢注

 找回密碼
 免费注册

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

[複製鏈接]
發表於 2010-12-15 17:11:56 | 顯示全部樓層 |閱讀模式
CSS有曰:
6 w( Q& j: a. g; z8 g: g( W! Z; B7 H  s* V$ j( _- Q, T
行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。0 r  b2 Y$ u9 \3 j

" \7 b) ?" L7 x: M4 C% U但是,垂直內邊距、邊框和外邊距不影響行內框的高度。' o1 ^: x1 m) I3 c0 `

7 d+ B, l1 H/ k- k6 b( H由一行形成的水平框稱為行框(Line Box),行框的高度總是足以容納它包含的所有行內框。不過,設置行高可以增加這個框的高度。8 s+ m& _' I0 ~6 @
/ K" _/ j  d' {( y* I* {
-----------------------------曰完了--------------------問問題,百思不得其解------------------的問題---------------------------------------
# C% ~  @; I8 t6 G* o
) q& X1 c* v; `; D- {5 W行內框諸如<span>和<strong>,這個沒問題。, b% q  B' E4 ~+ J+ G) |
& x7 a, k% u  D! U  ^# m( c
第一行「行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。」也好理解,增加或減少填充 框的寬度 外邊距調整行內框的間距;
0 B0 I, y* d/ j. t0 h3 q! h. v% ~
- h9 \9 l" l  w  o第二行問題大了,非常頭大,什麼叫「但是,垂直內邊距、邊框和外邊距不影響行內框的高度。」0 Z. _3 `6 k+ f( q0 V0 q

( y/ _5 ~# c' |7 M$ K3 M4 h, t2 V: w) f$ _" N我在想,這個問題遲遲理解不了,存在兩種情況,我對框的高度定義理解錯誤,第二種,這個解釋錯了。先自我檢查下,什麼叫行內框的高度,我的理解是行內框的高度是元素內容高度+padding+margin+border width。因為在 CSS 中,width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸,但是會增加元素框的總尺寸。【我覺得我的這個理解沒問題的吧】,但是究竟為何「但是,垂直內邊距、邊框和外邊距不影響行內框的高度。」這句話非常糾結,糾結至今,無法解決,求解各位大大,這句話咋理解。
& |) ~7 g$ u% k' _
$ p8 }% w  B, X& Y+ J第三行「由一行形成的水平框稱為行框(Line Box),行框的高度總是足以容納它包含的所有行內框。不過,設置行高可以增加這個框的高度。」理解的似是而非,有一行形成的水平框稱謂行框,這個是否意味著段落中的一行一行的每一行就是一個行框?我按照這個邏輯,這個行框當然可以包含行內框了,不然沒有行框哪裡來的行內框呢?
/ N# _( d7 ~+ E6 G5 Y7 @
2 ?7 Z) J7 O  ^( O( t5 N$ I最後一句「不過,設置行高可以增加這個框的高度。」這個框的高度指的是行內框呢?還是行框呢?目前理解的是行框。4 I& u# u, |- H* ]( }! ~3 E
" N0 @( j4 L2 M; N- `
說到了行框,by the way 看看這個無比糾結的解釋,高手請通俗的講下什麼是行高和行間距
; u! ]1 w5 ]* ?5 F- B6 n9 F: [# t- {! U" |9 y2 N
CSS line-height 屬性6 W0 h1 z8 o7 c0 i: k
定義和用法- @- o, u) I# v# x. v- w- U

. \2 X. w9 _- ^% Lline-height 屬性設置行間的距離(行高)。: Y6 A" u+ F/ _8 F
- P+ x9 T! h6 Y$ F( q. l+ h
' A7 |3 B+ F' f% d
說明《糾結開始》
+ d4 h9 k1 l; I; F* W7 u
  ^, o- O, V. m+ K0 D! U該屬性會影響行框的佈局。在應用到一個塊級元素時,它定義了該元素中基線之間的最小距離而不是最大距離。: y; F6 h( y7 T. g
( C% T; Y5 D" G8 ~9 g% D
line-height 與 font-size 的計算值之差(在 CSS 中成為「行間距」)分為兩半,分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。
# r/ b$ V8 N: n8 N. Z* m( \, I: f; t2 H/ V0 l
原始數字值指定了一個縮放因子,後代元素會繼承這個縮放因子而不是計算值。《糾結結束》; r9 r- Q; M2 O) G; u
% k  e  A: g4 p  O5 F) a

; s7 b0 g" R7 L3 |9 Z% n# QCSS學習就是一個不斷糾結與反糾結的過程,只有你把他們都反糾結了,豁然開朗。~~等著高手給我醍醐灌頂~
 樓主| 發表於 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是網頁中最簡單的,你想的太多了
) G! D5 s6 a6 B  P- e我建議你再說簡單的,不要寫那麼多中文,用最簡單的方式來描述你的問題
6 G) j4 s6 O% a+ K7 R因為我都沒有看懂你中文裡面的那麼多名詞
; B% c; m6 |: @
7 L/ M2 p0 I3 @% a是不是就是line-height懂不起嗎,這個很簡單,來個形象的比喻1 p0 I* ^) E; P( Y4 s
" j% q8 \$ ^2 N+ W- W; M
line-height與height都是表示高,但是這2個詞表示的2個不同物體的高
6 m6 s& i" n6 j; T( D& I9 \3 Y: X* T0 M! Q6 n) e2 }) T
height表示外部高,line-height表示內部高
4 W: E0 {) G: N0 L+ x! n7 p
/ \/ {  d+ M0 O好比一個人,他身高1.7米,他的本身高度,我們叫內部高line-height就是1.7米4 C# s8 N4 i2 u0 Q7 t- L0 `

0 G+ O! [; r$ d* E: Q' j然後他買了一件衣服加褲子套裝,這個套裝總長度是1.8米,那麼我們可以看成是外部輪廓高height是1.8米
2 p6 Q' z% h4 p4 c9 }( o. J! c6 j- ~% H( |# \0 L
line-height為1.7米,height為1.8米,顯然他們結合在一起,衣服長了,內部表現就有有一點變形短縮
0 Q  v/ |: ]2 t
7 H0 Y& E- C0 A; [% R在html中,line-height表示行高,意思就是實際要裝的html元件的實際高度6 U5 Q) D5 D1 E% b. M. [1 C
height為裝這個元件的外部輪廓高度
回復 给力 爆菊

使用道具 舉報

發表於 2010-12-16 11:24:31 | 顯示全部樓層
5# 月光飛燕 2 J7 P; ~* _+ F0 \. ^& R1 J" P
# P. b! f" h% ]. s' J, R" w5 _
  ~6 U% b% ^0 H0 ]3 b) P' C0 e' t
熱心的飛燕,頂
回復 给力 爆菊

使用道具 舉報

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

本版積分規則

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

點基跨境 數位編輯創業論壇

GMT+8, 2025-9-18 03:56

By DZ X3.5

小黑屋

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