去年跟着 B 站 Pink 老师学过 CSS 基本语法，但平时美化博客时还是会遇到一些 CSS 相关问题，所以再此记录下。

🔥 让 a 标签铺满整个 div

有时候希望点击 div 同时跳转到对应链接，奈何 a 的大小取决于文本大小，但可使用以下方法来铺满整个父盒子，前提是 div 里只有 a 标签一个内容。

1
2
3
a {
  display: block;
}

文字颜色渐变

background: -webkit-linear-gradient(...)为文本元素提供渐变背景。

webkit-text-fill-color: transparent使用透明颜色填充文本。

webkit-background-clip: text用文本剪辑背景，用渐变背景作为颜色填充文本。

1
2
3
4
5
.custom {
  background-image: linear-gradient(45deg, #8a7cfb 50%, #633e9c);
  background-clip: text;
  color: transparent;
}

🔥 毛玻璃特效

1
2
background: #ffffffcc;
backdrop-filter: saturate(160%) blur(10px);

saturate() 是增强颜色鲜艳度，可选

input 输入框字体样式

placeholder

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: red;
}
input::-moz-placeholder {
  /* Firefox 19+ */
  color: red;
}
input:-ms-input-placeholder {
  /* IE 10+ */
  color: red;
}
input:-moz-placeholder {
  /* Firefox 18- */
  color: red;
}

focus 聚焦

1
2
3
input:focus {
  background-color: red;
}

取消 input 的边框

1
2
border: none;
outline: none;

滚动条

  • scroll-track —— 滚动条轨道

  • scrollbar-thumb —— 滚动条滑块

  • scrollbar-button —— 滚动条按钮

  • scrollbar-corner —— 滚动角

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
28
29
/*css主要部分的样式*/
/定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸 / ::-webkit-scrollbar {
  width: 10px; /*对垂直流动条有效*/
  height: 10px; /*对水平流动条有效*/
}

/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: rosybrown;
  border-radius: 3px;
}

/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 7px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #e8e8e8;
}

/*定义两端按钮的样式*/
::-webkit-scrollbar-button {
  background-color: cyan;
}

/*定义右下角汇合处的样式*/
::-webkit-scrollbar-corner {
  background: khaki;
}

隐藏滚动条

1
2
3
4
5
6
7
8
9
.element {
  overflow: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  
  &::-webkit-scrollbar {
  	display: none; /* Chrome, Safari, and Opera */
	}
}

自定义滚动条样式（自用）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.element {
  /* 更换滚动条轨道的背景 */
  &::-webkit-scrollbar-track {
    background-color: #88888838;
    border-radius: 4px;
  }

  /* 设置滚动条的样式 */
  &::-webkit-scrollbar {
    width: 8px; /* 滚动条的宽度 */
  }

  /* 设置滚动条滑块的样式 */
  &::-webkit-scrollbar-thumb {
    background-color: #999; /* 滑块的背景颜色 */
    border-radius: 4px; /* 滑块的圆角 */
  }

  /* 鼠标悬停在滚动条上时的样式 */
  &::-webkit-scrollbar-thumb:hover {
    background-color: 自定义; /* 悬停时的背景颜色 */
  }
}

🔥 文字超出隐藏并显示省略号

white-space 👉 处理元素空白，常用值有：nowrap 不换行，其他还有 pre-line、pre-wrap 等
word-break 👉 在合适的点断行。常用值有 break-all 可以在单词内换行，keep-all 只能在半角空格或连字符处换行。我们需要超出盒子部分就换行，所以用 break-all。
box-orient 👉 子元素如何排列。值有 vertical 和 horizontal，分别是垂直排列和水平排列。
line-clamp 👉 控制文本行数。

单行（一定要有宽度）

1
2
3
4
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

多行

1
2
3
4
5
6
7
8
9
10
11
12
word-break: break-all;
display: -webkit-box; // 自适应布局
-webkit-line-clamp: 2; // 文本行数最多2行
-webkit-box-orient: vertical; // 子元素垂直排列
overflow: hidden; // 超出部分隐藏

// 下为直接复制版
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;

控制 div 内的元素自动换行

1
2
word-wrap: break-word; // 允许长单词换行到下一行
word-break：break-all; // 在哪儿换行都行，在单词内换行都行

纯 CSS 画三角形

1
2
3
4
5
6
7
8
9
<Custom > {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: green;
}

绝对定位元素居中（水平和垂直方向）

1
2
3
4
5
6
7
8
<Cuttom > {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

表格边框合并

1
2
3
4
5
6
7
8
table,
tr,
td {
  border: 1px solid #131415;
}
table {
  border-collapse: collapse;
}

🔥 颜色透明度 16 进制对照表

比如：#FFFFFFE6，效果等同于 rgba(255, 255, 255, 0.9)

百分比十六进制
100%FF
90%E6
80%CC
70%B3
60%99
50%80
40%66
30%4D
20%33
10%1A

img 图片填充方式

当图片比例不固定时，想要让图片自适应，一般都会用 background-size:cover/contain，但是这个只适用于背景图。这里主要介绍 img 的。

img 有个属性 object-fit

属性功能
fill默认值。内容拉伸填满整个 content box, 不保证保持原有的比例
contain保持原有尺寸比例。宽度和高度中短的那条边跟容器大小一致，长的那条等比缩放，盒子可能会有留白
cover保持原有尺寸比例。宽度和高度中长的那条边跟容器大小一致，短的那条等比缩放。图片可能会有部分区域不可见
none保持原有尺寸比例。同时保持替换内容原始尺寸大小
scale-down保持原有尺寸比例,如果容器尺寸大于图片内容尺寸，保持图片的原有尺寸，不会放大失真；容器尺寸小于图片内容尺寸，用法跟 contain 一样

注意：加上图片盒子的宽高才能实现 object-fit 效果。

背景图片填充方式

参考文章：聊聊 CSS 背景图片的几种填充类型

修改选中文本颜色与背景色

使用 css3 ::selection属性，该属性用于匹配元素中被用户选中或处于高亮状态的部分，并且支持修改匹配元素的color, background, cursor,和outline属性

ul, ol 标签去掉前面的点

1
2
3
ul, ol {
  list-style-type: none;
}

li 圆点放进文本内且其它行缩进至对齐第一行

效果如下：

  • 第一行

    第二行

方法1（代码简单，效果一般）:

1
2
3
4
5
6
7
8
ul, ol {
  list-style-position: inside;

  li {
    text-indent: -1.4em;
    padding-left: 1.5em;
  }
}

方法2（代码复杂，效果完美）:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
ul,
ol {
  list-style-type: none;
  line-height: 1.3;
  text-align: justify;
}

ul {
  li {
    padding-left: 1.5em;
    position: relative;

    &::before {
      position: absolute;
      content: "●";
      left: 0;
      top: 0.15em;
      font-size: 0.8em;
      color: var(--color-theme-text);
    }

    &:not(:last-child) {
      margin-bottom: 10px;
    }
  }
}

ol {
  counter-reset: li;

  li {
    padding-left: 1.5em;
    position: relative;

    &::before {
      position: absolute;
      content: counter(li) ".";
      counter-increment: li 1;
      left: 0;
      color: var(--color-theme-text);
    }

    &:not(:last-child) {
      margin-bottom: 10px;
    }
  }
}

俩方法都要根据实际 UI 情况自行调整才会达到不错显示效果。

将页脚 Footer 固定在网页底部

可参考以下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
html,
body {
  margin: 0;
  padding: 0;
}
#content {
  margin: 100px auto;
  padding: 25px;
  width: 1330px;
  min-height: calc(100vh - 300px);
}
#footer {
  width: 100%;
  height: 100px; /*脚部的高度*/
  background: #eee;
  clear: both; /*清除浮动*/
}

子 div 使用 float 后如何撑开父 div

将父 div 也设置成浮动效果

处理 div 使用 padding 时宽高被撑开的问题

有时候设置宽为固定值，结果发现加了 padding 后宽被撑开了

1
2
3
4
5
-moz-box-sizing: border-box; /*Firefox3.5+*/
-webkit-box-sizing: border-box; /*Safari3.2+*/
-o-box-sizing: border-box; /*Opera9.6*/
-ms-box-sizing: border-box; /*IE8*/
box-sizing: border-box;

border-radius 完整用法

我们在平时看 border-radius 属性会看到它的语法如下所示：

1
border-radius: 1-4 length|% / 1-4 length|%;

很多人可能不知道这是什么意思，其实这是border-radius的完整写法，我们平时写的就是像border-radius:20px;这种，其实完整的写法应该是：border-radius : 20px 20px 20px 20px / 20px 20px 20px 20px;，其中前面四个 20px 表示水平半径，后面的四个值则表示垂直半径，我们就是通过设置水平半径和垂直半径来绘制椭圆或者圆形，也可以绘制一些其他有弧度的图形。

🔥 px 和 rem转换关系

浏览器默认是 16px，也就是 1rem，那么每 4px 等于 0.25rem，常用数值如下

pxrem
140.875
161
181.125
201.25
221.375
241.5
261.625
281.75
301.875
322

svg与父盒子无法重合的解决办法

我经常会将 svg 放进空的 div 里，但总会发现下面有个几px的小缝隙

给img或者svg加上vertical-align: top;、或和height: fit-content; CSS代码即可，有时候是给图片父盒子加，这个看实际情况，目前我没细研究。

Flex 布局中想让某元素贴尾摆放

原理：将最后一个元素的外边距设置为自动，从而将其推到末尾位置。

1
2
3
4
5
6
7
8
9
10
.parent {
  display: flex;
  flex-direction: column;
  // 或者 flex-direction: row;
  
  .last_child {
    margin-top: auto;
    // 或者 margin-left: auto;
  }
}

子绝父相 / fixed 时，子元素想居中

使用 transform（子绝父相 & fixed）

1
2
3
4
5
6
7
8
9
10
.parent {
  position: relative;
  
  .last_child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

使用 flex 布局（fixed）

1
2
3
4
5
6
7
8
9
10
.parent {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  
  .child {
    ...
  }
}

🔥 将 fixed 且 transform 居中的元素的缩放基准设为中点

终于在与ChatGPT一番盘问下得到答案。我经常需要给通过 transform 居中的元素加缩放动画，但奈何总是从右下角开始缩放，我有强迫症受不了。

1
2
3
4
5
6
7
8
div {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: 0 0;
  animation...
}

🔥 元素进出动画

我只知道元素显示的时候加一个 animation 就可以实现入场动画，但不知道退场如何加动画，有审美强迫症的我每次看到“只进不出”的动画我就心里发痒，但我终于在某一天开窍了，谢谢 ChatGPT。

1
2
3
4
5
6
7
div {
 animation: hide 0.3s;
 
  &.show {
    animation: show 0.3s;
  }
}

JS 这部分也很重要。

思路是设置一个 delay，让动画潇洒运行完再删除元素。CSS 动画则是通过类的有无显示进出动画。

下方 JS代码 参考即可

1
2
3
4
5
6
7
8
9
10
11
const hidePreview = () => {
  setIsHidePreview(true)
  setTimeout(() => {
    props.IsZoomIn.setIsZoomIn(false)
    setIsHidePreview(false)
  }, 300)
}

return (
	<div className={`cv__template${isHidePreview ? '' : ' zoomIn'}`}>{props.children}</div>
)

字体大小随着框架宽度变化

背景：有时候在设计响应式布局时要让字体大小动态变化，一般是通过 @media，其实你也可以考虑直接给 font-size 用 vw单位 赋值。

1
2
3
h1 {
  font-size: 4vw;
}

加遮罩后仍能与文本交互和保持默认光标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.cv__template-mini,
.cv__template {
  position: relative;
}

.cv__template-mini::before,
.cv__template::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  pointer-events: none; /* 允许用户与遮罩下面的内容进行交互 */
  cursor: default; /* 保持默认光标样式 */
}

☕欲知后事如何，

且听下回分解🍵

参考文章

  1. 那些你总是要用却又死活记不住的 css 属性
  2. css 文字颜色渐变的三种实现方式
  3. 颜色透明度 16 进制对照表
  4. css 图片填充的几种方式
  5. CSS 修改选中文本颜色与背景色
  6. 子 Div 使用 Float 后如何撑开父 Div
  7. border-radius 属性怎么使用-css 教程

分享文章

  1. 弹性布局 flex 详解