display行内块对齐

两个display: inline-block元素对齐顶部，给没对齐的加：

vertical-align: top

此时会出现间隙问题，是由div之间的换行和空格造成的，去掉换行和空格即可

position粘性定位

position: sticky;粘性定位的行为就像position:relative;，而当页面滚动超出目标区域时，它的表现就像position:fixed;，它会固定在目标位置

需要指定top、right、bottom或left之一，同时需要指定该定位容器的父容器的高度才会有效

注意：粘性定位最好配合弹性布局使用，弹性布局下的元素高度为最大，直接支持粘性定位，如果不适用弹性布局则需要JS获取页面高度

position固定定位

position: fixed;遇到父级transform会失效，表现特征为：fixed元素不会脱离文档流，但是top等属性依然可用

选中样式定义

/* 选中文本样式 */
::selection {
  background-color: #f1e6ff !important;
  color: #333 !important;
}

伪类清除浮动

div:after {
    content: '';
    display: block;
    clear: both;
}

svg与文字对齐

position: relative;
top: 2px;

居中策略

页面布局中的居中问题，无论是文字居中，还是元素居中，都比较常见

水平居中

• 对于非块级元素直接使用text-align: center;
• 对于块级元素可以使用margin: 0 auto;
• 对于弹性盒子display: flex;中的元素可以使用justify-content: center;

垂直居中

对于非块级元素使用line-height，vertical-align对行内元素有效，需要对父容器加line-height

对于块级元素可以使用：

// 先改布局方式fixed或relative
position: fixed;
// 设置top
top: 50%;
// 修复靠下问题，元素高度的一半
margin-top: -50px;

对于弹性盒子display: flex;中的元素可以使用align-items: center;垂直居中

固定背景图片

// 加载图片
background-image: url("../assets/bg.png")
// 图片水平垂直居中
background-position: center center
// 背景图不平铺
background-repeat: no-repeat
// 基于容器大小伸缩
background-size: cover
// 当内容高度大于图片高度，图像基于容器固定
background-attachment: fixed

文字不换行

# 不换行
white-space: nowrap
# 超出部分隐藏
overflow: hidden
# 多余文字不显示，
text-overflow: clip

鼠标定义

/* 自定义鼠标样式 */
body {
  cursor: url('https://s3.bmp.ovh/imgs/2021/12/dfaeeafcee61de54.png'), auto;
}
a:hover {
  cursor: url('https://s3.bmp.ovh/imgs/2021/12/dfaeeafcee61de54.png'), auto;
}

弹性布局某个元素靠左或右

给父容器添加弹性布局：

display: flex

然后给需要靠左或靠右的元素设置：

// 靠左
margin-right: auto
// 靠右
margin-left: auto

弹性布局不随容器高度

// 方式一：修改父容器的对齐方式
.parent {
  display: flex;
  height: 300px; /* 父容器有固定高度 */
  align-items: flex-start; /* 关键属性：子元素顶部对齐，高度由内容决定 */
}

// 方式二：单独控制子容器的对齐方式
.parent {
  display: flex;
  height: 300px;
  /* 其他子元素会默认拉伸 */
}

.child-special {
  align-self: flex-start; /* 关键属性：仅此子元素高度由内容决定 */
}

弹性布局不占满全宽

.flex-container {
  display: inline-flex; /* 关键属性 */
  gap: 10px; /* 子元素间距 */
}

弹性布局间距

.container {
    display: flex;
    gap: 20px; /* 行列间隙均为20px */
}

图片防止变形

img {
  width: 200px;
  height: 200px;
  object-fit: cover;
}

美化Chrome滚动条

/* 定义滚动条宽度（竖向）、高度（横向）及背景（容器） */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  background-color: #fff;
  border-radius: 10px;
}

/* 定义滚动条轨道 */
::-webkit-scrollbar-track {
  background-color: #fff;
  border-radius: 10px;
}

/* 定义滚动条滑块 */
::-webkit-scrollbar-thumb {
  background-color: #0003;
  transition: all 0.2s;
  border-radius: 10px;
}

/* 去除底部白点 */
::-webkit-scrollbar-corner {
  width: 0;
  height: 0;
}

/* 滑块hover效果 */
::-webkit-scrollbar-thumb:hover {
  background: #b2b2b2;
  cursor: pointer;
}

/* 定义文本框的滚动条背景 */
textarea::-webkit-scrollbar-track {
  background-color: #fff;
}

/* hover实例 */
textarea:hover::-webkit-scrollbar-thumb {
  background-color: #0003;
}

textarea::-webkit-scrollbar-thumb:hover {
  background: #b2b2b2;
  cursor: pointer;
}
/* 自定义代码滚动 */
code::-webkit-scrollbar-track {
  background-color: #fff;
}
code::-webkit-scrollbar-thumb:hover {
  background: #b2b2b2;
  cursor: pointer;
}
code::-webkit-scrollbar-thumb:hover {
  background: #b2b2b2;
  cursor: pointer;
}

想实现hover再出现滚动条可以先将其设置为与背景相同的颜色，然后使用hover改变

CSS实现锚点滚动过渡

html {
  scroll-behavior:smooth;
}

光标颜色

/* 光标颜色 */
caret-color: #000;

主题切换功能

:root {
    --background-color: #fff;
}

.dark {
    --background-color: #23272e;
}


document.querySelector('.theme-color').addEventListener("click", function (e) {
    let selector = document.querySelector('.theme-color')
    if (selector.getAttribute('model') == 'light') {
        document.querySelector('body').classList.add("dark")
        selector.setAttribute('model', 'dark')
        document.querySelector('.theme-color').innerHTML = '<svg>xxx</svg>'
    } else {
        document.querySelector('body').classList.remove("dark")
        selector.setAttribute('model', 'light')
        document.querySelector('.theme-color').innerHTML = '<svg>xxx</svg>'
    }
});

hover阴影

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}

简单瀑布流布局

.waterfall {
    column-count: 5;
    column-gap: 10px;
}
 
.waterfall img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

媒体查询

// 屏幕可视窗口尺寸小于 600 像素时
@media screen and (max-width: 600px) {
  
}
// 屏幕可视窗口尺寸大于 480 像素时
@media screen and (min-width: 480px) {

}

字体

/* 英文字体 */
@font-face {
  font-family: 'en';
  src: url('/en.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* 中文字体 */
@font-face {
  font-family: 'zh';
  src: url('/zh.woff2') format('truetype');
  font-weight: normal;
  font-style: normal;
}

* {
  font-family: 'en', 'zh', 'sans-serif';
}