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

共 3193字,需浏览 7分钟

 ·

2023-07-27 09:10


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

<div class="container">  <div class="main">main</div>  <div class="footer">button</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”末尾的箭头

默认情况下,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);}

最后

感谢您的阅读,如果您觉得今天内容对您有点帮助的话,请记得点赞我关注我,最后,祝编程愉快!



学习更多技能

请点击下方公众号


浏览 6
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报