文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

12 个实用的高级前端 CSS 技巧

2024-11-30 10:53

关注

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

您是否经常遇到图片底部多出5px空间的问题?别担心,有4种方法可以解决。

方案一:设置其父元素的font-size:0px

方案二:在img的样式中添加display:block

方案三:在img的样式中添加vertical-align:bottom

方案四:增加父元素的样式为line-height:5px

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

当前,前端中CSS的单位为vh,元素高度样式设置为height:100vh

3.修改输入框占位符样式

这是表单输入框的占位符属性。修改默认样式的方法如下:

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来实现智能布局!

main

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”末尾的箭头

默认情况下,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.自定义选定的文本样式

您可以通过styles自定义选择文本的颜色和样式。关键样式如下:

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

11. 文本不允许被选择

使用用户选择的样式:none;

12.使用filter:grayscale(1)使页面处于灰度模式

一行代码会将页面置于灰色模式。

body{
  filter: grayscale(1);
}
来源:web前端开发内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯