Website Div CSS design experience

The use of Div + CSS for website design is not to change the tag and then typeset according to the form, but to achieve the separation of content and performance.

1: ID is used to identify individual elements of the page and structural elements of persistent rows to facilitate JS calls.

The class is used to identify the structural element IDs that can be repeatedly defined on the same page. The class name must be unrelated to the form of expression: leftcontent and a meaningful definition method: sidebar. Naming rules follow the "upper and lower case" Naming rules (the flag consists of multiple words, except the first letter and lower case )"

2: Avoid class abuse when the type structure needs to be different, remember what is p a H1 in the specific structure of the stacked style sheet, and so on. You can use the following method: div. sidebar P {} defines the combination of descendant selector + ID or class selector.

3: div and span IV (Block-level box) are used to group block-level elements. span (in-row box) is used to group and identify in-row elements.

4: for the basic default page mode, you can select the General selector (* ID) to define * {padding: 0; margin: 0 ;}

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

6: to import a style sheet, you must overwrite the style at the top of the style sheet to overwrite the imported style.

7: CSS style sheet refined color layout style forms can be separated to facilitate future modification and style design.

8: Box Model: Internal> external

The following is a reference clip:
Content fill width height (Supplement: height % makes sense only when the parent element defines the absolute height)
Border
Padding (inner patch)-"fill"
Background-Image
Background-color
Margin (external patch)-"blank side" transparent can be negative

Remember: in CSS, width refers to the width of the content area.

IE/win and box model:

Ie5.5/IE6 in weird mode: total width of the element box = content. Width + margin. Width

Firefox/Opera/...: total width of the element box = content. Width + padding. Width + border. Width + margin. Width

The difference is that in ie5.5/IE6 weird mode, width = valid content. Width + padding. Width + border. Width patch and border are included in the content width.

# Select {width: 750px; padding: 10px; Border: 5px} ie weird mode: total width: 750px FF/OP: 780px

IE weird mode: Valid content width: 750-20-10 ff/OP: 750

IE6 in Normal Mode: equivalent to FF/OP

Solution: Use padding in parent element or child element instead of padding.

Blank side superposition: When two blank sides are superimposed, the top or bottom side will overlay the actual blank side height = the value of the blank side

Example:

The following is a reference clip:
The height of the blank side is 20px.

However, if you add a border or fill the border at this time, it will not be superimposed.

// Positioning mechanism //

9. Relative: relative to its default initial position absolute positioning: relative to parent-level elements or canvases, HTML elements unrelated to document streams can overwrite other elements and use Z-INDEX to control their layers. When setting right bottom in ie5.5/IE6, you must set the width and height of the box and then locate the right bottom of the canvas.

Absolute location (absolute)

10: Float floating: Remember: "floating elements in the standard browser are separated from the document stream and do not occupy the peripheral container space." You will understand why IE and Firefox are different. Ie5.5 and IE6 floating elements still occupy the space of peripheral containers

For example, how can I run feeter in IE normally in Firefox?

In IE, a double error occurs when float and text-align have the same direction:
The following is a reference clip:
Select {float: Left; text-align: Left; margin: 0 10px ;}

Actual left-side margin-left: 20px; FF/OP: 10px solution: Add display: inline;

11: thoroughly understand "Clear floating" Clear

Clear: none, left, right, both,

Which of the following elements of the current box should not be placed in a floating box?

After understanding the performance of float in 10 in different browsers, you will know how to use it clearly.

12: positioning of background images: Percentage of Background: url(image-url.gif) No-repeat 20% 30% 20%: same as Y on X axis 20% and parent element x axis 20%, Top = 0% Bottom = 100% left = 0% right = 100% center = 50%

13: Sliding Door/

The left and right div backgrounds are defined as relatively long left background images. Left background orientation: left center right background orientation: Right Center

The width of the externally controlled container is generally less than or equal to two backgrounds, so that when the content changes dynamically, the right background image will feel like sliding on the left background image, hence the name.

This can also be achieved:
Homepage

The following is a reference clip:
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}

Similar principles. Pay attention to background image positioning.

14: Perfect center layout:

The following is a reference clip:
Body {text-align: center; mini-width: 760px ;}
Div # wrapper {margin: 0 auto; text-align: Left; width: 750px ;}

Mini-width IE does not know that this is for the old browser, but this value is better than the actual page size you need.

15: The small icon sometimes adds a lot of color to the page. Remember to plan the whole picture to reduce the number of server requests.