前端常用場景總結CSS/JS/外掛（實用篇更新中...）

<div class="box box1">

        <span>垂直居中</span>

</div>

.box1{

    display: table-cell;

    vertical-align: middle;

    text-align: center;

}

.box2{

    display: flex;

    justify-content:center;

    align-items:Center;

}

a連結禁止點選跳轉

javascript:void(0);

圖片自適應

object-fit: cover;

vue 橫向滾動條

父級：

overflow-y: hidden;

overflow-x: auto;

white-space: nowrap;

橫向滾動條

.organ-result-content{

    width: 70%;

    height: 50px;

    overflow-y: hidden;

    overflow-x: auto;

    white-space: nowrap;

    font-size: 12px;

    position: fixed;

    bottom: 50px;

}

.organ-result-content-item{

    width: 65px;

    height: 28px;

    margin-top: 10px;

    margin-left: 5px;

    text-align: center;

    line-height: 28px;

    display: inline-block;

    border: 1px dashed #999;

    color: #666;

    position: relative;

}

滑鼠指標放在一個元素邊界範圍內時所用的游標形狀

cursor: pointer;

禁止選擇

 -o-user-select: none;

  -moz-user-select: none;

  -webkit-user-select: none;

  -ms-user-select: none;

  -khtml-user-select :none;

  user-select: none;

設定邊框不包含在長寬度裡面：

box-sizing: border-box;

頂部固定效果

.tabbar{

	position:stycky;

	top:0;

	z-index:999

}

CSS實現單行、多行文字溢位顯示省略號（…）

overflow: hidden;

text-overflow:ellipsis;

white-space: nowrap;

calc(100% - 20px)計算

position:absolute；position:relative絕對定位使用通常是父級定義position:relative定位，子級定義position:absolute絕對定位屬性，並且子級使用left或right和top或bottom進行絕對定位。

jQuery動態設定樣式（style、css）

<div style="background-color:#ffffff;padding-left:10px;">測試jQuery動態獲取padding-left</div>

1、用css()方法返回元素的樣式屬性

$("div").css("padding-left"));

2、用css()設定樣式

$("div").css("color","yellow");

3、設定多個樣式

$("div").css({"background-color":"yellow","font-size":"200%"});

var css = {

    background-color: '#EEE',

    height: '500px',

    margin: '10px',

    padding: '2px 5px'

};

$("div").css(css);

解決IE瀏覽器vue專案顯示空白問題：

npm install --save @babel/polyfill

輪播圖外掛：

輪播圖外掛

陰影製作生成連結

測試瀏覽器是否可用

https://caniuse.com/

解決ie瀏覽器中formData.get()不生效問題

npm install formdata-polyfill

// 解決  ie瀏覽器圖片上傳  失敗問題

import "formdata-polyfill";

數字字母自動換行不生效問題：

word-break: break-all;

// 登入ie核心瀏覽器  禁止訪問該系統推薦使用Google（谷歌瀏覽器）

          var userAgent = navigator.userAgent; //取得瀏覽器的userAgent字串

          if (userAgent.indexOf('Trident') !== -1 || userAgent.indexOf('MSIE') !== -1) { //表示使用的是IE的核心

            alert("該系統暫時不支援IE核心瀏覽器，推薦使用Google（谷歌瀏覽器）")

          } else{

            this.onNavgate()

          }

解決IE瀏覽器報forEach相關錯誤

nodelist-foreach-polyfill

解決後臺帶html格式在前臺顯示問題

white-space: pre-line;

實現前端瀏覽器下載檔案

location.href = `${urlConfig.xsgl_serverUrl}${urlConfig.getExportAllHtqdAll}?xsglHtId=${this.params.dqJdId}`

使用Git下載指定分支命令為：

git clone -b 分支名倉庫地址

VUE等陣列的深拷貝和淺拷貝

data: {

  tabs:[]

}

let tabs = this.data.tabs;   //淺拷貝

let tabs = JSON.parse(JSON.stringify(this.data.tabs)); //深拷貝

url拼接：

http://172.18.19.22:19076/flexoffice/web/dist/modules/login/sso_login.html?loginName="+userName+"&token="+data

可以將json字串轉換成json物件

JSON.parse(jsonstr);

將json物件轉換成json對符串

JSON.stringify(jsonobj);

圖片在固定容器內自適應

父級：position:relative;

img{

	max-height:340px;

	max-width:690px;

	position:absolute;

	left:0;

	right:0;

	top:0;

	bottom:0;

	margin:auto;

}

前端常用場景總結CSS/JS/外掛（實用篇更新中...）