前端-杂文

折叠代码

(可以在使用 vsCode 编辑器的大纲功能时可展开或折叠的代码块。 在较长的代码文件中，能够折叠或隐藏一个或多个区域会十分便利，这样，可将精力集中于当前处理的文件部分。)

//#region  开始
要折叠的代码
//#endregion    结束

grid布局 

    display: grid;
    /*  1.声明了三列，宽度分别为 200px 200px 200px */
    grid-template-columns: 1fr;
    /*  列之间的间距  */
    grid-gap: 12px;
    /*  声明了两行，行高分别为 50px 50px  */
    grid-template-rows: 1fr 4fr;

 box-shadow盒子阴影

属性值：
h-shadow:水平方向属性值，允许负值
v-shadow：垂直阴影的位置。允许负值
blur：模糊距离
spread：阴影的大小
color：阴影的颜色
inset：从外层的阴影（开始时）改变阴影内侧阴影

box-shadow:10px 10px 5px 10px #888888 inset;

第一个值10px：控制水平方向阴影

第二个值10px：控制垂直方向阴影

第三个值：5px控制阴影的模糊程度

第四个值10px：控制阴影的大小

第五个值#88888;阴影的颜色

inset：表示从外层的阴影（开始时）改变阴影内侧阴影

 不加浏览器叫标准模式，添加浏览器叫兼容模式

i标签与文字水平居中

i {
    margin-left: 4px;
    vertical-align: sub;
}

 dom元素位移50%（可以结合定位实现dom元素居中）

transform: translate(-50%,-50%)

在css中使用@来代表src下路径会报错，这时就需要使用~@

@常用于js文件路径，而~@用与~@

background: url('~@/assets/demo.png') no-repeat;

背景色与背景图同时使用

background: linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)), 
              url("@/assets/home/sybjt.png");
    background-size: 100% 100%;

vue3在js实现静态资源的动态引入

//封装方法
export const getAssetsFile = (name) => {
	return new URL(`../assets/images/${name}`, import.meta.url).href;
};

动态加载图片时需要使用require

const imageUrl = require('@/assets/image.jpg')）

img图片设置宽高，图片展示时不影响原本比例

object-fit: fill|contain|cover|scale-down|none|initial|inherit;

鼠标悬浮到dom元素上，dom元素放大

dom元素class :hover { 
    transform: scale(1.1);/*scale为变大变小的倍数*/ 
    transition: 500ms;/*设置的是动画持续过程，大一点会显得不那么突兀*/
}

css设置背景图与背景色同时使用

background:url('~@/assets/home/图片.png'), #014a84;

localStroage和sessionStorage使用大致相同，他们的不同之处在于，localstroage是永久保存，而sessionstroage是会话存在，当会话结束，sessionstroage保存值也会清空。

//存值
    // 自身方法
    localStorage.setItem("name","bonly");
    // []方法
    localStorage["name"]="bonly";
    // .方法
    localStorage.name="bonly";

//取值
    // 自身方法
    localStorage.getItem("name");
    // []方法
    localStorage["name"];
    // .方法
    localStorage.name;

//移除
    // 自身方法
    localStorage.removeItem("name");
    // []方法
    delete localStorage["name"];
    // .方法
    delete localStorage.name

//清空
    localStorage.clear();

//取出所有的值
    localStorage.valueOf();

//判断是否含有某个key(如果存在的话返回true，不存在返回false)
    localStorage.hasOwnProperty("name")

//子级iframe+获取父级localstorage
    var parentLocalStorage=window.parent.localStorage;

cookie的使用

Cookie被禁用：当用户非常注重个人隐私保护时，他很可能禁用浏览器的cookie功能
Cookie与浏览器相关的：即使访问的是同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的。
Cookie可能被删除：每个cookie都是硬盘上的一个文件，因此很有可能被用户删除
Cookie安全性不高：所有的cookie都是以纯文本的形式记录于文件中，因此如果要保护用户名和密码等信息时，最好事先经过加密处理。

//保存cookie
//参数：cookie名,cookie值,有效时长(单位：天)
function saveCookie(cookieName,cookieValue,cookieDates){
    var d = new Date();
    d.setDate(d.getDate()+cookieDates);
    document.cookie = cookieName+"="+cookieValue+";expires="+d.toGMTString();
}

//获取cookie
//参数：cookie名
function getCookie(cookieName){
    var cookieStr = unescape(document.cookie);
    var arr = cookieStr.split("; ");
    var cookieValue = "";
    for(var i=0;i<arr.length;i++){
        var temp = arr[i].split("=");
        if(temp[0]==cookieName){
            cookieValue = temp[1];
            break;
        }
    }
    return cookieValue;
}

//删除cookie
//参数：cookie名
function removeCookie(cookieName) {
    document.cookie=encodeURIComponent(cookieName)+“=; expires=” + new Date();
}

设置文字间距

//设置每个文字之间的间距(letter-spacing: 3px;)
//你好啊每个文字之间间距为3px
<span style="letter-spacing: 3px;">你好啊</span>    

GitHub拉取代码（外网，有时候拉不下来，可以使用这种方法） 

//在正常的github路径前拼接gitclone.com/

git clone https://gitclone.com/github.com/killer-p/ctool.git