A detailed explanation of the details in CSS

It’s okay to write like this until there is a child element that needs to be set to a different font size, for example, in a tag like this:

The cat sat on the mat.

If you want to set the font size of span to 1.2em , what do you need to do? Take out the calculator and calculate the value of 1.2 divided by 1.4. The result is as follows:

p span { font-size: 0.85714em; }

This problem is not limited to em. If you use percentages to create a responsive fluid layout website, and the percentage is related to the container, so if you want to define an element as 40% of its container, its height is 75%, and its width needs to be set to 53.33333% .
Obviously, this is very inconvenient.
Root-related length units
In order to fix the problem of font size definition, the unit rem (root em) can now be used. Rem is also a relative unit, but it corresponds to a fixed basic value. This fixed basic value is the font size of the root element of the document (in an HTML file, it is the html element). Assuming it is the same as the previous example, and the font size of 10px is also set to the size of the root element, then it is OK to write the CSS like this:

p { font-size: 1.4rem; } p span { font-size: 1.2rem; }

These two CSS rules are relative to the root element Font size, such code is more elegant and simpler, especially when setting simple values ​​such as 10px or 12px. This is very similar to using px values, except that rem is extensible.
Among the features introduced in the entire article, the rem feature has relatively good compatibility and can be supported by advanced browsers, including IE9, except Opera Mobile.
Window-related length units
I think the rem unit is cool. It would be even cooler if there was another set of units that could solve the percentage problem. It is similar to rem, but the difference is that it is not relative to the root element of the document, but relative to the size of the device window itself.
These two units are vh and vw, which are the height and width relative to the window size. Each unit is preceded by a number to indicate the percentage it represents.

p { height: 50vh; }

In the above example, the height is set to half the window height. 1vh is equivalent to a percentage of the window height, so 50vh is 50% of the window height.
If the window size changes, then this value will also change. The advantage of this relative to percentage is that you don't need to worry about the parent container. Regardless of its parent container, the 10vw element will always be 10% of the window size.
Correspondingly, there is the vmin unit, which is equivalent to the minimum value of vh or vw. It was also recently announced that the vmax unit will be added to the specification document (although it has not yet been released at the time of this article).
Currently IE9+, Chrome and Safari 6 support this feature.
Value of the operation
If you are making a responsive fluid layout website, you will often encounter the problem of mixed units - using a percentage to set the grid, but using a fixed pixel width to set the margin. For example:

p { margin: 0 20px; width: 33%;}

If the layout only uses padding and border, you can use box-sizing to solve it, but there is nothing you can do about margin. A better and more flexible way is to use the calc() function to set up a mathematical equation between different units, such as:

p { margin: 0 20px; width: calc(33% - 40px);}

It can be used not only to calculate width, but also to calculate length - —If necessary, you can add calc() inside calc().
This feature is supported by both IE9+ and Firefox. Firefox needs to add the -moz- prefix (it may not need to add the prefix in version 16 or 17). Chrome and Safari also support it, but they need to add the -webkit- prefix. However, mobile Webkit does not support it yet.
Load some fonts from the font library
Superior performance is often important, especially the variety of mobile devices on the market - leading to differences and uncertainty in connection speeds - further reflects this importance. One of the ways to speed up page loading is to reduce the number of external files. A new attribute of @font-face, unicode-range, was born for this purpose.
This attribute is unicode-range (encoding range), which represents the parameter range of the encoding font. When loading external files, only the fonts used will be loaded, not the entire font library. The following code demonstrates how to load only three fonts from the foo.ttf font library:

@font-face {font-family: foo;src: url(‘foo.ttf’);unicode-range: U+31-33;}

　　这点对于使用字体图标的页面尤其有用。我测试过，使用unicode-range，加载字体文件的时间平均减少了0.85秒，也不是小数目了。当然，你可能不会这么想。
　　这个属性，目前可以在IE9+、Webkit浏览器（如Chrome和Safari）中运行。
新的伪类
　　单位和值都应该好好利用，但是，让我更兴奋的是选择器和伪类。完善的选择器模式，即使只有少数浏览器支持，都让我兴奋不已。引用乔布斯的话：你要把栅栏的里面修得和外面一样漂亮，即使别人看不到里面——因为你自己知道。
　　我第一次使用:nth-of-type()的时候，简直是一次突破，就像我冲出了思想的桎梏。好吧，我有些夸张了。但有些新的CSS伪类，确实值得狂热一番。
否定伪类
　　你大概不知道 :not() 伪类的好，除非你亲自实践一番。带有参数的 :not() 其实就是普通的选择器——不是复合选择器。一组元素加上选择器 :not()，表示满足这个参数的元素会被排除出去。听起来有些复杂吧？但是实际上非常简单。
　　假设：要对项目列表的奇数行进行选择，但是最后一行除外。如果是以前，需要这样写：

li { color: #00F; } li:nth-child(odd) { color: #F00; } li:last-child { color: #00F; }

　　现在，通过设定:last-child作为否定伪类的参数，就可以把最后一个元素排除，这样少了一行代码，从而更加的简洁和易维护。

li { color: #00F; } li:nth-child(odd):not(:last-child) { color: #F00; }

　　否定伪类看起来并没有什么惊人之处，你可以不用它，但是它还是挺实用的。我曾经把它用在基于Webkit的项目当中，优势还是挺明显的。说实话，它是我最喜欢的伪类之一。
　　是的，我有最喜欢的伪类。
　　在本文提到的特性当中，否定伪类是兼容性最好的，它被IE9+和高级浏览器支持（不需要加浏览器产商前缀）。如果你熟悉jQuery，你可能习惯用它——版本1.0开始就有了，以及相似的not()方法。
“适用于”伪类
　　:matches() 伪类可以用普通的选择器、复合选择器、逗号隔开的列表或任何的选择器组合作为参数。太棒了！但是，它能做什么？
　　:matches() 伪类最强大的地方就是聚合多行选择器。例如，要选择父容器里面其中几个不同子容器里面的p元素，在这之前，代码或许会写成这样：

.home header p,.home footer p,.home aside p {color: #F00;}

　　有了:matches()伪类，就可以把共同点提取出来，缩减代码量。该例子里面，选择器的共同点是以home为起点、以p为终点，所以可以用:matches()把中间的所有元素集合起来。是不是有些困惑？看看代码就明白了：

.home :matches(header,footer,aside) p { color: #F00; }

　　这其实是CSS4的一部分（确切地说，是CSS选择器第四等级），这份规范文档还提到将会有类似的语法（以逗号隔开的复合选择器）应用于:not()伪类。兴奋ing！ 
　　目前，:matches()可以在Chrome和Safari浏览器中运行，但是要加上前缀-webkit-，Firefox也支持，但是要按照旧的写法:any()，同时要加上-moz-前缀。 

The above is the detailed content of A detailed explanation of the details in CSS. For more information, please follow other related articles on the PHP Chinese website!