Shulou(Shulou.com)05/31 Report--

This article mainly introduces "what are the length values in CSS". In daily operation, I believe many people have doubts about the length values in CSS. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "what are the length values in CSS?" Next, please follow the editor to study!

At present, it is more commonly used to px (pixels), em,% percentage, it should be noted that these three units are all relative units.

1. Pixel

Why are pixels relative units? Because pixels refer to dots on the display ("90 pixels = 1 inch" is assumed in the CSS specification). The reality is that browsers will use the actual pixel value of the display. At present, most designers tend to use pixels (px) as units.

2 、 em

This is the font-size value of the font given by this element. If the font-size of the element is 14px, then 1em = 14px; if font-size is 18px, then 1em = 18px. The code is as follows:

P {font-size:12px;text-indent:2em;}

The above code can achieve the first line of the paragraph indented 24px (that is, the distance between the two font sizes).

Here is a special case:

However, when font-size is set to em, the standard calculated at this time is based on the font-size of the parent element of p. The code is as follows:

Html:

Take this example as an example.

Css:

P {font-size:14px}

Span {font-size:0.8em;}

As a result, the font "example" font size in span is 11.2px (14 * 0.8 = 11.2px).

3. Percentage

P {font-size:12px;line-height:130%}

Set the line height (line spacing) to 130% of the font (12 * 1.3 = 15.6px).

At this point, the study of "what are the length values in CSS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.