• 技术文章 >web前端 >css教程

    13 个实用CSS技巧,助你提升前端开发效率!

    青灯夜游青灯夜游2023-01-22 05:30:01转载65

    本篇文章整理分享13 个前端可能用得上的 CSS技巧,包括修改输入占位符样式、多行文本溢出、隐藏滚动条、修改光标颜色等,希望对大家有所帮助!

    修改输入占位符样式、多行文本溢出、隐藏滚动条、修改光标颜色、水平和垂直居中。多么熟悉的场景!前端开发者几乎每天都会和它们打交道,本文收集 13 个CSS技巧,一起来来温故一下吧。

    1. 解决图片5px间距问题

    是否经常遇到图片底部多出 5px 间距的问题?不着急,有4种方法可以解决。【推荐学习:css视频教程

    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) 使页面处于灰色模式

    一行代码将使页面处于灰色模式。

    body{
      filter: grayscale(1);
    }

    (学习视频分享:web前端

    以上就是13 个实用CSS技巧,助你提升前端开发效率!的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:css 前端
    上一篇:聊聊怎么利用CSS实现波浪进度条效果 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 巧用纯CSS实现鼠标点击拖拽效果,让交互更加生动!• 聊聊CSS新特性content-visibility,助你提升页面渲染性能• “+”是什么css选择器• 实例详解CSS渐变锯齿问题如何解决!• 手把手教你使用CSS实现酷炫六边形网格背景图• 聊聊怎么利用CSS实现波浪进度条效果
    1/1

    PHP中文网