CSS Beginners Quick Reference

When using CSS to build a station, you must have encountered a variety of layout problems, and may end up in a mess.

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.
in doubt, verify first
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.
Make sure that the effect you want really exists
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.
If you must use floating objects in the layout, don't forget to use the 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. See Eric Meyer's tutorial on this question.
Consolidation of margins: use 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. Andy Budd may be able to explain this to you.
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.
avoid blinking of unspecified style content under IE
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.
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).
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%.
is the display not normal in IE?
It may be that the Peekaboo bugs are at work, especially when the mouse is over the hyperlink to show normal. Fix method See position is Everything.
If you use anchor points, be especially careful when you apply a hyperlink style
If you use traditional anchor points (<a name= "anchor" >) in your code, you will notice that hover and: active pseudo classes also work on it. To avoid this situation, you can use the ID, or use the lesser-known syntax:: Link:hover,: link:active
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).
Keep in mind the "troubled" (troublesome) 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.
non-0 value to specify 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;
test for different font sizes
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.
use inline style when testing, then change to external input when publishing
Embed style sheets in your HTML source code, and you can eliminate a lot of cache errors when testing, especially in some Mac browsers. However, before publishing, be sure to remember to move the style sheet to an external file and introduce it @import or <link>.
add a clear border to help with 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.
picture paths 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.
do not "Occupy" a future style sheet (such as a handheld device or a print style sheet)
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:
organize your CSS files 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.
name the class and ID by feature instead of 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.
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).
consider affinity when using picture substitution techniques
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.