Einige CSS-Probleme, die häufig bei der Front-End-Entwicklung auftreten (Zusammenfassung)

Dieses Kapitel bringt Ihnen einige CSS-Probleme (Zusammenfassung), die bei der Front-End-Entwicklung häufig auftreten. Es hat einen gewissen Referenzwert. Ich hoffe, es wird für Sie hilfreich sein.

1. Fragen zur Eingabe

1. Die Eingabe ist editierbar

<div>
   <input type="text" list="itemlist" name="itemid" value="{$data.itemid}" >
 　<datalist id="itemlist">
     <option>item1</option>
     <option>item2</option>
   </datalist>
</div>

Die Eingabe ist ein Dropdown-Menü

<select>
    <option value="-1" >---请选择分辨率---</option>
    <option value="0" >320 X 240</option>
</select>

3 . Der Eingaberand wird beim Klicken nicht angezeigt

Eingabe-Klickrahmenstil ist ungültig

outline: none;  /**/

Eingabeaufforderungstext: Platzhalter="Mobiltelefonnummer"

Eingabeaufforderungstext ändern Farbe

::-webkit-input-placeholder { /* input提示文字颜色 */
    color: #fff;
    font-size:20px;
}

5. Eingabe Der Hintergrund ist gelb

Dieses Klickfeld wird nicht mehr gelb angezeigt

input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset !important;}

Eine andere Möglichkeit besteht darin, das automatische Ausfüllen zu deaktivieren: autocomplete=" aus"

2 , ob Platz belegt werden soll: ein-/ausblenden

1. Anzeige

display:none;  /*不占位*/
display: block;  /*显示*/

2. Sichtbarkeit

visibility: hidden;   /*占位*/
visibility: visible;  /*显示*/

3. Positionierung

1. Absolute Positionierung: Position: absolut

Das übergeordnete Element erhöht sich nicht automatisch in der Höhe: overflow:auto;

2. Relative Positionierung: Position: relativ;

3. Feste Positionierung:

1. Textarea-Domäne, um eine hohe Anpassungsfähigkeit zu erreichen

5

.testdisplay {
   width: 100%;
   min-height: 200px;
   max-height: 400px;
   margin-left: auto;
   margin-right: auto;
   outline: 0;
   font-size: 12px;
   line-height: 24px;
   word-wrap: break-word;
   overflow-x: hidden;
   overflow-y: auto;
   /*box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);*/
}

6. Auslassungspunkte für einzeiligen Text

 cursor: pointer; /*手指光标*/

7. Änderung der Bildlaufleiste Stil

.digital-limit {
   overflow: hidden;
   text-overflow: ellipsis;
   /*显示...*/
   white-space: nowrap;
   /*文本不换行，这样超出一行的部分被截取，显示...*/
}

8. Transparenz

1. Der Hintergrund und die Schriftart sind transparent

.digital-normal {
   display: -webkit-box;
   -webkit-box-orient: vertical; 
   -webkit-line-clamp: 3; 
   overflow: hidden;
}

2. Der Hintergrund ist transparent und die Schriftart ist undurchsichtig

::-webkit-scrollbar {/*滚动条整体样式*/
   width:  8px !important;     /*高宽分别对应横竖滚动条的尺寸*/
   height: 8px !important;
}
::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
   border-radius: 8px !important;
   -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,.1) !important;
   background: rgba(0,0,0,.1) !important;
}
::-webkit-scrollbar-track {/*滚动条里面轨道*/
   -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0) !important;
   border-radius: 10px !important;
   background: rgba(0,0,0,0) !important;
}

9. Screenshot des IMG-Bildes

opacity：0.5; /* 0-1 的透明度 */

Verwenden Sie js, wenn das Bild gerade erst geladen wird. Sie können seine Breite und Höhe ermitteln und dann mit js entscheiden, ob die Höhe oder Breite des Bildes begrenzt werden soll. Wie Sie die Größe ermitteln, wenn das Bild geladen wird, erfahren Sie hier.

Js:

background: rgba(216, 216, 216, .1.5);

10. Erweitern Sie das Bild proportional, um das Element auszufüllen, d. h. cover value: background-size:cover

2. Die Größe des Bildes wird proportional zur Größe des Elements verkleinert, d des Bildes selbst, also automatischer Wert: Hintergrundgröße;

Keine Kachelung: Hintergrundwiederholung: keine Wiederholung; Horizontale Kachelung: Hintergrundwiederholung: Wiederholung-x; Vertikale Kachelung: Hintergrundwiederholung: Wiederholung-y; Behoben: Hintergrundanhang: behoben; Scrollen: Hintergrundanhang: scrollen; Horizontale Zentrierung: Hintergrundposition: Mitte; Horizontal zentrieren und vertikal zentrieren: Hintergrundposition: Mitte Mitte;

Das obige ist der detaillierte Inhalt vonEinige CSS-Probleme, die häufig bei der Front-End-Entwicklung auftreten (Zusammenfassung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!