个人笔记汇总

1.（input 类型为number 最大长度失效解决方法）

input type="number"  maxlength 失效 解决方案

.< input type="number" οninput="if(value.length>5)value=value.slice(0,5)" />  有效

2.（设置input 默认文案样式）
. input::-webkit-input-placeholder{属性:属性值}

3.（显示项目编号属性）
*.list-style: decimal   (li 项目显示序号)

4.（重置placeholder 透明度）
. placeholder 中的文案默认透明度为 .3  ，可设置如：opacity = ".6";
 
5.（设置鼠标选中文案背景色）
. p::selection{background-color:green; color: #fff;} --- 选中文案背景色

6.（禁止页面文字被选中）
. -webkit-user-select: none; --- 禁止页面文字选择 ，此属性不继承，一般加在body上规定整个body的文字都不会自动调整

7.（边框在盒模型内部绘制）
*. box-sizing 属性介绍 --- 边框在盒子内部绘制 * box-sizing:border-box *

8.（自定义鼠标样式）
. *{cursor:url(img/hand.cur),default;} --- 自定义鼠标样式，需制作 .cur 图片。

9.（Bootstrap 兼容模式）
. Bootstrap 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染模式下，建议将此           < meta > 标签加入到你的页面中  meta http-equiv="X-UA-Compatible" content="IE=edge"

10.（flex布局）
.flex 属性常见值为 1 ，可以为小数如（flex:1.2 ，flex:1.5）也可以为整数如（flex2 , flex3 , flex5）

11.（透明效果属性）
.transparent   透明的 如：background-color:transparent  (背景为透明)

12.（手机端清理input 内阴影）
 -webkit-appearance:none;  清理input 内阴影

13.（placeholder 默认文案垂直对齐）
 .box::-webkit-input-placeholder{ height: 50px;line-height: 50px } ; 默认文案垂直对齐

14.（盒模型文字垂直居中）
. div 定义dipslay:flex 盒模型样式时，设置样式 align-items:center;  可使盒模型的内容垂直居中。

15.（文字竖排显示）      
. writing-mode: vertical-rl; margin-top:auto; margin-bottom:auto; （或者加前缀-webkit-） 右侧文案垂直居中对齐   例如：优惠券右侧“立即使用”按钮

16.（鼠标不可选效果  禁止符）
. cursor: not-allowed;        cursor:move;  拖拽效果    
   cursor:wait;  加载效果       cursor:sw-resize 斜对角拉伸

17.（文字溢出隐藏）      
. text-overflow:ellipsis; overflow:hidden; white-space: nowrap;   （需要宽度属性）

18.（placeholder 兼容处理）
.input::-webkit-input-placeholder{color:red;}     -webkit 谷歌浏览器
.input::-moz-placeholder{color:red;}   -moz   firefox浏览器
.input::-ms-input-placeholder{color:red;}  -ms   ie 浏览器

（css 属性让滚动条不占位置，相当于隐藏但可滚动）

19.前端构建工具Fis 和 webpack区别（定位不同）
定位：webpack 定位模块化，打包工具
定位：Fis为一个全功能工具，解决性能优化，模块化，自动化，甚至包括代码规范，部署等。
webpack 生态系统比较完善， 此外还有rollup工具也比较火热。

20. overflow-scrolling 滚动与回弹效果
-webkit-overflow-scrolling: touch;   auto | touch
auto:普通滚动，当手指从触摸屏上移开，滚动立即停止

touch:滚动回弹效果，当手指从触摸屏上移开，内容会保持一段时间的滚动效果，继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

目前只是iOS系统得支持了。不过也不影响，至少加上这个体验可以让iOS用户体验更棒一点。

21.for、each、forEach  区别 ？
for 用于创建一个循环,它包含了三个可选的表达式：初始值、循环条件、递增表达式。
each 是jquery 语法提供的，针对对象  $();
forEach 是js提供的语法，针对数组

22. append 和 push 区别 ？
append 操作的是DOM节点， push操作的是数组
append() 方法将一个节点添加到制定父节点的子节点列表末尾
push()     方法将一个或多个元素添加到数组的末尾，并返回数组的新长度

23. children 和 find 区别？     亲测
.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈）
.find(selector) 方法是返回匹配元素集合中每个元素的后代（所有后代）。

24. width:auto 和 width:100% 区别？
width:auto 根据自身内容伸缩，width:100%; 参照父级内容区width值，非总宽度。

25.node、npm、webpack 区别？
nodejs是js后端运行平台，可以把它看成java体系中对应的jdk，是三个里面最基础的。
npm是nodejs的包管理工具，可以把它看成maven中包依赖管理那部分。
webpack是前端工程化打包工具，可以把它看成maven中工程自动化那部分。

安装好nodejs就自带了npm，但是默认是国外镜像，推荐使用淘宝镜像。
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install webpack -g  // 淘宝镜像安装webpack

26. 三目运算
DOM
< div class="box"></ div>

var test = 0;
$(".box").text(`${test === 0 ? '未领取' : '已领取'}`)
// $(".box").text(`${test === 0 ? '未领取' : test === 1 ? '未知' : '已领取'}`)
// $(".box").text(`${test === 0 ? '未领取' : test === 1 ? '已领取' : test === 2 ? '领取中' : '未知'}`)

27.  银行卡和电话号码格式化
< input  type="text" οnkeyup="this.value =this.value.replace(/\s/g,'').replace(/[^\d]/g,'').replace(/(\d{4})(?=\d)/g,'$1 ');">

28. css 私有作用域scoped 和 深度选择器
< style scoped >
     .box  >>>  .box-sub { color: red; }   //  普通样式表的形式
     .box  /deep/  .box-sub { color: red; }  // 使用了less和sass预编译不支持 ">>>" ，请使用 /deep/来代替
< /style >

深度选择器会将上面的样式编译为   .box[data-v-fafege]  .box-sub { color: red }