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.

Box Model and Page Layouts


Published on

Published in: Business, Technology
  • Be the first to comment

Box Model and Page Layouts

  1. 1. CSS Box Model and Page Layouts
  2. 2. Box Model Every web page element is contained in a box with the following components: • The core content • Padding around the Content • Border around padding to delineate the visible area. • Margin around the border that separates it from other content boxes.
  3. 3. Box Model Margin Border Padding Width Height Content
  4. 4. Calculating Content Width Total content width is calculated as follows: Width of content + right-padding + left-padding + right-border + left-border Border Padding Content 10 px 10 px 20 px Width = 200px 20 px 200+20+20+10+10 = 280 px
  5. 5. Calculating IE Box Width IE calculates the content box width as follows: * Content = content + borders + padding Border Padding content 10 px 10 px Width = 140 px 20 px 20 px Width (200 px)
  6. 6. Boxes Two types of boxes: Block: Generated by HTML like P, DIV, Header tags, etc. Inline: Generated by actual content (images and text), and inline elements like the <strong> and <em> tags.
  7. 7. Containing Blocks Block boxes can contain other boxes within them. <div id=quot;boxquot;> Inline Block First line of text Containing Block <p>Paragraph of text</p> </div>
  8. 8. Normal Flow • Normal browser behaviour. • Everything defaults to the left unless otherwise modified. • Block boxes flow vertically from top to bottom in their containing blocks. • Inline boxes flow left to right. • Vertical margins are collapsed.
  9. 9. Float • Introduced to enable positioning of elements to left or right, and have content flowing around them. • Now used to position boxes for layout purposes. • Top of the floated box is aligned with the top of the inline text so other content flows around it. • All floated boxes should have a width defined. • Vertical margins of a floated box are not collapsed.
  10. 10. Clearing Floats • The quot;clearquot; property is used to push down content that follows a floated box. • Can take the following values: left, right, both