13 conseils CSS pratiques pour vous aider à améliorer l'efficacité du développement front-end !

Cet article compile et partage 13 techniques CSS qui peuvent être utiles sur le front-end, notamment la modification des styles d'espace réservé de saisie, le débordement de texte multiligne, le masquage des barres de défilement, la modification de la couleur du curseur, etc. J'espère qu'il sera utile à tout le monde !

Modifiez le style de l'espace réservé de saisie, le débordement de texte multiligne, masquez les barres de défilement, modifiez la couleur du curseur, le centrage horizontal et vertical. Quelle scène familière ! Les développeurs front-end les traitent presque tous les jours. Cet article rassemble 13 compétences CSS, passons en revue ensemble.

1. Résolvez le problème de l'espacement de 5 px dans les images

Rencontrez-vous souvent le problème de l'espacement supplémentaire de 5px au bas des images ? Ne vous inquiétez pas, il existe 4 façons de résoudre ce problème. [Apprentissage recommandé : tutoriel vidéo CSS5px 间距的问题？不着急，有4种方法可以解决。【推荐学习：css视频教程】

• 解决方案 1：将其父元素的 font-size:0px
• 解决方案 2：将 img 的样式增加 display:block
• 解决方案 3：将 img 的样式增加 vertical-align:bottom
• 解决方案 4：将父元素的样式增加 line-height:5px

2. 如何让元素高度与窗口相同

在现在前端中，CSS有一个单位是 vh，将元素高度样式设置为 height:100vh

3. 修改输入框 placeholder 样式

这个是表单输入框占位符属性，如何来修改默认样式，如下：

input::-webkit-input-placeholder {
  color: #babbc1;
  font-size: 12px;
}

4. 使用 :not 选择器

除了最后一个元素之外的所有元素都需要一些样式，使用 not 选择器可以非常容易实现。

例如实现一个列表，最后一个元素不需要下划线，如下：

li:not(:last-child) {
  border-bottom: 1px solid #ebedf0;
}

5. 使用 caret-color 修改光标颜色

有时需要修改光标的颜色。现在是插入符号颜色显示时间。

.caret-color {
  width: 300px;
  padding: 10px;
  margin-top: 20px;
  border-radius: 10px;
  border: solid 1px #ffd476;
  box-sizing: border-box;
  background-color: transparent;
  outline: none;
  color: #ffd476;
  font-size: 14px;
  /* 关键样式 */
  caret-color: #ffd476;
}

.caret-color::-webkit-input-placeholder {
  color: #4f4c5f;
  font-size: 14px;
}

6. 使用 flex 布局将元素智能地固定在底部

当内容不够时，按钮应该在页面底部。当有足够的内容时，按钮应该跟随内容。当遇到类似问题时，可以使用flex实现智能布局！

<div class="container">
  <div class="main">这里为内容</div>
  <div class="footer">按钮</div>
</div>

CSS 代码如下：

.container {
  height: 100vh;
  /* 关键样式 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.main {
  /* 关键样式 */
  flex: 1;
  background-image: linear-gradient(
    45deg,
    #ff9a9e 0%,
    #fad0c4 99%,
    #fad0c4 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.footer {
  padding: 15px 0;
  text-align: center;
  color: #ff9a9e;
  font-size: 14px;
}

7. 去掉 type="number" 末尾的箭头

默认情况下，input 类型为 type="number" 的末尾会出现一个小箭头，但有时需要将其去掉，可以用一下样式：

input {
  width: 300px;
  padding: 10px;
  margin-top: 20px;
  border-radius: 10px;
  border: solid 1px #ffd476;
  box-sizing: border-box;
  background-color: transparent;
  outline: none;
  color: #ffd476;
  font-size: 14px;
  caret-color: #ffd476;
  display: block;
}

input::-webkit-input-placeholder {
  color: #4f4c5f;
  font-size: 14px;
}
/* 关键样式 */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

8. 使用 outline:none 删除输入状态行

当输入框被选中时，默认会有一个蓝色的状态行，可以使用 outline:none 将其去掉。

9. 解决iOS滚动条卡住的问题

在苹果手机上，经常会出现滚动时元素卡住的情况，这个时候只有一行CSS会支持弹性滚动。

body,html{
  -webkit-overflow-scrolling: touch;
}

10. 画三角形

.triangle {
  display: inline-block;
  margin-right: 10px;
  /* 基础样式 */
  border: solid 10px transparent;
}
/* 向下三角形 */
.triangle.bottom {
  border-top-color: #0097a7;
}
/* 向上三角形 */
.triangle.top {
  border-bottom-color: #b2ebf2;
}
/* 向左三角形 */
.triangle.left {
  border-right-color: #00bcd4;
}
/* 向右三角形 */
.triangle.right {
  border-left-color: #009688;
}

11. 自定义选定的文本样式

可以通过样式自定义文本选择的颜色和样式，关键样式如下：

::selection {
  color: #ffffff;
  background-color: #ff4c9f;
}

12. 不允许选择的文本

使用样式 user-select: none;

13 使用 filter:grayscale(1)]

• Solution 1 : Son parent font-size:0px
• Solution 2 : Ajoutez le style de img à display:block
• Solution Solution 3 : Ajoutez le style de img à vertical-align:bottom
• Solution 4 : ajoutez le style de l'élément parent à line-height:5px< / li>

2. Comment rendre la hauteur de l'élément identique à celle de la fenêtre

Dans le front-end actuel, CSS a une unité de vh , définissez le style de hauteur de l'élément sur height:100vh

3. Modifiez le style d'espace réservé de la zone de saisie

🎜🎜C'est le. Attribut d'espace réservé de la zone de saisie du formulaire, comment modifier le style par défaut, comme suit : 🎜

body{
  filter: grayscale(1);
}

🎜4 Utilisez le sélecteur :not 🎜🎜🎜tous les éléments. sauf le dernier élément Tous nécessitent un certain style, qui peut être facilement obtenu en utilisant le sélecteur not. 🎜🎜Par exemple, pour implémenter une liste, le dernier élément n'a pas besoin d'être souligné, comme suit : 🎜rrreee

🎜5 Utilisez caret-color pour modifier la couleur du curseur🎜🎜🎜 Parfois il est nécessaire de modifier la couleur du curseur. C'est l'heure de la couleur du curseur. 🎜rrreee<h3 data-id="heading-5">🎜6. Utilisez la mise en page flexible pour épingler intelligemment les éléments en bas🎜🎜🎜Lorsque le contenu n'est pas suffisant, le bouton doit être en bas de la page. Lorsqu'il y a suffisamment de contenu, le bouton doit suivre le contenu. Lorsque vous rencontrez des problèmes similaires, vous pouvez utiliser <code>flex pour implémenter une mise en page intelligente ! 🎜rrreee🎜Le code CSS est le suivant : 🎜rrreee

🎜7 Supprimez la flèche à la fin de type="number" 🎜🎜🎜By. par défaut, le type d'entrée est Une petite flèche apparaîtra à la fin de type="number", mais parfois elle doit être supprimée. Vous pouvez utiliser le style suivant : 🎜rrreee

🎜8. Utilisez outline:none Supprimez la ligne d'état d'entrée🎜🎜🎜Lorsque la zone de saisie est sélectionnée, il y aura une ligne d'état bleue par défaut, qui peut être supprimée. en utilisant outline:none. 🎜

🎜9. Résolvez le problème du blocage de la barre de défilement iOS🎜🎜🎜Sur les téléphones Apple, les éléments restent souvent bloqués lors du défilement. Pour le moment, une seule ligne CSS est prise en charge. Défilement flexible. 🎜rrreee

🎜10. Dessinez un triangle 🎜🎜rrreee

🎜11. Personnalisez le style de texte sélectionné🎜🎜🎜Vous pouvez utiliser des styles. Personnalisez la couleur et le style de la sélection de texte. Les styles clés sont les suivants : 🎜rrreee

🎜12 Texte dont la sélection n'est pas autorisée🎜🎜🎜utilisez le style user. -select: none;🎜<h3 data-id="heading-12">🎜13 Utilisez <code>filter:grayscale(1) pour mettre la page en mode gris 🎜🎜🎜Une ligne de code mettra la page en mode gris. 🎜rrreee🎜 (Partage de vidéos d'apprentissage : 🎜front-end web🎜)🎜

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!