Book "Div+css Business case and Web page layout development explaining" _ Box model, make logo and banner_ handy notes

First, box models (box model)

One box and 4 parts: Content,padding(fill),border(border), and margin(outer boundary)

There are two types of box models:

(1) standard box model

(2) IE box model (content includes padding and border)

In order to unify the standard, make the webpage compatible with each browser, must use the standard box model

How to use? A: add DOCTYPE statement at the top of the page

Second, the box model structure detailed

1. CSS border (border) properties

Border has 3 properties: Border-width (width),border-style (style),border-color (color)

(1) Width:

(1) unit value (1px) or keywords (thin, medium, thick)

(2) If not set, the default is medium, the General browser resolves to 2px

(3) It is recommended to use unit values to define absolute

(2) Style:

None, solid, hidden, dotted, dashed, double, groove, Ridge, inset, outset, etc.

3 Ways to do it:

(1) Border:width style color (4 sides same)

Example: border:1px solid #000000

(2) Border-left: Width style color(4 sides different)

Example:border-left:1px solid #000000

(3) Border-left-width:Another Way to "(2) "

Border-left-style:

Border-left-color:

For example:

border-left-width:1px;

Border-left-style: solid;

Border-left-color: #000000;

Note:

In the page app, the set of border also occupies the page space. So, when the layout is accurately calculated,

Even in the case of border 1px, it is important to take into account the influence of border on width and height.

2. CSS padding (padding) properties

Properties: Padding (padding-top, padding-right, Padding-bottom, padding-left)

Property value: unit value or Percent

2 ways to do it:

(1) Padding:top right bottom left (up and down)--clockwise

Example: padding:10px 20px 30px 40px;

(2) Padding-top:

Padding-right:

Padding-bottom:

Padding-left:

For example:

padding-top:10px;

padding-right:20px;

padding-bottom:30px;

padding-left:40px;

3. CSS outer boundary (margin) properties

Properties: Margin (margin-top, margin-right, Margin-bottom, margin-left)

Property value: unit value or Percent

2 ways to do it:

(1) Margin:top right bottom left (up and down)--clockwise

Example: margin:10px 20px 30px 40px;

(2) Margin-top:

Margin-right:

Margin-bottom:

Margin-left:

For example:

margin-top:10px;

Margin-right:20px;

Margin-bottom:30px;

margin-left:40px;

Note:

Margin is a very useful CSS property, in the actual application, you can also set its value to negative, in order to achieve the requirements of the page layout.

Book "Div+css Business case and Web page layout development explaining" _ Box model, make logo and banner_ handy notes