Learn about the confusion in CSS

Learning and sharing of CSS

Learn the CSS knowledge to see more, will understand. This is just the problem found in practice:

A. ??? H1 than Div also big H1 up and down there are margins why not float (now do not know)

two. CSS does not show .... Selector problem? Never understood the selector.

1 /*780=80 =113 a 31=20*/2 3 . Warp{width:780px;margin:0 Auto;Border-left:1px solid #e7e7e7;Border-right:1px solid #e7e7e7;}4 Header{width:100%;Overflow:Hidden;}5 . Logo{margin:0;padding:0;Height:80px;6 Background-color:#3399cc;Color:#fff;7 Line-height:80px;text-indent:36px;8 font-size:30px;9 font-family:"Microsoft Jas Black";Ten} One . Nav-top{width:100px;} A . Nav-top Li{ - text-align:Center; - Margin-top:0 32px; the float: Left; -  -} -  Section{} + . Leftside{width:200px;} - . leftside. Nav-main{Background-color:#3399cc;Color:#fff;text-indent:10px; } + . leftside a:hover{Background-color:#ff0000;text-decoration:Underline;} A . Rightside{} at Footer{}

View Code

Practice Understanding (Be sure to add)

1, page or body set width margin:0 Auto Center content

Try not to set the height; Overflow:hidden hide to avoid full rendering under background color, full screen is blue ...

2, floating to Li is good, UL ol do not consider, Li in a to become block element Display:block; Generally, the floating clear:both should be cleared;

All to use the second kind, Visibility:hidden;height:0;ie is. clearfloat{zoom:1;}

. clearfloat{/Class Selector
Display:block; /* Change to block element */
Clear:both; /* Clear float be sure to set the height to 0*/
Content: "";
Visibility:hidden;
height:0;
}

3,

/* Details background to add no-repeat*/
/* box model written in front */
/* Color try to use 3 digits, not English * *

Try not to * set padding margin to 0;

4 Some have to be in order to range from large to small (and Id,class doesn't matter)

such as: Pseudo-class link hover visited active does not have eggs in order. a:hover{}

body,body,h1,h2,ul,li,header,footer,a,p,h3,h4,h5,{

margin:0;
padding:0;
Color: #333;
Font-family:verdana, Geneva, Sans-serif, "Song Body";
List-style:none;
Display:block;

}

A{text-decoration:none;}
Ul,li{list-style:none;}

* Font font style do not point color block elements
A do not lower the horizontal line
A:hover Horizontal Line Color
P Line Height
Wrap center-Limit width border color, etc.

Head width 100% overflow hidden
Inner element width 100% High 80 font font style indent
Margin floating
Ul
Li outer margin floating

the fun to learn is to share and compare (a sense of accomplishment)!!!

Learn about the confusion in CSS