15 common sense of creating Web pages with CSS

First of all, we should understand that using DIV+CSS to do Web page typesetting is not to change the label and then go to the form of typesetting, but the content of the Web page production and performance separation.

First of all, we should understand that using DIV+CSS to do Web page typesetting is not to change the label and then go to the form of typesetting, but the content of the Web page production and performance separation.
1:ID is used to identify the individual elements of a page and the structural elements of a persistent row. Easy JS Invocation, the class used to identify the same page a repeatable definition uses the structural element ID and class naming needs to be independent of presentation: leftcontent and use meaningful definitions: 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 classes when the structure of a 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 identities in inline elements
4:For the basic default way of the page, you can select the Universal selector (* identity) to define * {padding:0; margin:0;}
5:The 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 segmentation color layout style forms can be separated so it is more convenient for later modification and style design
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 not related to 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)
Ten: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;
One :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.
A :Positioning of background images: Only talk about percentages Background:url (image-url.gif) no-repeat 20% 30% 20%: overlap The image x Axis 20% with the parent element x axis 20% 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: _fcksavedurl= "" 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
:Small icons sometimes give a lot of color to the page, use before remember to plan a good whole to a large picture, this can reduce the number of server requests.