过期域名预定抢注

 找回密碼
 免费注册

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

[複製鏈接]
發表於 2010-12-15 17:11:56 | 顯示全部樓層 |閱讀模式
CSS有曰:
/ R, b. E  N; V( l  i9 L& l* s0 Z$ U4 k- F+ d8 I% r
行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。3 S! k5 k, Y4 o5 a1 ]+ m
5 G, d- D& c! ~$ |( ?% ]
但是,垂直內邊距、邊框和外邊距不影響行內框的高度。
# p$ S' u2 N! s5 j3 a' o
; K/ ~) E, B0 O8 ~" z  {) J* g& B由一行形成的水平框稱為行框(Line Box),行框的高度總是足以容納它包含的所有行內框。不過,設置行高可以增加這個框的高度。$ O- V; \% T# Z! o7 I  w2 H4 e
( r- M! Q9 \9 ?5 g3 P/ h
-----------------------------曰完了--------------------問問題,百思不得其解------------------的問題---------------------------------------
; t6 j# X4 t; I8 |" [
  e% T/ o* L0 g3 d$ r2 C; w- x$ D) [行內框諸如<span>和<strong>,這個沒問題。
% J4 G. z9 q* O" |- X8 M& r! x; o6 R( s3 E
第一行「行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。」也好理解,增加或減少填充 框的寬度 外邊距調整行內框的間距;, n) s* ?  W9 v" w; q+ f+ a

" @$ U0 s7 r/ i# C第二行問題大了,非常頭大,什麼叫「但是,垂直內邊距、邊框和外邊距不影響行內框的高度。」8 @  L+ ]) u% T4 ?8 T

6 m  t) ]# `# t, E' W, M, \1 q我在想,這個問題遲遲理解不了,存在兩種情況,我對框的高度定義理解錯誤,第二種,這個解釋錯了。先自我檢查下,什麼叫行內框的高度,我的理解是行內框的高度是元素內容高度+padding+margin+border width。因為在 CSS 中,width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸,但是會增加元素框的總尺寸。【我覺得我的這個理解沒問題的吧】,但是究竟為何「但是,垂直內邊距、邊框和外邊距不影響行內框的高度。」這句話非常糾結,糾結至今,無法解決,求解各位大大,這句話咋理解。
6 f& z8 V: J4 f' Z1 t4 E: M
) {+ j% S; z  @5 s3 p! p, h第三行「由一行形成的水平框稱為行框(Line Box),行框的高度總是足以容納它包含的所有行內框。不過,設置行高可以增加這個框的高度。」理解的似是而非,有一行形成的水平框稱謂行框,這個是否意味著段落中的一行一行的每一行就是一個行框?我按照這個邏輯,這個行框當然可以包含行內框了,不然沒有行框哪裡來的行內框呢?
* ?# z8 g) j5 o) p/ c/ K# [# k
% U8 j  r  |3 p2 {最後一句「不過,設置行高可以增加這個框的高度。」這個框的高度指的是行內框呢?還是行框呢?目前理解的是行框。
/ B  d$ F6 x; E- z' I- n* K9 ?: X! B* _8 U8 F" [, V2 q
說到了行框,by the way 看看這個無比糾結的解釋,高手請通俗的講下什麼是行高和行間距
7 W2 H/ v) F1 I4 y! `( c0 V. ^5 X+ E  ^3 e
CSS line-height 屬性
5 \2 I0 b/ y, s2 |1 V, a2 V5 H定義和用法
5 L3 `1 |0 }$ m7 s2 R
$ @+ A; }) d( y7 jline-height 屬性設置行間的距離(行高)。
, w0 Y) c7 g& ~& ]( T' L; i0 s
  G* }2 K' g! r  l! X! S3 ]' q7 ~) g1 o+ Y! v/ P. b) g" S
說明《糾結開始》
" f* w& p3 p! R1 p6 F% h: o8 E- l" d9 r2 y: v
該屬性會影響行框的佈局。在應用到一個塊級元素時,它定義了該元素中基線之間的最小距離而不是最大距離。- G+ {1 m+ i- |5 g
& L2 n1 d& A5 K: y5 D. _3 {* e3 k
line-height 與 font-size 的計算值之差(在 CSS 中成為「行間距」)分為兩半,分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。
% I9 p5 j, e3 \! T/ t/ U& m" R) Y: r$ w* I5 k3 u
原始數字值指定了一個縮放因子,後代元素會繼承這個縮放因子而不是計算值。《糾結結束》
. J( O9 i* [' j# x7 n8 F
* c& v- i+ ]7 V- {- D
$ r; d2 n( a, O+ J  ]4 UCSS學習就是一個不斷糾結與反糾結的過程,只有你把他們都反糾結了,豁然開朗。~~等著高手給我醍醐灌頂~
 樓主| 發表於 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是網頁中最簡單的,你想的太多了  d5 @/ |5 T- S4 i) I  ~
我建議你再說簡單的,不要寫那麼多中文,用最簡單的方式來描述你的問題  ]" S6 E* w. J5 h. j, {7 a; e
因為我都沒有看懂你中文裡面的那麼多名詞
$ X6 f  d" D+ S2 {! y
% D" Y/ k7 F3 P是不是就是line-height懂不起嗎,這個很簡單,來個形象的比喻6 B8 V7 u3 R5 A* m* m
6 i# d6 j9 ^7 [- ^: {& v  |" F6 o4 M
line-height與height都是表示高,但是這2個詞表示的2個不同物體的高
0 t# j! x5 x$ G# m  S* {$ @1 f" @3 k5 \, L: f) [
height表示外部高,line-height表示內部高4 x- Y) N# B- M- j' ?

0 T: W% v  T- ]好比一個人,他身高1.7米,他的本身高度,我們叫內部高line-height就是1.7米
( F4 j! Y9 q# i& a
" R& D3 [7 p; q2 {1 D然後他買了一件衣服加褲子套裝,這個套裝總長度是1.8米,那麼我們可以看成是外部輪廓高height是1.8米
0 r2 d9 B0 A6 E. L: c' T' L# C/ ~5 x( d0 U, {) S$ H
line-height為1.7米,height為1.8米,顯然他們結合在一起,衣服長了,內部表現就有有一點變形短縮9 G* w! A, L4 x- \2 v, x  D0 C+ s

1 B1 c% i  D% I# `4 F' y在html中,line-height表示行高,意思就是實際要裝的html元件的實際高度
* y) \) D/ l6 E1 d  c1 M4 P( eheight為裝這個元件的外部輪廓高度
回復 给力 爆菊

使用道具 舉報

發表於 2010-12-16 11:24:31 | 顯示全部樓層
5# 月光飛燕
$ i) C, ^1 w6 k* |; l& c/ \  |
) _7 P0 v" t4 E  U
# x3 v9 K; V1 L熱心的飛燕,頂
回復 给力 爆菊

使用道具 舉報

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

本版積分規則

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

GMT+8, 2025-7-19 06:48

By DZ X3.5

小黑屋

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