CSS to make Web page summary of some experience

Letting you use div+css typesetting is not to let you use a different label and then follow the form to format

But the separation of content and performance

1:id a structural element that identifies a page's individual elements and persistent rows facilitates JS invocation

Class is used to identify the structural element ID used by the same page repeatable definition and the naming of the class is not related to the representation: Leftcontent uses a meaningful definition: Sidebar and so on. The naming style follows "Hump case (a marker is made up of multiple words except the first letter of the first letter is capitalized)"

2: Avoid abusing the class when the structure of the type needs to behave differently, remember what is a cascading style sheet the p a H1 in the concrete structure can be used as follows: Div.sidebar p{} is defined as the descendant selector +id or the class selector combination method.

3:div and Span IV (block-level boxes) for grouping span (inline boxes) for block-level elements to group identity in-line elements

4: For the basic default method of the page can choose the Universal selector (* logo) to define * {padding:0; margin:0;}

5:body can also add IDs and classes so that you can add special styles to them.

6: Import style sheet in style sheet need to override rule at top to override import style for itself style

7:CSS style sheet finely differentiated color layout style forms can be separated so it's more convenient to change and style design later

8: Box model: Inside → outside
Content←width height (supplemental: height is only meaningful if the parent element defines an absolute height)
Border
Padding (inside patch)-"fill"
Background-image
Background-color
Margin (outer patch)-"blank edge" transparency can be negative

Remember: In CSS, width refers to the breadth of the content area.
Ie/win and Box models:

Ie5.5/ie6 weird mode: Element box Total width =content.width+margin.width

firefox/opera/.. : Element Box Total width =content.width+padding.width+border.width+margin.width

The difference is: ie5.5/ie6 in weird mode width= effective content.width+padding.width+border.width patches and borders are counted within the width of the content
#select {width:750px;padding:10px;border:5px} ie Weird mode: total width: 750px ff/op:780px

IE Weird mode: effective content width: 750-20-10 ff/op:750
IE6 Normal mode: same to Ff/op
How to: Use the padding itself in a parent element or child element without using the
Blank Edge Overlay: When two blank edges overlay, top or bottom will overlay the actual blank edge height = Blank side Large value
Example: <div id= "Top" style= "margin:0 0 10px 0; " ></div><div id= "Bottom" style= "margin:20px 0 0 0;" ></div>

Blank Edge height of 20px
But if you add a border or fill it at this point, it won't stack.

Positioning mechanism//

9: Relative positioning (relative): absolute positioning relative to its default initial position: relative to the parent element or canvas, HTML elements that are independent of the document flow can override other elements using Z-index to control its hierarchy. Ie5.5/ie6 right bottom when you need to set the width of the box after the bottom of the canvas to position
Absolute Positioning (absolute)
10:float float: Remember: "floating elements in standard browsers do not occupy peripheral container space" When you understand this, you'll see why IE and Firefox behave differently. IE5.5, IE6 floating elements still occupy the perimeter container space

For example: How in IE under the Feeter normal under Firefox is running up? ^_^ clear the float.

ie when float and text-align are defined in the same direction, there are double errors:

select{float:left;text-align:left;margin:0 10px;}
Actual left margin-left:20px;ff/op:10px solution: plus display:inline;

11: Thorough understanding of clear floating
Clear:none, left, right, both,
Indicates which edges of the current box element should not be next to the floating box
Understanding the performance of float in 10 in different browsers you will know how to use it clearly.
12: Background image positioning: Only talk about the percentage background:url (image-url.gif) no-repeat 20% 30% 20%: The image x Axis 20% and the parent element x axis 20% coincide y empathy top=0% bottom=100% left= 0% right=100% center=50%

13: Sliding Door/

The left and right two div backgrounds are defined to be longer than the normal background images. Left background location: Right Center

The external control container width is generally less than or equal to two backgrounds and so when the content dynamically changes the right background image will feel like sliding on the left background image, hence the name.
This can also be achieved: <div id= "nav" ><ul><li><a href= "index.html" ><span> home </span></a> </li></ul></div> CSS:

#nav A{float:left;background:url (".. /images/navleft.gif ") No-repeat left Top;padding:0;text-decoration:none; Cursor:hand;}
#nav a span {Float:left;display:block;background:url ("...). /images/navright.gif ") No-repeat right top;padding:5px 36px 5px 40px;color: #ffffff}

The principle is similar, pay attention to the background image localization.

14: The Perfect Center layout: body{text-align:center;mini-width:760px;
Div#wrapper{margin:0 auto;text-align:left;width:750px;}

Mini-width IE does not know this is for the old browser, but this value is more than the actual page you need to be OK

15: Small icons sometimes give the page a lot of use before remember planning good whole to a large picture this can reduce the number of server requests.