### 布局相关
##### 高度宽度 自适应保持一致(常用于解决手机端占位避免加载闪烁和自适应正方形)
padding marging用百分比表示时是基于元素的width而不是height
> Note that in a horizontal flow, percentages on ‘margin-top’ and ‘margin-bottom’ are relative to the width of the containing block, not the height (and in vertical flow, ‘margin-left’ and ‘margin-right’ are relative to the height, not the width).
Note that percentages on ‘padding-top’ and ‘padding-bottom’ are relative to the width of the containing block, not the height (at least in a horizontal flow; in a vertical flow they are relative to the height).
多种写法
1. 直接给元素自身加padding
```
#container {
width: 50%;
background-color: red;
}
.placeholder {
padding-top: 50%; //与width: 50%;
}
```
2.使用 ：after 伪元素+margin-top
```
#container {
width: 50%;
position: relative;
background-color: red;
overflow: hidden; //需要触发BFC消除margin折叠的问题
}
.placeholder:after {
content: ‘‘;
display: block;
margin-top: 100%; //margin 百分比相对父元素宽度计算
}
```
3.使用 :before+padding-bottom(写法繁琐些 不推荐)
```
.constant-width-to-height-ratio {
background: #333;
width: 50%;
}
.constant-width-to-height-ratio::before {
content: ‘‘;
padding-top: 100%;
float: left;
}
.constant-width-to-height-ratio::after {
content: ‘‘;
display: block;
clear: both;
}
```
##### 清除图片img与父元素div之间的间隙
> 那是因为在HTML5文档声明下，块状元素内部的内联元素的行为表现，就好像块状元素内部还有一个（更有可能两个-前后）看不见摸不着没有宽度没有实体的空白节点(摘录自张鑫旭的博客),所以默认vertical-align为baseline的图片会和父div之间存在空隙。
```
1. 设置img标签的
vertical-align：center //top bottom
2. 设置img标签
display:block
3 设置父元素div字体大小为 0
```
##### 统一使用盒模型
```
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
```
##### 清除浮动
```
.clearfix{
zoom:1
}
.clearfix::after {
content: ‘‘;
display: block;
height:0;
clear: both;
}
```
##### 单行溢出省略
```
.truncate-text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 200px;
}
```
##### 多行溢出省略
```
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /*2行*/
overflow: hidden;
```
### 视觉相关
##### 自定义滚动条
```
/* Document scrollbar */
.custom-scrollbar{
width:300px;
height:100px;
overflow:auto;
}
::-webkit-scrollbar {
width: 2px;
}
::-webkit-scrollbar-track {
background:rgba(0,0,0,0.1);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #1e3c72; /* fallback for old browsers */
}
```
***demo*** : https://codepen.io/ExploringCat/pen/VXmeqb
##### 自定义文本选中状态
```
::selection {
background: deeppink;
color: white;
}
```
##### 有色阴影
```
.drop{
position: relative;
z-index: 1;
}
.drop-wrap{
position:relative;
width:12rem;
height:12rem;
background: #FEAC5E; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #4BC0C8, #C779D0, #FEAC5E); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #4BC0C8, #C779D0, #FEAC5E); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.drop-wrap::after{
content:"";
width:100%;
height:100%;
position:absolute;
top:0.5rem;
background: inherit;
filter:blur(0.4rem);
z-index:-1;
opacity:.8
}
```
https://codepen.io/ExploringCat/pen/oqYLxQ
##### hover图片切换效果实现的3种方式
1. filter方式 grayscale() 实现黑白切换
```
filter:grayscale(1);
hover：filter:grayscale(0);
```
2. 图片精灵方式
```
把灰度图片和彩色图片做成同一张图片，通过hover发生background-position背景位置的偏移实现黑白切换，再用transition实现缓和滑动效果
```
3.幻灯盒模型
设定一个固定宽高的盒子，包含黑白两张图片，一张正常居中显示，一张溢出隐藏，hover状态下，通过margin负值或transform负值实现黑白切换
```
<a href="" target="_blank" class="imgWrap"> /* 固定宽高 width： ；height： ；overflow:hidden；*/
<img src="" class="footer-img">
<img src="" class="footer-img--active">
</a>
.imgWrap{
width:300px;
height:240px;
overflow:hidden
}
```
**demo**:https://codepen.io/ExploringCat/pen/oqYEbw
##### 去除chrome默认黄色输入背景
1. 阴影覆盖
```
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
}
//注：由于是设置颜色覆盖，所以只对非透明的纯色背景有效；
```
2. 修改chrome浏览器渲染黄色背景的时间（推荐）
```
:-webkit-autofill {
-webkit-text-fill-color: #fff !important;
transition: background-color 5000s ease-in-out 0s;
}
```
### 动画 animation
##### 圆形加载动画
```
@keyframes donut-spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.donut {
display: inline-block;
border: 4px solid rgba(0, 0, 0, 0.1);
border-left-color: #7983ff;
border-radius: 50%;
width: 50px;
height: 50px;
animation: donut-spin 1.2s linear infinite;
}
.donut2{
border-right-color:red;
border-top-color:yellow;
border-bottom-color:pink;
}
```
**demo** : https://codepen.io/ExploringCat/pen/jzVZJb
