Use Chrome to view CSS styles for page elements

Use Chrome to view CSS styles for page elements

When we write the page, we may not always know what is going on, we find that an element has a problem, but do not know why this is the case, it is necessary to use the powerful chrome!!!

To illustrate:

1.

We would like to see the details of this picture in the blog park. You can open the Chrome Developer tool and click the arrow to select the image, and the code automatically navigates to the HTML code for that element, as shown in:

In this page, the Blue shadow at the top right is the HTML code where the picture element is located, and the bottom left of the developer tool is the CSS style code for that element:

The top of them is the inline style,

Down there is the code that we direct to the style setting;

Down there is a style inherited from the a element, there will be inherited from the H1 style, has been inherited from the HTML, the inheritance order is arranged in the order of nesting.

And the bottom right is the box model of this element, and underneath the box model are all the attributes of this element, which we can use to determine the problem with the code we write.

2.

<! DOCTYPE html>"en">"UTF-8"> <title>Document</title> <style>div{width:100px;            height:100px;            Background:green;        padding:20px; }    </style>"Div"onclick="Show ()"> This is a div</div> <script>varDiv=document.getelementbyid ("Div"); Div.onmouseover=function () {Div.style.backgroundColor="Red"; } div.onmouseout=function () {Div.style.backgroundColor="Green"; } function Show () {alert ("haha, I am the show () function"); }    </script></body>
At this point we can open the developer tool:
We can see the specific information, in the lower right corner can be seen: Background-origin for padding-box, so this box is the standard box model.
At the bottom left we see that the Styles option is selected by default, and we can switch to the event listeners option to display the following:

The three events occurred because I added three events to the Div. So there will be three time in the event listeners.
We can also view the scope chain by looking at the event.
As follows:
After we have opened this event, we find that the click handler function (handler) for this listener is the function onclick (event); [[Scopes]] represents the scope chain, which begins at the front end of the scope chain and involves four different scopes altogether.
The scope of the end is the global scope, followed by the htlmdocument scope, followed by object, body, and finally htmldivelement scope.
　　
Use Chrome to view CSS styles for page elements