常用的但是容易忘记的css样式..........持续更新，主要自用
生活随笔
收集整理的這篇文章主要介紹了
常用的但是容易忘记的css样式..........持续更新，主要自用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
字符太長超出部分用…隱藏
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;多行文字然后超出省略號隱藏
overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical;文本換行
display: inline-block; white-space: pre-wrap; word-wrap: break-word; width: 100%; height: auto;網站適應手機屏幕
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-sca" /><%--適應手機屏幕--%>高度緩慢減少
transition: height 0.5s linear 0s;文字超出換行
設置寬度
{width:100px;overflow:hidden;white-space:normal;word-break:break-all; }nvue
lines: 1; text-overflow: ellipsis;文字之間的間距
單詞text-indent抬頭距離 letter-spacing字與字間距flex布局方式的居中顯示
display:flex; justify-content: center || space-between; align-items: center;文字陰影
box-shadow:0px 0px 10px rgba(0,0,0,0.2);box-shadow: darkgrey 0px 0px 30px 5px;//邊框外陰影box-shadow: darkgrey 0px 0px 30px 5px inset;//邊框內陰影 box-shadow:-5px 15px 15px -15px rgba(0,0,0,0.3); //偏移陰影 下邊框陰影box-shadow: 0px 15px 10px -15px red;//邊框外陰影 //淡淡的box-shadow: 0rpx 4rpx 55rpx 7rpx rgba(0, 35, 167, 0.08);圖片居中 background-position:center center;講解比較詳細鏈接
https://www.webhek.com/post/css-box-shadow-property.html
文字背景漸變
background-image: linear-gradient(45deg, #d41a1a, #d9e60c);講解鏈接:
https://www.php.cn/css-tutorial-409954.html
占滿整個屏幕
width:100%; height:100vh;不新增，改變原來的值
/deep/ .u-list-image-wrap{border-radius: 0 !important; }圖片背景
background-image: url(/static/image/bg_.jpg); background-repeat: no-repeat; background-size: 100% 100%;nvue頁面兩張圖片層疊的解決方法
<view class="video-item"><image class="video-bg" :src="img" mode="aspectFill"></image><image class="video-bg2" src="../../static/logo.png" mode=""</image> </view> .video-item{width: 235rpx;height: 350rpx;margin: 5rpx 7rpx 5rpx 7rpx;align-items: center;justify-content: center;background-color: #FFFFFF;border-radius: 10rpx;position: relative;.video-bg{width: 235rpx;height: 350rpx;border-radius: 10rpx;position: absolute;}.video-bg2{width: 80rpx;height: 80rpx;border-radius: 10rpx;position: absolute;}}輸入框選中的時候邊框問題
.from_input:focus {outline:none;border: 1px solid #e4e0e1;border-left: 4px solid #c32139; }傳統img 圖片會隨父容器放大縮小，解決方法
.serviceItem{width: 15rem;height: 10rem;background-color: #c32139;background-repeat: no-repeat;background-size: cover; } <div class="serviceItem" style="display: block; background-image:url(img/a1.jpg);"></div>瀏覽器縮放，是否按照手機的寬度去展示
<meta name="viewport" content="width=device-width, initial-scale=1">HTML中使標簽鼠標放上去時顯示手形狀
css里面加入下面的代碼
cursor:pointer; //顯示箭頭 cursor:defaultCSS或者JS實現鼠標懸停顯示另一元素
想達到鼠標懸停到元素a上，顯示另一個元素b，可以通過css實現也可以通過js實現。
js:
寫兩個函數：mouseenter，mouseleave，例如：其中
$(“#a”).mouseenter(function() {
$(“#b”).show(“normal”);
});
$(“#a”).mouseleave(function() {
$(“#b”).hide(“normal”);
});
css：a元素和b元素需要滿足一定的關系，即b是a的直接子元素：如下html元素，div header_login_name_change 是a元素，ul header_login_menu是b元素。
在a元素上寫hover，后面是b元素
- 栗子
uniapp 的單選框圓圈太大了，縮小一些
transform:scale(0.7)隱藏 scroll-view滾動條
scroll-view ::-webkit-scrollbar {width: 0;height: 0;background-color: transparent;}圖片旋轉
@-webkit-keyframes rotation{from {-webkit-transform: rotate(0deg);}to {-webkit-transform: rotate(360deg);} } .xuanzhuan{webkit-transform: rotate(360deg);/*animation: rotation 10s linear infinite;//正常用這個*/ animation: run 10s linear infinite; }//圖片旋轉根據來啟動動畫效果 暫停和繼續播放
<view class="xuanzhuan" :class="playing?'none':'keepgo'"></view> ...data(){return{playing:false} }.keepgo{animation-play-state: paused; }圖片文字背景傾斜
.wrap {position: absolute;width: 100%;height: 100%;overflow: hidden;top: 0; }.silk-ribbon {display: inline-block;text-align: center;width: 115px;height: 60rpx;line-height: 60rpx;position: absolute;top: 15px;right: -17px;z-index: 2;overflow: hidden;transform: rotate(45deg);-ms-transform: rotate(45deg);-moz-transform: rotate(45deg);-webkit-transform: rotate(45deg);-o-transform: rotate(45deg);background: #FD9C07;color: #FFFFFF;font-size: 28rpx; }效果
絕對定位，根據手機或者會h5瀏覽器
disaply:fixed; bottom: calc(var(--window-bottom) + 10rpx);uniapp部分
v-if和v-for的一些優雅方法，比較實用
https://mp.weixin.qq.com/s/Khft5gIDxWMW5XeMMJNVLw
返回上一頁并傳遞參數
let pages = getCurrentPages(); //獲取所有頁面棧實例列表 let nowPage = pages[ pages.length - 1]; //當前頁頁面實例 let prevPage = pages[ pages.length - 2 ]; //上一頁頁面實例 prevPage.$vm.couponNumber = value; //修改上一頁面的 couponNumber 參數值為 value prevPage.$vm.couid = vid; //修改上一頁面的 couid 參數值為 vid uni.navigateBack({ //uni.navigateTo跳轉的返回，默認1為返回上一級delta: 1 });uni-app 退出應用
https://www.jianshu.com/p/9fa79c180a85uview頭像裁剪 小程序端問題
小程序uview頭像裁剪，存在一個問題，如果跳轉時不傳參 將不會初始化成功cut對象 x/y/width/height的值分別為undefined 和 NAN
應該把應該在判斷option.rectWidth時先判斷有沒有值 沒有就使用初始值 所以加一句下面的代碼即可初始化成功：
option.rectWidth = option.rectWidth || this.rectWidth
vuex部分
vuex頁面和組件獲取值的區別，其實算一種，只是兩種引用方式
頁面： import store from '@/store/index.js';//需要引入store store.state.username 組件： this.$store.state.usernamevue部分
vue 寫入緩存 取出緩存 銷毀緩存
sessionStorage.setItem('huancun','寫入值');//存入緩存 sessionStorage.getItem("huancun");//讀取緩存 sessionStorage.removeItem("huancun");//清除緩存elementUI 彈窗自適應
<style> .el-dialog {margin-top: 9vh !important;margin-bottom: 8vh !important;overflow: auto; } </style>嵌套table 子table獲取父table的列數據
props.row.status綁定：class和：style的寫法
<!-- 1、普通的類名綁定 --><div :class="className">class綁定</div><!-- 2、對象綁定 --><div :class="{classNameA：true, classNameB：false}">class對象綁定</div><div :class="{classNameA：isActive}">class對象綁定</div><!-- 從prop或是computed中獲取 --><div :class="classObj">class對象綁定</div><!-- 從methods中獲取方法 --><div :class="getClassObj()">class對象綁定</div><!-- 1、直接綁定數組 --><div :class="[classNameA, classNameB]">class數組綁定</div><!-- 2、數組綁定,也可使用三元運算符--><div :class="[classNameA, isActive ? classNameB : '']">class數組綁定</div><!-- 3、數組綁定,也可使用對象語法--><div :class="[classNameA, {classNameB：isActiv}]">class數組綁定</div><!-- style對象綁定 --><div :style="styleObj">style對象綁定</div><div :style="{color: 'red', fontSize: size + 'px'}">style對象綁定</div><!-- style數組綁定 --><div :style="[styleObjA, styleObjB]">style數組綁定</div>javaScript部分
設置緩存
Web 存儲 API 提供了 sessionStorage （會話存儲） 和 localStorage（本地存儲）兩個存儲對象來對網頁的數據進行添加、刪除、修改、查詢操作
localStorage 用于長久保存整個網站的數據，保存的數據沒有過期時間，直到手動去除。
sessionStorage 用于臨時保存同一窗口(或標簽頁)的數據，在關閉窗口或標簽頁之后將會刪除這些數據。
由于緩存的存儲值為字符串，需要將對象數組值轉換為字符串：JSON.stringify(存儲值)
window.localStorage.setItem("shopcatCookits",JSON.stringify(“存儲值”)); window.sessionStorage.setItem("shopcatCookits",JSON.stringify(“存儲值”));獲取緩存
window.localStorage.getItem('緩存值') window.sessionStorage.getItem('緩存值')擴展運算符…的用法
https://www.cnblogs.com/chorkiu/p/10444006.html
保留兩位小數
小數.toFixed(2)String 數組轉 Int 數組
['1','2','3'].map(Number)動態獲取ID
$(eval("col_"+index)).addClass("activity");漂亮的弧線
<div class="box"> <div class="home_top"> 這里是內容 </div> </div> .box { width: 250px; margin: auto; overflow: hidden; } .home_top { position: relative; width: 100%; height: 100px; text-align: center; line-height: 50px; } .home_top:after { width: 140%; height: 100px; position: absolute; left: -20%; top: 0; z-index: -1; content: ''; border-radius: 0 0 50% 50%; background: linear-gradient(#2CBAF9, #04A9F4); }uniapp的vconsole
控制臺
npm install vconsole
單頁面引入，或者main.js
import VConsole from ‘vconsole/dist/vconsole.min.js’ //import vconsole
let vConsole = new VConsole() // 初始化
unapp視頻獲取第一幀
<video :src="item.sp_url" :poster="" controls :show-center-play-btn="false" auto-pause-if-navigate></video> //圖片也可以用 <image class="zu_logo" :src="item.sp_url+ '?x-oss-process=video/snapshot,t_0,f_jpg'" mode=""></image>//只需要在地址后面加這一段代碼就可以了 '?x-oss-process=video/snapshot,t_0,f_jpg' //劃重點頁面切換回地圖頁面組件
思路：由于地圖自主的Icon和客戶的樣式，只能通過label文字偏移到icon上面，然后點擊完了之后，icon會覆蓋到label文字上。解決：點擊完把所有的marker隱藏，再次顯示又循環添加上，缺點，點擊回來后地圖不是之前滑動的位置了，需要重新滑動。
解決思路：
緩存一個地圖信息的key，通過時間判斷，如果不超過1小時，就使用緩存的信息（接口需要的參數）獲取marker信息，直接調用接口，不執行獲取定位然后才拿到經緯度的方法。
自定義組件使用this.$refs.del.open()沒有起效
解決方法：
this.$refs.del[0].open();拆分詳細地址（省市區，包括自治區和北京市類似的省級）
var reg = /.+?(省|市|自治區|自治州|縣|區)/g // 省市區的正則 console.log(詳細地址.match(reg)) // ['廣東省','廣州市','白云區']APP和H5頁面跳轉外部訪問頁面的方法
// #ifdef H5 window.open(href); // #endif // #ifdef APP-PLUS //第一種方法：跳轉外部打開 plus.runtime.openURL( href ); //第二種方法：APP內直接下載uni.downloadFile({url: href,success: res => {if (res.statusCode === 200) {uni.openDocument({filePath: res.tempFilePath,// 如果文件名包含中文，建議使用escape(res.tempFilePath)轉碼，防止ios和安卓客戶端導致的差異success: function(res) {console.log('打開文檔成功');},fail(err) {console.log(err);}});}}});// #endifvue的request GET傳參數
使用類似的request方法，屬性為GET的時候，傳參
vue的過濾獲取單條匹配數據
let title = res.data.filter(item => {return item.id == this.$route.params.sid;});if(this.$route.params.sid){this.type_title = title[0].cate_name;}vue數組切換某些屬性名
this.options = res.data.map(item=>{item.value = item.id;item.label = item.cate_name;});vue 里面js文件跳轉路由的方法
import router from '@/router/index.js'router.push('/') router.back() 應該是已經會統一配置了。 那么直接在main.js導出根組件 api.js中引入import _this from '../main.js'; 然后請求里配置_this.$router.push('/login') 注意不要在api.js中導入后直接console.log(_this)，這個時候組件還沒創建肯定是undefined。vue 路由跳轉到同一個頁面，參數不同，頁面刷新問題
watch :{'$route': function (to, from) {this.loadData();}},vue在頁面初次渲染時出現一閃而過的{{}}模板變量問題
問題：使用VUE時，頁面加載瞬間，會閃現模板語法，例如{undefined{user }}等
解決辦法：
1、可以通過在綁定模板變量的父元素添加VUE內置的指令v-cloak解決這個問題（推薦）
具體實現：
CSS中添加：
[v-cloak] {display: none; }2、可以在需要編譯的元素前后加上
關于詳解
http://www.zhangxinxu.com/wordpress/2014/07/hello-html5-template-tag/
3、通過切換需要編譯元素的display屬性，最開始設為none，請求完數據后設為block
4、VUE前置加載
5、使用組件，模板都寫在組件中，html 文件中僅插入組件標簽
6、用個“loading”的遮罩層，請求數據成功后再顯示
但是有的時候會不起作用，可能的原因有二：
一，v-cloak的display屬性被層級更高的給覆蓋掉了，所以要提高層級
[v-cloak] {display: none !important; }這里使用了簡單粗暴的方法加了個!important，有更好的方法歡迎留言。
二，樣式放在了@import引入的css文件中（傳統的開發方式）
v-cloak的這個樣式放在@import 引入的css文件中不起作用，可以放在link引入的css文件里或者內聯樣式中
基本的方法：
split(‘’):拆分
join(‘’);組合
const arr=[1,2,3,4,5,6,7,8]
//截取數組前三個元素
const sliceA=arr.slice(0,3)
//截取數組后三個元素 slice方法
const sliceArr=arr.slice(-3)
//截取數組后三個元素 splice方法
const spliceArr=arr.splice(-3,3)
var stmp = “rcinn.cn”;
使用一個參數
alert(stmp.slice(3));//從第4個字符開始,截取到最后個字符;返回"nn.cn"
alert(stmp.substring(3));//從第4個字符開始,截取到最后個字符;返回"nn.cn"
使用兩個參數
alert(stmp.slice(1,5))//從第2個字符開始，到第5個字符；返回"cinn"
alert(stmp.substring(1,5));//從第2個字符開始，到第5個字符；返回"cinn"
如果只用一個參數并且為0的話，那么返回整個參數
alert(stmp.slice(0));//返回整個字符串
alert(stmp.substring(0));//返回整個字符串
返回第一個字符
// 1.位位截取
alert(stmp.slice(0,1));//返回"r"
alert(stmp.substring(0,1));//返回"r"
常用方法
1、差分路徑和路徑參數
//根據路徑，拆分urlgetQuery(url){let index = url.indexOf('?')let obj = {}if (index === -1) return objlet queryStr = url.slice(index + 1)let arr = queryStr.split('&')for (let item of arr) {let keyValue = item.split('=')obj[keyValue[0]] = keyValue[1]}console.log("cans--------------",obj)return obj},2、some():檢測數組中是否有元素大于0:
this.BooleanScore = this.tableDatas.some(item => {return item.headerstars <= 0 })總結
以上是生活随笔為你收集整理的常用的但是容易忘记的css样式..........持续更新，主要自用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： NetBeans 打开/保存具有指定编码
- 下一篇： 2020IT从业者如何找到高薪工作