CSS常用功能汇总

1. inline-flex 子元素垂直方向对不齐：添加 vertical-align: bottom

2. 修改元素滚动条默认样式：

.box::-webkit-scrollbar {
  width: 8px;
  Height: 8px;
  /* background: transparent; */
  background: rgba(51, 51, 51, 0.06);
  border-radius: 4px;
}
.box::-webkit-scrollbar-thumb {
  /* background: transparent; */
  background: rgba(51, 51, 51, 0.2);
  border-radius: 4px;
}
:hover::-webkit-scrollbar-thumb {
  background: rgba(204, 204, 204, 0.5);
}
:hover::-webkit-scrollbar-track {
  background: rgba(204, 204, 204, 0.1);
}
/* 如需要全局修改，去掉前面的选择器即可 */

3. 设置某种样式排除第一个元素

:not(:first-child) {
  margin-left: 10px;
}

4. 空判断的选择器 :empty ，适用于设置列表无数据时展示空数据样式

5. 简体中文转繁体：css样式 font-variant-east-asian:traditional;

6. calc 运算符前后都需要保留一个空格，例如：width: calc(100% - 100px)；

向前兼容：未来可能会允许使用关键字，而这些关键字可能会包含连字符（即减号）。

7. textarea去除右下角缩放图标：

// 原生
style="resize: none "
// Element
:deep(.el-textarea__inner) {
  resize: none;
}

8. Css 自定义间距的虚线方法：

{
  height: 1px;
  background-image: linear-gradient(
    to right,
    #ccc 0%,
    #ccc 50%,
    transparent 50%
  );
  background-size: 15px 1px;
  background-repeat: repeat-x;
}

9. input type=number 去掉箭头

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
input[type='number'] {
  -moz-appearance: textfield;
}

10. Css前缀自动补全插件（Autoprefixer）

npm install --save -dev autoprefixer

11. 使用 currentColor 实现颜色继承，这个颜色继承自父级的 color 属性

<div style="color: blue; border: 1px dashed currentColor;">
  The color of this text is blue.
  <div style="background: currentColor; height: 9px;"></div>
  This block is surrounded by a blue border.
</div>

12. 气泡框

<div class="callout">123</div>

.callout {
  position: relative;
  width: 100px;
  height: 50px;
  padding: 6px;
  background: #eea2a4;
  border: 1px solid #9e9e9e;
  border-radius: 8px;
}
 
.callout::before {
  content: "";
  position: absolute;
  top: -0.4em;
  left: 1em;
  padding: 0.35em;
  background: inherit;
  border: inherit;
  border-right: 0;
  border-bottom: 0;
  transform: rotate(45deg);
}

此处小三角使用inherit继承了背景和边框样式

13. 多重边框

可以使用box-shadow可以实现多层边框。

box-shadow: 0 0 0 10px red, 0 0 0 15px deeppink;

注意：
①. box-shadow层叠关系，按顺序依次由最上层向下叠加，设置多个的时候下层阴影的扩张半径要设置为合适的值。
②. 投影不会影响布局，要注意与外层元素的边距。
③. 外圈投影不会触发鼠标事件。

如果只需两层边框的话也可以使用border + outline实现。

border: 5px solid red;
outline: 5px solid deeppink;

14. 修改表格自动布局

表格自动布局难以预测效果，不易控制（比如设置单元格宽度、设置文本超出省略都可能失效），修改 table-layout 属性让表格行为更加可控。

table {
  table-layout: fixed;
  width: 100%;
}

15. 容器唯一子元素选择器

当元素是容器内唯一子元素时，设置样式：

.box div:only-child {
  margin: 10px;
}
/* 等价 */
.box div:first-child:last-child {
  margin: 10px;
}
.box div:first-child:nth-last-child(1) {
  margin: 10px;
}

16. 当一个列表包含n个列表项时，给这些列表项设置样式

eg: 当一个列表刚好有四个列表项的情况下修改这些列表项的背景色：

.box li:first-child:nth-last-child(4),
.box li:first-child:nth-last-child(4)~li {
  background: aqua;
}

蓝色背景只在有四个列表项时生效

17. 当一个列表包含<=n个列表项时，给这些列表项设置样式

eg: 当一个列表包含四个以内数量列表项的情况下修改这些列表项的背景色：

.box li:first-child:nth-last-child(-n+4),
.box li:first-child:nth-last-child(-n+4)~li {
  background: aqua;
}

蓝色背景只在有小于等于四个列表项时生效

18. 当一个列表包含>m&<n个列表项时，给这些列表项设置样式

eg: 当一个列表包含2-6个列表项的情况下修改这些列表项的背景色：

.box li:first-child:nth-last-child(n+2):nth-last-child(-n+6),
.box li:first-child:nth-last-child(n+2):nth-last-child(-n+6) ~ li {
  background: aqua;
}

19. 垂直居中

元素宽高固定：

/* 绝对定位 */
{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18em;
  height: 6em;
  margin-top: -3em; /* 6/2 = 3 */
  margin-left: -9em; /* 18/2 = 9 */
}
/* 可简化成 */
{
  position: absolute;
  top: calc(50% - 3em);
  left: calc(50% - 9em);
  width: 18em;
  height: 6em;
}

/* flex */
{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18em;
  height: 10em;
}

元素宽高不固定：

/* 绝对定位 */
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 视口 */
{
  width: 18em;
  padding: 1em 1.5em;
  margin: 50vh auto 0;
  transform: translateY(-50%);
}

/* flex */
.father {
  display: flex;
  min-height: 100vh;
  margin: 0;
}
.child {
  margin: auto;
}

20. 让页脚紧贴底部

点击这里查看

21. 设置placeholder样式

兼容性查看

<input placeholder="我是红色的！" />
 
input::placeholder {
  color: red;
  font-size: 1.2em;
  font-style: italic;
}

22. 文本超出省略

单行：

{
  overflow: hidden;
  text-overflow: ellipsis; //文本溢出显示省略号
  white-space: nowrap; //文本不会换行
}

多行：

{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; // 显示行数
  -webkit-box-orient: vertical;
}

前提条件为设置宽度;
英文按需设置word-break，如 word-break: break-all;