1 07-the box-model
-
Upload
apnwebdev -
Category
Technology
-
view
448 -
download
1
description
Transcript of 1 07-the box-model
![Page 1: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/1.jpg)
The Box Model
Colin Gourlay & Kevin Vanderbeken
![Page 2: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/2.jpg)
Today:
The Box Model
Container Elements
Other Text Features
![Page 3: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/3.jpg)
introduction
![Page 4: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/4.jpg)
an aside on tables...
![Page 5: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/5.jpg)
the CSS layout model
a.k.a.
the box model
![Page 6: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/6.jpg)
![Page 7: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/7.jpg)
margin
![Page 8: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/8.jpg)
outline
![Page 9: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/9.jpg)
border
![Page 10: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/10.jpg)
padding
![Page 11: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/11.jpg)
content
HEGHT
WIDTH
![Page 12: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/12.jpg)
more detail + code examples
![Page 13: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/13.jpg)
margin
![Page 14: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/14.jpg)
margin-top: 3px;margin-right: 5px;margin-bottom: 7px;margin-left: 2px;
...or...
margin: 3px 5px 7px 2px;
![Page 15: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/15.jpg)
outline
![Page 16: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/16.jpg)
outline-color: #999999;outline-style: dotted;outline-width: 5px;
...or...
outline: #999999 dotted 5px;
nonedotteddashedsoliddoublegrooveridgeinsetoutset
![Page 17: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/17.jpg)
width & height
![Page 18: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/18.jpg)
width: 200px;height: 120px;
![Page 19: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/19.jpg)
border
![Page 20: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/20.jpg)
border-color: #00FF00;border-style: dotted;border-width: 5px;
...or...
border: 5px solid #00FF00;
nonedotteddashedsoliddoublegrooveridgeinsetoutset
...but wait, there’s more!...
![Page 21: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/21.jpg)
border-top-width: 2px;border-right-width: 5px;border-bottom-width: 2px;border-left-width: 5px;
...and...
border-top: 2px solid #00FF00;
![Page 22: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/22.jpg)
padding
![Page 23: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/23.jpg)
padding-top: 3px;padding-right: 5px;padding-bottom: 7px;padding-left: 2px;
...or...
padding: 3px 5px 7px 2px;
![Page 24: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/24.jpg)
recap
![Page 25: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/25.jpg)
margin
![Page 26: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/26.jpg)
outline
![Page 27: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/27.jpg)
border
![Page 28: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/28.jpg)
padding
![Page 29: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/29.jpg)
content
HEGHT
WIDTH
![Page 30: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/30.jpg)
text featuresworth mentioning
![Page 31: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/31.jpg)
line height
![Page 32: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/32.jpg)
line-height: 24px;
![Page 33: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/33.jpg)
text alignment
![Page 34: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/34.jpg)
text-align: left;text-align: right;text-align: center;text-align: justify;
![Page 35: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/35.jpg)
next week...
![Page 36: 1 07-the box-model](https://reader033.fdocuments.in/reader033/viewer/2022061220/54bb641a4a79596d238b457c/html5/thumbnails/36.jpg)
More on The Box ModelTM
Different boxes: block & inline
Box interaction: floats & positioning