Quelques problèmes CSS souvent rencontrés en développement front-end (résumé)

Ce chapitre vous apporte quelques problèmes CSS (résumé) qui sont souvent rencontrés dans le développement front-end. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Questions sur la saisie

1. La saisie est modifiable et déroulante

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

2. 3. Le clic de saisie sur la bordure ne s'affiche pas

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

Le style de bordure de clic de saisie n'est pas valide

Texte d'invite : placeholder="Numéro de téléphone portable"

outline: none;  /**/

Saisie. modifier la couleur du texte d'invite

5. L'arrière-plan de saisie est jaune

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

Cette zone de clic n'apparaîtra plus en jaune

Une autre option consiste à désactiver le remplissage automatique : autocomplete= "off"

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

2. S'il faut occuper de l'espace : afficher/masquer

1. affichage

2. 🎜>

3. Positionnement

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

1. Positionnement absolu : position:absolute

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

Le parent n'augmente pas automatiquement en hauteur. Solution : overflow:auto;

2. . Positionnement relatif : position : relative ;

3. Positionnement fixe : position : fixe ;

4. Textarea

1.

5. Curseur de doigt

6. Points de suspension du texte

.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);*/
}

1. Points de suspension du texte sur une seule ligne

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

2. Multi -points de suspension du texte

7. Modifier le style de la barre de défilement

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

8. Transparence

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

1. >

2. L'arrière-plan est transparent et la police est opaque

::-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. Capture d'écran de l'image img

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

Vous pouvez obtenir la largeur et la hauteur de l'image. js au moment où le chargement commence, puis utilisez js pour décider s'il faut limiter la hauteur ou la largeur de l'image. Comment obtenir la taille au début du chargement de l’image peut être trouvé ici.

Js :

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

10. Image d'arrière-plan

.historys img{
    width: 100%;
    height: 100%;
    position: absolute;
    right: -5px;
    clip: rect(0 103px 100px 0px);
}

1 Agrandissez l'image proportionnellement pour remplir l'élément, c'est-à-dire la valeur de couverture : background-size:cover. ;

2. L'image est réduite proportionnellement pour s'adapter à la taille de l'élément, c'est-à-dire contain value: background-size:contain; 3. La taille est remplie avec la taille de l'image. lui-même, c'est-à-dire la valeur auto : background -size:auto;

$(function(){

    $('.historys img').each(function(){

        var $this=$(this);

        imgReady($this.attr('src'),function(){

            if(this.width>this.height){

                $this.attr('height','100');

                $this.removeAttr('width');

            }

        });

    });

});

4. Flou l'image

Utilisez la fonction filter() pour flouter l'arrière-plan :

5. Autres

Pas de carrelage : répétition d'arrière-plan : non-répétition ; Carrelage horizontal : background-repeat : répéter-x

Carrelage vertical : background-repeat : répéter-y

Corrigé : pièce jointe d'arrière-plan : corrigé

-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
 filter: blur(5px);

Défilement : pièce jointe d’arrière-plan : défilement ;

Centrage horizontal : background-position : centre ; Centrer horizontalement et centrer verticalement : background-position : centre centre ;

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!