mirror of
https://github.com/servo/servo.git
synced 2025-08-05 13:40:08 +01:00
Update web-platform-tests and CSS tests.
- Update CSS tests to revision e05bfd5e30ed662c2f8a353577003f8eed230180. - Update web-platform-tests to revision a052787dd5c069a340031011196b73affbd68cd9.
This commit is contained in:
Ms2ger
parent
fb4f421c8b
commit
296fa2512b
21852 changed files with 2080936 additions and 892894 deletions
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 8px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 8px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { margin-left: 8px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { margin-left: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { margin-left: 8px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { margin-left: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-top: 4px; }
|
||||
.small > .container > * { margin-top: -4px; }
|
||||
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { margin-left: 8px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { margin-left: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-top: 4px; }
|
||||
.small > .container > * { margin-top: -4px; }
|
||||
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { margin-left: 8px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { margin-left: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 8px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 8px }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { /* nothing special */ }
|
||||
.small .alignStart { margin-left: -4px }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { /* nothing special */ }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 8px }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { /* nothing special */ }
|
||||
.small .alignStart { margin-left: -4px }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { /* nothing special */ }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 8px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignCenter"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--stretch (+ align-self:center)--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 8px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 8px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { margin-left: 8px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { margin-left: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { margin-left: 8px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { margin-left: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-top: 4px; }
|
||||
.small > .container > * { margin-top: -4px; }
|
||||
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { margin-left: 8px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { margin-left: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-top: 4px; }
|
||||
.small > .container > * { margin-top: -4px; }
|
||||
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { margin-left: 8px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { margin-left: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 8px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 8px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 8px }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { /* nothing special */ }
|
||||
.small .alignStart { margin-left: -4px }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { /* nothing special */ }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 8px }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { /* nothing special */ }
|
||||
.small .alignStart { margin-left: -4px }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { /* nothing special */ }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 8px }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { /* nothing special */ }
|
||||
.small .alignStart { margin-left: -4px }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { /* nothing special */ }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 8px }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { /* nothing special */ }
|
||||
.small .alignStart { margin-left: -4px }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { /* nothing special */ }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 8px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 8px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- <content-distribution> with implied fallback -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> with explicit "flex-end" fallback -->
|
||||
<div class="container"><div class="alignEnd"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--stretch--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- <content-distribution> with implied fallback -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> with explicit "flex-end" fallback -->
|
||||
<div class="container"><div class="alignEnd"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--stretch--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { margin-left: 8px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { margin-left: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- <content-distribution> with implied fallback -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> with explicit "flex-end" fallback -->
|
||||
<div class="container"><div class="alignEnd"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- <content-distribution> with implied fallback -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> with explicit "flex-end" fallback -->
|
||||
<div class="container"><div class="alignEnd"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { margin-left: 8px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { margin-left: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { margin-left: 8px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { margin-left: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { margin-left: 8px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { margin-left: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignEnd"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignEnd"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { margin-left: 8px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { margin-left: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignEnd"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignEnd"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignEnd"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignEnd"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignEnd"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignEnd"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignEnd"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 8px }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { /* nothing special */ }
|
||||
.small .alignStart { margin-left: -4px }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { /* nothing special */ }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 8px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 8px; }
|
||||
.small > .container > * { margin-left: -4px; }
|
||||
|
||||
.big .alignStart { /* nothing special */ }
|
||||
.big .alignCenter { margin-top: 2px }
|
||||
.big .alignEnd { margin-top: 4px }
|
||||
.small .alignStart { /* nothing special */ }
|
||||
.small .alignCenter { margin-top: -2px }
|
||||
.small .alignEnd { margin-top: -4px }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 8px }
|
||||
.big .alignCenter { margin-left: 4px }
|
||||
.big .alignEnd { /* nothing special */ }
|
||||
.small .alignStart { margin-left: -4px }
|
||||
.small .alignCenter { margin-left: -2px }
|
||||
.small .alignEnd { /* nothing special */ }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-content values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-content -->
|
||||
<!-- normal -->
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <content-distribution> -->
|
||||
<div class="container"><div class="alignStart"><!--space-between--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-around--></div></div>
|
||||
<div class="container"><div class="alignCenter"><!--space-evenly--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<br>
|
||||
<!-- <content-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 10px;
|
||||
width: 16px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div></div></div>
|
||||
<div class="container"><div></div></div>
|
||||
<div class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div></div></div>
|
||||
<div class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div></div></div>
|
||||
<div class="container"><div></div></div>
|
||||
<div class="container"><div></div></div>
|
||||
<div class="container"><div></div></div>
|
||||
<div class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div></div></div>
|
||||
<div class="container"><div></div></div>
|
||||
<div class="container"><div></div></div>
|
||||
<div class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div></div></div>
|
||||
<div class="container"><div></div></div>
|
||||
<div class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div></div></div>
|
||||
<div class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div></div></div>
|
||||
<div class="container"><div></div></div>
|
||||
<div class="container"><div></div></div>
|
||||
<div class="container"><div></div></div>
|
||||
<div class="container"><div></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div></div></div>
|
||||
<div class="container"><div></div></div>
|
||||
<div class="container"><div></div></div>
|
||||
<div class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 10px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 14px;
|
||||
width: 20px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- Margin just on one side: -->
|
||||
<div class="container"><div style="margin-top: 3px"></div></div>
|
||||
<div class="container"><div style="margin-right: 3px"></div></div>
|
||||
<div class="container"><div style="margin-bottom: 3px"></div></div>
|
||||
<div class="container"><div style="margin-left: 3px"></div></div>
|
||||
<!-- Margin on all sides: -->
|
||||
<div class="container"><div style="margin: 1px 2px 3px 4px"></div></div>
|
||||
<br>
|
||||
|
||||
<!-- "auto" margin on just one side (should be treated as 0): -->
|
||||
<div class="container"><div></div></div>
|
||||
<div class="container"><div></div></div>
|
||||
<div class="container"><div></div></div>
|
||||
<div class="container"><div></div></div>
|
||||
<!-- "auto" margin on all sides (should be treated as 0): -->
|
||||
<div class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- Margin just on one side: -->
|
||||
<div class="container"><div style="margin-top: 3px"></div></div>
|
||||
<div class="container"><div style="margin-right: 3px"></div></div>
|
||||
<div class="container"><div style="margin-bottom: 3px"></div></div>
|
||||
<div class="container"><div style="margin-left: 3px"></div></div>
|
||||
<!-- Margin on all sides: -->
|
||||
<div class="container"><div style="margin: 1px 2px 3px 4px"></div></div>
|
||||
<br>
|
||||
|
||||
<!-- "auto" margin on just one side (should be treated as 0): -->
|
||||
<div class="container"><div></div></div>
|
||||
<div class="container"><div></div></div>
|
||||
<div class="container"><div></div></div>
|
||||
<div class="container"><div></div></div>
|
||||
<!-- "auto" margin on all sides (should be treated as 0): -->
|
||||
<div class="container"><div></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 10px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 14px;
|
||||
width: 20px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- Margin just on one side: -->
|
||||
<div class="container"><div style="margin: 3px 0 0 12px"></div></div>
|
||||
<div class="container"><div style="margin: 0 0 0 9px"></div></div>
|
||||
<div class="container"><div style="margin: 0 0 0 12px"></div></div>
|
||||
<div class="container"><div style="margin: 0 0 0 12px"></div></div>
|
||||
<!-- Margin on all sides: -->
|
||||
<div class="container"><div style="margin: 1px 0 0 10px"></div></div>
|
||||
<br>
|
||||
|
||||
<!-- "auto" margin on just one side (should be treated as 0): -->
|
||||
<div class="container"><div style="margin: 0 0 0 12px"></div></div>
|
||||
<div class="container"><div style="margin: 0 0 0 12px"></div></div>
|
||||
<div class="container"><div style="margin: 0 0 0 12px"></div></div>
|
||||
<div class="container"><div style="margin: 0 0 0 12px"></div></div>
|
||||
<!-- "auto" margin on all sides (should be treated as 0): -->
|
||||
<div class="container"><div style="margin: 0 0 0 12px"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- Margin just on one side: -->
|
||||
<div class="container"><div style="margin: 3px 0 0 -4px"></div></div>
|
||||
<div class="container"><div style="margin: 0 0 0 -7px"></div></div>
|
||||
<div class="container"><div style="margin: 0 0 0 -4px"></div></div>
|
||||
<div class="container"><div style="margin: 0 0 0 -4px"></div></div>
|
||||
<!-- Margin on all sides: -->
|
||||
<div class="container"><div style="margin: 1px 0 0 -6px"></div></div>
|
||||
<br>
|
||||
|
||||
<!-- "auto" margin on just one side (should be treated as 0): -->
|
||||
<div class="container"><div style="margin: 0 0 0 -4px"></div></div>
|
||||
<div class="container"><div style="margin: 0 0 0 -4px"></div></div>
|
||||
<div class="container"><div style="margin: 0 0 0 -4px"></div></div>
|
||||
<div class="container"><div style="margin: 0 0 0 -4px"></div></div>
|
||||
<!-- "auto" margin on all sides (should be treated as 0): -->
|
||||
<div class="container"><div style="margin: 0 0 0 -4px"></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
.big .alignStart { margin-top: 2px; }
|
||||
.big .alignCenter { margin-top: 9px; }
|
||||
.big .alignEnd { margin-top: 16px; }
|
||||
.small .alignStart { margin-top: 0px; }
|
||||
.small .alignCenter { margin-top: -2px; }
|
||||
.small .alignEnd { margin-top: -4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 32px;
|
||||
width: 26px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 4px;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big .alignStart { margin-top: 0px; }
|
||||
.big .alignCenter { margin-top: 13px; }
|
||||
.big .alignEnd { margin-top: 26px; }
|
||||
.small .alignStart { margin-top: 0px; }
|
||||
.small .alignCenter { margin-top: -1px; }
|
||||
.small .alignEnd { margin-top: -2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 40px;
|
||||
width: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
margin-bottom: 20px; /* to reduce overlap between overflowing images */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
margin-left: 3px;
|
||||
display: block;
|
||||
}
|
||||
.big .alignStart { margin-top: 2px; }
|
||||
.big .alignCenter { margin-top: 9px; }
|
||||
.big .alignEnd { margin-top: 16px; }
|
||||
.small .alignStart { margin-top: 0px; }
|
||||
.small .alignCenter { margin-top: -7px; }
|
||||
.small .alignEnd { margin-top: -14px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--auto--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--normal--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--stretch--></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--baseline--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--last baseline--></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignCenter"><!--center--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--end--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--self-start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--self-end--></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--flex-start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--flex-end--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--left--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--right--></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--auto--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--normal--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--stretch--></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--baseline--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--last baseline--></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignCenter"><!--center--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--end--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--self-start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--self-end--></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--flex-start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--flex-end--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--left--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--right--></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 42px;
|
||||
width: 26px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 4px;
|
||||
width: 8px;
|
||||
margin-bottom: 20px; /* to reduce overlap between overflowing images */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
display: block;
|
||||
}
|
||||
.big .alignStart { margin-top: 0px; }
|
||||
.big .alignCenter { margin-top: 13px; }
|
||||
.big .alignEnd { margin-top: 26px; }
|
||||
.small .alignStart { margin-top: 0px; }
|
||||
.small .alignCenter { margin-top: -6px; }
|
||||
.small .alignEnd { margin-top: -12px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--auto--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--normal--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--stretch--></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--baseline--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--last baseline--></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignCenter"><!--center--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--end--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--self-start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--self-end--></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--flex-start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--flex-end--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--left--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--right--></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--auto--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--normal--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--stretch--></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--baseline--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--last baseline--></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignCenter"><!--center--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--end--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--self-start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--self-end--></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--flex-start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--flex-end--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--left--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--right--></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 11px; }
|
||||
.small > .container > * { margin-left: -7px; }
|
||||
|
||||
.big .alignStart { margin-top: 2px; }
|
||||
.big .alignCenter { margin-top: 9px; }
|
||||
.big .alignEnd { margin-top: 16px; }
|
||||
.small .alignStart { margin-top: 0px; }
|
||||
.small .alignCenter { margin-top: -2px; }
|
||||
.small .alignEnd { margin-top: -4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 11px; }
|
||||
.small > .container > * { margin-left: -7px; }
|
||||
|
||||
.big .alignStart { margin-top: 2px; }
|
||||
.big .alignCenter { margin-top: 9px; }
|
||||
.big .alignEnd { margin-top: 16px; }
|
||||
.small .alignStart { margin-top: 0px; }
|
||||
.small .alignCenter { margin-top: -2px; }
|
||||
.small .alignEnd { margin-top: -4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 32px;
|
||||
width: 26px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 4px;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 18px; }
|
||||
.small > .container > * { margin-left: 0px; }
|
||||
|
||||
.big .alignStart { margin-top: 0px; }
|
||||
.big .alignCenter { margin-top: 13px; }
|
||||
.big .alignEnd { margin-top: 26px; }
|
||||
.small .alignStart { margin-top: 0px; }
|
||||
.small .alignCenter { margin-top: -1px; }
|
||||
.small .alignEnd { margin-top: -2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 32px;
|
||||
width: 26px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 4px;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 18px; }
|
||||
.small > .container > * { margin-left: 0px; }
|
||||
|
||||
.big .alignStart { margin-top: 0px; }
|
||||
.big .alignCenter { margin-top: 13px; }
|
||||
.big .alignEnd { margin-top: 26px; }
|
||||
.small .alignStart { margin-top: 0px; }
|
||||
.small .alignCenter { margin-top: -1px; }
|
||||
.small .alignEnd { margin-top: -2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.big .alignStart { margin-left: 22px; }
|
||||
.big .alignCenter { margin-left: 15px; }
|
||||
.big .alignEnd { margin-left: 8px; }
|
||||
.small .alignStart { margin-left: -4px; }
|
||||
.small .alignCenter { margin-left: -2px; }
|
||||
.small .alignEnd { margin-left: 0px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.big .alignStart { margin-left: 22px; }
|
||||
.big .alignCenter { margin-left: 15px; }
|
||||
.big .alignEnd { margin-left: 8px; }
|
||||
.small .alignStart { margin-left: -4px; }
|
||||
.small .alignCenter { margin-left: -2px; }
|
||||
.small .alignEnd { margin-left: 0px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 32px;
|
||||
height: 26px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 4px;
|
||||
height: 8px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 26px; }
|
||||
.big .alignCenter { margin-left: 13px; }
|
||||
.big .alignEnd { margin-left: 0px; }
|
||||
.small .alignStart { margin-left: -2px; }
|
||||
.small .alignCenter { margin-left: -1px; }
|
||||
.small .alignEnd { margin-left: 0px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 32px;
|
||||
height: 26px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 4px;
|
||||
height: 8px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 26px; }
|
||||
.big .alignCenter { margin-left: 13px; }
|
||||
.big .alignEnd { margin-left: 0px; }
|
||||
.small .alignStart { margin-left: -2px; }
|
||||
.small .alignCenter { margin-left: -1px; }
|
||||
.small .alignEnd { margin-left: 0px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various align-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-align-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.big .alignStart { margin-left: 2px; }
|
||||
.big .alignCenter { margin-left: 9px; }
|
||||
.big .alignEnd { margin-left: 16px; }
|
||||
.small .alignStart { margin-left: 0px; }
|
||||
.small .alignCenter { margin-left: -2px; }
|
||||
.small .alignEnd { margin-left: -4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 32px;
|
||||
height: 26px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 4px;
|
||||
height: 8px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 0px; }
|
||||
.big .alignCenter { margin-left: 13px; }
|
||||
.big .alignEnd { margin-left: 26px; }
|
||||
.small .alignStart { margin-left: 0px; }
|
||||
.small .alignCenter { margin-left: -1px; }
|
||||
.small .alignEnd { margin-left: -2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 40px;
|
||||
height: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-bottom: 20px; /* to reduce overlap between overflowing images */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
margin-top: 3px;
|
||||
display: block;
|
||||
}
|
||||
.big .alignStart { margin-left: 2px; }
|
||||
.big .alignCenter { margin-left: 13px; }
|
||||
.big .alignEnd { margin-left: 24px; }
|
||||
.small .alignStart { margin-left: 0px; }
|
||||
.small .alignCenter { margin-left: -3px; }
|
||||
.small .alignEnd { margin-left: -6px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--auto--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--normal--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--stretch--></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--baseline--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--last baseline--></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignCenter"><!--center--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--end--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--self-start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--self-end--></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--flex-start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--flex-end--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--left--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--right--></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--auto--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--normal--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--stretch--></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--baseline--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--last baseline--></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignCenter"><!--center--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--end--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--self-start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--self-end--></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--flex-start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--flex-end--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--left--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--right--></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 42px;
|
||||
height: 26px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 4px;
|
||||
height: 8px;
|
||||
margin-bottom: 20px; /* to reduce overlap between overflowing images */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
display: block;
|
||||
}
|
||||
.big .alignStart { margin-left: 0px; }
|
||||
.big .alignCenter { margin-left: 17px; }
|
||||
.big .alignEnd { margin-left: 34px; }
|
||||
.small .alignStart { margin-left: 0px; }
|
||||
.small .alignCenter { margin-left: -2px; }
|
||||
.small .alignEnd { margin-left: -4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--auto--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--normal--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--stretch--></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--baseline--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--last baseline--></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignCenter"><!--center--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--end--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--self-start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--self-end--></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--flex-start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--flex-end--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--left--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--right--></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--auto--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--normal--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--stretch--></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--baseline--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--last baseline--></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignCenter"><!--center--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--end--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--self-start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--self-end--></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--flex-start--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--flex-end--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignStart"><!--left--></div>
|
||||
<div class="container"><img src="support/colors-8x16.png" class="alignEnd"><!--right--></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.big .alignStart { margin-left: 22px; }
|
||||
.big .alignCenter { margin-left: 15px; }
|
||||
.big .alignEnd { margin-left: 8px; }
|
||||
.small .alignStart { margin-left: -4px; }
|
||||
.small .alignCenter { margin-left: -2px; }
|
||||
.small .alignEnd { margin-left: 0px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 2px 1px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 30px;
|
||||
height: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 2px;
|
||||
height: 4px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.big .alignStart { margin-left: 22px; }
|
||||
.big .alignCenter { margin-left: 15px; }
|
||||
.big .alignEnd { margin-left: 8px; }
|
||||
.small .alignStart { margin-left: -4px; }
|
||||
.small .alignCenter { margin-left: -2px; }
|
||||
.small .alignEnd { margin-left: 0px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 32px;
|
||||
height: 26px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 4px;
|
||||
height: 8px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 26px; }
|
||||
.big .alignCenter { margin-left: 13px; }
|
||||
.big .alignEnd { margin-left: 0px; }
|
||||
.small .alignStart { margin-left: -2px; }
|
||||
.small .alignCenter { margin-left: -1px; }
|
||||
.small .alignEnd { margin-left: 0px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
width: 32px;
|
||||
height: 26px;
|
||||
}
|
||||
.small > .container {
|
||||
width: 4px;
|
||||
height: 8px;
|
||||
margin-right: 10px; /* To avoid overlap between overflowing kids */
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
width: 6px;
|
||||
height: 8px;
|
||||
}
|
||||
.big .alignStart { margin-left: 26px; }
|
||||
.big .alignCenter { margin-left: 13px; }
|
||||
.big .alignEnd { margin-left: 0px; }
|
||||
.small .alignStart { margin-left: -2px; }
|
||||
.small .alignCenter { margin-left: -1px; }
|
||||
.small .alignEnd { margin-left: 0px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--left--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.big > .container > * { margin-left: 11px; }
|
||||
.small > .container > * { margin-left: -7px; }
|
||||
|
||||
.big .alignStart { margin-top: 2px; }
|
||||
.big .alignCenter { margin-top: 9px; }
|
||||
.big .alignEnd { margin-top: 16px; }
|
||||
.small .alignStart { margin-top: 0px; }
|
||||
.small .alignCenter { margin-top: -2px; }
|
||||
.small .alignEnd { margin-top: -4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
padding: 1px 2px;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 30px;
|
||||
width: 22px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
margin-top: 3px;
|
||||
}
|
||||
.big > .container > * { margin-left: 11px; }
|
||||
.small > .container > * { margin-left: -7px; }
|
||||
|
||||
.big .alignStart { margin-top: 2px; }
|
||||
.big .alignCenter { margin-top: 9px; }
|
||||
.big .alignEnd { margin-top: 16px; }
|
||||
.small .alignStart { margin-top: 0px; }
|
||||
.small .alignCenter { margin-top: -2px; }
|
||||
.small .alignEnd { margin-top: -4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 32px;
|
||||
width: 26px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 4px;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 18px; }
|
||||
.small > .container > * { margin-left: 0px; }
|
||||
|
||||
.big .alignStart { margin-top: 0px; }
|
||||
.big .alignCenter { margin-top: 13px; }
|
||||
.big .alignEnd { margin-top: 26px; }
|
||||
.small .alignStart { margin-top: 0px; }
|
||||
.small .alignCenter { margin-top: -1px; }
|
||||
.small .alignEnd { margin-top: -2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<style>
|
||||
.container {
|
||||
display: block;
|
||||
border: 1px solid black;
|
||||
background: yellow;
|
||||
margin-bottom: 5px;
|
||||
margin-right: 5px;
|
||||
float: left; /* For testing in "rows" of containers */
|
||||
}
|
||||
br { clear: both }
|
||||
|
||||
.big > .container {
|
||||
height: 32px;
|
||||
width: 26px;
|
||||
}
|
||||
.small > .container {
|
||||
height: 4px;
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.container > * {
|
||||
background: teal;
|
||||
height: 6px;
|
||||
width: 8px;
|
||||
}
|
||||
.big > .container > * { margin-left: 18px; }
|
||||
.small > .container > * { margin-left: 0px; }
|
||||
|
||||
.big .alignStart { margin-top: 0px; }
|
||||
.big .alignCenter { margin-top: 13px; }
|
||||
.big .alignEnd { margin-top: 26px; }
|
||||
.small .alignStart { margin-top: 0px; }
|
||||
.small .alignCenter { margin-top: -1px; }
|
||||
.small .alignEnd { margin-top: -2px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="big">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="small">
|
||||
<!-- The various justify-self values, from
|
||||
https://www.w3.org/TR/css-align-3/#propdef-justify-self -->
|
||||
<!-- auto | normal | stretch -->
|
||||
<div class="container"><div class="alignStart"><!--auto--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--normal--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--stretch--></div></div>
|
||||
<br>
|
||||
<!-- <baseline-position> -->
|
||||
<div class="container"><div class="alignStart"><!--baseline--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--last baseline--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 1: -->
|
||||
<div class="container"><div class="alignCenter"><!--center--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--self-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--self-end--></div></div>
|
||||
<br>
|
||||
<!-- <self-position>, part 2: -->
|
||||
<div class="container"><div class="alignStart"><!--flex-start--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--flex-end--></div></div>
|
||||
<div class="container"><div class="alignStart"><!--left--></div></div>
|
||||
<div class="container"><div class="alignEnd"><!--right--></div></div>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 92 B |
Loading…
Add table
Add a link
Reference in a new issue