The CSS Box Model. Motivation. CSS Box Model. CSE 190 M (Web Programming), Spring 2008 University of Washington

Size: px

Start display at page:

Download "The CSS Box Model. Motivation. CSS Box Model. CSE 190 M (Web Programming), Spring 2008 University of Washington"

Tracy Sims
5 years ago
Views:

The CSS Box Model CSE 190 M (Web Programming), Spring 2008 University of Washington Reading: Chapter 2, sections Except where otherwise noted, the contents of this presentation are Copyright 2008

Motivation want to be able to style individual elements, groups of elements, sections of text or of the page want to create complex page layouts CSS Box Model for layout purposes, every element is

1 The CSS Box Model CSE 190 M (Web Programming), Spring 2008 University of Washington Reading: Chapter 2, sections Except where otherwise noted, the contents of this presentation are Copyright 2008 Marty Stepp and Jessica Miller and are licensed under the Creative Commons Attribution 2.5 License. Motivation want to be able to style individual elements, groups of elements, sections of text or of the page want to create complex page layouts CSS Box Model for layout purposes, every element is composed of: the actual element's content a border around the element padding between the content and the border (inside) a margin between the border and other content (outside) width = content width + L/R padding + L/R border + L/R margin height = content height + T/B padding + T/B border + T/B margin IE6 doesn't do this right, and sucks

2 Document flow - block elements

3 Document flow - inline elements Document flow - a larger example

4 CSS properties for borders h2 { border: 5px solid red; } This is a heading. border: all properties of border on all 4 sides a border is specified as three items: its thickness (specified in px, pt, em, or one of the following general widths: thin, medium, thick ) its style (one of none, hidden, dotted, dashed, double, groove, inset, outset, ridge, solid its color (specified as seen previously for text and background colors) More border properties border-color, border-width, border-style: specific properties of border on all 4 sides border-bottom, border-left, border-right, border-top: all properties of border on a particular side border-bottom-color, border-bottom-style, border-bottom-width, border-left-color, border-left-style, border-left-width, border-right-color, border-right-style, border-right-width, border-top-color, border-top-style, border-top-width: specific properties of border on a particular side Complete list of border properties Border example 2 h2 { border-left: thick dotted #CC0088; border-bottom-color: rgb(0, 128, 128); border-bottom-style: double; } This is a heading. each side's border properties can be set individually if you omit some properties, they receive default values (e.g. border-bottom-width above)

5 CSS properties for padding padding: padding on all 4 sides padding-bottom: padding on bottom side only padding-left: padding on left side only padding-right: padding on right side only padding-top: padding on top side only Complete list of padding properties Padding example 1 p { padding: 20px; border: 3px solid black; } h2 { padding: 0px; background-color: yellow; } This is the first paragraph This is the second paragraph This is a heading Padding example 2 p { padding-left: 200px; padding-top: 30px; background-color: fuchsia; } This is the first paragraph This is the second paragraph each side's padding can be set individually notice that padding shares the background color of the element

6 CSS properties for margins margin: margin on all 4 sides margin-bottom: margin on bottom side only margin-left: margin on left side only margin-right: margin on right side only margin-top: margin on top side only Complete list of margin properties Margin example 1 p { margin: 70px; background-color: fuchsia; } This is the first paragraph This is the second paragraph notice that margins are always transparent (they don't contain the element's background color, etc.)

7 Margin example 2 p { margin-left: 200px; background-color: fuchsia; } This is the first paragraph This is the second paragraph each side's margin can be set individually CSS properties for dimensions p { width: 400px; background-color: yellow; } h2 { width: 50%; background-color: aqua; } This paragraph uses the first style above. This heading uses the second style above. width, height: how wide or tall to make this element max-width, max-height, min-width, min-height: the maximum or minimum size of this element in the given dimension all of these apply only to block elements; ignored for inline elements

8 Centering a block element: auto margins p { margin-left: auto; margin-right: auto; width: 750px; } Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magn aliqua. only works if width is set (otherwise, element occupies entire width of page) to center inline elements within a block element, use text-align: center; instead

9 Top/bottom margin collapse when two block elements appear on top of each other, their margins are collapsed their shared margin is the larger of the two individual margins

10 Floating elements The CSS float and clear properties The CSS float property (reference) img.headericon { float: right; width: 130px; } Borat Sagdiyev (born July 30, 1972) is a fictional Kazakhstani journalist played by British- Jewish comedian Sacha Baron Cohen. He is the main character portrayed in the controversial and successful film Borat: Cultural Learnings of America for Make Benefit Glorious Nation of Kazakhstan. Borat... float can be left, right, or none (default) floating elements are removed from normal document flow underlying text wraps around floating element as necessary

Floating elements diagram Common float bug: missing width I am not floating, no width I am floating right, no width I am not floating, 45% width I am floating right, 45% width

11 Floating elements diagram Common float bug: missing width I am not floating, no width I am floating right, no width I am not floating, 45% width I am floating right, 45% width often floating block elements must have a width property value if no width is specified, the floating element may occupy 100% of the page width, so no content can wrap around it

12 The clear property p { background-color: fuchsia; } h2 { clear: right; background-color: yellow; } Homestar Runner is a Flash animated Internet cartoon. It mixes surreal humour with references to 1980s and 1990s pop culture, notably video games, classic television and popular music. My Homestar Runner Fan Site disallows any floating elements from overlapping this element clear can be left, right, both, or none (default)

13 Clear diagram div#sidebar { float: right; } div#footer { clear: right; }

14 Recall: Firefox Firebug extension