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

This article introduces the relevant knowledge of "what are the skills of using CSS". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1.box-sizing: border-box

Box-sizing has two main values: content-box and border-box. Let's take a look at the official explanation:

Generally speaking, by default, padding and border will take up extra space. If the element width is 10px, if the 1px border border is set, the actual width is 12px padding. Then this will lead to the width and height of the layout is not easy to control, the calculation is also very troublesome. So we will use border-box for global elements. As long as the width and height are set, no matter how the border and padding change, the width and height of the element will not change, which is convenient for layout and calculation.

two。 Left fixed right adaptive

When laying out, such as some list pages, there is often a fixed-size thumbnail on the left, and the rest of the right shows the title, as shown in the figure

Let's call the left fixed right adaptive layout. In my method, 100% wide div uses padding-left to set aside the position of the left image. The content part of the div element is the title, and the image is absolutely positioned to the padding-left area, thus realizing the left fixed right adaptive layout (provided that box-sizing must be border-box, otherwise padding plus 100% width will exceed the screen width). The approximate code is as follows:

3. Content attr of pseudo-class

The content attribute of pseudo-class before,after is used to insert content. We can pass in the attribute name of a current element through attr, and load the attribute value into pseudo-class content. This is a way of writing, but there may not be many actual application scenarios, so let's take it as an understanding.

4. Effect of Chinese symbol centering

Don't worry about the dynamic output of text, some pages may have similar tips for copy, using English punctuation, for the center effect is more friendly.

5. The upper and lower spacing of the element

When layout, write the page from top to bottom, generally write the next element margin-top to determine the distance from the previous element, then try not to write both margin-top and margin-bottom, if mixed, it is difficult to maintain, for example, a certain area needs to be stacked, or a component may be shared in many places, and it may be troublesome to change it later. The problems caused here can be said to be innocuous, but whether it's js or css, attention to detail and good habits are a sign of code power.

6. Font color transparent

Sometimes when configuring font colors, designers may use the percentage of transparency to set several different colors, such as the main color is # 000, light gray # 000 80% transparency, in this case, web is not recommended to write transparency, but let the designer give the corresponding color value, because the transparent color will be different according to the background, such as the situation seen now, so the scalability is relatively poor.

7. Naming

Naming is one of the most troublesome things, first look at * species, so that the naming of the more detailed can clearly know the meaning of the current class, but the length is longer, increasing the amount of code.

The second uses abbreviated naming, which makes the code shorter and faster to write, but not easy to read.

If you use an abbreviated name, you can agree on the document, have a convention and be familiar with the cost, but it is more efficient to be familiar with it, and the naming of the class will become more standardized and unified.

8. Misunderstanding of 0.5px frame

When I wrote the frame before, I found that as long as the color of the frame was lighter, the frame looked thinner, so when designers asked me why the frame looked thicker, I told them to lighten the color a little bit. I've been using this technique in practice. There is a blog on the Internet saying that the 0.5px frame can be realized by scaling scale 50% of css3 transform. I have always wondered that 1px is actually the smallest unit of physics, how is it possible to achieve 0.5px, so I did an experiment. I set a frame (black) with a 1px color of 000, as shown in the figure.

When I use scale to zoom by 50%, the color becomes c5c5c5, but there is still 1px. As in the picture

I use the color pickup tool to be accurate to pixels, and it's really 1px, so it doesn't achieve 0.5px but lightens the color. On some phones, the 1px is displayed according to 2px, so this way you can zoom the 2px to 1px and make the border of the 1px lighter, which does make the frame thinner, but not 0.5px.

9.user-select:none

This attribute prevents the area content from being selected, prevents users from long pressing to copy, and also prevents users from copying irrelevant content. For example, I only want the user to copy 6655 CAPTCHA below. I have set user-select:none except for 6655. Long press other parts will not appear copy button, button number can be, and the left and right subscript of the third picture can only be dragged between 6655.

10.js-class

When binding events for dom, you may directly bind the current styled class, which will affect JS by modifying or replacing the class name, but if you define a class with an unstyled js prefix specifically for binding events, this will uncouple the style and logic, and when reading the code, you can also see which elements are bound to the event at once.

11. Common class combination method

Well, I named it myself. Let's take a look at *. It's very routine. All the styles are written in a class.

Take a look at the second, define a public class, introduce this class directly into the style through less, the second is a little more efficient (write a few fewer letters), but you need to be familiar with and maintain the public class

Look at the third kind, write the public class in the class of the element, this one is more flexible, for example, I now want to write two item elements, a left float and a right float, then this can not change the item, but directly use different classes to achieve different styles, just like the JS code to duplicate, pass in a different parameter to distinguish, the same place to share.

The fourth kind of public class is all written in the element, so you don't have to write css when writing dom. Is it a bit like the componentization in JS to write the desired class into dom? this kind of writing is more efficient under specific circumstances, such as PC background class projects, which do not require much UI. This efficiency also depends on whether the public class class is comprehensive and whether you are familiar with the class in the project. However, we should also be careful not to let the length of the element be too long, and try to keep it within 4 classes. If you exceed it, you should not write it in this way.

In fact, these four ways of writing can be used in a project, for different parts can be written in different ways, you can be very flexible to choose the way you want.

Text size of the 12.rem layout

As we all know, browsers generally do not make the text smaller than 12px. If the setting is less than 12px, browsers will display 12px. When we use rem layout, the elements will be scaled in proportion to the screen width. For example, if the designer gives the design draft of 750px, if the text of an element is 22px, then when the user's screen width is 375, the text will be scaled to 11px, and the actual browser will be displayed to a minimum of 12 pixels. Then the proportion of other non-font elements will still be reduced, at this time, the proportion of font to other elements may not be the proportion of the original design, if the user's screen is 320px, then the ratio between the elements and the original design will be even worse. So we must tell the designer according to our own situation, in the design draft with a width of 750 pixels, the font should be at least how many pixels.

13.object-fit: cover

When we do the list page, the pictures are of fixed size, such as a square picture of 100px*100px, but it is very likely that the picture we get is not square. If this non-square picture is put into the img tag of the square, it will be deformed. If you use object-fit:cover to cut out-of-proportion parts, so that the picture does not look deformed or stretched, but this will lead to incomplete pictures. Depending on the picture, you may cut out the key parts, but since the list is a thumbnail, you can still add this attribute, which is a compromise.

14. The agreement of the picture

When it comes to the problem of picture stretching, it is necessary to talk about the agreement for the picture, because whether stretching or cutting will lead to the disability of the picture, stretching affects vision, and cutting is afraid of the loss of key parts, if it is not strictly in accordance with the agreed specifications, it is definitely not compatible with all situations, so at the beginning of the project, you should agree with the product operators on the proportion of the picture, and it is recommended that it be square.

This is the end of the content of "what are the skills of using CSS". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.