1、 Elemental margin Of top、bottom And padding Of top、bottom When using percentage as a unit , It's the width relative to the parent element width Not as high as we think height;

for instance :

7 individual Web Front end programmers must be able to use CSS skill


In fact, this phenomenon , We can use it skillfully margin/padding It is highly adaptive ( It is often used for space occupying , Avoid flickering )

Of course, the percentage of the height of the element is relative to the percentage of the height of its parent element ,min-height And max-height The same rule applies .

7 individual Web Front end programmers must be able to use CSS skill

2、 Elements with positioning attributes , Its top、bottom In percent , The percentage is relative to the height of the parent element .

Empathy ,left、right Is relative to the width of the parent element .

7 individual Web Front end programmers must be able to use CSS skill


This point , I was looking up materials and writing this article yesterday — The most comprehensive element horizontal and vertical center method, when you summarize it, you will find that Daniel also misunderstood —-CSS One of the skills of layout – The eighth point in the middle .

3、 Percentage values are not allowed for border width

I won't explain that .

4、width:100%

When the parent container has absolutely positioned child elements , Child element settings width:100% In fact, it refers to... Relative to the parent container padding+content Width . When a child element is a non absolute positioning element width:100% It's about children content , It's equal to the content Width .

7 individual Web Front end programmers must be able to use CSS skill


Add the above subelements to the position Changed to relative after , Its width becomes parent Width .

7 individual Web Front end programmers must be able to use CSS skill


5、line-height

You know, line-height:150% and line-height:1.5 The difference between ? If you know, you can skip here , I don't know :

for instance :

7 individual Web Front end programmers must be able to use CSS skill


7 individual Web Front end programmers must be able to use CSS skill


You can see up here line-height When there is a unit , The child element inherits the parent element line-height Of , When there is no unit , Its line-height It is equal to the value without unit multiplied by the font size of the child element itself . Obviously, in order to avoid accidents , It is suggested that the first choice is to have no unit .

6、ex and ch Company

ex: Take the font of the current effect x Height , There's no way to be sure x In the case of height, with 0.5em Calculation ;

ch: In the font used by the node “0” Character as the benchmark , When you can't find it, it's 0.5em;

7 individual Web Front end programmers must be able to use CSS skill


ex and ch Company , Be similar to em and rem, Depending on the current font and font size . however , The difference is , These two items are based on font units of measurement , Depending on the font set .

ch Units are usually defined as numbers 0 Width . You can Eric Meyers Find some interesting discussions about it in our blog , For example, the letter of an equal width font ”N” The width of is set to 40ch, So in another type of font, it can contain 40 Letters .

The traditional use of this unit is mainly for Braille typesetting , But beyond that , There must be something else that can be used .

ex Defined as the lowercase of the current font x The height of the letter or 1/2 Of 1em. A lot of times , It's the middle of the font .

7 individual Web Front end programmers must be able to use CSS skill


x-height; the height of the lower case x

These units have many uses , Most of them are used to fine tune the layout . For example ,sup Elements ( The upper corner is marked with ), Can pass position:relative;bottom: 1ex; Realization . Similar approach , You can achieve a lower corner of the text mark . The default way for browsers is to use

Superscript and subscript specific vertical alignment rules , But if you want more fine-grained, more precise control , You can do it like this :

Css Code

7 individual Web Front end programmers must be able to use CSS skill


7、 Use calc There should be spaces between the time operators , Otherwise it may not work .