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
Verwenden Sie das Tag
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 TexttransformationssyntaxUpdateTime--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 werdenword-wrap:break-word;
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!