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

H1🔥 让 a 标签铺满整个 div

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

css

a {
  display: block;
}

H1文字颜色渐变

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

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

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

css

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

H1🔥 毛玻璃特效

css

background: #ffffffcc;
backdrop-filter: saturate(1.2) blur(10px);

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

H1input 输入框字体样式

H2placeholder

css

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;
}

H2focus 聚焦

css

input:focus {
  background-color: red;
}

H2取消 input 的边框

css

border: none;
outline: none;

H1滚动条

scroll-track —— 滚动条轨道
scrollbar-thumb —— 滚动条滑块
scrollbar-button —— 滚动条按钮
scrollbar-corner —— 滚动角

css

/*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;
}

H2隐藏滚动条

less

.element {
  overflow: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
 
  &::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
  }
}

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

less

.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: 自定义; /* 悬停时的背景颜色 */
  }
}

H1🔥 文本固定行数&多余可省略

white-space 👉 处理元素空白，常用值有：nowrap 不换行，其他还有 pre-line、pre-wrap 等

word-break 👉 在合适的点断行。常用值有 break-all 可以在单词内换行，keep-all 只能在半角空格或连字符处换行。我们需要超出盒子部分就换行，所以用 break-all。

box-orient 👉 子元素如何排列。值有 vertical 和 horizontal，分别是垂直排列和水平排列。

line-clamp 👉 控制文本行数。

H2单行

前提：文字所在的盒子的宽度不会随文字多少而变化，是固定的。如果会变化，请加一个 width。

css

width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

H2多行

css

display: -webkit-box; // 自适应布局
-webkit-line-clamp: 2; // 文本行数最多2行
-webkit-box-orient: vertical; // 子元素垂直排列
overflow: hidden; // 超出部分隐藏
text-overflow: ellipsis; //省略号
 
/* 下为直接复制版 */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

H2设置固定行数的高度

场景：我希望一个 h1 的高度为它本身两行的高度。

scss

h1 {
  font-size: 20px;
  line-height: 1.6; // 指行高为字体大小的1.6倍
  height: 3.2em; // 指高度为行高的2倍
}

H1控制 div 内的元素自动换行

css

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

H1纯 CSS 画三角形

css

<Custom > {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: green;
}

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

css

<Cuttom > {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

H1表格边框合并

css

table,
tr,
td {
  border: 1px solid #131415;
}
table {
  border-collapse: collapse;
}

H1🔥 颜色透明度 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

H1img 图片填充方式

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

img 有个属性 object-fit

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

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

H1背景图片填充方式

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

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

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

H1ul, ol 标签去掉前面的点

css

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

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

效果如下：

第一行

第二行

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

less

ul,
ol {
  list-style-position: inside;
 
  li {
    text-indent: -1.4em;
    padding-left: 1.5em;
  }
}

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

less

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 情况自行调整才会达到不错显示效果。

css

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex-grow: 1;
}
#footer {
  height: 100px;
}

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

将父 div 也设置成浮动效果

H1border-radius 完整用法

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

css

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

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

H1🔥 px 和 rem 转换关系

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

px	rem
14	0.875
16	1
18	1.125
20	1.25
22	1.375
24	1.5
26	1.625
28	1.75
30	1.875
32	2

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

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

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

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

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

less

.parent {
  display: flex;
  flex-direction: column;
  // 或者 flex-direction: row;
 
  .last_child {
    margin-top: auto;
    // 或者 margin-left: auto;
  }
}

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

H2使用 transform（子绝父相 & fixed）

less

.parent {
  position: relative;
 
  .last_child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

H2使用 flex 布局（fixed）

less

.parent {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
 
  .child {
    ...;
  }
}

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

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

less

div {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: 0 0;
  animation...
}

H1🔥 元素进出动画

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

less

div {
  animation: hide 0.3s;
 
  &.show {
    animation: show 0.3s;
  }
}

JS 这部分也很重要。

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

下方 JS 代码参考即可

jsx

const hidePreview = () => {
  setIsHidePreview(true);
  setTimeout(() => {
    props.IsZoomIn.setIsZoomIn(false);
    setIsHidePreview(false);
  }, 300);
};
 
return (
  <div className={`cv__template${isHidePreview ? "" : " zoomIn"}`}>
    {props.children}
  </div>
);

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

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

css

h1 {
  font-size: 4vw;
}

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

css

.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; /* 保持默认光标样式 */
}

H1盒子高度与宽度保持一定比例

场景：有时盒子的宽度不是一个特定的 px 数值，可能是%、vw，而高度又想保持与宽度一定比例。

局限：只适合盒子里主要装图片的，如果有文字，那么文字会被 padding 给挤出去。

css

.img {
  width: 50%;
  padding-top: 50%;
}

比如宽度为盒子的 50%，那么高度想和宽度一致，那就设置padding-top 或 padding-bottom，代替 height来使用，值即为宽度值的一定比例，这里就是 1:1，所以同样是 50%。

H2更优解

CSS 里有个aspect-ratio的属性，真是相见恨晚。

H1Anchor 移到对应处被 fixed 导航栏遮挡

scss

h1,
h2,
h3,
h4,
h5,
h6 {
  scroll-margin-top: calc(var(--height-navbar) + 1rem);
}

注意：对应盒子不能有 overflow: hidden; 样式，否则会影响 scroll 效果。

H1参考文章

H1分享文章

弹性布局 flex 详解

☕欲知后事如何，且听下回分解🍵

詩頌の博客 - 時不我待，只爭朝夕

H1🔥 让 a 标签铺满整个 div

H1文字颜色渐变

H1🔥 毛玻璃特效

H1input 输入框字体样式

H2placeholder

H2focus 聚焦

H2取消 input 的边框

H1滚动条

H2隐藏滚动条

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

H1🔥 文本固定行数&多余可省略

H2单行

H2多行

H2设置固定行数的高度

H1控制 div 内的元素自动换行

H1纯 CSS 画三角形

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

H1表格边框合并

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

H1img 图片填充方式

H1背景图片填充方式

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

H1ul, ol 标签去掉前面的点

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

H1Footer 固定在网页底部

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

H1border-radius 完整用法

H1🔥 px 和 rem 转换关系

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

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

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

H2使用 transform（子绝父相 & fixed）

H2使用 flex 布局（fixed）

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

H1🔥 元素进出动画

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

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

H1盒子高度与宽度保持一定比例

H2更优解

H1Anchor 移到对应处被 fixed 导航栏遮挡

H1参考文章

H1分享文章

Prev

Next

Related Posts