display行内块对齐

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

vertical-align: top

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

position粘性定位

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

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

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

页面选中样式定义

/* 选中样式 */
::selection {
    background: #399C9C;
    color: #FFF;
}

伪类清除浮动

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

图片防止变形

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

自定义复选框

由于兼容性，复选框在不同的浏览器展示样式是不一样的，通常会自定义，最好的办法是使用div进行模拟重写，但是偶然发现了一个伪类的方式，可以实现复选框的自定义，原理为使用伪类元素覆盖原有的复选框，效果如下：

/* 调整与文字的位置 */
.article-content input {
  position: relative;
  top: 1px;
}

input[type='checkbox'] {
  position: relative;
  width: 14px;
  height: 14px;
  font-size: 14px;
}

input[type='checkbox']::after {
  border-radius: 3px;
  position: absolute;
  top: 0;
  background-color: white;
  color: #000;
  width: 15px;
  height: 15px;
  display: inline-block;
  visibility: visible;
  padding-left: 0px;
  text-align: center;
  content: ' ';
  box-sizing: border-box;
  border: 1px solid black;
}

input[type='checkbox']:checked::before {
  content: '✓';
  font-size: 13px;
  font-weight: bold;
  color: red;
  position: absolute;
  display: inline-block;
  z-index: 10;
  top: -2px;
  left: 3px;
}

美化Chrome滚动条

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

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

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

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

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

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

简化版

/* 定义滚动条 */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    border-radius: 10px;
}

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

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

CSS实现锚点滚动过渡

html {
  scroll-behavior:smooth;
}

光标颜色

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