Five CSS debugging skills, and the art of question"

ArticleDirectory

• Tip 1: Set the background color or border to confirm the error range
• Tip 2: delete irrelevant code and expose core conflicts
• Tip 3: debug with Firefox and then make it compatible with IE
• Tip 4: Be good at using tools to improve debugging Efficiency
• Tip 5: Be good at asking questions and asking for help

CSS began to enter the layout field and gradually began to be widely used. More and more designers are turning to CSS. However, with the gradual development of CSS, we will find that the more we know, the more problems you encounter. When creating a website, you will always encounter new problems that you have never encountered before. It seems that we have learned English for more than a decade, and there are a lot of words and syntaxes. But when it is actually used, we still encounter things that we can't say.

In fact, this is still a stage of learning, which is a headache for growth. After all, each time a problem is solved, the skill level will be refined. Therefore, in addition to thoroughly understanding the CSS principles, we must practice as much as possible to solve practical problems. In this way, all problems can be solved.

In practice, the most important question is how to debug, that is, how to find the key to the problem when the page performance is different from the expectation. Of course, the premise is that you writeCodeIt is basically clear, otherwise debugging will not be discussed.

For CSS, the essence is to place large and small boxes on the page. You are not a designer, but a typographical worker. What you see in your eyes is not text, images, or a pile of boxes! What you need to consider is the relationship between the box and the box! Standard stream? Parallel? Upper and lower? Nested? Interval? Background? Floating? Absolute? Relative? Positioning benchmark? Wait ......

Tip 1: Set the background color or border to confirm the error range

In the final analysis, any typographical error occurs because you think that the location of a box is different from that of the browser. If you are a browser, no errors will occur.

Therefore, whenever you find that the page is not as expected, for example, you want to go to the right on the left, and change the line into two lines, you must first define the range of each box, in this case, you can useSet background color for the box temporarilyOr set a one-pixel border to clearly understand whether the browser thinks the box range is consistent with the box range you think. If you can set the background color, it is best to use the background color, because setting the border will change the layout, it is like we use a temperature table to measure the temperature, the premise is that the temperature table itself does not affect the temperature of the object to be tested, in fact, physics tells us that any two objects affect each other, that is, the so-called uncertainty principle. However, for complex pages, the background color may not be able to see the range. You still need to use borders to complete this task. However, you need to exclude the possibility of adding a temporary border to introduce new problems.

When the range of a box is not what you want, congratulations, you have found the error, and the next step is to analyze why the browser should put it here instead of placing it as you want? After careful calculation, all your Code conforms to the CSS specification, so you need to confirm that this is a browser error, not you. However, you should believe that 99% of the errors may be caused by carelessness, and 1% of the errors may be caused by browser errors. It is as if you recall that all the tests you have taken at school, the teacher sometimes judges the correct question, but this probability is very low.

Tip 2: delete irrelevant code and expose core conflicts

After troubleshooting in the previous step, if you suspect that the browser is faulty, you need to confirm this. At this time, your webpage may be very complex, with a lot of content, and various factors affect each other, which will interfere with your judgment. The solution isOnly some of the Code related to your problem is extracted., OrDelete all irrelevant codeIn short, the purpose is to findMinimum problematic code setIn this way, you can find the root cause of the problem. In fact, in many cases, your problem is solved when you delete code from a complex web page a little bit. In this way, you must pay attention to the code deleted, you have solved the problem. This is the cause of the problem. If you are a smart person, you must understand the problem. Don't just focus on the results and don't ask why. If you encounter a few more questions, your improvement will be much faster.

In fact, the debugging capability is very important. In actual work, anyone will surely encounter inconsistencies between the effects they have made and what they want. In this case, the debugging capability should be taken into consideration.

It is like a power outage in the house. You will first go out to check if there is electricity in the neighbor's house. In this way, you can determine whether the problem lies in your own house or the whole building is powered off. If the whole building has a power outage, you have to wait. If your house has a power outage, You need to analyze whether there is a short circuit (such as water sprinkling on the wire ), or, if an electrical appliance is overloaded (for example, you have opened all the air conditioners, water heaters, and hot pots in your home), and so on, this is actually determining the fault point, the truth is exactly the same as the page. The first step is to narrow down the scope, but you may not realize it. Therefore, you can transplant some truths in your life and solve many problems. (If there is a problem, find the property personnel to repair it. It should be suitable for leaders .)

Tip 3: debug with Firefox and then make it compatible with IE

I have talked a lot about the differences between Firefox and IE. I will not elaborate on them here. The general principle is that Firefox complies with the best CSS standards. I should debug Firefox first during debugging, then make the web page compatible with IE. Secondly, do not use the browser for debugging after a browser is fully prepared. Instead, ensure that the page is correctly displayed in each browser.

Tip 4: Be good at using tools to improve debugging Efficiency

Here we will talk about two very convenient tools, both of which exist in the form of Firefox plug-ins, namely "Web Developer toobar" and "firebug ". Of course, none of them can be the same as a dumb camera. Just press the shutter to tell you where the problem is. Their role is to help you understand it as conveniently as possible.How does the browser view your code?. For example, you can use them to conveniently view the range of each box. You do not need to manually set borders. With firebug, You can dynamically modify CSS attribute settings in real time, this greatly improves the debugging efficiency. There is no space to explain the usage of these two tools. If you are interested, you can check the introduction first.

Tip 5: Be good at asking questions and asking for help

the Internet has appeared. This great guy has brought us too much convenience. With Google, we can find the answer. with various Website forums, we can ask for advice from others. This is the best way for us to learn. However, it also requires some skills and art to ask questions. The suggestions here are as follows: before asking a question, you must study your questions by yourself, you can use one or two sentences to explain your problem . You can use concise code , the person who sees your problem can easily understand your problem and "reproduce" your problem . This is very important. Do not paste the code of a large segment on a forum, so that the chances of your help will be much smaller. You have to believe that there are a lot of enthusiastic people, but there are not many enthusiastic people who are eager to spend a lot of time analyzing your large code section, and then find out where there are problems like a haystack. In fact, you should do these lessons well in advance. You should at least narrow down the scope of the problem to a reasonable extent. The Internet, Google, and Forum are both tools and just a tool. The key to improving the performance of anyone who can use the tool is to use the tool owner.