[css-box] Add subheadings, export <box>, update to css-box-4

Author: fantasai

css-box-3/Overview.bs

@@ -131,11 +131,21 @@ The CSS Box Model {#box-model}
 		<p class="caption">The various areas and edges of a typical box.
 	</div>
 
+	The background of the content, padding, and border areas of a box
+	is specified by its 'background' properties.
+	The border area can additionally be painted with a border style
+	using the 'border' properties.
+	Margins are always transparent.
+	See [[css-backgrounds-3]].
+
 	The margin, border, and padding can be broken down into
 	top, right, bottom, and left segments,
 	each of which can be controlled independently
 	by its corresponding property.
 
+Boxes and Edges {#box-edges}
+---------------
+
 	The perimeter of each of the four areas
 	(content, padding, border, and margin)
 	is called an <dfn export lt="box edge | edge" for="box">edge</dfn>,
@@ -192,12 +202,8 @@ The CSS Box Model {#box-model}
 			and <a>margin areas</a>.
 	</dl>
 
-	The background of the content, padding, and border areas of a box
-	is specified by its 'background' properties.
-	The border area can additionally be painted with a border style
-	using the 'border' properties.
-	Margins are always transparent.
-	See [[css-backgrounds-3]].
+Fragmentation {#fragmentation}
+-------------
 
 	When a box <a href="https://www.w3.org/TR/css-break-3/#fragmentation-model">fragments</a>--
 	is broken, as across lines or across pages, into separate <a>box fragments</a>--
@@ -211,7 +217,7 @@ The CSS Box Model {#box-model}
 Box-edge Keywords {#keywords}
 -----------------
 
-	The following <dfn noexport>&lt;box></dfn> CSS keywords are defined for use
+	The following <dfn><<box>></dfn> CSS keywords are defined for use
 	in properties (such as 'transform-box' and 'background-clip')
 	that need to refer to various box edges:
 
@@ -265,7 +271,9 @@ Box-edge Keywords {#keywords}
 				     See https://github.com/w3c/csswg-drafts/issues/4662 -->
 	</dl>
 
-	For convenience, the following value types are defined:
+	For convenience, the following value types are defined
+	to represents commonly used subsets of <<box>>:
+
 	<pre class="prod">
 		<dfn><<visual-box>></dfn> = content-box | padding-box | border-box
 		<dfn><<layout-box>></dfn> = <<visual-box>> | margin-box

css-box-4/Overview.bs

@@ -117,11 +117,21 @@ The CSS Box Model {#box-model}
 		<p class="caption">The various areas and edges of a typical box.
 	</div>
 
+	The background of the content, padding, and border areas of a box
+	is specified by its 'background' properties.
+	The border area can additionally be painted with a border style
+	using the 'border' properties.
+	Margins are always transparent.
+	See [[css-backgrounds-3]].
+
 	The margin, border, and padding can be broken down into
 	top, right, bottom, and left segments,
 	each of which can be controlled independently
 	by its corresponding property.
 
+Boxes and Edges {#box-edges}
+---------------
+
 	The perimeter of each of the four areas
 	(content, padding, border, and margin)
 	is called an <dfn export lt="box edge | edge" for="box">edge</dfn>,
@@ -178,26 +188,22 @@ The CSS Box Model {#box-model}
 			and <a>margin areas</a>.
 	</dl>
 
-	The background of the content, padding, and border areas of a box
-	is specified by its 'background' properties.
-	The border area can additionally be painted with a border style
-	using the 'border' properties.
-	Margins are always transparent.
-	See [[css-backgrounds-3]].
+Fragmentation {#fragmentation}
+-------------
 
-	When a box <a href="https://www.w3.org/TR/css-break-3/#fragmentation-model">fragments</a>--
+	When a box <a href="https://www.w3.org/TR/css-break-4/#fragmentation-model">fragments</a>--
 	is broken, as across lines or across pages, into separate <a>box fragments</a>--
 	each of its boxes
 	(<a>content box</a>, <a>padding box</a>, <a>border box</a>, <a>margin box</a>)
 	also fragments.
 	How the content/padding/border/margin areas react to fragmentation
-	is specified in [[css-break-3]]
+	is specified in [[css-break-4]]
 	and controlled by the 'box-decoration-break' property.
 
 Box-edge Keywords {#keywords}
 -----------------
 
-	The following <dfn noexport>&lt;box></dfn> CSS keywords are defined for use
+	The following <dfn><<box>></dfn> CSS keywords are defined for use
 	in properties (such as 'transform-box' and 'background-clip')
 	that need to refer to various box edges:
 
@@ -250,7 +256,9 @@ Box-edge Keywords {#keywords}
 				     See https://github.com/w3c/csswg-drafts/issues/4662 -->
 	</dl>
 
-	For convenience, the following value types are defined:
+	For convenience, the following value types are defined
+	to represents commonly used subsets of <<box>>:
+
 	<pre class="prod">
 		<dfn><<visual-box>></dfn> = content-box | padding-box | border-box
 		<dfn><<layout-box>></dfn> = <<visual-box>> | margin-box
@@ -278,7 +286,7 @@ Margins {#margins}
 	See <a href="https://www.w3.org/TR/CSS2/box.html#collapsing-margins">CSS2&sect;8.3.1 Collapsing Margins</a>
 	for details.
 	Also, margins adjoining a <a>fragmentation break</a> are sometimes truncated.
-	See [[css-break-3#break-margins]] for details.
+	See [[css-break-4#break-margins]] for details.
 
 Page-relative (Physical) Margin Properties: the 'margin-top', 'margin-right', 'margin-bottom', and 'margin-left' properties {#margin-physical}
 -------------------------------------------