CSS to implement style layout 22 tricks

When using CSS to build a station, you must have encountered a variety of layout problems, and may end up in a mess. The purpose of this article is to make your design process easier and provide you with a quick reference when you encounter difficulties.
1, have the question, first verifies

Validating your code before debugging can often save a lot of hassle. Incorrectly formatted XHTML/CSS can cause many layout errors. Before you test in another browser, write and test the CSS code in the most advanced browsers, rather than the other way around.

If you write and test in a bad browser, your code will have to rely on the poor display of that old browser, and then test in a compliant browser, and you'll be frustrated when you see that the results are "not normal". Instead, you should refine your code before you try to plan for a lower-level browser. That way your code is standard from the start, and you don't have to bother with supporting other browsers. Of course, the current standards-compliant browsers are no doubt Mozilla, Safari or Opera.

2, to ensure that you want the effect is really there

Many specific browser-proprietary CSS extensions do not exist in the formal standard. If you specify a style for the filter (filter) or scroll bar, you are using private code that has no effect in other browsers except IE. If the validator tells you that the code is not defined, it is most likely that you have used a private style and don't expect to get consistent results in different browsers.

3, if the layout must use floating objects, do not forget to use the clean (clear) property

Floating elements seem easy and difficult to manage. If you find that a floating object extends the bounds of the container or does not display as you expect, check to see if your expectations are correct.

4, margin consolidation: Available padding or border to avoid

You may be overwhelmed by the extra (or unwanted) whitespace. If you use margins, the consolidation of the margins may be the cause of the problem.

5. Avoid applying padding/border and fixed widths to the same element at the same time

The IE5 error block model is the culprit, and it makes a mess of things. Although there is a remedy, it is best to circumvent this problem by specifying padding for its parent element when the child element's width is fixed.

6, to avoid IE under the no specified style content flashing

If you use @import to enter the external style sheet, sooner or later you will find IE has a "flashing" problem. Unformatted HTML text appears briefly before CSS styles are applied. This can be avoided.

7. Don't expect Min-width to be useful in IE

IE does not support it, but it treats the width as min-width, so the same end result can be achieved by some IE filtering techniques (filtering).

8, when cornered, try to reduce the width

Because of rounding errors, sometimes 50% plus 50% equals 100.1%, destroying the layout in some browsers. Try to reduce the 50% to 49%, or even 49.9%.

9, IE in the display is not normal

It may be that the Peekaboo bugs are at work, especially when the mouse is over the hyperlink to show normal.

10. If you use anchor points, be especially careful when applying hyperlink styles

If you use traditional anchor points () in your code, you'll notice that hover and: active pseudo classes also work on it. To avoid this, you can use an ID, or use a little-known syntax: Link:hover: link:active.

11, remember "love/hate" (Love/Hate) Link rules

To specify the hyperlink pseudo class in the following order: link, visited, Hover, acitve. Any other order is not appropriate. If used: Focus, the order should be LVHFA ("The Lord Vader ' s Handle formerly Anakin", Matt Haughey suggested).

12, please remember the "troubled" (trouble) border

The short order of the Border (border), margin (margin), and filler (padding) is: Clockwise from top, right, Bottom, left. For example, the margin:0 1px 3px 5px indicates that the top margin is zero, the right margin is 1px, and so on.

13, not 0 value to specify the unit

When you specify a font, margin, or size in CSS, you must indicate the unit used (the only exception is Line-height, which, oddly, does not require a unit). Some browsers Buwei the processing method for unspecified units. Zero is 0, whether it's px or em. All other non-0 values must be explicitly specified. For example: padding:0 2px 0 1em;

14, test the different font size

Advanced browsers like Mozilla and Opera allow you to change the font size, no matter what font unit you use. The default font sizes for some users are certainly different from yours and do their best to satisfy them.

15, the test with the embedded style, when the release to the external input

Embed style sheets in your HTML source code, and you can eliminate a lot of cache errors when testing, especially in some Mac browsers. But before publishing, be sure to remember to move the style sheet to an external file, @import or introduce it.

16, plus a clear border to help layout debugging

Global rules like div {border:solid 1px #f00;} can temporarily detect layout problems for you. Adding a border to a specific element can help you find an overlapping or blank problem that you can't detect.

17, picture path do not use single quotes

When setting a background picture, stick with double quotes. Although it seems superfluous, Ie5/mac will choke if he does not.

18, do not for the future style sheet (such as handheld devices or print style sheet) "Occupy seat"

The Mac IE5 the empty style sheet, which can increase the loading time of the page. There should be at least one rule in the suggested stylesheet (even in comments), lest Macie choke.

There are also recommendations that, while not specific to some features, should be noted during the development process:

19. Organize your CSS file well

Properly block annotation css, make similar CSS selectors into a group, develop consistent naming conventions and blank formats (for cross-platform considerations, it is recommended that you use whitespace characters instead of tab.) ) and the appropriate order.

20. Name the class and ID by function (not appearance)

If you create a. Smallblue class, and then plan to change the text to a red color, the class name no longer has any meaning. Instead, you can use a more descriptive name like. Copyright and. Pullquote.

21. Combination Selector

Keeping CSS short is important for reducing download time. Try to reduce redundancy by grouping selectors, using inheritance (inheritance), and using shorthand (shorthand).

22, the use of picture replacement technology to consider the affinity

It has been found that traditional fir in screen readers, as well as the turn off picture display [of the browser] will be problematic. There are other solutions to this, according to the specific circumstances, prudent use.