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 ：
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 .
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 .
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 .
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 .
Add the above subelements to the position Changed to relative after , Its width becomes parent Width .
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 ：
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;
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 .
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 ：
7、 Use calc There should be spaces between the time operators , Otherwise it may not work .