Eine ausführliche Erklärung der Details in CSS

Es ist in Ordnung, so zu schreiben, bis es ein untergeordnetes Element gibt, das auf eine andere Schriftgröße eingestellt werden muss, zum Beispiel in einem Tag wie diesem:

The cat sat on the mat.

Wenn Sie möchten Was müssen Sie tun, um die Schriftgröße von span auf 1,2 em festzulegen? Nehmen Sie den Taschenrechner heraus und berechnen Sie den Wert von 1,2 dividiert durch 1,4. Das Ergebnis ist wie folgt:

p span { font-size: 0.85714em; }

Dieses Problem ist nicht auf sie beschränkt. Wenn Sie Prozentsätze verwenden, um eine responsive Website mit flüssigem Layout zu erstellen, und der Prozentsatz sich auf den Container bezieht. Wenn Sie also ein Element als 40 % seines Containers definieren möchten, beträgt seine Höhe 75 % und seine Breite muss auf eingestellt werden 53,33333 % .
Das ist natürlich sehr unpraktisch.
Root-bezogene Längeneinheit
Um das Problem der Schriftgrößendefinition zu beheben, kann nun die Einheit rem (root em) verwendet werden. Rem ist ebenfalls eine relative Einheit, entspricht aber einem festen Grundwert. Dieser feste Grundwert ist die Schriftgröße des Stammelements des Dokuments (in einer HTML-Datei ist es das HTML-Element). Angenommen, es ist dasselbe wie im vorherigen Beispiel und die Schriftgröße von 10 Pixel ist auch als Größe des Stammelements festgelegt, dann kann das CSS folgendermaßen schreiben:

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

Diese beiden CSS-Regeln beziehen sich auf die Schriftgröße des Elements. Dieser Code ist eleganter und einfacher, insbesondere wenn einfache Werte wie 10 Pixel oder 12 Pixel festgelegt werden. Dies ist der Verwendung von px-Werten sehr ähnlich, außer dass rem erweiterbar ist.
Unter den im gesamten Artikel vorgestellten Funktionen weist die rem-Funktion eine relativ gute Kompatibilität auf und kann von erweiterten Browsern, einschließlich IE9, außer Opera Mobile, unterstützt werden.
Fensterbezogene Längeneinheiten
Ich finde die rem-Einheit cool. Es wäre noch cooler, wenn es einen anderen Satz von Einheiten gäbe, der das Prozentproblem lösen könnte. Es ähnelt rem, der Unterschied besteht jedoch darin, dass es nicht relativ zum Stammelement des Dokuments, sondern relativ zur Größe des Gerätefensters selbst ist.
Diese beiden Einheiten sind vh und vw, also die Höhe und Breite im Verhältnis zur Fenstergröße. Jeder Einheit ist eine Zahl vorangestellt, die den Prozentsatz angibt, den sie darstellt.

p { height: 50vh; }

Im obigen Beispiel ist die Höhe auf die halbe Fensterhöhe eingestellt. 1vh entspricht einem Prozentsatz der Fensterhöhe, 50vh entspricht also 50 % der Fensterhöhe.
Wenn sich die Fenstergröße ändert, ändert sich auch dieser Wert. Der Vorteil dieses relativen Prozentsatzes besteht darin, dass Sie sich keine Gedanken über den übergeordneten Container machen müssen. Unabhängig vom übergeordneten Container hat das 10vw-Element immer 10 % der Fenstergröße.
Entsprechend gibt es die Einheit vmin, die dem Mindestwert von vh oder vw entspricht. Kürzlich wurde angekündigt, dass die Einheit vmax zum Spezifikationsdokument hinzugefügt wird (obwohl sie zum Zeitpunkt der Veröffentlichung noch nicht veröffentlicht wurde). diesen Artikel).
Derzeit unterstützen IE9+, Chrome und Safari 6 diese Funktion.
Wert des Ausdrucks
Wenn Sie eine responsive Website mit flüssigem Layout erstellen, werden Sie oft auf das Problem gemischter Einheiten stoßen – Sie verwenden einen Prozentsatz, um das Raster festzulegen, verwenden aber eine feste Pixelbreite, um den Rand festzulegen. Zum Beispiel:

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

Wenn das Layout nur Innenabstände und Ränder verwendet, können Sie das Problem mithilfe der Boxgröße lösen, am Rand können Sie jedoch nichts ändern. Eine bessere und flexiblere Möglichkeit besteht darin, die Funktion calc() zu verwenden, um mathematische Gleichungen zwischen verschiedenen Einheiten aufzustellen, wie zum Beispiel:

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

Sie kann nicht nur zur Berechnung der Breite und Länge verwendet werden; Bei Bedarf können Sie calc() in calc() hinzufügen.
Diese Funktion wird sowohl von IE9+ als auch von Firefox unterstützt. Firefox muss das Präfix -moz- hinzufügen (in Version 16 oder 17 muss es möglicherweise nicht hinzugefügt werden, und Chrome unterstützt es ebenfalls, muss aber hinzugefügt werden). das Präfix -webkit-. Mobile Webkit unterstützt dies jedoch noch nicht.
Laden Sie einige Schriftarten aus der Schriftartenbibliothek
Eine hervorragende Leistung ist oft wichtig, insbesondere die Vielfalt der Mobilgeräte auf dem Markt – die zu Unterschieden und Unsicherheiten bei den Verbindungsgeschwindigkeiten führt – spiegelt diese Bedeutung noch mehr wider. Eine Möglichkeit, das Laden von Seiten zu beschleunigen, besteht darin, die Anzahl externer Dateien zu reduzieren. Zu diesem Zweck wurde ein neues Attribut von @font-face, unicode-range, entwickelt.
Dieses Attribut ist der Unicode-Bereich (Kodierungsbereich), der den Parameterbereich der Kodierungsschriftart darstellt. Beim Laden externer Dateien werden nur die verwendeten Schriftarten geladen, nicht die gesamte Schriftartenbibliothek. Der folgende Code zeigt, wie nur drei Schriftarten aus der Schriftartenbibliothek foo.ttf geladen werden:

@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-前缀。 

Das obige ist der detaillierte Inhalt vonEine ausführliche Erklärung der Details in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!