Read the book 'DIV CSS Business Cases and Web Layout Development'_Box model, making logo and banner_Random notes_html/css_WEB-ITnose

1. Box model

A box consists of 4 parts: content(content), padding(padding), border(border) and margin(outer border)

There are two types of box models:

(1) Standard W3C box model

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

In order to unify standards and make web pages compatible with various browsers, the standard W3C box model must be used

How to use it? Answer: Add the DOCTYPE statement at the top of the web page

2. Detailed explanation of the box model structure

1. CSS border (border) attribute

border has 3 attributes: border-width (width), border-style (style), border-color (color)

(1) width:

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

(2) If not set, the default is medium, which is generally parsed by browsers as 2px

(3) It is recommended to use unit values ​​to define absolutely

(2) style:

none, solid, hidden, dotted, dashed, double, groove, ridge, inset, outset, etc.

3 ways to write:

(1) border: width style color (same on 4 sides)

For example: border: 1px solid #000000

(2) border-left: width style color (4 sides are different)

For example: border-left: 1px solid #000000

( 3) border-left-width: [another way of writing (2)]

border-left-style:

border-left-color:

For example:

border-left-width: 1px;

border-left-style: solid;

border-left-color: #000000;

Note:

In page applications, the border set will also occupy page space. Therefore, when accurately calculating the layout,

Even when the border is 1px, the impact of the border on the width and height must be taken into account.

2. CSS padding attribute

Attribute: padding (padding-top, padding-right, padding-bottom, padding-left)

Attribute value: Unit value or percentage

2 ways of writing:

(1) padding: top right bottom left (top right bottom left?? clockwise)

For example: padding: 10px 20px 30px 40px; :

padding-left:

For example:

padding-top: 10px;

padding-right: 20px;

padding -bottom: 30px;

padding-left: 40px; 3. CSS outer border (margin) attribute

attribute:

margin (margin-top, margin-right, margin-bottom, margin -left)

Attribute value:

Unit value or percentage

2 ways to write:

(1) margin: top right bottom left (top right bottom left?? clockwise)

For 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 practical applications, its value can also be set is a negative number to meet the page layout requirements.