/
470.txt
66 lines (47 loc) · 1.82 KB
/
470.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
[6] [DFN[[RUBY[箱][ボックス]@en[box]]]]は、[[CSS]] [[箱モデル]]における[[レンダリング]]の単位要素です。
* 仕様書
- [7] [[CSS 2.1]]
-- [1] <http://www.w3.org/TR/CSS21/box.html#box-dimensions>
* 状態
[11] [[箱]]の持つ[[状態]]はいろいろあります。
[FIG(list members)[ [12] [[箱]]
:[[軸]]における[[最初基線集合]]:
:[[軸]]における[[最後基線集合]]:
:[F[支配的基線]]:
:[F[揃え基線]]:
]FIG]
* 箱の領域
[2]
[DFN[[RUBY[[[箱]]] [はこ] @en[box]]]]は次の4つの[RUBYB[[[領域]]]@en[area]]で構成されます:
= [[内容領域]]
= [[詰め領域]] (省略可能)
= [[境界領域]] (省略可能)
= [[余白領域]] (省略可能)
[3]
各[[領域]]の外周は[DFN[[RUBY[[[辺]]] [へん] @en[edge]]]]といいます。
= [[内容辺]] ([[内辺]])
= [[詰め辺]]
= [[境界辺]]
= [[余白辺]] ([[外辺]])
* 箱の分類
** 含める範囲の違い
[4]
>>3 の4[[辺]]により、[[内容箱]]、[[詰め箱]]、[[境界箱]]、
[[余白箱]]の4種類の[[箱]]が定義されます。
** レンダリングの違い
[5]
- [[行内箱]]
- [[ブロック箱]]
- [[行箱]]
- [[絶対配置箱]]
- [[浮動箱]]
* 歴史
[8] [CITE@en[Editorial: link the term "CSS box" and remove parentheticals]]
([[zcorpan]]著, [TIME[2019-05-24 20:19:27 +09:00]])
<https://github.com/whatwg/html/commit/9058fe7ff6961a28fb6e87db55c7dfbbcbd63bb1>
[9] [CITE@en[Editorial: link the term "CSS box" and remove parentheticals by zcorpan · Pull Request #4659 · whatwg/html]]
([TIME[2020-01-12 15:30:26 +09:00]])
<https://github.com/whatwg/html/pull/4659>
[10] [CITE@en[Factor out "when it generates a box" · Issue #4618 · whatwg/html]]
([TIME[2020-01-12 15:31:02 +09:00]])
<https://github.com/whatwg/html/issues/4618>