CSS相关

菜鸟的开发注意事项

居中

水平居中
margin: 0 auto;
垂直居中
<div style="height: 40px;background-color: aliceblue;">
	<span style="line-height: 40px;">content</span>
</div>
checkbox的垂直居中
vertical-align:middle;margin-top: xx px;
bootstrap栅格系统中input框的垂直居中
<div class="row" style="text-align: center">
	<div class="col-xs-4">
		<i class='net-icon fa fa-folder fa-4x'></i>
	</div>
	<div class="col-xs-8">
		<input type="text" style="position: relative;transform: translateY(50%);" placeholder="请输入文件夹名称">
	</div>
</div>
bootstrap栅格系统中span的垂直居中
{position: relative;top: xxpx;}
<div class="row">
	<div class="col-xs-4">
		<i class="fa fa-exclamation-circle fa-2x" aria-hidden="true" style="color: orange;float: right;"></i>
	</div>
	<div class="col-xs-8" style="padding-left: 0">
		<span style="position: relative;top: 5px;">是否删除选中的文件和目录?</span>
	</div>
</div>
去除bootstrap模态框弹出时的灰色背景
.modal-backdrop {
    background-color: transparent;
}
flex垂直水平居中
display: flex;align-items: center;justify-content: center;

---

选取兄弟元素

span~dd { ... }

---

根据屏幕大小切换样式

@media(min-width: 1000px) {}屏幕宽度大于1000px
@media(max-width: 1000px) {}屏幕宽度小于1000px

---

吸顶

在overflow-y 内的吸顶

position: sticky;top: 0;z-index: 9;
background-color: white;

---

flex布局

三栏布局

<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
	body{
		width: 100%;
	}
	.box{
		align-content: space-between;
		width: 100%;
	}
	.box div{
		background-color: gainsboro;
	}
</style>
<div style="display: flex;" class="box">
	<div style="width: 100px;">左边</div>
	<div style="flex-grow: 1;background-color: #00DD1C;">2222</div>
	<div style="width: 100px;">右边</div>
</div>

平均分布

<style type="text/css">
	* {
		margin: 0;padding: 0;
	}
	body{
		width: 100%;
	}
	.box{
		align-content: space-between;width: 100%;
	}
	.box div{
		background-color: gainsboro;
	}
</style>
<div style="display: flex;" class="box">
	<div style="flex-grow: 1;">左边</div>
	<div style="flex-grow: 1;background-color: #00DD1C;">2222</div>
	<div style="flex-grow: 1;">右边</div>
</div>

DIV居中

* {
	margin: 0;
	padding: 0;
}
body{
	width: 100%;
}
.box{
	width: 400px;
	height: 400px;
	background-color: #F7E1B5;
	display: flex;
	align-items: center;
	justify-content: center;
}
.content{
	width: 200px;
	height: 200px;
	background-color: powderblue;
}
<div class="box">
	<div class="content"></div>
</div>

---

自定义overflow滚动条

参考

-webkit-scrollbar ​滚动条整体部分
​-webkit-scrollbar-button​ 滚动条两端的按钮
​-webkit-scrollbar-track ​外层轨道
​-webkit-scrollbar-track-piece​ 内层轨道，滚动条中间部分（除去）
​-webkit-scrollbar-thumb​ 内嵌滑块
​-webkit-scrollbar-corner​ 边角
​-webkit-resizer ​定义右下角拖动块的样式

/* 滚动条样式 */
.work-sider div::-webkit-scrollbar {
  width: 6px; /* overflow-y滚动条宽度 */
  height: 6px; /* overflow-x滚动条宽度 */
}
.work-sider div::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  opacity: 0.2;
  background: rgb(235,235,235);
}
.work-sider div::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  /* border-radius: 0; */
  background: rgb(250,250,250)
}

---

绘制箭头

.work ::ng-deep .ant-table-row-collapsed::after {
 content: '';
 width: 5px;
 background-color: black;
 height: 7px;
 display: inline-block;
 clip-path: polygon(0 0, 100% 50%, 0 100%, 0 0);
 margin-bottom: 2px;
}
.work ::ng-deep .ant-table-row-expanded::after {
  content: '';
  width: 7px;
  background-color: black;
  height: 5px;
  display: inline-block;
  clip-path: polygon(50% 100%, 0 0, 0 0, 100% 0);
  margin-bottom: 2px;
}

---

网页变灰色

<style>
html {
  filter:grayscale(100%);
  -webkit-filter:grayscale(100%);
  -moz-filter:grayscale(100%);
  -ms-filter:grayscale(100%);
  -o-filter:grayscale(100%);
 filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter:grayscale(1)
}
</style>