问题总结20-12-14至20-12-20

⭐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各种纸张贴纸效果

https://www.cnblogs.com/wifi/articles/3560603.html