프런트엔드 개발 효율성을 향상시키는 데 도움이 되는 13가지 실용적인 CSS 팁!

이 글은 입력 자리 표시자 스타일 수정, 여러 줄 텍스트 오버플로, 스크롤 막대 숨기기, 커서 색상 수정 등 프런트 엔드에 유용할 수 있는 13가지 CSS 기술을 모아서 공유합니다. 모든 사람에게 도움이 되기를 바랍니다!

입력 자리 표시자 스타일 수정, 여러 줄 텍스트 오버플로, 스크롤 막대 숨기기, 커서 색상 수정, 가로 및 세로 가운데 맞춤. 정말 익숙한 장면이네요! 프런트엔드 개발자는 거의 매일 이러한 문제를 다루고 있습니다. 이 기사에서는 13가지 CSS 기술을 모아서 함께 검토해 보겠습니다.

1. 이미지의 5px 간격 문제 해결

이미지 하단에 추가 5px 간격 문제가 자주 발생하시나요? 걱정하지 마십시오. 해결 방법에는 4가지가 있습니다. [추천 학습: css 동영상 튜토리얼5px 间距的问题？不着急，有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)]

• 해결책 1: 부모 요소의 font-size:0px
• 해결책 2: img 스타일을 display:block에 추가
• 해결책 3: img 스타일을 vertical-align:bottom에 추가
• 해결 방법 4: 상위 요소의 스타일을 line-height:5px에 추가/ li>

2. 요소 높이를 창과 동일하게 만드는 방법

현재 프런트엔드에서 CSS는 단위를 갖습니다. vh , 요소 높이 스타일을 height:100vh

3으로 설정합니다. 입력 상자 자리 표시자 스타일

🎜🎜이것은 양식 입력 상자 자리 표시자 속성, 기본 스타일을 수정하는 방법은 다음과 같습니다. 🎜

body{
  filter: grayscale(1);
}

🎜4 :not 선택기를 사용하세요. 🎜🎜🎜모든 요소 마지막 요소를 제외하고 모두 일부 스타일이 필요하며 not 선택기를 사용하여 쉽게 구현할 수 있습니다. 🎜🎜예를 들어 목록을 구현하려면 다음과 같이 마지막 요소에 밑줄을 그을 필요가 없습니다. 🎜rrreee

🎜5 caret-color를 사용하세요. > 커서 색상을 수정하려면🎜🎜🎜 가끔 커서 색상을 수정해야 할 때가 있습니다. 이제 캐럿 색상 시간입니다. 🎜rrreee

🎜6. 플렉스 레이아웃을 사용하여 요소를 하단에 스마트하게 고정하세요🎜🎜🎜콘텐츠가 충분하지 않으면 버튼이 페이지 하단에 있어야 합니다. 콘텐츠가 충분하면 버튼이 콘텐츠를 따라야 합니다. 비슷한 문제가 발생하면 flex를 사용하여 스마트 레이아웃을 구현할 수 있습니다! 🎜rrreee🎜CSS 코드는 다음과 같습니다: 🎜rrreee

🎜7 type="number" 끝에 있는 화살표를 제거하세요 🎜🎜🎜By 기본적으로 입력 유형은 type="number" 끝에 작은 화살표가 표시되지만 때로는 제거해야 할 경우 다음 스타일을 사용할 수 있습니다. 🎜rrreee

🎜8. outline:none을 사용하세요. 입력 상태 줄을 삭제하세요🎜🎜🎜입력 상자를 선택하면 기본적으로 파란색 상태 줄이 나타나며, 이를 제거할 수 있습니다. 개요:없음을 사용합니다. 🎜

🎜9. iOS 스크롤 막대가 멈추는 문제를 해결하세요🎜🎜🎜Apple 휴대폰에서는 스크롤할 때 요소가 종종 멈추는 경우가 있습니다. 현재로서는 CSS 한 줄만 지원됩니다. 유연한 스크롤. 🎜rrreee

🎜10. 삼각형을 그립니다. 🎜🎜rrreee

🎜11. 선택한 텍스트 스타일을 맞춤설정하세요🎜🎜🎜스타일을 사용할 수 있습니다. 텍스트 선택의 색상 및 스타일을 사용자 정의합니다. 🎜rrreee

🎜12. 선택이 허용되지 않는 텍스트🎜🎜🎜스타일 사용자를 사용하세요. -select: none;🎜

🎜13 페이지를 회색 모드로 설정하려면 filter:grayscale(1)을 사용하세요. 🎜🎜🎜한 줄 코드를 사용하면 페이지가 회색 모드로 전환됩니다. 🎜rrreee🎜 (학습 영상 공유: 🎜웹 프론트엔드🎜)🎜

위 내용은 프런트엔드 개발 효율성을 향상시키는 데 도움이 되는 13가지 실용적인 CSS 팁!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!