CSS-Funktionen, die leicht übersehen werden

容易被忽略CSS特性

CSS初学感觉很简单，但随着学习的深入才感觉CSS的水由多深，平常总会遇到各种坑，先总结一些经常遇到的坑

大小写不敏感

虽然我们平时在写CSS的时候都是用小写，但其实CSS并不是大小写敏感的

.test{    background-COLOR:#a00;    width:100px;    height: 100px;}

虽然把background-color写为了background-COLOR，但仍然会生效，之所以写成小写是因为xhtml标准的关系，但是即使不是xhtml还是写成小写比较好，美观、易读而且可以应对可能的转换需求

选择器优先级

当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS有一套优先级的定义。

不同级别

在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。

作为style属性写在元素内的样式

id选择器

类选择器

标签选择器

通配符选择器

浏览器自定义或继承

同一级别

同一级别中后写的会覆盖先写的样式

上面的级别还是很容易看懂的，但是有时候有些规则是多个级别的组合，像这样

               

到底div是应用那条规则呢，有个简单的计算方法（经园友提示，权值实际并不是按十进制，用数字表示只是说明思想，一万个class也不如一个id权值高）

内联样式表的权值为 1000

ID 选择器的权值为 100

Class 类选择器的权值为 10

HTML 标签选择器的权值为 1

我们可以把选择器中规则对应做加法，比较权值，如果权值相同那就后面的覆盖前面的了，div.class的权值是1+10=11，而.test1 .test2的权值是10+10=20，所以div会应用.test1 .test2变成绿色

行内(inline)元素的一些属性

并不是所有的属性对行内元素都能够生效

行内元素不会应用width属性，其长度是由内容撑开的

行内元素不会应用height属性，其高度也是由内容撑开的，但是高度可以通过line-height调节

行内元素的padding属性只用padding-left和padding-right生效，padding-top和padding-bottom会改变元素范围，但不会对其它元素造成影响

行内元素的margin属性只有margin-left和margin-right有效，margin-top和margin-bottom无效

行内元素的overflow属性无效，这个不用多说了

行内元素的vertical-align属性无效（height属性无效）

       123456789123456789    

   

       123456789    

Wie Sie dem Beispiel entnehmen können, haben die von uns für span festgelegten Breiten- und Höhenattribute keine Wirkung, margin-top und margin-bottom sind ungültig, padding- Oben und Polsterung – Die Unterseite ändert den Umfang des Elements (der Hintergrundbereich wird größer), hat jedoch keinen Einfluss auf die Position der Elemente darunter.

Einige sich gegenseitig ausschließende Elemente

Für absolut und feste Positionierung (feste Größe, Breite ist festgelegt und Höhenattribute). Wenn die oberen und linken Attribute festgelegt sind, hat das Festlegen der unteren und rechten Werte keine Auswirkung. Oben und links sollten sonst wie Weiß der Browser, wen er positionieren muss

Für absolute und fest positionierte Elemente, wenn die Werte von oben, links, unten und rechts festgelegt sind, das Randattribut funktioniert nicht

Bei absoluten und fest positionierten Elementen ist das Float-Attribut ebenfalls ungültig, wenn die Werte „oben“, „links“, „unten“ und „rechts“ festgelegt sind.

Wenn das Float-Attribut festgelegt oder absolut ist oder eine feste Positionierung für das Blockelement festgelegt ist, funktioniert das Vertical-Alignment-Attribut nicht mehr

Schriftgrößeneinheit

Die am häufigsten verwendeten Einheiten beim Schreiben von Schriftgrößen sind

px

pt

em

rem

Was bedeuten diese Schriftarten?

px ist die Abkürzung für Pixel, eine auf Pixel basierende Einheit. Während des Surfens im Internet ändern sich der Text und die Bilder auf dem Bildschirm mit der Auflösung des Bildschirms von 100 Pixel ist 800×. Bei einer Auflösung von 600 nimmt es 1/8 der Bildschirmbreite ein, aber bei 1024×768 nimmt es nur etwa 1/10 ein. Wenn daher bei der Definition der Schriftgröße px als Einheit verwendet wird, wird der tatsächlich vom Benutzer angezeigte Text „kleiner“ (natürliche Längeneinheit) und möglicherweise sogar unklar, sobald der Benutzer die Anzeigeauflösung von 800 auf 1024 ändert , was sich auf Durchsuchen auswirkt.

pt ist die Abkürzung für Punkt (Pfund), eine feste Längenmaßeinheit mit einer Größe von 1/72 Zoll. Wenn Sie pt als Texteinheit im Web verwenden, ist die Schriftgröße auf verschiedenen Bildschirmen gleich (gleiche Auflösung), was sich möglicherweise auf den Schriftsatz auswirkt, aber es ist sehr praktisch, pt in Word zu verwenden. Denn der Hauptzweck der Verwendung von Word ist nicht das Durchsuchen auf dem Bildschirm, sondern das Ausgeben und Drucken. Beim Drucken in Entitäten ist pt als natürliche Längeneinheit praktisch und praktisch: Beispielsweise verwenden normale Dokumente in Word „Song-Schriftart 9pt“, Titel verwenden „Helvetica 16pt“ usw. Ganz gleich, wie der Computer eingestellt ist, das wird der Fall sein immer so groß sein, wenn es gedruckt wird.

em: Es handelt sich um eine relative Einheit und eine relative Längeneinheit. Es bezieht sich ursprünglich auf die Breite des Buchstabens M, daher wird es jetzt als Vielfaches der Zeichenbreite bezeichnet ähnlich dem Prozentsatz, wie zum Beispiel: 0,8em, 1,2em, 2em usw. Normalerweise ist 1em = 16px (Standardschriftgröße des Browsers 16px), em bezieht sich auf die Schriftgröße des übergeordneten Elements. Angesichts der Schriftgröße eines übergeordneten Elements auf einer Seite können Sie die Größe aller Elemente proportional ändern, indem Sie ein Element anpassen. Es kann frei skaliert werden, um beispielsweise skalierbare Stylesheets zu erstellen. Ähnlich wie beim Konzept von ex ist ex die Höhe relativ zum Zeichen „x“, das normalerweise der halben Schriftgröße entspricht.

rem: Em legt die Schriftgröße relativ zu seinem übergeordneten Element fest. Um ein Element festzulegen, müssen Sie möglicherweise die Größe seines übergeordneten Elements kennen Bei mehrfacher Verwendung besteht die Gefahr unvorhersehbarer Fehler. Und rem ist relativ zum Stammelement (r:root). Mit rem müssen wir nur einen Referenzwert im Stammelement bestimmen und können dann alle Schriftarten auf der gesamten HTML-Seite steuern.

:checked-Selektorbereich

Wir wissen, dass:checked das ausgewählte Kontrollkästchen und Radio auswählt, siehe Beispiel

< ; head> Option>

Wir sind nicht überrascht, dass die ersten beiden Ränder 10 Pixel groß geworden sind, aber wenn wir uns die ausgewählte Option ansehen, werden wir feststellen, dass der Rand der ausgewählten Option größer geworden ist werden 10px. Es gibt keine Änderung für Optionen, die nicht ausgewählt sind!

Ja: aktiviert wird auch die ausgewählte Option auswählen

Nicht alle Bilder werden geladen

Wir kennen die auf der Seite geschriebenen Bilder. Tags, Bilder werden unabhängig davon geladen, ob sie angezeigt werden oder nicht (versuchen Sie also einfach, Netzwerkverkehr durch display:none für Bilder zu sparen...), wir verwenden auch häufig CSS-Attribute wie backgroung-image, um Bilder zur Seite hinzuzufügen Bilder geladen werden? Sehen wir uns ein Beispiel an

               

   

   

       

   

   

       

   

       

       

看一下网络监视情况（怎么柳岩的照片变小后感觉怪怪的。。。）

我们可以发现图片0和4没有被下载, 0是没有用到的CSS, 4是父容器的display被设为none的情况,这两种情况下的CSS引用的图片是不会被加载的,而父容器设置visibility属性为hidden仍然会加载图片，不要搞混了

 以上就是容易被忽略CSS特性的内容，更多相关文章请关注PHP中文网（www.php.cn）！