window. history.go(1) 前进
window. history.go(-1) 后退
.clear {clear: both;height: 1px;margin-top: -1px;overflow: hidden;}
.clearfix:after {content: "";display: block;height: 0px;clear: both;}
text-decoration:none; //删除下划线
letter-spacing: 1px; 字体间距
-------------------------------------------------------------------------------------------------------------------
居中：
第一种方法：外层设置相对定位且浮动，left:50%，这样左边位置就偏移到了中间的位置;然后内层设置相对定位，left:-50%，这样正好向左偏移自身宽度的一半，实现了居中。
.wrap{float:left;position:relative;left:50%;}
.inner{position:relative;left:-50%;}
第二种办法：外层使用text-align：center;我们知道text-align:center是让里面的内联元素居中，很显然在外层设置text-align:center后，我们让里面的元素变成内联元素即可，则可以对里面元素使用display:inline-block;*display:inline(兼容IE6-7)
------------------------------------------------------------------------------------------------------------------
蒙版/渐变
background: -moz-linear-gradient(top, #041d2a, #1379ab);
background: -webkit-gradient(linear,top,from(#041d2a),to(#1379ab));
background: -webkit-linear-gradient(top, #041d2a, #1379ab);
background: -o-linear-gradient(top, #041d2a, #1379ab);
/*IE8-IE9*/
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002E8C', endColorstr='#55e5ed',GradientType=1 );
IE8不支持
渐显渐隐效果：
background: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(250, 98, 223, 0.5)), to(#fff));
background: -moz-linear-gradient(left, rgba(250, 98, 223, 0.5), #fff);
background: -o-linear-gradient(left, rgba(250, 98, 223, 0.5), #fff);
background: linear-gradient(left, rgba(250, 98, 223, 0.5), #fff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#fa62df, endColorstr=#ffffff, GradientType=50);
定位在两边的正方形小块就行
背景过度自然
background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(19, 122, 175, 0.9)), to(rgba(255, 255, 255, 0)));
background: -moz-linear-gradient(left, rgba(19, 122, 175, 0.9), rgba(255, 255, 255, 0));
background: -o-linear-gradient(left, rgba(19, 122, 175, 0.9), rgba(255, 255, 255, 0));
background: linear-gradient(left, rgba(19, 122, 175, 0.9),rgba(255, 255, 255, 0));
/* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0883c2, endColorstr=#ffffff, GradientType=1); */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#B20883c2', endColorstr='#00FFFFFF',GradientType=0 ); /* IE6-9 */
-------------------------
background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(19, 122, 175, 0.9)), to(rgba(255, 255, 255, 0)));
background: -moz-linear-gradient(left, rgba(19, 122, 175, 0.9), rgba(255, 255, 255, 0));
background: -o-linear-gradient(left, rgba(19, 122, 175, 0.9), rgba(255, 255, 255, 0));
background: linear-gradient(left, rgba(19, 122, 175, 0.9),rgba(255, 255, 255, 0));
background: -ms-linear-gradient(top, rgba(19, 122, 175, 0.9),rgba(255, 255, 255, 0)); /* ie10+ */
/* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0883c2, endColorstr=#ffffff, GradientType=0); */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e50883c2', endColorstr='#00FFFFFF',GradientType=0 ); /* IE6-9 */
真坑 6-9支持。10以上还不支持。单独给10设置一个支持10+。方向跟别的不一致要修改
-----------------------------------------
display: inline;属性用的少。简单记下，让相邻的元素并在一排显示，直到排列不下才换行。
display: block;
display:inline-block;
--------------------------------------------
PC页面注意事项：
1.图片的盒子需要固定宽高。---避免图片过大，影响页面布局。
2.文字 标题 记得 超出隐藏。---避免用户输入过多文字，影响页面布局。
3.记着+a标签 ---
-----------------------------------------
元素高度等比例缩小放大。网上有个方法是：
{width:100%; height:0; padding-bottom: 100%; overflow:hidden;}
利用padding来占位实现。还未测试过行不行。放置图片等应该没有问题。但是有人提出padding挤出来的高度没有办法放置其他东西了。算是弊端吧，也没有测试过。有时间试试。
调试响应式等比例缩小高度：
现宽度/原宽度=缩小比例；
原高度*缩小比例=现高度；
响应式 节点：
(max-width: 1441px) {}
(max-width: 1199px) {}
(max-width: 1023px) {}
(max-width: 767px) {}
(max-width: 424px) {}
(max-width: 374px) {}
其实讲明白点就是：
(max-width: 1441px)~(min-width: 1200px) {}
(max-width: 1199px) ~(min-width: 1024px){}
(max-width: 1023px) ~(min-width: 768px){} ul+li 放2个
(max-width: 767px) ~(min-width: 425px){} ul+li 放1个
(max-width: 424px) ~(min-width: 375px){} -
(max-width: 374px) ~(min-width: 320px){} -
max-width 并不是调试的节点，我们要调试的节点是下一个屏的最大节点+1；
1441其实调试的节点是 1200 因为最小的节点没有问题，最大的节点肯定没有问题。
以此类推
425~767 手机
768~1199 平板
width: calc((100% - 80px)/4); 做 排列li 比较方便
--------------------------------------
img 标签放置的图片能适应父级大小等比例缩小，而且图片不失真。 做手机，响应式提倡用吧。背景图片用做PC 多点。个人理解，如有错误 希望没有误导看官。还请指正！
----------------------------------------------
input
type = submit 去掉默认文字 value = " " 等于空就行了。
去掉 input 默认样式 outline:none;
兼容模式 ？？？
input{ background:none; outline:none; border:0px; }
button {
border: 0;
background-color:transparent;
}
input, button, select, textarea {
outline: none;
-webkit-appearance: none;
border-radius: 0;
}
----------------------------------------------------------------
a标签的4种状态
a:link 超链接的默认样式
a:visited 访问过的（已经看过的）链接样式
a:hover 鼠标处于鼠标悬停状态的链接样式
a:active 当鼠标左键按下时，被激活（就是鼠标按下去那一瞬间）的链接样式。
text-decoration:none; //删除下划线
text-decoration:underline //添加下划线
-------------------------------------
鼠标样式
cursor: default; 恢复正常光标
cursor: Pointer; 手型
cursor: wait ; 转圈 忙
----------------------------------------------
更改Input 默认字体颜色
input::-webkit-input-placeholder { color: #ff0000;}
/* Mozilla Firefox 4 to 18 */
input:-moz-placeholder { color: #C0C0C0; opacity: 1;}
/* Mozilla Firefox 19+ */
input::-moz-placeholder {color: #C0C0C0;opacity: 1;}
/* Internet Explorer 10+ */
input:-ms-input-placeholder {color: #C0C0C0;}
--------------------------------------------
table 空隙
border-collapse: collapse; padding: 0;
---------------------------------------------
PS png 小图标图片换颜色
图层/图层样式/颜色叠加
-------------------------------------------
CSS3 动画
@-webkit-keyframes fadeIn {
0% {
opacity: 0; /*初始状态 透明度为0*/
}
20%{
opacity: .2;
}
50% {
opacity: .5; /*中间状态 透明度为0.5*/
}
70%{
opacity: .7;
}
100% {
opacity: 1; /*结尾状态 透明度为1*/
}
手机电脑 常见涟漪扩散就是这个做出来的
filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* 老版Mozilla */
-khtml-opacity:0.5; /* 老版Safari */
opacity: 0.5; /* 支持opacity的浏览器*/
-----
/*调用动画效果*/
-webkit-animation-name: fadeIn; /*动画名称*/
-webkit-animation-duration: 3s; /*动画持续时间*/
-webkit-animation-iteration-count: 1; /*动画次数*/
-webkit-animation-delay: 0s; /*延迟时间*/
----------------------------
弹性盒子。
justify-content:center;水平居中
align-items: center 垂直居中
flex-wrap: nowrap;/*默认样式，超出不换号，自己平均缩小*/
flex-wrap: wrap; 换行
flex-flow: column wrap-reverse; 换行
git 学习博客。
https://www.cnblogs.com/baby-blue/p/6130569.html
个人认为写的很详细，适合刚接触git 的
