CSS Learning Note two

Table Style:

caption{table title

Caption-side:bottm; To bottom display

}

table{

Border-collapse:collapse; Border overlap

}

=============================================================================================================== =========================

p{

Cursor:pointer; Mouse over time-varying fingers

}

a{

Text-decoration:none; Remove Hyperlink underline

}

ul{

List-syle-type:none; Remove the opening symbol

}

=============================================================================================================== =======================

Block-level elements:

1. The contents of the block element are displayed by default in the upper left corner.

2. The block element occupies a single line (existing in the document flow).

Common block elements:

Div, p, H1-h6, Ol (LI), UL (LI), DL, DT, DD, body, table, Pre, form

inline element (inline Element):

1, Height width does not work.

2, will not occupy a single line.

Common inline elements:

A, span, input, lable, IMG, textarea, select

span{

Display:block; Inline elements switch to block-level elements

}

#d1 {

Float:left block element floats side-on-left (with multiple block elements, you need to set float at the same time)

Clea:left Clear Floating effects

}

=============================================================================================================== =======================

Box Model:

Padding (inner spacing)

Margin (outside spacing)

#d1 {

width:100px;

height:100px;

Border:solid 1px red;

padding:10px; Increase the internal spacing up or down 10px

padding:10px 20px; Increase the internal spacing up to 10px, increase the 20px around

padding:10px 20px 30px; Increase the inner spacing above 10px, add 20px to the left, add 30px below

padding:10px 20px 30px 40px; The inner spacing increases clockwise from the top 10,20,30,40px

padding-top:30px internal spacing increased from above 30px

margin:10px outer spacing is the same as inside spacing

}

Generally by default, the browser will add space to the label, if you want the label shelf display, you need to add in the CSS file

*{

padding:0px;

margin:0px;

}

How do I get the block element label centered:

#d1 {

margin:0px Auto;

}

How do I let the list in the Block element label appear centered:

ul{

List-style-type:none;

width:51px;

height:44px;

margin:0px Auto;

}

Spacing is also useful for inline elements

CSS Learning Note two