CSS/JS笔记

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笔记

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');
原文链接:https://www.bailuze.com/6397.html,转载请注明出处。
本站所有文章,如无特殊说明或标注,均为本站原创发布。任何在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
0