Heim > Artikel > Web-Frontend > Zusammenfassung gängiger CSS-Stile
Dieses Mal werde ich Ihnen eine Zusammenfassung häufig verwendeter CSS-Stile geben. Was sind die Vorsichtsmaßnahmen für die Verwendung häufig verwendeter CSS-Stile? Hier sind praktische Fälle.
Die Beherrschung der Zentrierungstechnik ist sehr wichtig für die Eingabe
input::-webkit-outer-spin-button {-webkit-appearance: none; }
input::-webkit-inner-spin-button {-webkit-appearance: none; }
input[type="number"]{-moz-appearance:textfield;}
注意：使用 number 时，安卓下可以调出数字键盘，并且只能输入数字，苹果手机不可以。
type="number"1.background-image: Darauf muss das folgen Bildpfad, z. B. Hintergrundbild: URL (xxx.jpg), URL (xxx.png), ...
2.3.Hintergrundwiederholung: Die Verwendungsregeln sind die gleichen wie bei Hintergrundposition
4 .Hintergrundfarbe: Legen Sie die Hintergrundfarbe fest
Hinweis: Wenn Sie bei der Verwendung von Hintergrund nicht mehrere Hintergründe verwenden, können Sie zusammengesetzte Schrift verwenden. Wenn nicht, schreiben Sie sie separat, um eine falsche Hintergrundanzeige zu vermeiden. Es muss betont werden, dass bei Verwendung eines Hintergrundbilds nur eine URL folgen kann. Sie müssen die Position mit „background-position“ festlegen und festlegen, ob „background-repeat“ wiederverwendet werden soll, andernfalls tritt ein Fehler auf.
Box-ShadowBox-Shadow: H-Shadow V-Shadow-Unschärfe-Spread-Farbeinsatz;
1.h-Shadow: erforderlich. Die Position des horizontalen Schattens. Negative Werte sind erlaubt. [Position relativ zur nächsten Grenze]
2.v-shadow: Erforderlich. Die Position des vertikalen Schattens. Negative Werte sind erlaubt. [Position relativ zur nächsten Grenze]
6.Einsatz: Optional. Verwandeln Sie den äußeren Schatten (Anfang) in einen inneren Schatten.
Erklärung:
1. Wenn sowohl der H-Schatten als auch der V-Schatten 0 sind, bedeutet dies, dass kein Versatz vorliegt, was eine Streuung in alle Richtungen bedeutet Der tatsächliche Unschärfeabstand ist der eingestellte Wert.
3. Legen Sie die angegebene Seite fest, die hauptsächlich die Position des horizontalen und vertikalen Schattens steuert. Sie können beispielsweise die vier Seiten angeben 🎜>.box{ box-shadow: 0 -2px 0 0 red, 2px 0 0 0 red, 0 2px 0 0 red, -2px 0 0 0 red;}
4. Sie können dieses Attribut verwenden, um den Rahmen zu ersetzen Der Vorteil besteht darin, dass der Schatten keinen Platz einnimmt und die Animation sich nicht bewegt
Zum Beispiel:
/ / Die Positionsverarbeitung ist abgeschlossen, andernfalls wirkt sie sich auf das Layout aus
.box1:hover{border:2px solid # ffffff;box-sizing:border-box;position:relative;top:-2px;left:-2px };
.box2:hover{box-shadow:0 0 0 2px #ffffff;}
font
1.
font-size-adjust
: Schriftart festlegen um in kleinen Schriftarten besser lesbar zu sein.
Wenn Sie beispielsweise die Schriftart auf 100 Pixel einstellen, beträgt der Einstellungswert 0,58, was einer kleinen Größe von 58 Pixel entspricht, was die Lesbarkeit erleichtert. Details
user-modify hat drei Attributwerte: write-only (schreibgeschützt), read-write (read-write), read-only (read-only), die für normale Zwecke verwendet wird. Die Bearbeitbarkeit eines Elements funktioniert ähnlich wie das konzentrierte Attribut. Sie müssen bei der Verwendung ein Browser-Präfix hinzufügen. Der Test ergab, dass Firefox
Sichtbarkeit nicht unterstützt. Der Unterschied zwischen
und Opazität besteht darin, dass das Attribut bei Verwendung auf „versteckt“ gesetzt wird, was Platz belegt, aber keinen Einfluss auf das Auslösen von Ereignissen hat . Wenn beispielsweise ein Element, das das versteckte Attribut verwendet, ein anderes Element vollständig abdeckt, werden die Ereignisse des abgedeckten Elements weiterhin normal ausgelöst. Und es werden keine eigenen Ereignisse ausgelöst. Zeigen Sie Elemente an, indem Sie das sichtbare Attribut
Um das Flex-Layout zu verstehen, verstehen Sie zunächst zwei Punkte
Horizontale Richtung
input::-webkit-search-cancel-button {display:none} 去除小差号
-webkit-appearance: textfield; 去除默认样式
flex-direction : 属性决定主轴的方向（即项目的排列方向） row : 横向，按元素顺序，居左[主轴为水平方向，起点在左端] row-reverse ：横向，倒序，居右[主轴为水平方向，起点在右端] column ：纵向，按元素顺序，[主轴为垂直方向，起点在上沿] column-reverse : 纵向，倒序[主轴为垂直方向，起点在下沿] flex-wrap : 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行 nowrap : （默认）不换行，盒子会自适应 wrap : 换行，第一行在上方 wrap-reverse : 换行，第一行在下方 flex-flow ：<flex-direction> || <flex-wrap> 合并写法 justify-content : 属性定义了项目在主轴上的对齐方式，控制水平方向 flex-start : 左对齐 flex-end : 右对齐 center : 水平居中 space-between : 子元素间隔相等并自适应 space-around : 子元素两端间隔自适应
Zweitens: Subbox-Attribute
align-items : 属性定义项目在交叉轴上如何对齐，控制垂直方向 flex-start : 上对齐 flex-end : 下对齐 center : 垂直居中 baseline : 文字低端对齐 stretch : 如果项目未设置高度或设为auto，将占满整个容器的高度( 默认值 ) align-content ：属性定义了多根轴线的对齐方式。 如果项目只有一根轴线，该属性不起作用。( 多个轴 )，控制垂直方向 flex-start : 多轴上对齐 flex-end : 多轴上下对齐 center : 多轴居中 space-between ： 两端对齐，均分剩余空间
Andere
order : 指定元素权重，默认为 0，权重越大，对应的元素越靠后。在使用时注意 flex-direction 的属性值 flex-grow ：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 分配空间的权重，按权重比均分剩余空间(注意是宽度，不包含 padding 和 margin ) flex-shrink : 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 值为 0 ：不缩小 flex-basis ：定义了在分配多余空间之前，项目占据的主轴空间（main size）。 浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小 flex : 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 align-self : 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。[注意换行] auto ：默认值 flex-start ：上对齐 flex-end ：下对齐 center : 垂直居中 baseline : 文本基线对齐(设置所有的item)
Ich glaube, Sie haben den Fall gelesen In diesem Artikel beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Detaillierte Erläuterung der Schritte zum Hervorheben ausgewählter Li in der React-Implementierung
Das obige ist der detaillierte Inhalt vonZusammenfassung gängiger CSS-Stile. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!