前段学习——杂记

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"〉左键屏蔽