CSS备忘录 {#CSS备忘录}

元素水平和垂直居中 {#元素水平和垂直居中}

水平居中

|-----------------------|-------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 | .example{/* 父元素的宽度是确定的 */ margin: 0 auto; } .example{/* 文本水平居中 */ text-align: center; } |

垂直居中(元素父级添加flex)

|---------------------|------------------------------------------------------------------------------------| | 1 2 3 4 5 6 | .example{ display: flex; -webkit-box-align: center; align-items: center; } |

文本自动换行 {#文本自动换行}

|-----------------------|-----------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 | .example{ white-space: normal; word-break: break-all; word-wrap: break-word; text-overflow: ellipsis; } |

隐藏浏览器滚动条 {#隐藏浏览器滚动条}

|---------------------|-----------------------------------------------------------------------| | 1 2 3 4 5 6 | .example::-webkit-scrollbar{ display:none /* or */ width:0; } |

水平镜像旋转元素 {#水平镜像旋转元素}

|-----------------------|-----------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 | .example{ -moz-transform:scaleX(-1); -webkit-transform:scaleX(-1); -o-transform:scaleX(-1); transform:scaleX(-1); } |

媒体自适应css {#媒体自适应css}

|-------------------|--------------------------------------------------------------------------------------| | 1 2 3 4 5 | @media screen and (min-width: 1000px) and (max-width: 1300px){ .example{ } } |

JS备忘录 {#JS备忘录}

Cookie操作 {#Cookie操作}

设置Cookie

|------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 10 | 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); |

读取Cookie

|---------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | 1 2 3 4 5 6 7 8 9 | function getCookie(name) { var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)"); if (arr = document.cookie.match(reg)) return unescape(arr[2]); else return null; } getCookie('browsertc'); |