Resolving Cross-browser compliant CSS coding guidelines

Browsers are getting more and more, which means that the more difficult it is to do the Web front-end development. Now the core of the browser is the same, for the compatibility of CSS will also have a certain difference! Used to talk about using CSS hack is not an easy thing, with too much CSS hack to be compatible with a lot of bloated code, so it is necessary to master some Cross-browser compatible CSS coding guidelines.

First: Understand the CSS box model (learning div+css layout is also very important, learn the CSS box model to learn DIV+CSS is not difficult)

A thorough understanding of the CSS box model is the first thing, the CSS box model is not difficult, and basically supports all browsers, except for some specific conditions of IE browser.

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

<CSS Box model >

Second: Understand the difference between block and inline level objects

Block-level objects:

Block-level objects naturally fill their parent containers horizontally, so there is no need to set the 100% width property

The start position of the block-level object is the upper-left edge of its parent container, and is arranged below the sibling block object in front of it (unless you set float or absolute position)

Inline-level objects

The inline level object ignores its width and height settings

Inline-level objects are formatted with text and are influenced by typesetting attributes (e.g. White-space, font-size, letter-spacing)

The Inline level object can control its vertical alignment using the Vertical-align property, and the block-level object cannot be

Inline-level objects will retain some natural space to accommodate the downward strokes of the letter G.

A inline object that is set to float becomes a block object

Third: Understanding floating and Clearing properties

The best way to achieve multiple column typesetting is to use the float property, and float is a property that will benefit you. A float object can reside left or right, an object, set to float, moves left or right to the boundary of its parent container, or to the boundary of the float object in front of it, depending on the direction of the setting, and the non-float object or content immediately following it is surrounded in the opposite direction.

Here are some important guidelines for using the float and clear properties:

A float object that jumps out of its block-level non-float stream of content, in other words, if you want to float a box to the left, the block-level non-float object behind it will be shown below, and the inline level will be surrounded by the next

To surround a float with a piece of content from one side, the content must be either inline or set to float in the same direction.

A float object that, if not set, is automatically indented to the width of the content it contains, so it is a good idea to explicitly set the width for the float object

If a block object contains a float child object, the problem that is described in this article appears.

An object that has the clear property set, and will not enclose the float object in front of it

An object that has both clear and float properties, only the Clear:left property takes effect, and Clear:right does not work

Four: Never expect to be exactly the same in all browsers

It is possible to implement the same experience in different browsers, and it is possible to achieve a consistent appearance of approximately pixel level, but never expect to be exactly the same, to be contented!