CSS有曰:
# A0 u2 n- N/ O/ d! k
x) u* |) m$ d# k行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。
0 a8 x" P/ k3 v+ }1 M0 X0 N+ w, i; p8 n# {" B4 Z; C2 L, V; E* N
但是,垂直內邊距、邊框和外邊距不影響行內框的高度。& K# ^( K5 B6 e; h# n
8 V8 C r0 Y, s- d
由一行形成的水平框稱為行框(Line Box),行框的高度總是足以容納它包含的所有行內框。不過,設置行高可以增加這個框的高度。
1 P' k; l; w5 Y8 R6 r5 X
7 F* x3 S4 d( F& _1 g-----------------------------曰完了--------------------問問題,百思不得其解------------------的問題---------------------------------------$ `% P9 {9 B w/ P1 M7 l8 h
" d* `6 @* O2 j* _行內框諸如<span>和<strong>,這個沒問題。
2 `8 W. b- q7 S& d' B, e
6 L* ]1 y6 z" s2 G9 \/ P4 k第一行「行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。」也好理解,增加或減少填充 框的寬度 外邊距調整行內框的間距; P/ `2 |/ u, V, |& |( v
0 p: H4 F; P9 M7 V: e e第二行問題大了,非常頭大,什麼叫「但是,垂直內邊距、邊框和外邊距不影響行內框的高度。」. C4 ]. Y/ i) Y% l
5 y% U; W' V% p
我在想,這個問題遲遲理解不了,存在兩種情況,我對框的高度定義理解錯誤,第二種,這個解釋錯了。先自我檢查下,什麼叫行內框的高度,我的理解是行內框的高度是元素內容高度+padding+margin+border width。因為在 CSS 中,width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸,但是會增加元素框的總尺寸。【我覺得我的這個理解沒問題的吧】,但是究竟為何「但是,垂直內邊距、邊框和外邊距不影響行內框的高度。」這句話非常糾結,糾結至今,無法解決,求解各位大大,這句話咋理解。
, g- z9 T3 o" T6 \8 R& ~
8 E9 t7 P$ W x. k$ B; Q8 w第三行「由一行形成的水平框稱為行框(Line Box),行框的高度總是足以容納它包含的所有行內框。不過,設置行高可以增加這個框的高度。」理解的似是而非,有一行形成的水平框稱謂行框,這個是否意味著段落中的一行一行的每一行就是一個行框?我按照這個邏輯,這個行框當然可以包含行內框了,不然沒有行框哪裡來的行內框呢?
. C9 O- q8 N7 B2 {- d3 t( d5 C6 b3 _8 _2 A, Q5 `5 M
最後一句「不過,設置行高可以增加這個框的高度。」這個框的高度指的是行內框呢?還是行框呢?目前理解的是行框。" F" x# w. ]/ z2 K3 Z
. B, G7 |7 F) K p) u7 p6 L說到了行框,by the way 看看這個無比糾結的解釋,高手請通俗的講下什麼是行高和行間距
& f% ?3 i+ Y. X
2 {+ x) F% K3 e! \* [/ N( c% UCSS line-height 屬性0 b; e( e# }8 l3 z
定義和用法7 A& g1 }, R, }# `# K5 _
9 `, g0 W( Y( D4 ]9 b# ~line-height 屬性設置行間的距離(行高)。
( m6 a, b6 N+ t8 V% W! v2 s/ M1 s
$ S8 F( ]) Z3 ~
說明《糾結開始》
2 p& y+ u: {# S7 I9 V& h/ P3 m0 q9 T6 M+ ^( F
該屬性會影響行框的佈局。在應用到一個塊級元素時,它定義了該元素中基線之間的最小距離而不是最大距離。: V2 h- ^/ q" c5 y
& X N/ ?+ Y$ G8 t
line-height 與 font-size 的計算值之差(在 CSS 中成為「行間距」)分為兩半,分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。# U5 T% p6 i) U% S. n6 f, Z
( ?- M' n5 O/ b; P7 j7 C. H# A7 w原始數字值指定了一個縮放因子,後代元素會繼承這個縮放因子而不是計算值。《糾結結束》
2 C i! L# \0 G
0 E+ x' w' P- g$ P% c# {! N2 K. V
8 S0 n9 `- |9 [# ^5 X HCSS學習就是一個不斷糾結與反糾結的過程,只有你把他們都反糾結了,豁然開朗。~~等著高手給我醍醐灌頂~ |
|