Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS Box Model

2,699 views

Published on

Published in: Technology
  • Be the first to comment

CSS Box Model

  1. 1. CSS BOXES &DIMENSIONSAdvanced CSS techniques
  2. 2. the box model• All HTML elements are rendered as boxes• Stylesheets can control how to display these boxes (color, placement, etc)• There arepaddingproperties of boxes: border, 3 basic and margin
  3. 3. BORDERSborder-width:3px;border-style:dashed;border-color:green;border-left-width:thick;border-bottom-style:solid;border-right-color:blue;
  4. 4. MARGINSmargin:5px;margin-top:30%;margin-bottom:-50px;margin-left:auto;margin-right:auto;
  5. 5. PADDINGpadding:5px;padding-top:10%;padding-bottom:2em;padding-left:30px;padding-right:2.5em;
  6. 6. box model shortcuts• padding:5px; all sides 5px• margin:5px 2px; top & bottom=5px, left & right 2px• border:1px 2px 3px; top=1px, left & right=2px, bottom=3px• padding:7px 3px 1px 6px; (clockwise from top)
  7. 7. DIMENSIONS• The size of the box can be changed using these properties: • width:80% • height:300px
  8. 8. Add all thevalues to getthe actualdimensions ofthe box
  9. 9. Question 01width:300px;height:100px;border:10px  2px  3px;
  10. 10. Question 01 WIDTH HEIGHT304  px 113  px
  11. 11. Question 02width:900px;height:35px;border:0px  1px  1px  10px;padding:20px
  12. 12. Question 02 WIDTH HEIGHT951  px 76  px
  13. 13. Question 03width:20em;height:8em;padding:2em;default  font  size=16px
  14. 14. Question 03 WIDTH HEIGHT(24  em) (12  em) 384  px 192  px
  15. 15. Question 04width:960px;height:180px;padding:5px;margin-­‐right:20px;padding-­‐left:20px;
  16. 16. Question 04 WIDTH HEIGHT1010  px 190  px
  17. 17. Question 05width:15.5em;height:2em;border:0.5em  1.2em  blue;default  font  size=10px
  18. 18. Question 05 WIDTH HEIGHT(17.9em)   (3  em)   179  px 30  px
  19. 19. Question 06width:440px;height:270px;margin:10px;padding:12px;border:3px  4px  0px  1px;
  20. 20. Question 06 WIDTH HEIGHT489  px 317  px
  21. 21. SPEED TEST 01 <div id="cool"> <p>this box is cool</p> </div> <div id="hot"> <p>this box is hot</p> </div>
  22. 22. speed test 01
  23. 23. speed test 01 #cool { background-color:blue; width:500px; height:200px; } #hot { background-color:red; width:200px; height:200px; }
  24. 24. speed test 02
  25. 25. speed test 02 #cool { background-color:blue; width:500px; height:200px; padding:10px; } #cool p { border:5px solid white; padding:10px; }
  26. 26. SPEED TEST 03
  27. 27. speed test 03 #hot { background-color:red; width:200px; height:200px; border-width:10px; border-style:dotted dashed; margin-left:520px; margin-top:-220px; }
  28. 28. speed test 04
  29. 29. speed test 04 #hot p { width:100px; border:3px solid yellow; margin-left:auto; margin-right:auto; font-size:30px; padding:5px; }
  30. 30. types of boxes• HTML boxes can be categorized into two types: 1. Block 2. Inline• They can be controlled by the CSS property display
  31. 31. BLOCK BOX• Occupies the whole width of the container element• Has whitespace before and after it• Dimensions are <p> <h1> to <h6> <div> <ul> <ol> <li> controllable
  32. 32. inline box• Only as wide as its content• Flows with text lines• Dimensions aren’t easily controllable <a> <span> <strong> <em> <img>
  33. 33. inline vs block
  34. 34. speed test 05<ul><li><a href="#">Sisig</a></li> <li><a href="#">Sinigang</a></li> <li><a href="#">Tapsilog</a></li> <li><a href="#">Kaldereta</a></li> <li><a href="#">Adobo</a></li> <li><a href="#">Bistek</a></li> <li><a href="#">Mechado</a></li> <li><a href="#">Laing</a></li></ul><a href="#">Back to Home</a>
  35. 35. Speed Test 05
  36. 36. Speed Test 05
  37. 37. speed test 05 ul#navi { list-style:none; margin:0; padding:0; }
  38. 38. Speed Test 05
  39. 39. speed test 05 ul#navi li a{ font-family:Impact; text-decoration:none; }
  40. 40. Speed Test 06
  41. 41. speed test 06 ul#navi li a{ text-decoration:none; border-left:5px solid orange; border-right:5px solid orange; padding:5px; }
  42. 42. Speed Test 07
  43. 43. speed test 07 ul#navi li a:link, ul#navi li a:visited { color:black; }
  44. 44. Speed Test 08
  45. 45. speed test 08 ul#navi { width:100px; } ul#navi li a{ display:block; }
  46. 46. Speed Test 09
  47. 47. speed test 09 ul#navi li a{ margin-top:5px; text-align:center; }
  48. 48. Speed Test 10
  49. 49. speed test 10 ul#navi li a { text-transform:uppercase; } ul#navi li a:hover{ color:white; background:red; }

×