Skip to content

Commit a31481f

Browse files
rachelandrewrachelandrew
committed
files for formatting contexts
1 parent 639e43f commit a31481f

File tree

4 files changed

+530
-0
lines changed

4 files changed

+530
-0
lines changed

‎flow/formatting-contexts/bfc-flow-root.html

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS Formatting Contexts: create a BFC with display: flow-root</title>
7+
8+
<style>
9+
body {
10+
font: 1.2em Helvetica, Arial, sans-serif;
11+
margin: 20px;
12+
padding: 0;
13+
}
14+
15+
textarea {
16+
font-family: monospace;
17+
display: block;
18+
margin-bottom: 10px;
19+
background-color: #F4F7F8;
20+
border: none;
21+
border-left: 6px solid #558ABB;
22+
color: #4D4E53;
23+
width: 90%;
24+
max-width: 700px;
25+
padding: 10px 10px 0px;
26+
font-size: 90%;
27+
}
28+
29+
textarea:nth-of-type(1) {
30+
height: 80px
31+
}
32+
33+
textarea:nth-of-type(2) {
34+
height: 160px
35+
}
36+
37+
.playable-buttons {
38+
text-align: right;
39+
width: 90%;
40+
max-width: 700px;
41+
padding: 5px 10px 5px 26px;
42+
font-size: 100%;
43+
}
44+
45+
section {
46+
width: 90%;
47+
max-width: 700px;
48+
border: 1px solid #4D4E53;
49+
border-radius: 2px;
50+
padding: 10px 14px 10px 10px;
51+
margin-bottom: 10px;
52+
min-height: 200px;
53+
}
54+
55+
section input {
56+
display: block;
57+
margin: 5px;
58+
}
59+
60+
</style>
61+
<style class="editable">
62+
.box {
63+
background-color: rgb(224, 206, 247);
64+
border: 5px solid rebeccapurple;
65+
display: flow-root;
66+
}
67+
68+
.float {
69+
float: left;
70+
width: 200px;
71+
height: 150px;
72+
background-color: white;
73+
border:1px solid black;
74+
padding: 10px;
75+
}
76+
</style>
77+
</head>
78+
79+
<body>
80+
<section>
81+
<div class="box">
82+
<div class="float">I am a floated box!</div>
83+
<p>I am content inside the container.</p>
84+
</div>
85+
86+
</section>
87+
<textarea class="playable-css">
88+
.box {
89+
background-color: rgb(224, 206, 247);
90+
border: 5px solid rebeccapurple;
91+
display: flow-root;
92+
}
93+
94+
.float {
95+
float: left;
96+
width: 200px;
97+
height: 150px;
98+
background-color: white;
99+
border:1px solid black;
100+
padding: 10px;
101+
} </textarea>
102+
<textarea id="code" class="playable-html">
103+
<div class="box">
104+
<div class="float">I am a floated box!</div>
105+
<p>I am content inside the container.</p>
106+
</div>
107+
</textarea>
108+
<div class="playable-buttons">
109+
<input id="reset" type="button" value="Reset">
110+
</div>
111+
</body>
112+
<script>
113+
var section = document.querySelector('section');
114+
var editable = document.querySelector('.editable');
115+
var textareaHTML = document.querySelector('.playable-html');
116+
var textareaCSS = document.querySelector('.playable-css');
117+
var reset = document.getElementById('reset');
118+
var htmlCode = textareaHTML.value;
119+
var cssCode = textareaCSS.value;
120+
121+
function fillCode() {
122+
editable.innerHTML = textareaCSS.value;
123+
section.innerHTML = textareaHTML.value;
124+
}
125+
126+
reset.addEventListener('click', function () {
127+
textareaHTML.value = htmlCode;
128+
textareaCSS.value = cssCode;
129+
fillCode();
130+
});
131+
132+
textareaHTML.addEventListener('input', fillCode);
133+
textareaCSS.addEventListener('input', fillCode);
134+
window.addEventListener('load', fillCode);
135+
</script>
136+
137+
</html>

‎flow/formatting-contexts/bfc-overflow.html

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS Formatting Contexts: create a BFC with overflow</title>
7+
8+
<style>
9+
body {
10+
font: 1.2em Helvetica, Arial, sans-serif;
11+
margin: 20px;
12+
padding: 0;
13+
}
14+
15+
textarea {
16+
font-family: monospace;
17+
display: block;
18+
margin-bottom: 10px;
19+
background-color: #F4F7F8;
20+
border: none;
21+
border-left: 6px solid #558ABB;
22+
color: #4D4E53;
23+
width: 90%;
24+
max-width: 700px;
25+
padding: 10px 10px 0px;
26+
font-size: 90%;
27+
}
28+
29+
textarea:nth-of-type(1) {
30+
height: 80px
31+
}
32+
33+
textarea:nth-of-type(2) {
34+
height: 160px
35+
}
36+
37+
.playable-buttons {
38+
text-align: right;
39+
width: 90%;
40+
max-width: 700px;
41+
padding: 5px 10px 5px 26px;
42+
font-size: 100%;
43+
}
44+
45+
section {
46+
width: 90%;
47+
max-width: 700px;
48+
border: 1px solid #4D4E53;
49+
border-radius: 2px;
50+
padding: 10px 14px 10px 10px;
51+
margin-bottom: 10px;
52+
min-height: 200px;
53+
}
54+
55+
section input {
56+
display: block;
57+
margin: 5px;
58+
}
59+
60+
</style>
61+
<style class="editable">
62+
.box {
63+
background-color: rgb(224, 206, 247);
64+
border: 5px solid rebeccapurple;
65+
overflow: auto;
66+
}
67+
68+
.float {
69+
float: left;
70+
width: 200px;
71+
height: 150px;
72+
background-color: white;
73+
border:1px solid black;
74+
padding: 10px;
75+
}
76+
</style>
77+
</head>
78+
79+
<body>
80+
<section>
81+
<div class="box">
82+
<div class="float">I am a floated box!</div>
83+
<p>I am content inside the container.</p>
84+
</div>
85+
86+
</section>
87+
<textarea class="playable-css">
88+
.box {
89+
background-color: rgb(224, 206, 247);
90+
border: 5px solid rebeccapurple;
91+
overflow: auto;
92+
}
93+
94+
.float {
95+
float: left;
96+
width: 200px;
97+
height: 150px;
98+
background-color: white;
99+
border:1px solid black;
100+
padding: 10px;
101+
} </textarea>
102+
<textarea id="code" class="playable-html">
103+
<div class="box">
104+
<div class="float">I am a floated box!</div>
105+
<p>I am content inside the container.</p>
106+
</div>
107+
</textarea>
108+
<div class="playable-buttons">
109+
<input id="reset" type="button" value="Reset">
110+
</div>
111+
</body>
112+
<script>
113+
var section = document.querySelector('section');
114+
var editable = document.querySelector('.editable');
115+
var textareaHTML = document.querySelector('.playable-html');
116+
var textareaCSS = document.querySelector('.playable-css');
117+
var reset = document.getElementById('reset');
118+
var htmlCode = textareaHTML.value;
119+
var cssCode = textareaCSS.value;
120+
121+
function fillCode() {
122+
editable.innerHTML = textareaCSS.value;
123+
section.innerHTML = textareaHTML.value;
124+
}
125+
126+
reset.addEventListener('click', function () {
127+
textareaHTML.value = htmlCode;
128+
textareaCSS.value = cssCode;
129+
fillCode();
130+
});
131+
132+
textareaHTML.addEventListener('input', fillCode);
133+
textareaCSS.addEventListener('input', fillCode);
134+
window.addEventListener('load', fillCode);
135+
</script>
136+
137+
</html>

0 commit comments

Comments
 (0)