1 / 24

The Box Model

The Box Model. Putting layouts together with CSS. The Box Model. How would you describe a box? Container? Tags or elements are “containers” <p> </p> puts the text it contains into paragraph form.

maeve
Download Presentation

The Box Model

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. The Box Model Putting layouts together with CSS

  2. The Box Model • How would you describe a box? • Container? • Tags or elements are “containers” • <p> </p> puts the text it contains into paragraph form.

  3. The perimeter of each of the four areas (content, padding, border, and margin) is called an "edge", so each box has 4 edges: Box Model • content edge or inner edge • The content edge surrounds the element's rendered content. • padding edge • The padding edge surrounds the box padding. If the padding has 0 width, the padding edge is the same as the content edge. The padding edge of a box defines the edges of the containing block established by the box. • border edge • The border edge surrounds the box's border. If the border has 0 width, the border edge is the same as the padding edge. • margin edge or outer edge • The margin edge surrounds the box margin. If the margin has 0 width, the margin edge is the same as the border edge.

  4. Box Model diagram

  5. Example in Class • Applying the Box model • Adding an image • Floating • Note some differences between Firefox and IE • Useful for seeing the immediate results http://www.w3schools.com/css/tryit.asp?filename=trycss_text-indent

  6. Box Model properties • Padding • Negative values • CSS shorthand: top right bottom left • Margin • Border

  7. dimension • Width • Height

  8. Positioning • The Positioning properties allow you to specify the left, right, top, and bottom position of an element. • It also allows you to set the shape of an element, place an element behind another, and to specify what should happen when an element's content is too big to fit in a specified area.

  9. Normal Flow • Default behavior of a web browser • Rendered according to what order the elements (like <div> and <p> are listed in the html.doc) • Example with float

  10. Positioning: Four Ways of Placing • Static • Absolute • Relative • Fixed

  11. position: static; • Static positioning is simply placing a box in the normal flow. • Default behavior of an unpositioned box • Rarely used except to override anotehr rule

  12. position: absolute • NOT in the normal flow • Positioned relative to the element that contains it. • (if there is no element, it will be positioned relative to the <body> tag)

  13. position: relative; • Positioned to the normal flow • Relative to original position

  14. position: fixed; • Relative to browser, not containing block. • Pulls out of the normal flow. • “carved into rock” • Wont resize

  15. Positioning properties

  16. Floating • In the normal flow • Allows text to flow around the box. • Can’t be manipulated like other positioned boxes with left: 20; etc.

  17. Floating boxes • Determines where object is relative to the parent flow. selector { float: right ; } Possible values: left | right | top | bottom | inside | outside | start | end | none

  18. Floating <style type="text/css"> p { width: 24em } #l1 { float: left; width: 8em; height: 3em } #l2 { float: left; width: 4em; height: 6em } #r1 { float: right; width: 6em; height: 9em } #l3 { float: left; width: 7em; height: 9em } #r2 { float: right; width: 3em; height: 5em } </style>

  19. Length Units • {margin-right: 24px } • The number can be an integer or a decimal fraction, and can be preceded by + or -. • Units can be absolute or relative: • Absolute: mm, cm, in, pt, pc (millimeters, centimeters, inches, points, picas) • Relative: em, ex, px (the element's font height, the element's x-height, pixels)

  20. Z-index • Z-index is used to specify the stacking order of the positionable elements. • The number value may be positive or negative, but MUST be an integer. • Default z-ordering of elements in a document is back-to-front in the order of their appearance in the HTML. • An element with property z-index: 3 is going to overlap a z-index:1

  21. Overflow • Scroll • Auto • Hidden • Visible p{ overflow: auto; width: 200px; height: 300px; }

  22. IE, i.e. “headache” • Box model discrepancies. • CSS Standards determine that • “width” = width of content • IE versions before 6 see it differently • “width” = padding+border+width of content

  23. Box Model Hack: IE hack • The name says it all. Just remove the padding/borders from the problem box, nest a second box inside the first, and put the padding/borders and the content within that nested box. End of problem. It looks like this if you are using two divs: • div { width: 100px; } div .i { padding: 1em; } <div> <div class="i"> Text </div> </div> • If used while you have two nestled elements anyway, then the only negative effect of this solution (a single extra div in the HTML) is a non-issue. The major benefit of this method is that it works just about everywhere.

  24. Validating your CSS • http://jigsaw.w3.org/css-validator/validator-uri.html

More Related