CSS笔记
1.元素水平和垂直居中
水平居中
.example{/* 父元素的宽度是确定的 */ margin: 0 auto; } .example{/* 文本水平居中 */ text-align: center; }
垂直居中(元素父级添加flex)
.example{ display: flex; -webkit-box-align: center; align-items: center; }
2.文本自动换行
.example{ white-space: normal; word-break: break-all; word-wrap: break-word; text-overflow: ellipsis; }
3.隐藏浏览器滚动条
.example::-webkit-scrollbar{ display:none /* or */ width:0; }
4.水平镜像旋转元素
.example{ -moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); transform:scaleX(-1); }
5.媒体自适应css
@media screen and (min-width: 1000px) and (max-width: 1300px){ .example{ } }
6.用css实现强制不换行,超出部分显示省略号
white-space: nowrap; /*强制一行内显示*/
overflow: hidden; /*溢出隐藏*/
text-overflow: ellipsis; /*超出的部分显示省略号*/
注:这三行代码必须同时存在,才能实现效果
JS笔记
1.Cookie操作
function setCookies(obj, limitTime) { let data = new Date(new Date().getTime() + limitTime * 24 * 60 * 60 * 1000).toGMTString() for (let i in obj) { document.cookie = i + '=' + obj[i] + ';expires=' + data } } setCookies({ browsertc: 1, }, 1);
2.读取Cookie
function getCookie(name) { var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)"); if (arr = document.cookie.match(reg)) return unescape(arr[2]); else return null; } getCookie('browsertc');