相关知识点在此记录，以方便未来 查询
滤镜
/*滤镜*/
/*0到1之间或者0%-100%数值*/
-webkit-filter: grayscale(.5);
/*棕色调*/
-webkit-filter: sepia(1);
/*饱和度*/
-webkit-filter: saturate(.5);
/*色相旋转*/
-webkit-filter: hue-rotate(90deg);
/*反色*/
-webkit-filter: invert(1);
/*透明度*/
-webkit-filter: opacity(.2);
/*亮度*/
-webkit-filter:brightness(.5);
/*对比度*/
-webkit-filter: contrast(2);
/*模糊*/
-webkit-filter: blur(3px);
/*阴影*/
-webkit-filter: drop-shadow(15px 15px 15px #ccc);
弹性盒模型
display: flex;
flex-direction: row;
/*设置主轴，默认是x*/
/*row(默认)
row-reverse:反转
column 垂直
* */
justify-content:space-between;
align-items:stretch;
/*
flex-start:起始位置对齐
flex-end:结束位置对齐
center:居中
space-between/space-around:平均分配
align-items:
flex-start:侧轴开始
flex-end:侧轴结束
center:侧轴居中
baseline:基线对齐
stretch:接近所在行尺寸
flex-wrap:换行
nowrap:单行
wrap:多行
前2个可能会以对flex子项造成溢出容器的情况
wrap-reverse 反转
align-content 多行弹性盒模型容器
堆叠
* */
/*子元素方法
order: num;
显示顺序，数字越大，显示越在后面
支持负数
*
* flex:
* 伸缩比例
*
* 单一的某个元素
* align-self:子元素侧轴对齐
*
*
* margin:auto 左右上下居中
* */
移动端自动刷新和固定宽度方式
<script>
window.onload=function(){
//js自动刷新
window.addEventListener(‘resize‘,setSize,false);
//横竖屏的时候
window.addEventListener(‘orientationchange‘,setSize,false)
setSize();
function setSize(){
var html=document.getElementsByTagName(‘html‘)[0];
var pageWidth=html.getBoundingClientRect().width;
//限制宽度
pageWidth=pageWidth>540?540:pageWidth;
html.style.fontSize=pageWidth/16+‘px‘;
console.log(pageWidth)
}
}
</script>
touch事件
<script>
var div=document.getElementById(‘box‘);
//移动端添加事件
/*touchstart触摸屏幕的时候
* touchmove连续移动屏幕的时候
* touchend手指离开屏幕的时候
*/
div.addEventListener(‘touchstart‘,function(e){
e.preventDefault();//取消事件
div.style.backgroundColor=‘blue‘;
},false)
div.addEventListener(‘touchmove‘,function(e){
e.preventDefault();//取消事件
div.style.backgroundColor=‘yellow‘;
},false)
div.addEventListener(‘touchend‘,function(e){
e.preventDefault();//取消事件
div.style.backgroundColor=‘red‘;
},false)
</script>