style
2022-03-28 本文已影响0人
Sanmuluo
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>
