Shape of the Day:

• Continue working with the Box Model

Website of the Day:

http://codevember.xyz/ – See what strong web developers can create based on a one-word theme!

1. Box Model Review

• How would you describe the box model in your own words?
• Specify the three box model properties.
• True or false: You can add a background colour and a background image to any element through the box model.
• True or false: You can use height and width properties through the box model.

2. Box Model Practice #3

•  Continuing with the same webpage from yesterdays lesson (Box Model 2) work through the following:
  • Content’s true width: Browsers automatically add margins, borders, and padding to the width of content on a page. Eg – content that is 100 x 100 pixels that has 5px margins, 2px border, and 3px padding is actually 100+5+2+3+3+2+5 = 120 width and 120 height.
  • By Default in the CSS box model, the width and the height is only applied to the box of content of that element. A special CSS property and value, box-sizing:border-box; makes the browser include the padding and the border in the content’s width and height. Check out some examples here
  • As you launch your web page in Chrome, right click and go to inspect. Note when you hover over different components of the page, you will see the box model in full effect. Roll your mouse over the margins, borders, and padding to check and see how the browser is computing the actual width of the image you added. Look at the width and height values.
  • Try adding box-sizing: border-box to your img CSS and see how the changes are computed with width.
  • Why does this matter in terms of sizing elements on your webpage?