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

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

青灯夜游

Libérer： 2018-09-11 16:02:06

original

2293 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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;
}

Copier après la connexion

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;}

Copier après la connexion

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

1. affichage

2. 🎜>

3. Positionnement

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

Copier après la connexion

1. Positionnement absolu : position:absolute

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

Copier après la connexion

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

2. . Positionnement relatif : position : relative ;

3. Positionnement fixe : position : fixe ;

4. Textarea

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

Copier après la connexion

1. Points de suspension du texte sur une seule ligne

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

Copier après la connexion

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;
   /*文本不换行，这样超出一行的部分被截取，显示...*/
}

Copier après la connexion

8. Transparence

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

Copier après la connexion

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;
}

Copier après la connexion

9. Capture d'écran de l'image img

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

Copier après la connexion

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);

Copier après la connexion

10. Image d'arrière-plan

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

Copier après la connexion

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(){

    $(&#39;.historys img&#39;).each(function(){

        var $this=$(this);

        imgReady($this.attr(&#39;src&#39;),function(){

            if(this.width>this.height){

                $this.attr(&#39;height&#39;,&#39;100&#39;);

                $this.removeAttr(&#39;width&#39;);

            }

        });

    });

});

Copier après la connexion

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);

Copier après la connexion

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 ; Quelques problèmes CSS souvent rencontrés en développement front-end (résumé)

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!