过期域名预定抢注

 找回密碼
 免费注册

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

[複製鏈接]
發表於 2010-12-15 17:11:56 | 顯示全部樓層 |閱讀模式
CSS有曰:6 A/ F  g& |" q2 U8 ~& v

3 \8 w6 Y- n2 N# O行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。
$ e% B5 M$ Q6 f2 `! v& P% v9 k: c. Y$ I" P7 S
但是,垂直內邊距、邊框和外邊距不影響行內框的高度。6 _' I: @7 v' J* R
  ?* x2 [) J7 j% R: \9 _
由一行形成的水平框稱為行框(Line Box),行框的高度總是足以容納它包含的所有行內框。不過,設置行高可以增加這個框的高度。+ w/ v  g' O7 V
+ d+ z4 r4 U( A+ Z# i! N3 n4 `
-----------------------------曰完了--------------------問問題,百思不得其解------------------的問題---------------------------------------
3 k2 H- n9 b8 L' M4 {% _  l" H1 D) k0 [% h& U9 D6 t/ F) ]6 ]4 `) |. v- g5 w
行內框諸如<span>和<strong>,這個沒問題。
! }/ q' Q+ l3 G) t, T" u# m; U! |% C' T6 ?' F! S( P! H$ U
第一行「行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。」也好理解,增加或減少填充 框的寬度 外邊距調整行內框的間距;3 _& t* W9 N) ]2 Q* }

; n! D' Z* x+ N3 P/ Q0 N, V- a6 D第二行問題大了,非常頭大,什麼叫「但是,垂直內邊距、邊框和外邊距不影響行內框的高度。」
$ I/ ~( s2 Q3 O. w" ]; m+ W3 j$ L' P. t! j/ ?3 K
我在想,這個問題遲遲理解不了,存在兩種情況,我對框的高度定義理解錯誤,第二種,這個解釋錯了。先自我檢查下,什麼叫行內框的高度,我的理解是行內框的高度是元素內容高度+padding+margin+border width。因為在 CSS 中,width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸,但是會增加元素框的總尺寸。【我覺得我的這個理解沒問題的吧】,但是究竟為何「但是,垂直內邊距、邊框和外邊距不影響行內框的高度。」這句話非常糾結,糾結至今,無法解決,求解各位大大,這句話咋理解。& ?7 w1 ?, _1 c# C" h2 {

' r  U8 v6 ]* j: p1 V第三行「由一行形成的水平框稱為行框(Line Box),行框的高度總是足以容納它包含的所有行內框。不過,設置行高可以增加這個框的高度。」理解的似是而非,有一行形成的水平框稱謂行框,這個是否意味著段落中的一行一行的每一行就是一個行框?我按照這個邏輯,這個行框當然可以包含行內框了,不然沒有行框哪裡來的行內框呢?
# B. W- k7 g% J" \" l, y# C% D  {9 w2 h1 {. y6 ?: P9 M# N
最後一句「不過,設置行高可以增加這個框的高度。」這個框的高度指的是行內框呢?還是行框呢?目前理解的是行框。
9 B( Z/ i( V3 {& Y
3 v! Y( o: d# d$ E0 u$ O9 @說到了行框,by the way 看看這個無比糾結的解釋,高手請通俗的講下什麼是行高和行間距
  r  T4 R$ @3 a4 l7 L3 Y0 ~# V4 w2 E
CSS line-height 屬性
: f# t4 p# j0 Q6 Q  A0 R  g+ [定義和用法' F3 [: X1 e* {) Q$ G
% Q* q6 p; e9 t$ W' [1 B/ |
line-height 屬性設置行間的距離(行高)。5 z( g; K2 G( I. O; V# I' O

: L# b" y3 y4 |% q5 P' B# A( R" C' c" J, t% H$ W/ S) L
說明《糾結開始》! _+ k1 x/ ]& Y: n( c
  `* S' M/ C& }$ Y- O/ d# R: Z
該屬性會影響行框的佈局。在應用到一個塊級元素時,它定義了該元素中基線之間的最小距離而不是最大距離。
. x6 Q7 v5 v% R, e) D; a- d
% E$ _3 p1 {( u% [8 }5 ]5 A8 Zline-height 與 font-size 的計算值之差(在 CSS 中成為「行間距」)分為兩半,分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。, X) ?! `1 h/ v- n

) z  R: |1 K: o原始數字值指定了一個縮放因子,後代元素會繼承這個縮放因子而不是計算值。《糾結結束》$ g' G1 V8 _4 a3 x3 n  y  i

6 x' u/ b# C( C) B2 @! C! q/ r( _4 d. c' [: t  \/ D7 u3 q% _
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是網頁中最簡單的,你想的太多了* V& D( c) k  \$ {! z: |9 P
我建議你再說簡單的,不要寫那麼多中文,用最簡單的方式來描述你的問題
/ Q2 N$ \. y5 j6 B因為我都沒有看懂你中文裡面的那麼多名詞# G" Y' W: O, e8 y

8 y8 X; t- b2 F7 b5 {  H7 {* l是不是就是line-height懂不起嗎,這個很簡單,來個形象的比喻
$ ^% `  [' V/ J& ~/ l* k! }) D) c8 @3 _6 w4 r! Y+ i1 V2 H
line-height與height都是表示高,但是這2個詞表示的2個不同物體的高
8 Z( C7 m8 [; x+ J; p7 {
( s, W1 C2 @' I9 f5 r7 t, @% _height表示外部高,line-height表示內部高
. }. H$ A2 u: @- @
5 L7 B& }3 y. n! m. I2 S好比一個人,他身高1.7米,他的本身高度,我們叫內部高line-height就是1.7米8 Y- M& w. R( a3 D% B1 Y
  O& L. k1 C5 }  W# d6 v# X
然後他買了一件衣服加褲子套裝,這個套裝總長度是1.8米,那麼我們可以看成是外部輪廓高height是1.8米+ b7 z4 Z* y: b% l5 ^8 R

# U5 |& K4 d3 F; Q" t3 zline-height為1.7米,height為1.8米,顯然他們結合在一起,衣服長了,內部表現就有有一點變形短縮
. V  [. {. ?6 @0 v) Q# M" L2 ^
. @3 x7 I8 m- d: [$ x9 y在html中,line-height表示行高,意思就是實際要裝的html元件的實際高度
+ n; W( a0 x1 r9 y6 p+ Theight為裝這個元件的外部輪廓高度
回復 给力 爆菊

使用道具 舉報

發表於 2010-12-16 11:24:31 | 顯示全部樓層
5# 月光飛燕
( J/ c0 @$ @/ r  v3 `" i
$ S4 f. a8 x8 \* m* m+ F$ z  Y- G! a3 p+ E; V
熱心的飛燕,頂
回復 给力 爆菊

使用道具 舉報

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

本版積分規則

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

點基

GMT+8, 2026-1-13 08:26

By DZ X3.5

小黑屋

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