实用的高级前端 CSS 技巧

  1. 解决图片 5px 间距问题
  • 方案一：设置其父元素的 font-size:0px
  • 方案二：在 img 的样式中添加 display:block
  • 方案三：在 img 的样式中添加 vertical-align:bottom
  • 方案四：增加父元素的样式为 line-height:5px
  1. 如何让元素的高度与窗口相同
    当前，前端中 CSS 的单位为 vh，元素高度样式设置为 height:100vh
  2. 修改输入框占位符样式
    这是表单输入框的占位符属性。修改默认样式的方法如下：
1
2
3
4
input::-webkit-input-placeholder {
  color: #babbc1;
  font-size: 12px;
}
  1. 使用 :not 选择器

除了最后一个元素之外的所有元素都需要一些样式，这可以使用 not 选择器轻松实现。

例如，要实现列表，最后一个元素不需要加下划线，如下所示：

1
2
3
li:not(:last-child) {
border-bottom: 1px solid #ebedf0;
}
  1. 使用 caret-color 修改光标颜色
    有时需要修改光标的颜色。现在是插入符号颜色显示时间。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.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;
}
  1. 使用 flex 布局智能地将元素固定到底部

当内容不足时，按钮应位于页面底部。当内容足够多时，按钮应该跟随内容。当你遇到类似的问题时，可以使用 flex 来实现智能布局！

1
2
3
4
<div class="container">
  <div class="main">main</div>
  <div class="footer">button</div>
</div>

CSS 代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.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;
}
  1. 去掉 type=”number”末尾的箭头

默认情况下，type=”number”的输入类型末尾会出现一个小箭头，但有时需要将其去掉，可以使用以下样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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;
}
  1. 使用 outline:none 去掉输入状态行

当输入框被选中时，默认会有一条蓝色状态线，可以使用 outline:none 将其删除。

  1. 解决 iOS 滚动条卡住的问题

在苹果手机上，滚动时元素经常会卡住。此时只有一行 CSS 会支持弹性滚动。

1
2
3
body,html{
-webkit-overflow-scrolling: touch;
}
  1. 自定义选定的文本样式

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

1
2
3
4
::selection {
color: #ffffff;
background-color: #ff4c9f;
}
  1. 文本不允许被选择

使用用户选择的样式：none；

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

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

1
2
3
body{
filter: grayscale(1);
}