Cross-browser compatible CSS coding rules

More and more browsers mean that it is more difficult to develop Web Front-end. The current browsers have the same kernel, and there will be some differences in CSS compatibility! Previous usageCSS hackIt is not easy to use too manyCSS hackFor compatibility, there will also be a lot of bloatedCode.Cross-browser compatible CSS coding principlesIs very necessary.

First, understand the CSS box model (it is also important to learn the DIV + CSS layout. It is not difficult to learn the CSS box model and learn the DIV + CSS)

A thorough understanding of the CSS box model is the first priority. The CSS box model is not difficult and basically supports all browsers except for IE browsers under certain conditions.

The CSS box model handles the following tasks:

• How much space does a blcok (Block) object occupy?
• The boundary of the object.
• Box Size
• Relative location of the box and other elements on the page

The CSS box model has the following principles:

• Block objects are rectangles (in fact, all objects are like this)
• Its size is determined by width, height, padding, borders, and margins.
• If the height is not set, the height of the box automatically adapts to the content it contains, and the content is left White (unless float is used)
• If no width is set, a non-float box will be filled with its parent container horizontally (excluding the white space of its parent container)

When processing block-level objects, you must note the following:

• If the width of a box is set to 100%, it cannot set margins, padding, and borders. Otherwise, it will break through its parent container.
• Vertical adjacent margin can cause complex Collapse Problems, resulting in layout problems (for example, the bottom-margin of the above objects is 40 for two vertical adjacent block objects, if the top-margin of the following object is 20, the distance between the two objects will be 40, not 60-translator)
• Objects with relative and absolute positions have different behaviors.
• <CSS box model>

Second: understand the differences between block-level 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 attribute for them.
• The starting position of a block-level object is the upper left boundary of its parent container and is placed below the sibling block object (unless float or absolute position is set)

Inline-level object

 

• Inline-level objects ignore their width and height settings
• Inline-level objects are subject to text formatting and are affected by typographical attributes (such as white-space, font-size, and letter-spacing)
• Inline-level objects can use the vertical-align attribute to control their vertical alignment. Block-level objects cannot
• The lower part of an inline-level object retains some natural space to adapt to strokes that will be drilled down by the letter G.
• An inline object set to float will become a block object.

Third: Understanding floating and clearing attributes

The best way to achieve multi-bar layout is to use the float attribute, which will benefit you a lot. A float object can be left or right, and an object set to float will be moved left or right to the boundary of its parent container or the boundary of its front float object, the non-float object or content following it is enclosed in the opposite direction.

The following are some important guidelines for using the float and clear attributes:

• A float object will jump out of its block-level non-float content stream. In other words, if you want to move a box to the left float, the block-level non-float object after it will be displayed below, and the inline-level content will be surrounded
• To enclose a piece of content from one side of a float object, the content must be either inline-level or set to float in the same direction.
• A float object. If no width is set, it is automatically scaled to the width of the content it contains. Therefore, it is best to explicitly set the width for the float object.
• If a block object contains float sub-objects, the problems described in this article may occur.
• An object with the clear attribute set will not enclose the float object before it.
• An object that has both the clear and float attributes set. Only the clear: Left attribute takes effect, and the clear: right attribute does not take effect.

Fourth: Never expect the same in all browsers

It is possible to implement the same experience functions in different browsers, so it is also possible to achieve a similar pixel-level consistent appearance, but never expect the same, it is always fun!

For more similar knowledge, go to "oecpCommunityGood luck!