Cross-browser CSS development principles [graphic tutorial]

In the Internet design process, it can be said that there is nothing more exciting than developing a design that can have the same eye-catching effect in all browsers. Unfortunately, this goal seems to be widely recognized as unlikely to be achieved. Some people even abandon the pursuit of perfection and think that cross-browser compatibility is not necessary.

Although I also agree that each project is fully compatible with browsers, that is, it is never possible for all web browsers (without considering mobile browsers) to experience the same perfect design effect, I believe that in most casesAlmost full compatibilityBut it can be implemented. As developers, our goal should not only be to make the project work in every browser, but should try to use the least code to make the project perfect in every browser, this makes website maintenance easier in the future.

This article will introduce you to the mostImportant CSS development principles and skills,We hope to help new users and elders in front-end development achieve consistent cross-browser experience with the least CSS code.

CSS Box Model)

The CSS box model is the basis of web page layout. If you want to achieve cross-browser layout consistency, this is the first object that must be thoroughly learned. Fortunately, it is not difficult to grasp and the effect on all browsers is usually the same, except in some cases it will be related to the IE version (this will be detailed later ).

The CSS box model is responsible for computing:

• The space occupied by a block-level element.
• Whether the border (border) and/or the margin (margins) overlap or crash.
• The size of a box.
• To some extent, it can determine the relative location of a box and other content on the page.

The basic rules of the CSS box model are as follows:

• The Block-level element is basically a rectangle.
• The size of block elements is calculated by width, height, padding, border, and margin.
• If the height is not specified, the block element will display the height and fill Based on the content it contains (unless floating floats is set, see below ).
• If the width is not specified, a non-Floating non-floated box is displayed to adapt to the width display of the parent box, minus the fill (more details are provided below ).

For block-level elements, remember the following points:

• If the width of a box is set to "100%", it cannot have any margin, fill, or border. Otherwise, it will overflow the parent box.
• Vertical adjacent outer margins may cause complicated crashes and eventually cause layout problems.
• The relative and absolute positions of elements are different. This involves many things and will not be described in this article.

Use the box model shown by Firebug in Firefox)

Differences between Block-level element blocks and Inline Elements

Experienced developers may feel that there is nothing to say. However, I think this is a very important question. If you can fully understand it, you will say "ah, it turns out so"Many headaches will be solved,In the future, confidence in creating a cross-browser layout will be greatly enhanced.

The following figure shows the differences between block-level element blocks and inlin:

• By default, the Block element is scaled horizontally to fill the parent container, so it is not necessary to set the width to "100% ".
• By default, Block elements start from the leftmost of the parent box and fall below any previous Block elements (unless floating or locating elements are used, see the following figure ).
• The Inline element ignores the width and height settings.
• The Inline element flows along with the text and is affected by typographical attributes such as spaces, font size, and letter spacing.
• Inline elements can be aligned Using Vertical Alignment attributes, while block elements cannot.
• The lower part of the Inline element naturally leaves some space to accommodate text elements falling from the broken line.
• If the inline element is set to floating, it can be converted into a block element.
  • Three pages in total:
  • Previous Page
  • 1
  • 2
  • 3
  • Next Page