Shulou(Shulou.com)06/02 Report--

What are the CSS skills that are easy to use? I believe many inexperienced people don't know what to do about it. Therefore, this article summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

In the process of business development, you must often need to look at the location and size of an element and modify its CSS, so you will frequently use the select element feature in DevTools.

In fact, we can use a CSS technique to add outline to all elements, so that we can quickly understand the element location information we need, without having to select elements to view.

We only need to add the following CSS to add this effect to any website.

Body * {outline: 1px solid red}

It's important to note that the reason I don't use border here is that border increases the size of the element but outline doesn't.

This technique can not only help us quickly understand the location of elements in development, but also help us to easily view the layout of any website.

The author likes to use this technique to see if the elements are aligned.

But at present, this technique requires us to manually add CSS to achieve, it seems a little bit chicken, can you use a switch to achieve any web page on and off this function?

The answer is yes, we need to use Chrome's bookmarking function.

Open the bookmark management page

Add a new bookmark with three points in the upper right corner

Name at will, paste the following code into the URL

_ javascript: (function () {var elements = document.body.getElementsByTagName ('*'); var items = []; for (var I = 0; I

0) {for (var I = 0; I < items.length; iTunes +) {items [I] [xss_clean] =';}} else {document.body [XSS _ clean] + = 'html * {outline: 1px solid red}';}}) ()

Then we can click on the bookmark we just created on any website and internally determine whether there is a debug style. Delete it if it exists and add it if it doesn't exist. In this way, we can easily view the layout of any web page through this technique.

After reading the above, have you mastered the CSS skills that are easy to use? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.