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 }