13 praktische CSS-Tipps, die Ihnen helfen, die Effizienz der Frontend-Entwicklung zu verbessern!

In diesem Artikel werden 13 CSS-Techniken zusammengestellt und geteilt, die im Frontend nützlich sein können, darunter das Ändern von Eingabeplatzhalterstilen, mehrzeiliger Textüberlauf, das Ausblenden von Bildlaufleisten, das Ändern der Cursorfarbe usw. Ich hoffe, dass es für alle hilfreich ist!

Ändern Sie den Eingabeplatzhalterstil, den mehrzeiligen Textüberlauf, blenden Sie Bildlaufleisten aus, ändern Sie die Cursorfarbe sowie die horizontale und vertikale Zentrierung. Was für eine vertraute Szene! Frontend-Entwickler beschäftigen sich fast täglich mit ihnen. In diesem Artikel werden 13 CSS-Fähigkeiten gesammelt. Lassen Sie uns sie gemeinsam überprüfen.

1. Lösen Sie das Problem des 5-Pixel-Abstands in Bildern

Sind Sie häufig auf das Problem eines zusätzlichen 5px-Abstands am unteren Rand von Bildern gestoßen? Keine Sorge, es gibt 4 Möglichkeiten, das Problem zu lösen. [Empfohlenes Lernen: CSS-Video-Tutorial5px 间距的问题？不着急，有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)]

• Lösung 1: Das Elternteil Elements font-size:0px
• Lösung 2: Fügen Sie den Stil von img zu display:block
• Lösung hinzu Lösung 3: Fügen Sie den Stil von img zu vertical-align:bottom
• hinzu. Lösung 4: Fügen Sie den Stil des übergeordneten Elements zu line-height:5px< / hinzu. li>

2. So stellen Sie die Höhe des Elements auf die gleiche Höhe wie das Fenster ein

Im aktuellen Frontend hat CSS eine Einheit von vh , setzen Sie den Elementhöhenstil auf height:100vh

3 Ändern Sie den Platzhalterstil des Eingabefelds

🎜🎜Dies ist der Formular-Eingabefeld-Platzhalterattribut, wie man den Standardstil wie folgt ändert: 🎜

body{
  filter: grayscale(1);
}

🎜4 Verwenden Sie den :not-Selektor 🎜🎜🎜Alle Elemente Mit Ausnahme des letzten Elements erfordern alle einen bestimmten Stil, der leicht mit dem not-Selektor erreicht werden kann. 🎜🎜Um beispielsweise eine Liste zu implementieren, muss das letzte Element nicht wie folgt unterstrichen werden: 🎜rrreee

🎜5. Verwenden Sie caret-color um die Cursorfarbe zu ändern🎜🎜🎜 Manchmal ist es notwendig, die Farbe des Cursors zu ändern. Es ist Zeit für Caret-Farben. 🎜rrreee

🎜6. Verwenden Sie das Flex-Layout, um Elemente intelligent am unteren Rand anzuheften. 🎜🎜🎜Wenn der Inhalt nicht ausreicht, sollte sich die Schaltfläche am unteren Rand der Seite befinden. Wenn genügend Inhalt vorhanden ist, sollte die Schaltfläche dem Inhalt folgen. Wenn Sie auf ähnliche Probleme stoßen, können Sie flex verwenden, um ein intelligentes Layout zu implementieren! 🎜rrreee🎜Der CSS-Code lautet wie folgt: 🎜rrreee

🎜7 Entfernen Sie den Pfeil am Ende von type="number" 🎜🎜🎜By Standardmäßig ist der Eingabetyp Am Ende von type="number" wird ein kleiner Pfeil angezeigt, der jedoch manchmal entfernt werden muss. Sie können den folgenden Stil verwenden: 🎜rrreee

🎜8. Verwenden Sie outline:none. Löschen Sie die Eingabestatuszeile. 🎜🎜🎜Wenn das Eingabefeld ausgewählt ist, wird standardmäßig eine blaue Statuszeile angezeigt, die entfernt werden kann mit outline:none. 🎜

🎜9. Lösen Sie das Problem, dass die iOS-Bildlaufleiste hängen bleibt. Auf Apple-Telefonen bleiben Elemente beim Scrollen häufig hängen. Derzeit wird nur eine CSS-Zeile unterstützt es. Flexibles Scrollen. 🎜rrreee

🎜10. Zeichnen Sie ein Dreieck 🎜🎜rrreee

🎜11. Passen Sie den ausgewählten Textstil an🎜🎜🎜Sie können Stile verwenden Passen Sie die Farbe und den Stil der Textauswahl an: 🎜rrreee

🎜12 Text, der nicht ausgewählt werden darf🎜🎜🎜Stil verwenden Benutzer -select: none;🎜<h3 data-id="heading-12">🎜13 Verwenden Sie <code>filter:grayscale(1), um die Seite in den Graumodus zu versetzen 🎜🎜🎜Eine Zeile Der Code versetzt die Seite in den Graumodus. 🎜rrreee🎜 (Lernvideo-Sharing: 🎜Web-Frontend🎜)🎜

Das obige ist der detaillierte Inhalt von13 praktische CSS-Tipps, die Ihnen helfen, die Effizienz der Frontend-Entwicklung zu verbessern!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!