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

Today, I would like to share with you the relevant knowledge points of case analysis of css skills. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

1. When the top and bottom of the margin of the element and the top and bottom of the padding are used as units, it is relative to the width of the parent element width rather than the height height we imagined.

For example:

In fact, when this phenomenon occurs, we can skillfully use the percentage value of margin/padding to achieve a high degree of self-adaptation (mostly for occupying space and avoiding flicker)

Of course, the percentage of the height of the element is the percentage relative to the height of its parent element, and min-height and max-height also apply this rule.

2. For an element with positioning attributes, when its top and bottom units are percentage, the percentage is relative to the height of the parent element. Similarly, left and right are relative to the width of the parent element.

On this point, when I was looking up the data and writing this article yesterday-the most comprehensive method of horizontal and vertical centering of elements-CSS layout masturbation skills-- the eighth point in all kinds of centers.

3. Percentage values are not allowed for border width.

I don't want to explain that.

4 、 width:100%

When there are absolutely positioned child elements in the parent container, the child element setting width:100% actually refers to the width of the padding+content relative to the parent container. Width:100% refers to the content of the child element when the child element is not absolutely positioned, which is equal to the content width of the parent element.

When you change the position of the upper sub-element to relative, its width becomes the width of parent.

5 、 line-height

Do you know the difference between line-height:150% and line-height:1.5? If you know, you can skip here. I don't know and move on to the following:

For example:

As you can see above, when line-height has units, the child element inherits the line-height of the parent element, and when there is no unit, its line-height is equal to the unitless value multiplied by the font size of the child element itself. Obviously, in order not to have an accident, it is recommended that no unit should be preferred.

6. Ex and ch units

Ex: take the x height of the font currently in effect, and calculate it in 0.5em if the x height cannot be determined

Ch: based on the "0" character in the font used by the node, and 0.5em if it is not found

Ex and ch units, similar to em and rem, depend on the current font and font size. However, the difference is that these two products are font-based units of measurement, depending on the set font.

Ch units are usually defined as the width of the number 0. You can find some interesting discussions about it on Eric Meyers's blog, such as setting the width of the letter "N" in an equal width font to 40ch, but it can contain 40 letters in another type of font. The traditional use of this unit is mainly for the typesetting of Braille, but in addition, there must be places where it can be used.

Ex is defined as the height of the lowercase x letter of the current font or the 1em of 1 stroke 2. In many cases, it is the middle mark of the font.

Xmuright; the height of the lower case x

These units have many uses, most of which are used for fine-tuning the layout. For example, the sup element (the text mark in the upper corner) can be implemented through position:relative;bottom: 1ex;. In a similar way, you can implement a lower-corner text label. The default way for browsers is to use the

Superscripts and subscripts have specific vertical alignment rules, but if you want finer-grained and more precise control, you can do something like this:

Css code

7. When using calc, there must be a space between operators, otherwise it may not be valid

These are all the contents of the article "case Analysis of the use of css skills". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.