style

body&overflow

一.在页面中想要height100%。可以给html, body{height: 100%; }添加100%的样式，
页面的最外层就可以继承100%的样式。比如<div>...</div>。注：必须加html才能起到作用。
二.overflow
想要让这个样式生效有两个前提：
1.必须继承html, body的height,width才能起到作用，例子：
<template>
  <div class="user-page h-100">//继承
    <div
      style="
        width: 20%;
        height: 23%;
        background-color: #f4f4f4;
      "
      class="d-flex flex-column"
    >
      <Button>{{ L("cancel") }}</Button>
      <div class="flex-1 overflow-y-scroll">
        <p>1</p>
        <p>1</p>
        <p>1</p>
      </div>
      <Button>{{ L("cancel") }}</Button>
    </div>
 </div>
</template>
2.有准确的px值，例子
    <div style="height: 20%;overflow: scroll;">
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
    </div>

修改滚动条样式

    <div class="div01">
        <p>11111111111111111111111111111111111111111111111</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
        <p>1</p>
    </div>
    <style>
        .div01 {
            width: 200px;
            height: 500px;
            background: rgb(210, 210, 210);
            overflow: auto;
        }
        .div01::-webkit-scrollbar {
            width: 13px;
            /* y轴 */
            height: 10px;
            /* x轴 */
        }
        .div01::-webkit-scrollbar-track {
            background: rgb(225, 155, 155);
            border-radius: 10px;
            /* 最内轨 */
        }
        .div01::-webkit-scrollbar-track-piece {
            background: rgb(214, 99, 99);
            border-radius: 50%;
            /* 中轨 */
        }
        .div01::-webkit-scrollbar-thumb {
            background: rgb(204, 17, 17);
            border-radius: 10px;
            /* 最外轨轨 */
        }
        .div01::-webkit-scrollbar-corner {
            background: #65de65;
            border-radius: 50%;
            /* 边角，即两个滚动条的交汇处 */
        }
        .div01::-webkit-scrollbar-button {
            background: #1bce1b;
            /* border-radius: 50%; */
            /* 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置 */
        }
        .div01::-webkit-resizer {
            background: #4b3737;
            /* 不知道 */
        }
    </style>
::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb  滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-track  滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

flex&overflow

       html, body {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
        p {
            margin: 0px;
            padding: 0px;
        }
        .container1 {
            height: 30%;
            display: flex;
            flex-direction: column;
            width: 20%;
            border: 1px solid black;
            /* 第一层：超出盒子本身设置的高度且设置有overflow: auto;就会发生滚动 */
        }
        .container2 {
            flex: 1;
            height: 10%;
            border: 2px solid rgb(177, 40, 40);
            /* overflow: auto; */
            /*第二层：实现overflow: auto的情况有：1.盒子的元素超出盒子高度就会发生（本盒子要设置overflow: auto，第一层盒子要设置高度）；2.设置准确的px值也行；3.继承第一层的height的百分比，设置度多少的百分比。
            关于这个层的高度问题：1.如果设置了flex：1那么高度就是占有剩余的空间。如果设置了flex：1且盒子的元素超出盒子高度那么就是以超出的高度的多少为准；2.如果设置了flex：1也设置了height（px、%、rem...）那么
            在height没有超过flex：1本应该占有的高度（这里的本应该占有的高度不是：且盒子的元素超出盒子高度那么就是以超出的高度的多少为准，而是其他元素占完剩余的位置）那就是以flex:1高度为准；
            */
        }
        .container3 {
            height: 50%;
            overflow: auto;
            border: 4px solid rgb(2, 142, 109);
            /* 第三层：实现overflow: auto的情况有：1.第二层必须设置高度（flex:1、height：px、%...）,自己设置高度（height：px、%...）
            注意：上一级flex:1、height那个高container3的height百分比就按谁的来继承；
            */
        }
 <div class="container1">
        <h2>hello</h2>
        <div class="container2">
            <div class="container3">
                <p>1</p>
                <p>1</p>
                <p>1</p>
                <p>1</p>
                <p>1</p>
                <p>1</p>
                <p>1</p>
                <p>1</p>
                <p>1</p>
                <p>1</p>
                <p>1</p>
                <p>1</p>
                <p>1</p>
                <p>1</p>
                <p>1</p>
                <p>1</p>
                <p>1</p>
                <p>1</p>
            </div>
        </div>
    </div>

倒三角

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .container {
            width: 500px;
            margin: 100px auto;
        }

        .triangle {
            width: 0px;
            height: 0px;
            border-left: 50px solid red;
            border-right: 50px solid blue;
            border-top: 50px solid yellow;
            border-bottom: 50px solid green;
        }

        .corner {
            width: 0px;
            /*  宽高设置为0，很重要，否则达不到效果 */
            height: 0px;
            border: 50px solid yellow;
            border-bottom-color: transparent;
            /* 设置透明背景色 */
            border-left-color: transparent;
            border-right-color: transparent;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="triangle">四边形</div>
    </div>

    <div class="container">
        <div class="corner">倒三角</div>
    </div>
</body>

</html>