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.

Zentrierung

Die Beherrschung der Zentrierungstechnik ist sehr wichtig für die Eingabe

1 äußerer Rand: Umriss: Keine

2. Polsterung entfernen: Polsterung: 0 Für die Suche mit der Soft-Tastatur Ihres Mobiltelefons müssen Sie auf Apple-Telefonen das from-Tag verwenden:

input::-webkit-outer-spin-button {-webkit-appearance: none; }
input::-webkit-inner-spin-button {-webkit-appearance: none; }
input[type="number"]{-moz-appearance:textfield;}
注意：使用 number 时，安卓下可以调出数字键盘，并且只能输入数字，苹果手机不可以。

background
type="number"1.background-image

: Darauf muss das folgen Bildpfad, z. B. Hintergrundbild: URL (xxx.jpg), URL (xxx.png), ...

2.

Hintergrundposition

: Bei Verwendung muss es konsistent sein mit das Bild des entsprechenden Pfads, z. B. Hintergrundposition :0 0,100 Pixel 100 Pixel, ...

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]

3.unschärfe: Optional. Fuzzy-Länge [tatsächliche Länge ist die Hälfte der angegebenen Länge]

4.Spread: Optional. Die Größe des Schattens. [Kann negativ sein]

5.Farbe: Optional. Die Farbe des Schattens. Siehe CSS-Farbwerte.

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:

box{background:green;width:200px;height:200px;}

/ / 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

2.-webkit-text-size-adjust Der Standardwert für Mobiltelefone ist „Auto“, wodurch die Schriftgröße automatisch angepasst wird. Im Allgemeinen müssen Sie diese Funktion deaktivieren und den Wert auf „Keine“ oder „100 %“ festlegen. Andernfalls kann es zu Stilproblemen kommen.

user-modify

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

flex

Um das Flex-Layout zu verstehen, verstehen Sie zunächst zwei Punkte

Erstens: das Attribut der übergeordneten Box. Verstehen Sie 2 Achsen im übergeordneten Feld.

Horizontale Richtung

input::-webkit-search-cancel-button {display:none} 去除小差号
-webkit-appearance: textfield; 去除默认样式

Vertikale Richtung

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

Eine praktische Zusammenfassung der Verwendung der EasyCanvas-Zeichnungsbibliothek in der Pixeler-Projektentwicklung

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!