CSS有曰:
% F- [; j" L4 M- h
; K- f9 q4 W& c( r3 t行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。- z, d" u8 C( B [
: y2 ~$ S* K3 r
但是,垂直內邊距、邊框和外邊距不影響行內框的高度。7 E \/ b# x) u% B& B. e. g
: \: n% c; v$ {
由一行形成的水平框稱為行框(Line Box),行框的高度總是足以容納它包含的所有行內框。不過,設置行高可以增加這個框的高度。# K' t# W/ s# c0 `2 `
6 K+ q2 O" e1 `
-----------------------------曰完了--------------------問問題,百思不得其解------------------的問題---------------------------------------
1 q0 w6 H- m+ Q4 r0 Q
' @3 D) r2 ?& Q4 {6 |- V" H" q行內框諸如<span>和<strong>,這個沒問題。
; L9 e w. \( P+ Y( q# J0 ~4 i; ?. C) _& w( _. p2 g& A) D
第一行「行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。」也好理解,增加或減少填充 框的寬度 外邊距調整行內框的間距;' t$ D- m% J4 X; e* O
. Q ~/ j! q' I8 G
第二行問題大了,非常頭大,什麼叫「但是,垂直內邊距、邊框和外邊距不影響行內框的高度。」2 ~! } V& b6 ^% I2 n3 @
. c, X, o' F' [% a; w$ A- X
我在想,這個問題遲遲理解不了,存在兩種情況,我對框的高度定義理解錯誤,第二種,這個解釋錯了。先自我檢查下,什麼叫行內框的高度,我的理解是行內框的高度是元素內容高度+padding+margin+border width。因為在 CSS 中,width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸,但是會增加元素框的總尺寸。【我覺得我的這個理解沒問題的吧】,但是究竟為何「但是,垂直內邊距、邊框和外邊距不影響行內框的高度。」這句話非常糾結,糾結至今,無法解決,求解各位大大,這句話咋理解。
! K! T% `/ F! l( V6 K; B! X
/ M3 S3 G; u1 J4 Y7 v第三行「由一行形成的水平框稱為行框(Line Box),行框的高度總是足以容納它包含的所有行內框。不過,設置行高可以增加這個框的高度。」理解的似是而非,有一行形成的水平框稱謂行框,這個是否意味著段落中的一行一行的每一行就是一個行框?我按照這個邏輯,這個行框當然可以包含行內框了,不然沒有行框哪裡來的行內框呢?
1 z1 Z: h% F" Y; q, u& M8 z
2 ?. S3 Z( v5 S6 Z3 s; H# S最後一句「不過,設置行高可以增加這個框的高度。」這個框的高度指的是行內框呢?還是行框呢?目前理解的是行框。" P# B& E* Q! ~7 m2 R6 U4 ?
: b8 z, v2 O, V說到了行框,by the way 看看這個無比糾結的解釋,高手請通俗的講下什麼是行高和行間距
. K; T- {/ |1 \% n# J
1 V# r( C3 O# q( TCSS line-height 屬性( ]& @ ] P7 m- t3 ~
定義和用法
2 n5 a$ ?1 L6 P+ o2 H& u; `0 M$ N( n1 \+ d
line-height 屬性設置行間的距離(行高)。% i+ K6 r0 `# x/ F
% K" _1 v* I) E- `6 ?
+ Y' v- q( `0 A! ? g0 c9 {. R+ f說明《糾結開始》
$ E/ {; p' V$ M2 \) B, A# K8 ^) X) d/ K* i
該屬性會影響行框的佈局。在應用到一個塊級元素時,它定義了該元素中基線之間的最小距離而不是最大距離。
2 `5 d0 o [0 e% A
4 Y# w$ u! h8 s! h9 q; tline-height 與 font-size 的計算值之差(在 CSS 中成為「行間距」)分為兩半,分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。$ Q( z* Q, H; a4 g" }8 N1 K' a/ v
" J! {+ ?+ C/ x
原始數字值指定了一個縮放因子,後代元素會繼承這個縮放因子而不是計算值。《糾結結束》
" _" @! I3 {( U. v" A3 ]" \% S: n$ _4 y+ n- n6 ?7 w% S3 `
2 Z) X! [! c0 a- ?
CSS學習就是一個不斷糾結與反糾結的過程,只有你把他們都反糾結了,豁然開朗。~~等著高手給我醍醐灌頂~ |
|