css集锦

### 布局相关
##### 高度宽度 自适应保持一致(常用于解决手机端占位避免加载闪烁和自适应正方形)
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