diff --git a/src/003-box-sizing/example/example.css b/src/003-box-sizing/example/example.css index eba1d66..afcec77 100644 --- a/src/003-box-sizing/example/example.css +++ b/src/003-box-sizing/example/example.css @@ -3,3 +3,30 @@ * Version: 1 * By: xxx */ + +.brd-box{ + border: 5px solid #D24F2E; +} + +.bx{ + border: 5px solid #D24F2E; +} + +.cnt-box{ + box-sizing: content-box; + border: 5px solid #D24F2E; + max-width: calc(100% - 60px); + width: 1000px; +} + +.container{ + background-color: rgb(233,233,233); + padding: 5px 15px 15px 15px; + margin: 15px 15px; +} + + +.bx, .brd-box, .cnt-box{ + margin: 15px; + padding: 15px; +} \ No newline at end of file diff --git a/src/003-box-sizing/example/index.html b/src/003-box-sizing/example/index.html index 9c2f4a4..ede0722 100644 --- a/src/003-box-sizing/example/index.html +++ b/src/003-box-sizing/example/index.html @@ -35,26 +35,26 @@
-
+

Box Model

-
+

Since the dawn of CSS, the box model has worked like this by default:

width + padding + border = actual visible/rendered width of an element's box

height + padding + border = actual visible/rendered height of an element's box

-
+

Box Sizing : Content Box

-
+

Default. The width and height properties (and min/max properties) includes only the content. Border, padding, or margin are not included

-
+

Box Sizing : border-box

-
+

The width and height properties (and min/max properties) includes content, padding and border, but not the margin

diff --git a/src/004-display/example/example.css b/src/004-display/example/example.css index 08fc34e..dc97b94 100644 --- a/src/004-display/example/example.css +++ b/src/004-display/example/example.css @@ -3,3 +3,82 @@ * Version: 1 * By: xxx */ +.column { + display: inline-block; + width: 48%; + vertical-align: middle; +} + +.division{ + padding: 15px 10px +} + +header{ + padding-bottom: 2px; +} + +header, +.division{ + background-color: rgb(232,232,232); +} + +header h1{ + padding-left: 10px; +} + +.navigation { + background-color: rgb(220, 220, 220); + padding-top: 5px; + padding-bottom: 5px; +} + +.navigation ul{ + list-style: none; +} + +.navigation ul li{ + display: inline; +} + + +.section{ + background-color: rgb(232,232,232); + display: flex; + flex-wrap: wrap; + padding: 35px 50px 20px 15px; +} + +.section div{ + flex-grow: 1; + width: 30%; + min-width: 100px; +} + +.section div{ + border: 1px solid red; + display: inline-block; + height: 200px; + margin: 1px; + /* width: 300px;*/ + +} + +#table{ + display: table; + border-collapse: separate; + border-spacing: 1px; +} + +#table .row{ + display:table-row; +} + +#table .row div{ + background-color: rgb(200,200,200); + display: table-cell; + height: 50px; + width: 800px; + text-align: center; + padding-top: 30px; + +} \ No newline at end of file diff --git a/src/004-display/example/index.html b/src/004-display/example/index.html index 3db9b5e..9071d99 100644 --- a/src/004-display/example/index.html +++ b/src/004-display/example/index.html @@ -41,7 +41,7 @@

Lorem ipsum

-
+
-
-
+
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
-
-
+
+
Table Header
Table Header
Table Header
-
+
Table Cell
Table Cell
Table Cell
-
+
Table Cell
Table Cell
Table Cell
-
+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex diff --git a/src/005-centering/example/example.css b/src/005-centering/example/example.css index 4dba466..c31dfc3 100644 --- a/src/005-centering/example/example.css +++ b/src/005-centering/example/example.css @@ -3,3 +3,134 @@ * Version: 1 * By: xxx */ + +.container{ + background-color: rgb(232,232,232); + max-width: 1200px; + margin: auto; +} + +.centered-text{ + padding-top: 10px; + padding-bottom: 10px; + text-align: center; +} + +.centered-box{ + text-align: center; +} + +.centered-box div{ + background-color: rgb(211,211,211); + display: inline-block; + margin: 20px 5px; + max-width: 200px; + padding: 25px 25px; + text-align: left; +} + +.centered-flexbox{ + display:flex; + justify-content: center; +} + +.centered-flexbox div{ + background-color: rgb(211,211,211); + max-width: 200px; + margin: 5px 5px; + padding: 25px 25px; +} + + +.centered-line { + background-color: rgb(211,211,211); + display: inline-block; + height: 100px; + line-height: 100px; + margin-top: 20px; + padding-left:10px; + text-align: left; + vertical-align: middle; + width: 500px; +} + + +.centered-text, +.center-within-parent, +.flex-lines, +.link-list, +.vertically-center-within-parent, +.vertical-line{ + background-color: rgb(211, 211, 211); +} + + +.center-within-parent { + height: 200px; + margin-top: 20px; + position: relative; + +} + +.child, +.child-vertically{ + background-color: rgb(169,169,169); + color: rgb(255,255,255); +} + +.child{ + position: absolute; + top: 50%; + height: 100px; + margin-top: -50px; + width: 90%; + padding: 10px 10px; + margin-left: 20px; +} + +.flex-lines{ + display: flex; + flex-direction: column; + justify-content: center; +} + +.flex-lines p{ + padding: 70px 20px; +} + +.link-list{ + text-align: center; +} + +.link-list div{ + display: inline-block; + margin: 10px; + +} + +.vertical-line{ + margin-top: 30px; + margin-bottom: 30px; + height: 200px; + width: 200px; +} + +.vertical-line p{ + padding: 55px 20px 30px 10px; +} + +.vertically-center-within-parent{ + margin-top: 40px; + position:relative; + height: 200px; + padding-top: 30px; +} + +.child-vertically{ + left: 50%; + padding: 10px 10px; + position: absolute; + top: 52%; + transform: translate(-50%,-57%); + width: 95%; +} \ No newline at end of file diff --git a/src/005-centering/example/index.html b/src/005-centering/example/index.html index b6d2e1e..3735ffb 100644 --- a/src/005-centering/example/index.html +++ b/src/005-centering/example/index.html @@ -30,13 +30,13 @@
-
+
-

This text is centered.

+

This text is centered.

-
+
@@ -44,7 +44,7 @@

This text is centered.

-
+
I'm an element that is block-like with my siblings and we're centered in a row. I'm an element that is block-like with my siblings and we're centered in a row.
@@ -54,7 +54,7 @@

This text is centered.

I'm an element that is block-like with my siblings and we're centered in a row.
-
+
I'm an element that is block-like with my siblings and we're centered in a row.
I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do. @@ -62,15 +62,15 @@

This text is centered.

I'm an element that is block-like with my siblings and we're centered in a row.
-
+
I'm a centered line.
-
+

I'm vertically centered multiple lines of text in a CSS-created table layout.

-
+

I'm vertically centered multiple lines of text in a flexbox container. Lorem ipsum dolor sit amet, pharetra vitae corrupti eu amet in. Ut nibh ut tellus lacinia habitasse proin, arcu aliquet ut. Dis phasellus orci pulvinar assumenda a ligula, egestas morbi sapien congue sollicitudin, quam tortor placerat at leo elit sed. @@ -83,12 +83,12 @@

This text is centered.

elementum aliquam vitae.

-
-
I'm a block-level element with a fixed height, centered vertically within my parent.
+
+
I'm a block-level element with a fixed height, centered vertically within my parent.
-
-
I'm a block-level element with an unknown height, centered vertically within my parent. I'm a block-level +
+
I'm a block-level element with an unknown height, centered vertically within my parent. I'm a block-level element with an unknown height, centered vertically within my parent. I'm a block-level element with an unknown height, centered vertically within my parent.