站长资讯网
最全最丰富的资讯网站

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

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

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

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

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

是否经常遇到图片底部多出 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) 使页面处于灰色模式

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

body{   filter: grayscale(1); }
登录后复制

(学习视频分享:web前端)

赞(0)
分享到: 更多 (0)