Basic box model attributes

<! DOCTYPE HTML> 
<HTML lang = "EN"> 
<head> 
    <Meta charset = "UTF-. 8"> 
    <title> box model </ title> 
    <-! Border (border) margins (margin) the inner edge distance (padding) content area (content) -> 
    <style> 

    # Box10 { 
        width: 100px; 
        height: 200px; 
        background-Color: BlueViolet; 
        / * border: Red Dashed 10px; * / 
        border: 10px Red Solid; 
        / * border: Red Dashed 10px; * / 
        / * border: Red dotted 10px; * / 

        / * box model contents * / 
        / * overflow: hidden; * content is cut, the rest invisible * * /!! 
        / * overflow: ! visible; * content is not cropped, will appear outside the frame element * /! 
        / * overflow: Scroll; * content is cut, the rest of the flow bar display * /!!
        / * overflow:! auto; * If the content is trimmed, the browser displays other content to flow strip * * /! 
        / * overflow-X: Scroll; * / 
        / * overflow-Y: Scroll; * / 
        / * text-overflow : clip; * modify the text * * /!! 
        / * text-overflow: ellipsis; * ellipsis to represent text * * /!! 
        / * text-overflow: String; * / 
    } 
/ * frame element * / 
/ * border shorthand property for the four sides of the attribute is set in a statement. 
border-style style elements for setting all borders or sides separately styling 
width of all border border-width shorthand for element attributes, or individually set the width of each side frame 
border-color attribute of the element shorthand all colors visible part portion, provided respectively at the four color or 
border-bottom property shorthand for all attributes is set to a border declaration 
border-left shorthand property for all attributes set to the left border of a declaration . 
border-right property shorthand for all attributes set to the right border of a declaration 
border-top shorthand property for all properties on the frame is set to a declaration 
frame border:
Linear (solid / dashed / dotted / double ) thickness (unit + value) color; 
right border border-right: 
linear (solid / dashed / dotted / double ) thickness (unit + value) color; 
left border border-left: 
linear (solid / dashed / dotted / double ) thickness (value + unit) color; 
top border border-top: 
linear (solid / dashed / dotted / double ) thickness (value + unit) color; 
bottom border border-bottom: 
linear (solid / dashed / dotted / double) thickness (unit + value) color; 
solid: solid line, dashed: broken line, dotted: the dotted line, double: double 

border-top-style / border- top-width / border-top- --- Color> border-Top 

border-style-right / right-border-width / border-right-Color ---> border-right 

border-bottom-style / border-bottom-width / border-bottom-Color- -> border-bottom 

border-style-left / left-border-width / border-left-Color ---> border-left

-style border / border-width / ---- Color-border border 


padding method using 
padding: the region between the filler, the content of the element border element, called padding. 
Usage: 
used to adjust the positional relationship between the contents in the container 
to adjust the positional relationship in the sub-element of the parent element. Note: padding attributes need to be added on the parent element. 
extra padding values are above the original size of the element, such as to ensure that the same element size, padding property value to be added after the element from the subtracted wide or high. 

Attribute value in four ways: 
  four values: right lower left {padding: 10px 20px 30px 40px; } 
  three values: the lower left {padding: 10px 20px 30px;} 
  two values: the vertical and horizontal {padding: 10px 20px; } 
  a value: four directions {padding: 2px;} 

Note: 
may be provided a separate fill direction 
such as: the direction of the padding-top: 10px; rightward pahdding-right: 10px; 
downward direction padding-bottom: 10px; padding-left direction -left: 10px; 

margin to use 
margin: the distance between the box and the box 
attributes: 
margin 
boundary: margin Top- 
margin-right: right border
margin-bottom: lower bound 
margin-left: left border 

attribute value in four ways: 
  four values: right lower left {margin: 10px 20px 30px 40px; } 
  three values: the lower left {magin: 10px 20px 30px;} 
  two values: the vertical and horizontal {margin: 10px 20px;} 
  value: four directions {margin: 2px;} 

Description: 
       {margin: Auto 0;} laterally centered in the browser 
may be provided a single direction boundary, such as: the boundary margin-top: 10px; right border margin-right: 10px; 
lower boundary margin-bottom: 10px; left border margin-left: 10px; 


computation of a box the size of 
formula: 
width = left margin + left border + left padding + SUMMARY width 
height = upper and lower margin + vertical border + vertical padding + content height 

, for example: a box margin is 20px, border of 1px, padding is 10px, content of width 200px, height 50px 
width = margin * 2 + border * 2 + padding * 2 + content. width = 20 * 2 + 1 * 2 + 10 * 2 +200 = 262px
High = margin * 2 + border * 2 + padding * 2 + content.height = 20 * 2 + 1 * 2 + 10 * 2 + 50 = 112px 

Note: 
Set padding and margin will support big box, how to solve? 
The margins, padding, border size is recalculated box width and height of the contents 


* / 
</ style> 
</ head> 
<body> 
<div ID = "Box10"> 
  3.1415926265358979323846264338327950288419716939969513456456456456456456456798797897 </ div> 
</ body> 
< / html>
Basic box model attributes

Guess you like
