CSS Debugging Method Summary

This summary is constantly updated, the main record of my debugging process of the end of the experience and methods.

After all, I do not do the front-end browser, so if there is an unknown please forgive me.

CSS is related to the aesthetics of the interface, sometimes the function is realized. The interface is really ugly to no one, after all, or a failure of the product, all good products need not only practical features, more need for intimate and beautiful appearance.

1. If the overall layout is encountered neatly, individual layout offset.

You can use the browser to offset the component (Magnifier), and then get the CSS file applied to the component of the CSS effect to modify it, as shown in:

You can get the CSS style as well as the CSS details on the right:

After viewing the style, you can also see the file the corresponding style belongs to, find the file and then modify the style.

and CSS Details:

As shown in the image above:

Here you can observe the size of this component: Width: 177+10+10, Height: 18+8+8

Internal padding for components: padding:10

Component boundaries: border: The boundary of a component is not part of the component outside of the assembly.

As shown on the left:

Outside boundaries can also have outer boundaries: margin: Indicates the length and width of the component's empty