前段學習——雜記

display:block與display:table

　　● 最大區別：block不能使用垂直居中屬性，table能夠使用

margin摺疊常規：

• margin摺疊只發生在塊級元素上；
• 浮動元素的margin不與任何margin發生摺疊；
• 設置了屬性overflow且值不爲visible的塊級元素，將不與它的子元素髮生margin摺疊；
• 絕對定位元素的margin不與任何margin發生摺疊；
• 根元素的margin不與其它任何margin發生摺疊；

margin的值能夠爲負值，padding的值不能爲負值

• 若是提供所有四個參數值，將按上、右、下、左的順序做用於四邊。
• 若是隻提供一個，將用於所有的四邊。
• 若是提供兩個，第一個用於上、下，第二個用於左、右。
• 若是提供三個，第一個用於上，第二個用於左、右，第三個用於下。

background-attachment ：指定對象的背景圖像是隨對象內容滾動仍是固定的。

當標籤文字太多，要求顯示固定行數，多餘顯示 ···

css樣式：height: 設定適合的高度

　　　　  overflow: hidden;

　　　　  text-overflow: ellipsis; //文字以省略號隱藏

　　　　  display: -webkit-box;

　　　　  -webkit-line-clamp: 2; // 行數

　　　　  -webkit-box-orient: vertical;

整屏滾動插件  jquery.fullPage.js

　　引入css樣式   <link rel="stylesheet" href="css/jquery.fullPage.css">

　　引入jquery    <script src="js/jquery-1.8.3.min.js"></script>

　　引入js   　　<script src="js/jquery.fullPage.min.js"></script>

  　　下載github地址：https://github.com/alvarotrigo/fullPage.js

　　詳細教程：http://www.51xuediannao.com/js/jquery/jquery.fullPage.html

 

ios input模糊查詢可能出現的bug

 

ios系統下搜索框內輸入數字能夠實現模糊查詢，輸入中文沒法實現。

 

ios下不兼容keyup,keydown等事件：

 

使用原生js解決不兼容：

 

document.getElementById('testautofocus').addEventListener('input', function(e){  });

 

CSS隱藏文字以及以圖代字( text-indent: 100%;)

text-indent: 100%;
white-space: nowrap;
overflow: hidden;

 

css設置背景漸變色

線性漸變

background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */

background: linear-gradient(to right, red , blue); /* 標準的語法 */

徑向漸變

background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */

background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */

background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */

background: radial-gradient(red, green, blue); /* 標準的語法 */

 

背景圖片的使用（當滾動到固定位置可顯示）

background: url('images11/6.png') no-repeat fixed;

background-position:50%;

 

url中傳的參數含有中文的時候，轉碼方法

轉碼 uname=encodeURI(encodeURI(uname))

解碼 uname=decodeURI(uname,"utf8");

網站優化：

1.減小http請求次數

a.合併文件， 例如能夠簡單地把全部的CSS文件都放入一個樣式表中

　　b.使用圖片精靈，

　　c.

在使用npm run build進行webpack打包後，發佈的項目可能會遇到圖片等找不到的狀況:

這裏有一個萬能解決辦法： 1. 將config/index.js 裏面的 assetsPublicPath:'/' 改成assetsPublicPath:'./'

　　　　　　　　2. build/util.js裏面的

　　　　　　　　if (options.extract) {

　　　　　　　　　　return ExtractTextPlugin.extract({

　　　　　　　　　　　　use: loaders,

　　　　　　　　　　　　fallback: 'vue-style-loader',

　　　　　　　　　　　　publicPath:'/'

　　　　　　　　})

　　將其中的publicPath改成：publicPath：'../../'就能夠了。這樣打包出來的路徑就是正確的了。

　　第一個是爲了改變js中引入圖片的路徑，改成./ 就是指在當前路徑，這個.表明的路徑就是assetsRoot+assetsSubDictionary，

　　我這裏定位到dist/static/ ，加上圖片前綴img，就能夠找到了。

　　第二種是爲了改變vue文件中使用style樣式裏面例如background:url('xxx')，這樣的路徑，由於style最終變成css文件在dist/static/css裏面，

　　咱們的圖片放在dist/static/img中，那麼加上../../變成dist目錄下，默認的目錄前綴是static，img是圖片默認前綴，這樣就能夠定位到圖片。

 禁止鼠標右鍵的那些事
　　function click() {
　　　　if(event.button==2) {
　　　　　　alert('右鍵不能用了！')
　　　　}
　　}
　　document.onmousedown=click

可是這種屏蔽方法的破解方法也是衆所周知的。那就是連續單擊鼠標左鍵和右鍵便又能夠看到右鍵菜單了。
能夠利用了HTML裏的〈body〉來做修改，它只有如下短短的一行代碼：〈body oncontextmenu=self.event.returnValue=false〉右鍵屏蔽

〈body onselectstart="returnfalse"〉左鍵屏蔽