Learn some of the experience of CSS to make Web page summary

The use of div+css typesetting is not to change the label and then follow the form of the layout, but to do the content and performance separation.

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: The style sheet imported style sheet needs to override the rule at the top to override the import style for its own style.

7:CSS style sheet finely differentiated color layout style forms can be separated so that the later changes and style design more convenient.

8: Box model: Inside → outside

以下是引用片段：
content←widthheight(补充：height只有在父元素定义了绝对高度时其%才有意义)
border　
padding（内补丁）-“填充”　
background-image　
background-color　
margin(外补丁)-“空白边”透明可为负值

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

Cases:

以下是引用片段：
<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 the need to set the width of the box is based on the right bottom of the canvas positioning.

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?