hey ~ 我是肥阳，后期会持续更新，请记得点赞支持哟
此文为日常项目的所用整理，互相学习，多多指教

• 圣杯布局

• header和footer各自占领屏幕所有宽度，高度固定。

• 中间的container是一个三栏布局。

• 三栏布局两侧宽度固定不变，中间部分自动填充整个区域。

• 中间部分的高度是三栏中最高的区域的高度。

• CSS声明顺序

1、Positioning 布局方式
包括： position, z-index, display, float

2、Box model 盒模型
包括： width, height, padding, margin, border, overflow

3、Typographic 文本排版
包括： font, line-height, text-align

4、Visual 视觉外观
包括： color, backgorund, list-style, transform, animation, border-radius, opacity

• CSS书写规范

一律小写 / 中划线 / 尽量不用缩写
去掉小数点前面的0： 0.9rem -> .9rem
使用简写：margin: 10px 0 15px;

• checkbox修改原有样式

input[type="checkbox"]{
  -webkit-appearance: none;
  width:24px;
  height:24px;
  text-align:center;
  line-height:24px;
  margin:-2px;
  background: #fafbff;
  border: 1px solid #f4f6ff;
  border-radius: 5px;
}
input[type="checkbox"]:checked{
  color:#333;
}
input[type="checkbox"]:checked::after{
  content:"✔";
}

• 关于background

纯色  background: #000;
线性渐变 background: linear-gradient(#fff, #000);
径向渐变 background: radial-gradient(#fff, #000);
角向渐变 background: conic-gradient(#fff, #000)

• 网格图背景

background-image: linear-gradient(90deg, rgba(50,0,0,.1) 5%, rgba(0,0,0,0) 5%), linear-gradient(180deg, rgba(50,0,0,.1) 5%, rgba(0,0,0,0) 5%); 
background-size: 20px 20px; 
background-position: center center; 
background-position-x: center; 
background-position-y: center;

• 点击效果

div:active{
    background:#F6F8F8;
}

• button 重置样式

{
    border:0;
    outline:none;
    background:transparent;
}

• table 常用

<table cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td colspan="2"></td> // 跨列
        <td rowspan="2"></td> // 跨行
    </tr>
</table>

table{
    width:100%;
    table-layout: fixed; // 平分单元格
}

• 让鼠标事件失效（链接、点击等事件）

pointer-events: none;

• flex 平均分布且可以换行

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
li {
    flex: 1;
    width: 25%;
    min-width: 25%;（关键代码）
    max-width: 25%;（关键代码）
｝

• 取消元素高亮效果

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

• 三条横线

<i class="menu"></i>
.menu {
    display: inline-block;
    border-width: 9px;
    border-bottom-style: double;
    border-top: 3px solid;
    border-color: #fecd0f;
    width: 2em;
    height: 3px;
}

• 圆环

<i class="radio"></i>
.radio {
    display: inline-block;
    border: 9px double #fecd0f;
    border-radius: 50%;
  }

• 点击元素去除默认边框（移动端）

-webkit-tap-highlight-color: rgba(255,255,255,0);

• 三角形

<div class="triangle bottom"></div>
<div class="triangle top"></div>
<div class="triangle left"></div>
<div class="triangle right"></div>

.triangle{
    display:inline-block;
    border:solid 10px transparent;
}
/*下*/
.triangle.bottom{
    border-top-color: green;
}
/*上*/
.triangle.top{
    border-bottom-color: green;
}
/*左*/
.triangle.left{
    border-right-color: green;
}
/*右*/
.triangle.right{
    border-left-color: green;
}

• 强制换行

{
    width: 100%;（兼容IOS必备条件）
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
}

• 两端对齐

{
    text-align: justify;
    text-align-last: justify; (最后一行若不满一行也两端对齐)
}

• font-family 常用字体

font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;

• media适配

@media screen and (min-width: 1200px) { css-code; }
@media screen and(min-width: 960px) and (max-width: 1199px) { css-code;}
@media screen and(min-width: 768px) and (max-width: 959px) { css-code; }
@media screen and(min-width: 480px) and (max-width:767px) { css-code; }
@media screen and (max-width: 479px) { css-code; }

• 兼容IOS溢出无法滚动（设置为弹性滚动）

{
    overflow-y:auto; 
    -webkit-overflow-scrolling : touch;
}

• box-shadow

box-shadow: {20px 20px 10px 0px rgba(0,0,0,0.5) inset}
box-shadow: {x轴上阴影的位置 y轴上阴影的位置 隐形的模糊半径 阴影的尺寸 颜色值 位置}
box-shadow:0px 0px 8px #ccc;

• 兼容IOS input、select等设置为只读后仍获取焦点的问题

input：{
    outline:none;
    user-select:none;
    -webkit-user-select:none;
}

• 禁止文字选择user-select应用

body{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

• 移动端点击元素去除默认边框

    -webkit-tap-highlight-color: rgba(255,255,255,0);

• input placeholder修改默认设置

input::-webkit-input-placeholder{
    color: green;
    background-color: #F9F7F7;
    font-size: 14px;
}
input::-moz-input-placeholder{
    color: green;
    background-color: #F9F7F7;
    font-size: 14px;
}
input::-ms-input-placeholder{
    color: green;
    background-color: #F9F7F7;
    font-size: 14px;
}

• border-bottom 1px 安卓/IOS 兼容写法

div {
    position:relative
};
div:after{
    display: block;
    content: " ";
    box-sizing: border-box;
    border-bottom: 1px solid #d7d7d7;
    -webkit-transform: scaleY(0.5);
    -ms-transform: scaleY(0.5);
    transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

• 背景过渡色

background-image: linear-gradient(to top,#ff6e15 0,#ff3800 100%);
background-image: -webkit-linear-gradient(linear,left bottom, left top,color-stop(0, #ff3800),to(#ff3800));
background-image: -o-linear-gradient(linear,left bottom, left top,color-stop(0, #ff3800),to(#ff3800));
background-image: -moz-linear-gradient(linear,left bottom, left top,color-stop(0, #ff3800),to(#ff3800));
background-repeat: repeat-x;

• 清除浮动

.clearfix{
    zoom: 1;
}
.clearfix:after{
    display:block;
    content:'';
    clear:both;
    visibility:hidden;
    height:0;
}

• 垂直水平居中

绝对定位方式且已知宽高
{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -30px;
    margin-left: -70px;
    width: 140px;
    height: 60px;
}

绝对定位 ＋ 未知宽高 ＋ translate
{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

未知宽高 ＋ flex 轻松搞定水平垂直居中
{
    display: flex;
    align-items: center;
    justify-content: center;
}

• 文本溢出显示省略号

单行文本 ＋ 宽度固定
{
    width:100px;//宽度固定是必要条件
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

多行以及移动端显示 ＋ 宽度不固定
{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

微信端不兼容时，添加
{
    line-height:16px;
    height:48px;
}
（高度可自定设置，此处height:48px;为3行时的高度）

• 制造文本的模糊效果

{
    color: transparent;
    text-shadow:0 0 2px rgba(0,0,0,.5);
}

• 简洁loading动画效果 【打点动画】

<div class="loading"></div>

.loading:after{
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    content: '\2026';
    -webkit-animation: ellipsis 2s infinite;
}
@-webkit-keyframes ellipsis{
    from{
        width: 2px;
    }
    to{
        width: 15px;
    }
}

• 鼠标指针放在一个元素边界范围内时所用的光标形状

cursor:default;    默认光标（通常是一个箭头）
cursor:auto;       默认。浏览器设置的光标。
cursor:crosshair;  光标呈现为十字线。
cursor:pointer;    光标呈现为指示链接的指针（一只手）
cursor:move;       此光标指示某对象可被移动。
cursor:e-resize;   此光标指示矩形框的边缘可被向右（东）移动。
cursor:ne-resize;  此光标指示矩形框的边缘可被向上及向右移动（北/东）。
cursor:nw-resize;  此光标指示矩形框的边缘可被向上及向左移动（北/西）。
cursor:n-resize;   此光标指示矩形框的边缘可被向上（北）移动。
cursor:se-resize;  此光标指示矩形框的边缘可被向下及向右移动（南/东）。
cursor:sw-resize;  此光标指示矩形框的边缘可被向下及向左移动（南/西）。
cursor:s-resize;   此光标指示矩形框的边缘可被向下移动（南）。
cursor:w-resize;   此光标指示矩形框的边缘可被向左移动（西）。
cursor:text;       此光标指示文本。
cursor:wait;       此光标指示程序正忙（通常是一只表或沙漏）。
cursor:help;       此光标指示可用的帮助（通常是一个问号或一个气球）。

• 修改鼠标选中时默认的颜色

注意：只能修改两个属性: 1、字体颜色; 2、选中背景颜色
p::selection{
    color: green;
    background-color: pink;
}
p::-moz-selection{
    color: green;
    background-color: pink;
}

• 文本首字下沉

<p>文本</p>
p:first-letter{
    float:left;
    color:green;
    font-size:30px;
}

• 图片加滤镜

<img src="" width="" height="" alt="">

filter: grayscale(1); /*灰度*/
filter: sepia(1);/*褐色*/
filter: saturate(500%);/*饱和度*/
filter: hue-rotate(180deg);/*色相反转*/
filter: invert(1);/*反色*/
filter: opacity(.3);/*透明度*/
filter: brightness(250%);/*亮度*/
filter: contrast(200%) drop-shadow(2px 3px 5px rgba(0,0,0,.5));/*对比度*/
filter: blur(2px);/*模糊度*/
filter: drop-shadow(2px 3px 5px rgba(0,0,0,.5));/*阴影*/

• CSS3动画

<div class="react"></div>
.react {
    position: absolute;
    width: 100px;
    height: 100px;
    background: #f00;
    animation: react-run 3s linear 0s infinite;
}
@keyframes react-run {
    0% { top: 0px;left: 0px;}
    25% {top: 0px;left: 200px;}
    50% {top: 200px;left: 200px;}
    75% {top: 200px;left: 0px;}
    100% {top: 0px;left: 0px;}
}

• 背景图片高斯模糊

<div>
    <img src="xxxxx" width="136" height="194"/>
</div>

div{
  position:relative;
  height:250px;
  background:url('xxx') no-repeat top/cover;
}
div:after{
  content: "";
  position:absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
  background:inherit;
  filter:blur(2px);
  z-index:2;
}
img{
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-97px;
  margin-left:-68px;
  z-index:3;
}