Getting Started with CSS (3) box model in--CSS

1 areas in the box

The main attributes of a box are 5: width, height, padding, border, margin.

Width is the meaning of "breadth", which refers to the width of the content, not the width of the box.

Height is the meaning of "altitude", the height of the CSS refers to the level of the content, not the height of the box

Padding is the meaning of "inside margin"

Border is "border"

Margin is "outside margin"

true possession width = left border + Left padding + width + right padding + right border 2 width, height

1. box1{

2 width:100px;

3 height:100px;

4 padding:100px;

5 border:1px solid red;

6}

7

8. box2{

9 width:250px;

Ten height:250px;

One padding:25px;

Border:1pxsolid Red; }

3 padding

Padding is the inner margin. The padding area has a background color, and the background-color fills the area within all Boder

Small properties:

1 padding-top:30px; 2 padding-right:20px; 3 padding-bottom:40px; 4 padding-left:100px;

padding:30px 20px 40px 100px; Top, right, bottom, left

padding:20px 30px 40px; Top, right, bottom 、?? And right.

padding:30px 40px;

Cascade large properties with small attributes:

padding:20px; padding-left:30px;

4border

The border has three elements: weight, line style, color. border:1px dashed red;

The border attribute can be disassembled in two different ways:

1 according to 3 elements: Border-width, Border-style, Border-color 2) by direction: Border-top, Border-right, Border-bottom, Border-left