The golden rule of writing Cross-browser-compatible CSS code

As a web designer, your site has exactly the same performance in a variety of browsers as the goal of many people, however, this is a goal that can never be truly achieved, and many people think that perfect cross-browser compatibility is not necessary, although it is true, in many cases, an approximate compatibility is easy to implement, This article is about a variety of Cross-browser compatible CSS coding guidelines and techniques.

Understanding CSS Box Models

If you want to implement Cross-browser-compatible CSS code that doesn't require a lot of Kit Kat, a thorough understanding of the CSS box model is the first thing, and the CSS box model is not difficult and basically supports all browsers, except for some specific conditions in IE browsers.

The CSS box model is responsible for handling the following things:

• How much space is occupied by a BLCOK (block) Level object
• The bounds of the object, leaving the white
• The size of the box
• The relative position of the box and other elements of the page

The CSS box model has the following guidelines:

• Block (chunk) objects are rectangles (in fact, all objects are)
• Its dimensions are determined by width, height, padding, borders, and margins.
• If you do not set the height, the height of the box will automatically adapt to its contents, plus white, etc. (unless you use float)
• If you do not set the width, a non-float box will be filled with its parent container horizontally (minus the parent container's white-left)

When working with block-level objects, you must be aware of the following considerations:

• If the width of a box is set to 100%, it can no longer set margins, padding, and borders, or it will burst its parent container
• Vertically adjacent margin can cause complex collapse problems, resulting in layout problems (such as two vertically adjacent block objects with Bottom-margin 40 on them, and the following objects with a top-margin of 20), and two objects with a spacing of 40 instead of 60- Translator
• object with relative position and absolute position, with different behavior

The box model shown in Firefox's Firebug

Understand the difference between block-and inline-level objects

This seemingly simple problem can be greatly appreciated if it is thoroughly understood.

The following figure explains the difference between block-level objects and inline-level objects: