web development immersive building page layouts. 2 box model scaling positioning boxes box...
TRANSCRIPT
![Page 1: WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bfb51a28abf838c9d9db/html5/thumbnails/1.jpg)
WEB DEVELOpment immersivebuilding page layouts
![Page 2: WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bfb51a28abf838c9d9db/html5/thumbnails/2.jpg)
2
• Box Model• Scaling• Positioning Boxes• Box Aesthetics• HTML 5 Semantic Tags• CSS Resets
Topics
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 3: WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bfb51a28abf838c9d9db/html5/thumbnails/3.jpg)
3
• Padding (spacing inside an element)• Margin (spacing outside an element)• Border (colors, styles)
Box Model
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 4: WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bfb51a28abf838c9d9db/html5/thumbnails/4.jpg)
4
W3C Box Model
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 5: WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bfb51a28abf838c9d9db/html5/thumbnails/5.jpg)
5
IE Box Model
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 6: WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bfb51a28abf838c9d9db/html5/thumbnails/6.jpg)
6
IE Box Model FIX SOLUTIONS
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
• CSS 1 & 2 hacks• Box in a box method• CSS 3 box-sizing property
![Page 7: WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bfb51a28abf838c9d9db/html5/thumbnails/7.jpg)
7
CSS 1 & 2 Hacks (Don’t Do this!)
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
div { width: 100px; }div { \width: 140px; w\idth: 100px;}
![Page 8: WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bfb51a28abf838c9d9db/html5/thumbnails/8.jpg)
8
BOX IN A BOX METHOD (100% support)
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
div { width: 100px; padding:0; margin:0; }
.i { padding: 1em; }
<div> <div class="i"> Text </div></div>
![Page 9: WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bfb51a28abf838c9d9db/html5/thumbnails/9.jpg)
9
CSS 3 Box-sizing property (90.2% support)
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
div { box-sizing:border-box;}
/* IE model = border-box W3C model = content-box */
![Page 10: WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bfb51a28abf838c9d9db/html5/thumbnails/10.jpg)
10
CSS 3 Box-sizing support
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 11: WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bfb51a28abf838c9d9db/html5/thumbnails/11.jpg)
11
Scaling elements
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
• Static (px)• Fluid (%)• Responsive (min, max)• Auto
![Page 12: WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bfb51a28abf838c9d9db/html5/thumbnails/12.jpg)
12
Content OVERFLOW
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 13: WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bfb51a28abf838c9d9db/html5/thumbnails/13.jpg)
13
• Static (default)• Floating
Positioning (part 1)
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 14: WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bfb51a28abf838c9d9db/html5/thumbnails/14.jpg)
14
Floating
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 15: WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bfb51a28abf838c9d9db/html5/thumbnails/15.jpg)
15
Clearing
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 16: WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bfb51a28abf838c9d9db/html5/thumbnails/16.jpg)
16
Clearing
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
clear:both;
![Page 17: WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bfb51a28abf838c9d9db/html5/thumbnails/17.jpg)
17
Floating
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 18: WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bfb51a28abf838c9d9db/html5/thumbnails/18.jpg)
18
• Background (color, images)• Box Shadow• Borders • Border Radius• Opacity
Box aesthetics
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 19: WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bfb51a28abf838c9d9db/html5/thumbnails/19.jpg)
19
Background Properties
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
background-color:background-image:background-position:background-repeat:background-scroll:background-size:background:
![Page 20: WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bfb51a28abf838c9d9db/html5/thumbnails/20.jpg)
20
Box SHADOW
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 21: WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bfb51a28abf838c9d9db/html5/thumbnails/21.jpg)
21
Border styles
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 22: WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bfb51a28abf838c9d9db/html5/thumbnails/22.jpg)
22
Border radius
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 23: WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bfb51a28abf838c9d9db/html5/thumbnails/23.jpg)
23
opacity
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 24: WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bfb51a28abf838c9d9db/html5/thumbnails/24.jpg)
24
• Header• Footer• Nav• Aside• Section• Article
HTML 5 Semantic layout tags
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
• Hgroup• Figure• Figcaption
![Page 25: WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bfb51a28abf838c9d9db/html5/thumbnails/25.jpg)
25
Div layout
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 26: WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bfb51a28abf838c9d9db/html5/thumbnails/26.jpg)
26
Html5 sematic tag layout
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 27: WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bfb51a28abf838c9d9db/html5/thumbnails/27.jpg)
27
CSS RESETS
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
![Page 28: WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bfb51a28abf838c9d9db/html5/thumbnails/28.jpg)
28
Popular CSS RESETS
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
• Meyers• Toucan• YUI• “poor-man’s”
![Page 29: WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bfb51a28abf838c9d9db/html5/thumbnails/29.jpg)
29
Poor man’s reset
GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE
html, body { padding: 0; margin: 0; }html { font-size: 1em; }body { font-size: 100%; }a img, a:link img, a:visited img { border: 0; }
![Page 30: WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB](https://reader035.vdocuments.mx/reader035/viewer/2022062805/5697bfb51a28abf838c9d9db/html5/thumbnails/30.jpg)
30 GENERAL ASSEMBLYWEB DEVELOPMENT IMMERSIVE