1、css实现宽度是百分比的盒子为正方形
<div style="width:50%;padding-bottom:50%;height:0px;background:#ccc;"></div>
只需要保证width的百分比值和padding-bottom的百分比值一样即可
2、手机端判断是横屏还是竖屏
function checkOrient() {? ???if (window.orientation == 0 || window.orientation == 180){? ???????alert(‘竖屏‘);? ???}else if (window.orientation == 90 || window.orientation == -90){? ???????alert(‘横屏‘);? ???}}// 添加事件监听?addEventListener(‘load‘, function(){? ???checkOrient();?});3、不固定行数的文字垂直居中
需求：一个盒子div中有一段文字，文字行数不确定，如何实现该段文字在盒子内垂直居中
方法1：
在div盒子上使用两个css属性：display:table-cell;vertical-align:middle;
方法2：
在div盒子内部放置另外一个盒子p元素，把文字放置到p元素中，
然后div盒子设置：position:relative;
p元素设置：position:absolute;top:50%;transform:translate(-50%);
4、动态正则校验
function dynamicReg(text) {? ???
eval("var reg = /^" + text + "$/;");? ???
console.log(reg);? ???
console.log(reg.test(‘123456‘));?
}??
dynamicReg(‘34‘); ??//false?
dynamicReg(‘123456‘); ??//true5、不固定宽高的盒子水平垂直居中
.parent { ???width: 60%; ???height: 500px; ???position: relative; ???border: 1px solid #000;}.box{ ???width: 30%; ???height: 20%; ???position: absolute; ???top:0; ???right:0; ???bottom:0; ???left:0; ???margin: auto; ???background-color: blue;}<div class="parent"> ???<div class="box"></div></div>6、移动设备上实现滚动回弹效果
-webkit-overflow-scrolling: touch; //手指离开屏幕后，还会滚动一段距离-webkit-overflow-scrolling: auto; ???//手指离开屏幕后，立即停止滚动
7、盒子四周阴影效果
div { ???box-shadow: 0px 0px 15px #000;}8、正则验证是否是汉字或全角
/[^\x00-\xff]/g.test(‘abc‘) ??//false?
/[^\x00-\xff]/g.test(‘表达‘) //true
/[^\x00-\xff]/g.test(‘.‘) //false
/[^\x00-\xff]/g.test(‘。‘) //true
web前端几个小知识点笔记
原文地址：https://www.cnblogs.com/libo0125ok/p/8303686.html