css3 - CSS3 BingLi 1 CSSBoxModel 2 Content: Padding:.Transparent Border: Margin:.Transparent 3 widhtandheight>siz

css3 - CSS3 BingLi 1 CSSBoxModel 2 Content:...

This preview shows page 1 out of 19 pages.

Unformatted text preview: CSS 3 Bing Li 1 CSS Box Model 2 Content : where the text and image appear Padding : clears an area around the content. Transparent Border : A Border that goes around the padding and content Margin : Clears an area outside the border. Transparent 3 Width and Height of an Element widht and height ­> size of content area Size of one element ­> content + padding + border + margin e.g. width = width + padding‐left + padding‐right + border‐left + border‐right + margin‐left + margin‐ right 4 Border <p style="border:1px black solid"> demo </p> demo 5 border‐style dotted dashed solid double groove ridge inset outset none : no border, default hidden : the same as none , except in border conflict resolution for table element initial inherit 6 border‐width medium thin thick length initial inherit 7 border‐color color transparent initial inherit 8 Individual Sides and Shorthand border‐top border‐left border‐bottom border‐right border p { border: 1px solid black; } 9 Rounded Borders length | % one value two values : top­left & bottom­right, top­right & bottom­left corner three values : top­left, top­right & bottom­left, bottom­right corner four values: top­left, top­right, bottom­right, bottom­left corner initial inherit 10 Margin margin margin‐left margin‐right margin‐top margin‐bottom 11 margin length % auto : The browser calculate a margin initial inherit 12 margin: 10px 5px 15px 20px; top is 10px; right is 5px; bottom is 15px; left is 20px; margin: 10px 5px 15px; top is 10px; right and left are 5xp; bottom is 15px; margin: 10px 5px; top and bottom are 10px; right and left are 5px; margin: 10px; all sides are 10px; 13 margin‐left:auto; margin‐right:auto; <div style="background‐color:black; height:400px;"> <div style="background‐color:white; height:400px; width:300px;margin‐left:auto;margin‐right:auto;"> </div></div> 14 Padding padding padding‐left padding‐right padding‐top padding‐bottom 15 padding length % initial inherit 16 padding: 10px 5px 15px 20px; top is 10px; right is 5px; bottom is 15px; left is 20px; padding: 10px 5px 15px; top is 10px; right and left are 5xp; bottom is 15px; padding: 10px 5px; top and bottom are 10px; right and left are 5px; padding: 10px; all sides are 10px; 17 Height and Width height max‐height min‐height width max‐width min‐width 18 auto length % initial inherit 19 ...
View Full Document

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture