When I first came into contact with CSS, I was at a loss. Many times I didn’t know where to start or how to start. After getting a rendering, many questions troubled us: how to layout it? Absolute positioning or relative positioning, which label to choose? What structure to adopt. .etc. . Of course, in the process of writing code, we will encounter many problems, especially us novices, who are not very familiar with all aspects and lack experience, so we are often at a loss when encountering problems. I think that when we encounter problems, we must learn to summarize them to avoid making the same mistakes next time.
The following are some common mistakes that I have summarized in my work:
and solution tips hope to be helpful to css newbies.
1. Check whether there are spelling errors in HTML elements or whether you forgot to close tags.
Even the best experts will make such mistakes, because when the page structure is very complex and nested in many layers, it is easy to lose the closing tag. Especially for people like me, who are used to writing in Notepad, they are more likely to make mistakes. So be careful when writing.
2. Check whether the CSS is correct
In general, the most common error in CSS is that the attribute names in the style and HTML are inconsistent. As a result, the style has been clearly written, but it has no effect.
3. Use background to find the corresponding layer
When we are debugging errors, especially when debugging browser compatibility, there are many nested layers, which are prone to misalignment and overlap. At this time, we add background colors to the key layers to show the difference. This helps eliminate errors.
4. Determine the error location by elimination method
When we write CSS coding, we usually do a little bit and then preview it. If an error occurs at this time, we can delete the newly added layer until it is displayed normally to determine which layer the problem lies in.
5. The float element must specify the width attribute
Many browsers have bugs when displaying float elements with unspecified width. So regardless of the content of the float element, the width attribute must be specified for it.
6. Remove duplicate styles
Many times we declare public styles at the head and then forget about it when we write it below. For example, we declared img{border:none;} at the beginning
Then when I encountered the img tag, I wrote it again. This situation should be avoided.
7. Pay attention to the encoding format
Under normal circumstances, the encoding formats we use are: gb2312 and UTF8. There is no distinction between good and bad. But don't mix them. Many editors default to UTF8 format.
8. Writing order of link styles
After many people write link styles, the color after clicking is not what they want. At this time, they need to check the order in which the link styles are written. The correct writing order should be: LVHA.