⭐home固定宽高，然后获取浏览器宽度缩放home实现适配时，要获取html节点，不要body。
⭐JS动态修改transform:scale(x)属性
https://blog.csdn.net/weixin_42941619/article/details/88817149
⭐transform-origin 属性
改变被转换元素的位置 transform-origin:20% 40%;
https://www.w3school.com.cn/cssref/pr_transform-origin.asp
⭐JS实现监听浏览器窗口大小改变事件
1 window.onresize = function(){ 2 alert(); 3 }
⭐TS报错，类型“Element”上不存在属性“style”
1 let top = document.querySelector('.Top') as HTMLElement; 2 top.style.display = 'none' ;
https://blog.csdn.net/weixin_38883338/article/details/101517020
⭐JS判断用户的浏览器设备是移动端还是pc端
1 function browserRedirect() { 2 var sUserAgent = navigator.userAgent.toLowerCase(); 3 var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; 4 var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; 5 var bIsMidp = sUserAgent.match(/midp/i) == "midp"; 6 var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; 7 var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb"; 8 var bIsAndroid = sUserAgent.match(/android/i) == "android"; 9 var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce"; 10 var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile"; 11 document.writeln("您的浏览设备为："); 12 if ( 13 bIsIpad || 14 bIsIphoneOs || 15 bIsMidp || 16 bIsUc7 || 17 bIsUc || 18 bIsAndroid || 19 bIsCE || 20 bIsWM 21 ) { 22 document.writeln("phone"); 23 } else { 24 document.writeln("pc"); 25 } 26 } 27 //判断是否微信浏览器中打开 28 function is_weixn() { 29 var ua = navigator.userAgent.toLowerCase(); 30 if (ua.match(/MicroMessenger/i) == "micromessenger") { 31 return true; 32 } else { 33 return false; 34 } 35 }
⭐JS跳转新页面
window.location = "http://www.xxxxxxxx.net" 跳转后有后退功能，其实应该是 window.location.href。
window.location.replace("http://www.xxxxxxxx.net") 跳转后没有后退功能
window.open("http://www.xxxxxxxx.net") 要新的窗口打开链接，这个一般用于简单的弹出页面，现在基本上都被屏蔽掉了。
window.location.reload();
window.location = "/Admin/UserList";
window.open("/Admin/UserList");
window.location.href = '/Admin/UserList';
window.location.reload()刷新当前页面.
parent.location.reload()刷新父亲对象（用于框架）
opener.location.reload()刷新父窗口对象（用于单开窗口）
top.location.reload()刷新最顶端对象（用于多开窗口）
⭐HTML让字体在一行内显示不换行
1 /*一般的文字截断(适用于内联与块)：*/ 2 /*@author zhenyuya <zhenyuya@163.com>*/ 3 4 .text-oneLine { 5 display: block; 6 /*内联对象需加*/ 7 word-break: keep-all; 8 /* 不换行 */ 9 white-space: nowrap; 10 /* 不换行 */ 11 overflow: hidden; 12 /* 内容超出宽度时隐藏超出部分的内容 */ 13 text-overflow: ellipsis; 14 /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/ 15 } 16 17 /*对于表格，定义有所不同：*/ 18 /*@author zhenyuya <zhenyuya@163.com>*/ 19 20 table { 21 width: 30px; 22 table-layout: fixed; 23 /* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */ 24 } 25 td { 26 width: 100%; 27 word-break: keep-all; 28 /* 不换行 */ 29 white-space: nowrap; 30 /* 不换行 */ 31 overflow: hidden; 32 /* 内容超出宽度时隐藏超出部分的内容 */ 33 text-overflow: ellipsis; 34 /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/ 35 }
⭐vscode 代码提示突然只显示一条了，用鼠标拉一下扩大……
https://segmentfault.com/q/1010000038213499
⭐使用echarts时，遇到出现对元素操作时报错Cannot read property 'getAttribute' of null，表示未找到指定的元素，原因是因为页面变了没有清除定时器还在绘制图表。
⭐a标签去掉下划线
1 text-decoration: none
⭐React中OnClick事件绑定
1 class TestComponent extends React.Component { 2 constructor() { 3 super(); 4 this.onClick = this.handleClick.bind(this); 5 } 6 7 handleClick(event) { 8 const { id } = event.target; 9 console.log(id); 10 } 11 12 render() { 13 return ( 14 <div> 15 <h3 id={this.props.id} onClick={this.onClick}> 16 {this.props.name} 17 </h3> 18 </div> 19 ); 20 } 21 }
⭐解决 margin-top 影响父元素的办法
1.父元素设置 overflow:hidden;
2.父元素设置 padding-top:1px;
3.父元素设置 border-top:1px solid transparent;
4.父元素或子元素设置浮动 float:left; 或者绝对定位 position:absolute;
⭐基于 Flex 实现两端对齐垂直布局
1 justify-content: space-between;
http://www.zyiz.net/tech/detail-148047.html
⭐CSS科技感四角边框
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <style> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 13 html, 14 body { 15 100%; 16 height: 100%; 17 background: #040d32; 18 } 19 20 .border-box { 21 position: relative; 22 margin: 300px auto; 23 400px; 24 height: 300px; 25 background: rgba(1, 19, 67, 0.8); 26 border: 2px solid #00a1ff; 27 border-radius: 8px; 28 } 29 30 .border-box::before { 31 position: absolute; 32 top: -2px; 33 bottom: -2px; 34 left: 30px; 35 calc(100% - 60px); 36 content: ""; 37 border-top: 2px solid #016886; 38 border-bottom: 2px solid #016886; 39 z-index: 0; 40 } 41 42 .border-box::after { 43 position: absolute; 44 top: 30px; 45 right: -2px; 46 left: -2px; 47 height: calc(100% - 60px); 48 content: ""; 49 border-right: 2px solid #016886; 50 border-left: 2px solid #016886; 51 z-index: 0; 52 } 53 54 .border-box p { 55 line-height: 100px; 56 text-align: center; 57 color: #00a1ff; 58 } 59 </style> 60 </head> 61 62 <body> 63 <div class="border-box"> 64 <p>css实现科技感边框</p> 65 </div> 66 </body> 67 68 </html>
⭐CSS3各种纸张贴纸效果