Div + CSS Box Model

IEThe series uses Microsoft's box model, while Firefox uses the standard W3C box model.

We can see that the IE box model also has the range of margin, border, padding, and content. Unlike the standard W3C box model, the content part of the IE box model contains border and padding.

 

We can see that the range of the standard W3C box model includes margin, border, padding, and content, and the Content Part does not contain other parts.

The following methods can be used in actual operations to avoid the above differences.

Padding-left: 40px;

Width: 920px! Important; // Firefox

Width: 960px;

 

2,When several Div layers are laid out through float: Left and margin-left, IE6 has a bug. IE6 will double the margin-left of the first layer by default.

3,When you can use margin or padding, try to use margin. When you use the design mode in Dreamweaver, use margin to be closer to the actual page.

4,When the following conditions occur:

<Div id = "zhuhuiimage">

</Div>

Change it to <Div id = "baihuiimage"> </div> to make the write effect more correct.

5,CSS SpritesTechnology (Background Image Stitching Technology): first, use Photoshop to integrate background images to generate a PNG image. Then, when writing CSS, use background-position to locate and use bg2css to measure the offset. CSS:

Background: URL (../images/index.png) No-repeat-961px-78px;

6,When the list-style-image attribute is used, CSS Sprites cannot determine its position. In this case, use the background of Li instead:

Background: URL (../images/index.png) No-repeat-961px-78px;