去年跟着 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 */
}
}
// 直接复制 - 无注释版
.element {
overflow: auto;
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
}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 is inherited if the parent box has a fixed width. */
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 情况自行调整才会达到不错显示效果。
H1Footer 固定在网页底部
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参考文章
- 那些你总是要用却又死活记不住的 css 属性
- css 文字颜色渐变的三种实现方式
- 颜色透明度 16 进制对照表
- css 图片填充的几种方式
- CSS 修改选中文本颜色与背景色
- 子 Div 使用 Float 后如何撑开父 Div
- border-radius 属性怎么使用-css 教程
