Eine Sammlung von CSS-Wissenspunkten

Dieser Artikel stellt eine Sammlung von CSS-Wissenspunkten vor

CreateTime--29. September 2016 09:43:10
Autor:Marydon
1. Linearer Farbverlauf der Hintergrundfarbe

background-color:linear-gradient(100deg,#FFF,#111);/*由黑色向白色渐变 deg表示度数*/

UpdateTime--25. Oktober 2016 11:37:53
UpdateTime--23. November 2016 09:53:46
2 Tabellenränder sollen zu einem einzigen Rahmen zusammengeführt werden

border-collapse: collapse;/*前提：table的border=1或border="1"或border="1px"*/

UpdateTime--October 29, 2016 09:04: 07
3 Höhe und automatische Höhenerweiterung

#pHeight{height:auto;min-height:5px;width:800px; background:#bbeeeb;margin:0 auto;} 　　

<p id="pHeight"> 　　　
此p具有最小高度且高度可以随着内容的增高而自动伸展 
<br/>　　此p具有最小高度且高度可以随着内容的增高而自动伸展 
</p>

Mindestbreite und automatische Breitenerweiterung festlegen

width:auto;min-width:5px;height:800px;

Zwei Möglichkeiten, Zeilenumbrüche zu deaktivieren
Methode 1:
Normalerweise im Browser. Das angezeigte Dokument wird automatisch umbrochen, wenn es das erreicht Unten im Browser-Banner, aber wenn der Text in den Tags ~ enthalten ist, wird er nicht umbrochen.
Verwenden Sie das Tag < /nobr> 🎜> CSS-Stil verwenden

style="white-space:nowrap;"

UpdateTime--November 25, 2016 08:57: 49

td so einstellen, dass Zeilenumbrüche verhindert werden

<td nowrap="nowrap"></td>

UpdateTime--31. Oktober 2016 09:44:17

5.Anzeigestil

Inline Inline-Elemente (belegt eine Zeile mit anderen Elementen , keine Zeilenumbrüche, Breite und Höhe können nicht festgelegt werden)
block Elemente auf Blockebene (belegt nur eine Zeile, Breite und Höhe können festgelegt werden)
inline-block Inline-Blockebene Element (belegt eine Zeile mit anderen Elementen, aber kann Breite und Höhe festlegen) (hat die Eigenschaften sowohl von Inline-Elementen als auch von Elementen auf Blockebene)
Keine Verstecke das Element

document.getElementById("aa").style.display="";//表示的是：清除display样式，display将使用默认值（块元素会变成block，内联元素会变成inline）

UpdateTime- -24. November 2016 11:44:31

6.ime-mode-Syntax und Texttransformationssyntax

UpdateTime--15. Dezember 2016 19:52:16

/*屏蔽输入法，可以用来禁止录入中文*/
　　ime-mode:disabled; //IE兼容，chrome不兼容
　　<input type="text" name="mobile" style="ime-mode:disabled;" />
/*将输入的英文字母转全部换成大写字母*/
　　text-transform:uppercase;
　　<input type="text" name="mobile" style="text-transform:uppercase;" />
UpdateTime--2017年1月9日10:23:23
/*将输入的英文字母转全部换成小写字母*/
　　text-transform:lowercase;
　　<input type="text" style="text-transform:lowercase;"/>

Detaillierte Einführung

ime-mode-Syntax: (Diese Syntax ist im Google-Browser ungültig und muss mit js gesteuert werden. Siehe Datei „Eingabetextfeld-Eingabeinhaltssteuerung“)

ime-modus: auto |. aktiv |. deaktiviert
Wert:
auto: Standardwert. Hat keinen Einfluss auf den Status von IME. Das Gleiche gilt, wenn das ime-mode-Attribut nicht angegeben ist.
Aktiv: Gibt alle mit IME eingegebenen Zeichen an. Das heißt, die lokale Spracheingabemethode zu aktivieren. Der Benutzer kann den IME weiterhin deaktivieren
inaktiv : Gibt alle Zeichen an, die nicht über den IME eingegeben werden. Das heißt, Nicht-Muttersprachen zu aktivieren. Der Benutzer kann den IME weiterhin deaktivieren
Deaktiviert: Deaktiviert den IME vollständig. Für fokussierte Steuerelemente (z. B. Eingabefelder) können Benutzer IME nicht aktivieren
　　text-transform: none | Es findet keine Konvertierung statt
Großschreibung: Konvertieren Sie den ersten Buchstaben jedes Wortes in Großbuchstaben, und für den Rest erfolgt keine Konvertierung
Großbuchstaben: In Großbuchstaben konvertieren
Kleinbuchstaben: In Kleinbuchstaben konvertieren
7. Legen Sie p im Inhalt fest automatischer Umbruch
Wenn das P-Feld eine feste Höhe und Breite hat, überschreitet der angezeigte Inhalt die Breite von p und der Inhalt wird nicht über das Problem hinaus umbrochen
CSS-Stil festlegen

8. Wenn der Inhalt in p und li die Breite des Containers überschreitet, wird der überschüssige Teil in der Form „..“ angezeigt.

Voraussetzung: Die Breite von p und li müssen zuerst bestimmt werden

　　word-wrap:break-word;

Attribute hinzufügen

9. Textfeld- und Passwortfeld-Anzeigestilsteuerung im IE-Browser

　　text-overflow:ellipsis;
　　white-space:nowrap;
　　overflow:hidden;

/*去除IE浏览器文本框右侧出现叉号*/
　　#aa::-ms-clear {
　　　　display:none;
　　}
　　/*去除IE浏览器密码框右侧出现眼睛*/
　　#bb::-ms-reveal {
　　　　display:none;
　　}

Das obige ist der detaillierte Inhalt vonEine Sammlung von CSS-Wissenspunkten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!