-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontent.json
1 lines (1 loc) · 61.7 KB
/
content.json
1
{"meta":{"title":"张雷的博客","subtitle":"笔记和简历","description":"学习笔记和一份简历","author":"zszq","url":"http://yoursite.com"},"pages":[],"posts":[{"title":"使用文字省略号的几种情况","slug":"css文字超出省略号","date":"2019-05-12T07:31:22.000Z","updated":"2019-05-12T02:12:32.223Z","comments":true,"path":"2019/05/12/css文字超出省略号/","link":"","permalink":"http://yoursite.com/2019/05/12/css文字超出省略号/","excerpt":"","text":"text-overflow: ellipsis; 解决方案说明：需要配合 white-space: nowrap; overflow: hidden; 使用。 单行使用：12345.text-deal{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} 示例： 1234567891011121314151617181920<!DOCTYPE html><html><head> <meta http-equiv=\"Content-type\" content=\"text/html;charset=utf-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\"> <title></title> <style> .text-deal{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style></head><body><div class=\"text-deal\"> 这是一个有效果的文字超出用省略号代替的例子，你看可以吗？</div></body></html> 弹性布局使用：示例： 12345678910111213141516171819202122232425262728293031<!DOCTYPE html><html><head> <meta http-equiv=\"Content-type\" content=\"text/html;charset=utf-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\"> <title></title> <style> .parent{ display: flex; } .children{ flex: 1; min-width: 0; /*这一句起作用*/ } .text-deal{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style></head><body><div class=\"parent\"> <div class=\"children\"> <div class=\"text-deal\"> 这是一个有效果的文字超出用省略号代替的例子，你看可以吗？ </div> </div></div></body></html> 不只是min-width属性可以，width属性也可以，并且值可以是任意。 多行使用：1234567.text-deal{ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* 显示多少行开始省略 */ -webkit-box-orient: vertical;} 示例： 1234567<h3>普通多行使用</h3><div class=\"parent\"> <div class=\"children\"> <div class=\"text-deal\"> A an a boy,and you.A an a boy,and you.A an a boy,and you.A an a boy,and you. </div> <div class=\"text-deal\">省略号不起作用省略号不起作用省略号不起作用省略号不起作用省略号不起作用省略号不起作用省略号不起作用省略号不起作用省略号不起作用省略号不起作用</div> </div></div> 特殊情况使用：12345678.text-deal{ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-all; /* 追加这一行代码 */} 示例： 1234567<h3>特殊情况多行使用</h3><div class=\"parent\"> <div class=\"children\"> <div class=\"text-deal\">111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div> <div class=\"text-deal\"> aasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsdaasdsd</div> </div></div> 部分资料来自网络，如有侵权，联系删除。转载请注明出处！","categories":[{"name":"前端","slug":"前端","permalink":"http://yoursite.com/categories/前端/"}],"tags":[{"name":"css","slug":"css","permalink":"http://yoursite.com/tags/css/"}],"keywords":[{"name":"前端","slug":"前端","permalink":"http://yoursite.com/categories/前端/"}]},{"title":"建设中，敬请期待！","slug":"后端","date":"2019-05-12T03:20:39.820Z","updated":"2019-05-12T03:23:41.353Z","comments":true,"path":"2019/05/12/后端/","link":"","permalink":"http://yoursite.com/2019/05/12/后端/","excerpt":"","text":"建设中，敬请期待！","categories":[{"name":"工具","slug":"工具","permalink":"http://yoursite.com/categories/工具/"}],"tags":[{"name":"tools","slug":"tools","permalink":"http://yoursite.com/tags/tools/"}],"keywords":[{"name":"工具","slug":"工具","permalink":"http://yoursite.com/categories/工具/"}]},{"title":"建设中，敬请期待！","slug":"工具","date":"2019-05-12T03:20:37.854Z","updated":"2019-05-12T03:25:46.743Z","comments":true,"path":"2019/05/12/工具/","link":"","permalink":"http://yoursite.com/2019/05/12/工具/","excerpt":"","text":"建设中，敬请期待！","categories":[{"name":"后端","slug":"后端","permalink":"http://yoursite.com/categories/后端/"}],"tags":[{"name":"nodejs","slug":"nodejs","permalink":"http://yoursite.com/tags/nodejs/"}],"keywords":[{"name":"后端","slug":"后端","permalink":"http://yoursite.com/categories/后端/"}]},{"title":"Js获取宽高度的归纳总结","slug":"Js获取宽高度的归纳总结","date":"2019-05-12T02:29:52.636Z","updated":"2019-05-12T02:38:02.235Z","comments":true,"path":"2019/05/12/Js获取宽高度的归纳总结/","link":"","permalink":"http://yoursite.com/2019/05/12/Js获取宽高度的归纳总结/","excerpt":"","text":"Js获取宽高度的归纳总结在js中的描述宽高的可以细分有22种。 window.innerWidth //除去菜单栏的窗口宽度 window.innerHeight//除去菜单栏的窗口高度 window.outerWidth//包括菜单栏的窗口宽度 window.outerHeight//包括菜单栏的窗口宽度 window.screen.height//电脑屏幕的高度 window.screen.width//电脑屏幕的宽度 window.screen.availHeight//电脑屏幕的可利用高度 window.screen.availWidth//电脑屏幕的可利用宽度 window.screenTop//浏览器距离屏幕的高度 window.screenLeft//浏览器距离屏幕的宽度 document.body.clientWidth//指元素的自身宽度（包括padding） document.body.clientHeight//指元素的自身的高度（包括padding） document.body.clientLeft//子级div内容位置到父级内容区域的宽度距离(即border值) document.body.clientTop//子级div内容位置到父级内容区域的高度距离(即border值) document.body.offsetWidth//指定元素的宽度（包括padding，border和内容） document.body.offsetHeight//指定元素的高度（包括padding，border和内容） document.body.offsetTop//距离父级元素的高度 document.body.offsetLeft//距离父级元素的宽度 document.body.scrollWidth//获取的是文档的宽度（当指定的宽度小于浏览器窗口的时候，为浏览器的宽度） document.body.scrollHeight//获取的是文档的高度（当指定的高度小于浏览器窗口的时候，为浏览器的高度） document.body.scrollTop//文档被滚动上去的时候（即滚动条往上滚动的距离） document.body.scrollLeft//文档被滚动右去的时候（即滚动条往右滚动的距离） 看起来有点怕怕，但我们细分可以很清晰的分清楚他们 width和height的都是值元素或窗口等的宽高，top和left表示的是到相对元素的距离 client,offset,scrollh和screen都分别有width，height，top和left 最后就是区别窗口和屏幕的宽高和元素的宽高 我们先从上往下去分析每一个的作用 innerHeight/WidthouterHeight/WidthScreen屏幕宽高首先我们先分清楚widnow和document的区别 window 整个窗口 document 除了顶头的菜单栏 document对象是window对象的一部分 offsetdocument.body.offsetWidthdocument.body.offsetHeight指定元素的border+padding+内容的宽度和高度 如果没有padding和borderoffsetWidth = clientWidth 兼容性问题IE6/7中（微软已经不提供支持）offsetLeft = (offsetParent的padding-left)+(当前元素的margin-left) IE8以上offsetLeft = (offsetParent的margin-left)+(当前元素的margin-left) 火狐中offsetLeft = (offsetParent的margin-left)+(当前元素的margin-left)+(offsetParent的padding-left) client指定元素的宽度和高度 即内容+padding 如果没有滚动条，即元素本身设定的宽度如果出现滚动条，滚动条会遮盖元素宽高，那么，该属性就是其本来宽高减去滚动条的宽度console.log( document.body.clientHeight);console.log(document.body.clientWidth); 读取元素border的宽度和高度（子级内容区域到父级内容区域的距离）document.body.clientLeftdocument.body.clientTop scroll谷歌浏览器下 当指定的宽高小于浏览器窗口的时候 scrollWidth为浏览器的宽度 scrollHeight为浏览器的高度 当给的宽高大于浏览器窗口，且内容小于给定的宽高时 scrollWidth给定的宽度+padding、margin和border scrollHeight给定的宽度+padding、margin和border 当给定的宽高大于浏览器窗口，且内容大于给定的宽高 scrollWidth内容宽度+所有的padding,margin和border scrollHeight内容高度+所有的padding,margin和border 属性是可读写的 指当元素其中的内容超出其宽高的时候，元素被卷起的高度和宽度 懒加载思路在还没有这个技术的出现时，页面的所有内容和图片，都会在访问时一次性的加载出来，对于浏览器和服务器都是一种负担，如果想百度图片这样的图库，用手机来看，多少流量都是浪费。这样的用户体验不仅差，还给服务器增加负担。所以懒加载技术才酝酿出来。 懒加载技术的要点是通过滚动事件触发判断 元素到顶部的距离小于 <= 可视区域 client（满足条件后触发加载后台内容） 底部加载技术scrollTop+可视区域 == 网页高度 scrollHeight（满足条件后触发加载后台内容） 部分资料来自网络，如有侵权，联系删除。转载请注明出处！","categories":[{"name":"前端","slug":"前端","permalink":"http://yoursite.com/categories/前端/"}],"tags":[{"name":"js","slug":"js","permalink":"http://yoursite.com/tags/js/"}],"keywords":[{"name":"前端","slug":"前端","permalink":"http://yoursite.com/categories/前端/"}]},{"title":"javascript数组去重的10种方法","slug":"javascript数组去重10种方法","date":"2019-05-12T02:29:52.601Z","updated":"2019-05-12T02:37:09.080Z","comments":true,"path":"2019/05/12/javascript数组去重10种方法/","link":"","permalink":"http://yoursite.com/2019/05/12/javascript数组去重10种方法/","excerpt":"","text":"javascript数组去重的10种方法方法1: 思路： 定义一个新数组， 并存放原数组的第一个元素， 然后将元素组一一和新数组的元素对比， 若不同则存放在新数组中。12345678910111213141516171819javascriptfunction unique(arr) { var res = [arr[0]]; for (var i = 1; i < arr.length; i++) { var repeat = false; for (var j = 0; j < res.length; j++) { if (arr[i] === res[j]) { repeat = true; break; } } if (!repeat) { res.push(arr[i]); } } return res;}console.log('------------方法一---------------');console.log(unique([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4])); 方法2: 思路： 先将原数组排序， 在与相邻的进行比较， 如果不同则存入新数组。12345678910111213javascriptfunction unique2(arr) { var arr2 = arr.sort(); var res = [arr2[0]]; for (var i = 1; i < arr2.length; i++) { if (arr2[i] !== res[res.length - 1]) { res.push(arr2[i]); } } return res;}console.log('------------方法二---------------');console.log(unique2([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4])); 方法3: 利用对象属性存在的特性， 如果没有该属性则存入新数组。1234567891011121314javascriptfunction unique3(arr) { var res = []; var obj = {}; for (var i = 0; i < arr.length; i++) { if (!obj[arr[i]]) { obj[arr[i]] = 1; res.push(arr[i]); } } return res;}console.log('------------方法三---------------');console.log(unique3([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4])); 方法4: 利用数组的indexOf下标属性来查询。1234567891011function unique4(arr) { var res = []; for (var i = 0; i < arr.length; i++) { if (res.indexOf(arr[i]) == -1) { res.push(arr[i]); } } return res;}console.log('------------方法四---------------');console.log(unique4([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4])); 方法5: 利用数组原型对象上的includes方法。123456789101112javascriptfunction unique5(arr) { var res = []; for (var i = 0; i < arr.length; i++) { if (!res.includes(arr[i])) { // 如果res新数组包含当前循环item res.push(arr[i]); } } return res;}console.log('------------方法五---------------');console.log(unique5([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4])); 方法6: 利用数组原型对象上的 filter 和 includes方法。12345678910javascriptfunction unique6(arr) { var res = []; res = arr.filter(function(item) { return res.includes(item) ? '' : res.push(item); }); return res;}console.log('------------方法六---------------');console.log(unique6([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4])); 方法7: 利用数组原型对象上的 forEach 和 includes方法。12345678910javascriptfunction unique7(arr) { var res = []; arr.forEach(function(item) { res.includes(item) ? '' : res.push(item); }); return res;}console.log('------------方法七---------------');console.log(unique7([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4])); 方法8: 利用数组原型对象上的 splice 方法。123456789101112131415161718javascriptfunction unique8(arr) { var i, j, len = arr.length; for (i = 0; i < len; i++) { for (j = i + 1; j < len; j++) { if (arr[i] == arr[j]) { arr.splice(j, 1); len--; j--; } } } return arr;}console.log('------------方法八---------------');console.log(unique8([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4])); 方法9: 利用数组原型对象上的 lastIndexOf 方法。12345678910javascriptfunction unique9(arr) { var res = []; for (var i = 0; i < arr.length; i++) { res.lastIndexOf(arr[i]) !== -1 ? '' : res.push(arr[i]); } return res;}console.log('------------方法九---------------');console.log(unique9([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4])); 方法10: 利用 ES6的set 方法。1234567javascriptfunction unique10(arr) { //Set数据结构，它类似于数组，其成员的值都是唯一的 return Array.from(new Set(arr)); // 利用Array.from将Set结构转换成数组}console.log('------------方法十---------------');console.log(unique10([1, 1, 2, 3, 5, 3, 1, 5, 6, 7, 4])); 部分资料来自网络，如有侵权，联系删除。转载请注明出处！","categories":[{"name":"前端","slug":"前端","permalink":"http://yoursite.com/categories/前端/"}],"tags":[{"name":"js","slug":"js","permalink":"http://yoursite.com/tags/js/"}],"keywords":[{"name":"前端","slug":"前端","permalink":"http://yoursite.com/categories/前端/"}]},{"title":"JavaScript原型","slug":"JavaScript原型","date":"2019-05-12T02:29:52.558Z","updated":"2019-05-12T04:02:44.181Z","comments":true,"path":"2019/05/12/JavaScript原型/","link":"","permalink":"http://yoursite.com/2019/05/12/JavaScript原型/","excerpt":"","text":"JavaScript原型构造函数 就是与 ‘new’ 运算符一起使用用来创建对象并初始化对象的‘函数’。实例化对象 就是构造函数创建对象由抽象到具体的过程，这个过程就叫实例化。1234567function Person(){} // Person构造函数var person1 = new Person(); // Person构造函数创建对象,也可叫做实例化var person2 = new Person(); // 原型属性Person.prototype.name = 'zhang';// 实例属性person1.name = 'z'; 原型 prototype和proto构造函数在创建的过程中，系统自动创建出来与构造函数相关联的一个空的对象，可以由 构造函数.prototype来访问到。每个函数都会有一个prototype属性，这个属性是一个指针，它默认指向一个Object空对象（称为原型对象），记住只有函数才有,并且通过bind()绑定的也没有。 这个对象Person.prototype的所有属性和方法，都会被构造函数的实例继承。构造函数的prototype属性（Person.prototype）就是原型对象，也就是实例person1和person2的原型。 主流浏览器上在每个对象上(null除外)都支持一个属性,那就是proto，这个属性会指向该对象的原型（自身构造函数的prototype即Person.prototype）所以 person1.proto === Person.prototype true constructor属性constructor属性是原型对象Person.prototype的属性，指向这个原型对象所对应的构造函数。Person.prototype.constructor === Person true person1没有.constructor属性，它是通过原型链在原型Person.prtototype上面找到的Person1.constructor === Person true 构造函数、原型对象、实例化对象三者的关系： ##### 原型链 就是依托proto和prototype连接起来的每一个对象都有自己的原型对象，原型对象本身也是对象，原型对象也有自己的原型对象，这样就形成了一个链式结构，叫做原型链。person1对象—–>Person.prototype——->Object.prototype———>null 当我们读取一个属性的时候，如果在实例属性上找到了，就读取它，不会管原型属性上是否还有相同的属性，这其实就是属性屏蔽。即当实例属性和原型属性拥有相同名字的时候，实例属性会屏蔽原型属性，记住只是屏蔽，不会修改，原型属性那个值还在。但是如果在实例属性（person1.name）上没有找到的话，就会在实例的原型属性Person.prototype上去找（因为Person.prototype的所有属性和方法，都会被构造函数的实例继承。），如果原型上还没有，就继续到原型的原型上去找。 假如在原型对象Person.prototype还是没有找到这个属性，还会继续找，原型对象也是对象，所以它也有proto属性，连接它的原型，原型对象Person.prototype的原型就是Object.prototype，所有原型对象都是Object构造函数生成的。正是因为所有的原型最终都会指向Object.prototype，所以对象的很多方法其实都是继承于此，比如toString()、valueOf()，前面用到的hasOwnProperty，甚至是.constructor、proto。 Object.prototype没有原型，为null，所以它就是前面所提到的尽头。 实例 和 原型对象 存在一个连接。不过，要明确的真正重要的一点就是，这个连接存在于实例与构造函数的原型对象之间，而不是存在于实例与构造函数之间。 检测一个属性存在于实例中，还是原型中，使用方法hasOwnProperty，属性只有存在于实例中才会返回true。person1.hasOwnProperty(‘name’) 实例中有name属性返回 true in操作符则会遍历所有属性，不管是实例上的，还是原型上的。in操作符有两种使用方式，单独使用和在for-in循环中使用for in 循环遍历 和 ‘name’ in person1 ture Object.keys() 此方法可以获取对象的所有可枚举的属性的名字 继承 js继承的几种方法(参考链接第二章更详细)：(1). for-in拷贝继承： 1234567891011121314function Person(){ //父类 this.name=\"水煮鱼\"; this.age=18; } function Son(){ //子类 } var p=new Person(); var s=new Son(); for(var k in p){ s[k]=p[k]; } console.log(s.name); //水煮鱼 console.log(s.age); //18 (2). 原型继承： 12345678910function Human(){ this.name=\"香辣虾\"; this.age=21; } function Man(){ } Man.prototype=new Human();var m=new Man(); console.log(m.name); //香辣虾 console.log(m.age); //21 (3). 经典继承： 1234567var animal={ name:\"阿咪\", type:\"猫科\" }; var a=Object.create(animal) //ES5属性 console.log(a.name); //阿咪 console.log(a.type); //猫科 Object.create()是让一个对象的原型继承另外一个对象；所以虽然a.name和a.age是可以访问成功的，但实际上a本身并没有这些属性，而是a的原型上有这些属性。 完整原型链： 难点：1.Function构造函数可以用Function.proto来访问Function.prototype. 这是因为Function构造函数的构造函数是他本身，作为实例化对象的角色来访问，可行。2.任何函数都是函数，他都继承Function的所有属性和方法，而Function是内置的构造函数，也是对象，都是继承Object的所有属性和方法。 推荐学习笔记：初学必看：Javascript 面向对象编程 http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html 深入理解javascript原型和闭包（完结） https://www.cnblogs.com/wangfupeng1988/p/3977924.html 部分资料来自网络，如有侵权，联系删除。转载请注明出处！","categories":[{"name":"前端","slug":"前端","permalink":"http://yoursite.com/categories/前端/"}],"tags":[{"name":"js","slug":"js","permalink":"http://yoursite.com/tags/js/"}],"keywords":[{"name":"前端","slug":"前端","permalink":"http://yoursite.com/categories/前端/"}]},{"title":"JavaScript的各种宽高详解","slug":"JavaScript的各种宽高详解","date":"2019-05-12T02:29:52.512Z","updated":"2019-05-12T02:34:17.967Z","comments":true,"path":"2019/05/12/JavaScript的各种宽高详解/","link":"","permalink":"http://yoursite.com/2019/05/12/JavaScript的各种宽高详解/","excerpt":"","text":"JavaScript的各种宽高详解在js中，存在着N多的关于高度和宽度的属性，比如：clientHeight、offsetHeight、scrollHeight、availHeight、scrollLeft、scrollTop、style.height、innerHeight、outerHeight、scree.height等等……这么多，傻傻分不清也正常啊。本文的目标： 理清js及jquery的各种width和height 对width和高度做一些实际的应用 window和document 首先我们来高清两个概念： window和document的区别是什么？ window.location和document.location是一样吗？ 第一个问题： Window对象表示浏览器中打开的窗口；window对象可以省略。比如alert()、window.alert()。 Document对象是Window对象的一部分。那么document.body 我们可以写成window.document.body；浏览器的HTML文档成为Document对象。 第二问题：window对象的location属性引用的是Location对象，表示该窗口中当前显示文档的URL。document的对象的location属性也是引用了Location对象。那意思是： 1window.location === document.location; //true 在通常情况下一样，frame也是一样 与window相关的宽高介绍 与window相关的宽高有一下几个： window.innerWidth，通过字面意思我们知道这是一个内部的宽度 window.innerHeight，内部的高度 window.outWidth，外部的宽度 window.outHeight，外部的高度 window.innerHeight和window.outHeight 我发现在Windows 10下Chrome和360安全浏览器不一样、、、、（后面代码测试部分） window.innerWidth和window.outWidth 挂靠在window下的宽高还有window.screen， window.screen包含有关用户屏幕的信息。它包括： window.screen.width window.screen.height window.screen.availHeight window.screen.availWidth window.screenTop window.screenLeft 图解 window相关宽高代码演示演示代码： 1234console.log("innerWidth=",innerWidth);console.log("innerHeight=",innerHeight);console.log("outerWidth=",outerWidth);console.log("outerHeight=",outerHeight); Chrome浏览器下效果代码： 1234console.info("screen.width=",screen.width);console.info("screen.height=",screen.height);console.info("screen.availWidth=",screen.availWidth);console.info("screen.availHeight=",screen.availHeight); 在Chrome浏览器下效果 window相关宽高浏览器兼容问题innerHeight和outerHeight是不支持IE9以下版本的，而screen系列则不存在兼容问题。 document下面client相关宽高介绍 docment下有三类属性： 与client相关的宽高 与offset相关的宽高 与scroll相关的宽高 与client相关的宽高与client相关的宽高又有如下几个属性： document.body.clientWidth document.body.clientHeight document.body.clientLeft document.body.clientTop clientWidth和clientHeight该属性指的是元素的可视部分宽度和高度，即padding+contenr。如果没有滚动条，即为元素设定的高度和宽度。如果出现滚动条，滚动条会遮盖元素的宽高，那么该属性就是其本来宽高减去滚动条的宽高。 我们来看如下代码： 123456789101112body{ border: 20px solid #000; margin: 10px; padding: 40px; background: #eee; height: 350px; width: 500px; overflow: scroll;}console.log(document.body.clientHeight); //430（padding*2+height）console.log(document.body.clientWidth); //580（padding*2+width） 我们再看下面的代码： 1234567#mydiv{ width: 200px; height: 200px; background: red; border: 1px solid #000; overflow: auto;} 在DIV中添加文字知道出现滚动轴，这时候 123var mydiv = document.getElementById("mydiv");console.log("mydiv.clientHeight=",mydiv.clientHeight); // 200console.log("mydiv.clientWidth=",mydiv.clientWidth); // 183（减去了滚动条的宽度） 而在Mac系统下，滚动条不占高度，这时候client的宽度还是200. 总结 假入无padding无滚动条，clientWidth=style.width 假如有padding无滚动轴，clientWidth=style.width+style.padding*2 假如有padding有滚动，且滚动是显示的，clientWidth=style.width+style.padding*2-滚动轴宽度 clientLeft和clientTop 这两个返回的是元素周围边框的厚度，如果不指定一个边框或者不定位该元素，他的值就是0. 我们还是以body为例： 123456789101112body{ border: 20px solid #000; margin: 10px; padding: 40px; background: #eee; height: 350px; width: 500px; overflow: scroll;}console.log(document.body.clientLeft); //20console.log(document.body.clientTop); //20 这一对属性是用来读取元素的body的宽度和高度的 clientTop=border-top的border-width clientLeft=border-left的border-width 与offset相关宽高介绍与offset相关的宽高又有如下几个属性： document.body.offsetWidth document.body.offsetHeight document.offsetLeft document.offsetTop offsetWidth与offsetHeight这一对属性指的是元素的border+padding+content的宽度和高度。 该属性和其内部的内容是否超出元素大小无关，只和本来设定的border以及width和height有关。我们还是以body为例： 1234567891011121314body{ border: 20px solid #000; margin: 10px; padding: 40px; background: #eee; height: 350px; width: 500px; overflow: scroll;}console.log("offsetWidth=",document.body.offsetWidth); //620（width+margin*2+padding*2+border*2）console.log("offsetHeight=",document.body.offsetHeight); //470（width+margin*2+padding*2+border*2） 总结 假如无padding无滚动条无border： offsetWidth=clientWidth=style.width 假如有padding无滚动条有border： offsetWidth=style.width+style.padding2+(border-width)2 offsetWidth=clientWidth+border宽度*2 假如有padding有滚动条，且滚动条是显示的，有border： offsetWidth=style.width+style.padding2+(border-width)2 offsetWidth=clientWidth+滚动条宽度+border宽度*2 offsetLeft和offsetTop这两个属性是基于offsetParent的，了解这两个属性我们必须先了解它，什么是offsetParent呢？ 如果当前元素的父级元素没有进行CSS定位（position为absolute或relative）,offsetParent为border. 假如当前元素的父级元素中有CSS定位，offsetParent取最近的那个父级元素。 在IE6/7中：offsetLeft=(offsetParent的padding-left)+(当前元素的margin-left) 在IE8/9/10及Chrome中：offsetLeft=(offsetParent的margin-left)+(offsetParent的border宽度)+(offsetParentd的padding-left)+(当前元素的margin-left) 在FireFox中：offsetLeft=(offsetParent的margin-left)+(当前元素的margin-left)+(offsetParent的padding-left) 、、、、看到这里是不是已经懵逼了？、、、还是举例子吧： CSS: 12345678910111213141516body{ border: 20px solid #000; margin: 10px; padding: 40px; background: #eee; height: 350px; width: 500px;}#mydiv{ width: 400px; height: 200px; padding: 20px; margin :10px; background: #f60; border: 20px solid #888;} 在IE8/910及Chrome中mydiv.offsetLeft = 80mydiv.offsetTop = 80 在火狐中mydiv.offsetLeft = 60mydiv.offsetTop = 60 在IE低版本IE6/7中是mydiv.offsetLeft = 50mydiv.offsetTop = 50 与scroll相关宽高介绍与scroll相关的宽高属性有如下几个： document.body.scrollWidth document.body.scrollHeight document.body.scrollLeft document.body.scrollTop scrollWidth和scrollHeightdocument.body的scrollWidth和scrollHeight与div的scrollWidth和scrollHeight是有区别的。 我们先来看看document.body的scrollWidth和scrollHeight： 给定宽高小于浏览器窗口 scrollWidth通常是浏览器窗口的宽度 scrollHeight通常是浏览器窗口的高度 给定宽高大于浏览器窗口，且内容小于给定宽高 scrollWidth给定的宽度+其所有padding、margin和border scrollHeight给定的高度+其所有的padding、margin和border 给定宽高大于浏览器窗口，且内容大于给定宽高 scrollWidth内容宽度+其所有的padding、margin和border scrollHeight内容高度+其所有的padding、margin和border 再来看看在某div中scrollWidth和scrollHeight： 在无滚动轴的时候scrollWidth==clientWidth=style.width+style.padding*2 在有滚动轴的时候scrollWidth==实际内容的宽度+padding2scrollHeight==实际内容的高度+padding2 scrollLeft和scrollTop这对属性是可读写（可被重新赋值） 的，指的是当元素其中的内容超出其宽高的时候，元素被卷起来的高和宽度。obj.style.width和obj.style.height对于一个dom元素，它的style属性返回的是一个对象，这个对象中的任意一个属性是可读写的，style.width等于CSS属性中的宽度style.height等于CSS属性中的高度。 Event对象的5种坐标 哪五种坐标？ clientX和clientY，相对于浏览器（可是区左上角0,0）的坐标 screenX和screenY，相对于设备屏幕左上角（0,0）的坐标 offsetX和offsetY，相对于事件源左上角（0,0）的坐标 pageX和pageY，相对于整个网页左上角（0,0）的坐标 X和Y，本来是IE属性，相对于用CSS动态定位的最内层包容元素 部分资料来自网络，如有侵权，联系删除。转载请注明出处！","categories":[{"name":"前端","slug":"前端","permalink":"http://yoursite.com/categories/前端/"}],"tags":[{"name":"js","slug":"js","permalink":"http://yoursite.com/tags/js/"}],"keywords":[{"name":"前端","slug":"前端","permalink":"http://yoursite.com/categories/前端/"}]},{"title":"JavaScript的各种宽高简介","slug":"JavaScript的各种宽高简介","date":"2019-05-12T02:29:52.470Z","updated":"2019-05-12T02:33:18.761Z","comments":true,"path":"2019/05/12/JavaScript的各种宽高简介/","link":"","permalink":"http://yoursite.com/2019/05/12/JavaScript的各种宽高简介/","excerpt":"","text":"JavaScript的各种宽高简介一、DOM对象1、只读属性（1）clientWidth、clientHeight： padding + content ( - scroll宽度 ) （2）offsetWidth、offsetHeight：padding + content + border （3）clientTop、clientLeft：border的top、border的left （4）offsetTop、offsetLeft：相对于其offsetParent上边距离、左边距离 概念：offsetParent是指一直往上找，第一个具有定位的父级元素 （5）scrollWidth、scrollHeight：padding + content + 不在可视区域的部分 2、可读可写属性（1）scrollTop、scrollLeft：已经被卷上去或移到左边 看不到的部分，返回的是数字 （2）dom.style.xxx：注意：该值只能得到设置的内联样式的值，返回的是字符串，实际计算后展示的值需要通过window.getComputedStyle($0)（非IE）或 dom.currentstyle 获得 12345678910111213页可见区域宽： document.body.clientWidth;网页可见区域高： document.body.clientHeight;网页可见区域宽： document.body.offsetWidth (包括边线的宽);网页可见区域高： document.body.offsetHeight (包括边线的宽);网页正文全文宽： document.body.scrollWidth;网页正文全文高： document.body.scrollHeight;网页被卷去的高： document.body.scrollTop;网页被卷去的左： document.body.scrollLeft;网页正文部分上： window.screenTop;网页正文部分左： window.screenLeft;屏幕分辨率的高： window.screen.height;屏幕分辨率的宽： window.screen.width;屏幕可用工作区高度： window.screen.availHeight; 二、Event事件以下属性的获取：event.xx （1）clientX、clientY：事件发生时，鼠标距离浏览器左上角(0,0)的距离 （2）screenX、screenY：事件发生时，鼠标距离屏幕左上角的距离 （3）offsetX、offsetY：事件发生时，鼠标距离该dom左上角的距离 （4）pageX、pageY：事件发生时，鼠标距离页面左上角的距离。若未出现滚动条，则与clientX、clientY相等 参考：https://segmentfault.com/a/1190000002545307 部分资料来自网络，如有侵权，联系删除。转载请注明出处！","categories":[{"name":"前端","slug":"前端","permalink":"http://yoursite.com/categories/前端/"}],"tags":[{"name":"js","slug":"js","permalink":"http://yoursite.com/tags/js/"}],"keywords":[{"name":"前端","slug":"前端","permalink":"http://yoursite.com/categories/前端/"}]},{"title":"form表单提交方式","slug":"form表单提交方式","date":"2019-05-12T02:29:52.441Z","updated":"2019-05-12T02:32:29.906Z","comments":true,"path":"2019/05/12/form表单提交方式/","link":"","permalink":"http://yoursite.com/2019/05/12/form表单提交方式/","excerpt":"","text":"form表单提交方式总结一下：一、利用submit按钮实现提交，当点击submit按钮时，触发onclick事件，由JavaScript里函数判断输入内容是否为空，如果为空，返回false, 不提交，如果不为空，提交到由action指定的地址。1234567891011121314151617181920<script type=\"text/javascript\"> function check(form) { if(form.userId.value=='') { alert(\"请输入用户帐号!\"); form.userId.focus(); return false; } if(form.password.value==''){ alert(\"请输入登录密码!\"); form.password.focus(); return false; } return true; }</script><form action=\"login.do?act=login\" method=\"post\"> 用户帐号<input type=\"text\" name=\"userId\" size=\"18\" value=\"\" ><br> 登录密码<input type=\"password\" name=\"password\" size=\"19\" value=\"\"/> <input type=\"submit\" name=\"submit1\" value=\"登陆\" onclick=\"return check(this.form)\"></form> 二、利用button按钮实现提交，当点击button按钮时，触发onclick事件，由JavaScript里函数判断输入内容是否为空，如果为空，返回false, 不提交，如果不为空，提交到由action指定的地址，由于button按钮不具备自动提交的功能，所以由JavaScript实现提交。1234567891011121314151617181920<script type=\"text/javascript\"> function check(form) { if(form.userId.value=='') { alert(\"请输入用户帐号!\"); form.userId.focus(); return false; } if(form.password.value==''){ alert(\"请输入登录密码!\"); form.password.focus(); return false; } document.myform.submit(); } </script><form action=\"login.do?act=login\" name=\"myform\" method=\"post\"> 用户帐号<input type=\"text\" name=\"userId\" size=\"18\" value=\"\" ><br> 登录密码<input type=\"password\" name=\"password\" size=\"19\" value=\"\"/> <input type=\"button\" name=\"submit1\" value=\"登陆\" onclick=\"check(this.form)\"></form> 三、利用submit按钮实现提交，当点击submit按钮时，先触发onsubmit事件，由JavaScript里函数判断输入内容是否为空，如果为空，返回false, 不提交，如果不为空，提交到由action指定的地址。1234567891011121314151617181920<script type=\"text/javascript\"> function check(form) { if(form.userId.value=='') { alert(\"请输入用户帐号!\"); form.userId.focus(); return false; } if(form.password.value==''){ alert(\"请输入登录密码!\"); form.password.focus(); return false; } return true; }</script><form action=\"login.do?act=login\" method=\"post\" onsubmit=\"return check(this)\"> 用户帐号<input type=\"text\" name=\"userId\" size=\"18\" value=\"\" ><br> 登录密码<input type=\"password\" name=\"password\" size=\"19\" value=\"\"/> <input type=\"submit\" name=\"submit1\" value=\"登陆\"></form> 部分资料来自网络，如有侵权，联系删除。转载请注明出处！","categories":[{"name":"前端","slug":"前端","permalink":"http://yoursite.com/categories/前端/"}],"tags":[{"name":"js","slug":"js","permalink":"http://yoursite.com/tags/js/"}],"keywords":[{"name":"前端","slug":"前端","permalink":"http://yoursite.com/categories/前端/"}]},{"title":"js中将json字符串转换成json对象的三种方式","slug":"js中将字符串转换成json的三种方式","date":"2019-05-12T02:29:52.385Z","updated":"2019-05-12T02:32:24.802Z","comments":true,"path":"2019/05/12/js中将字符串转换成json的三种方式/","link":"","permalink":"http://yoursite.com/2019/05/12/js中将字符串转换成json的三种方式/","excerpt":"","text":"js中将json字符串转换成json对象的三种方式1，eval方式解析，恐怕这是最早的解析方式了。如下：1234function strToJson(str){ var json = eval('(' + str + ')'); return json; } 记得别忘了str两旁的小括号。 2，new Function形式，比较怪异哦。如下1234unction strToJson(str){ var json = (new Function(\"return\" + str))(); return json; } 3，使用全局的JSON对象，如下：123function strToJson(str){ return JSON.parse(str); } 目前 IE8(S)/Firefox3.5+/Chrome4/Safari4/Opera10 已实现了该方法，以下是部分资料：http://blogs.msdn.com/ie/archive/2008/09/10/native-json-in-ie8.aspx https://developer.mozilla.org/en/Using_JSON_in_Firefox使用JSON.parse需严格遵守JSON规范，如属性都需用引号引起来，如下 12ar str = '{name:\"jack\"}'; var obj = JSON.parse(str); // --> parse error 若果name没有用引号引起来，使用JSON.parse所有浏览器中均抛异常，解析失败。而前两种方式则没问题。另见：Chrome中JSON.parse的特殊实现 部分资料来自网络，如有侵权，联系删除。转载请注明出处！","categories":[{"name":"前端","slug":"前端","permalink":"http://yoursite.com/categories/前端/"}],"tags":[{"name":"js","slug":"js","permalink":"http://yoursite.com/tags/js/"}],"keywords":[{"name":"前端","slug":"前端","permalink":"http://yoursite.com/categories/前端/"}]},{"title":"CSS强制英文、中文换行与不换行","slug":"CSS强制英文、中文换行与不换行","date":"2019-05-12T01:19:16.802Z","updated":"2019-05-12T02:11:49.653Z","comments":true,"path":"2019/05/12/CSS强制英文、中文换行与不换行/","link":"","permalink":"http://yoursite.com/2019/05/12/CSS强制英文、中文换行与不换行/","excerpt":"","text":"CSS强制英文、中文换行与不换行示例说明123456789.p1{ word-break:break-all; width:150px;} /*只对英文起作用，以字母作为换行依据*/.p2{ word-wrap:break-word; width:150px;} /*--只对英文起作用，以单词作为换行依据*/.p3{white-space:pre-wrap; width:150px;} /*只对中文起作用，强制换行*/.p4{white-space:nowrap; width:10px;} /*强制不换行，都起作用*/.p5{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100px;} /*不换行，超出部分隐藏且以省略号形式出现*/ 1.word-break:break-all; 只对英文起作用，以字母作为换行依据 2.word-wrap:break-word; 只对英文起作用，以单词作为换行依据 3.{white-space:pre-wrap; 只对中文起作用，强制换行 4.{white-space:nowrap; 强制不换行，都起作用 5.{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 不换行，超出部分隐藏且以省略号形式出现 注意，一定要指定容器的宽度，不然的话是没有用的。 注意word-break 是IE5+专有属性 语法：word-break : normal | break-all | keep-all 参数：normal : 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本keep-all : 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本 说明：设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。对于中文，应该使用break-all 。 部分资料来自网络，如有侵权，联系删除。转载请注明出处！","categories":[{"name":"前端","slug":"前端","permalink":"http://yoursite.com/categories/前端/"}],"tags":[{"name":"css","slug":"css","permalink":"http://yoursite.com/tags/css/"}],"keywords":[{"name":"前端","slug":"前端","permalink":"http://yoursite.com/categories/前端/"}]},{"title":"一些常用的移动端的meta属性设置","slug":"一些常用的移动端的meta属性设置","date":"2019-05-12T01:19:16.795Z","updated":"2019-05-12T02:13:44.771Z","comments":true,"path":"2019/05/12/一些常用的移动端的meta属性设置/","link":"","permalink":"http://yoursite.com/2019/05/12/一些常用的移动端的meta属性设置/","excerpt":"","text":"一些常用的移动端的meta属性设置123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113<h2>一些常用的移动端的meta属性设置</h2><!-- 使用 HTML5 doctype，不区分大小写 --><!DOCTYPE html><!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa --><html lang=\"zh-cmn-Hans\"><head> <!-- 声明文档使用的字符编码 --><meta charset='utf-8'><!-- 优先使用 IE 最新版本和 Chrome --><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"/><!-- 页面描述 --><meta name=\"description\" content=\"不超过150个字符\"/><!-- 页面关键词 --><meta name=\"keywords\" content=\"\"/><!-- 网页作者 --><meta name=\"author\" content=\"name, [email protected]\"/><!-- 搜索引擎抓取 --><meta name=\"robots\" content=\"index,follow\"/><!-- 添加 favicon icon --><link rel=\"shortcut icon\" type=\"image/ico\" href=\"/favicon.ico\"/><!-- 为移动设备添加 viewport --><meta name=\"viewport\" content=\"initial-scale=1, maximum-scale=3, minimum-scale=1,user-scalable=no\"><!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz --><!-- 忽略页面中的数字识别为电话，忽略email识别 --><meta name=\"format-detection\" content=\"telphone=no, email=no\"/><!-- 启用360浏览器的极速模式(webkit) --><meta name=\"renderer\" content=\"webkit\"><!-- 避免IE使用兼容模式 --><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"><!-- 不让百度转码 --><meta http-equiv=\"Cache-Control\" content=\"no-siteapp\" /><!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --><meta name=\"HandheldFriendly\" content=\"true\"><!-- 微软的老式浏览器 --><meta name=\"MobileOptimized\" content=\"320\"><!-- uc强制竖屏 --><meta name=\"screen-orientation\" content=\"portrait\"><!-- QQ强制竖屏 --><meta name=\"x5-orientation\" content=\"portrait\"><!-- UC强制全屏 --><meta name=\"full-screen\" content=\"yes\"><!-- QQ强制全屏 --><meta name=\"x5-fullscreen\" content=\"true\"><!-- UC应用模式 --><meta name=\"browsermode\" content=\"application\"><!-- QQ应用模式 --><meta name=\"x5-page-mode\" content=\"app\"><!-- windows phone 点击无高光 --><meta name=\"msapplication-tap-highlight\" content=\"no\"><!-- iOS 设备 begin --> <!-- 添加到主屏后的标题（iOS 6 新增） --><meta name=\"apple-mobile-web-app-title\" content=\"标题\"><!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 --><meta name=\"apple-mobile-web-app-capable\" content=\"yes\"/><!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） --><meta name=\"apple-itunes-app\" content=\"app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL\"><!-- 设置苹果工具栏颜色 --><meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black\"/> <!-- iOS 图标 begin --><!-- iPhone 和 iTouch，默认 57x57 像素，必须有 --><link rel=\"apple-touch-icon-precomposed\" href=\"/apple-touch-icon-57x57-precomposed.png\"/><!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 --><link rel=\"apple-touch-icon-precomposed\" sizes=\"114x114\" href=\"/apple-touch-icon-114x114-precomposed.png\"/><!-- Retina iPad，144x144 像素，可以没有，但推荐有 --><link rel=\"apple-touch-icon-precomposed\" sizes=\"144x144\" href=\"/apple-touch-icon-144x144-precomposed.png\"/><!-- iOS 图标 end --><!-- iOS 启动画面 begin --><!-- iPad 竖屏 768 x 1004（标准分辨率） --><link rel=\"apple-touch-startup-image\" sizes=\"768x1004\" href=\"/splash-screen-768x1004.png\"/><!-- iPad 竖屏 1536x2008（Retina） --><link rel=\"apple-touch-startup-image\" sizes=\"1536x2008\" href=\"/splash-screen-1536x2008.png\"/><!-- iPad 横屏 1024x748（标准分辨率） --><link rel=\"apple-touch-startup-image\" sizes=\"1024x748\" href=\"/Default-Portrait-1024x748.png\"/><!-- iPad 横屏 2048x1496（Retina） --><link rel=\"apple-touch-startup-image\" sizes=\"2048x1496\" href=\"/splash-screen-2048x1496.png\"/><!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) --><link rel=\"apple-touch-startup-image\" href=\"/splash-screen-320x480.png\"/><!-- iPhone/iPod Touch 竖屏 640x960 (Retina) --><link rel=\"apple-touch-startup-image\" sizes=\"640x960\" href=\"/splash-screen-640x960.png\"/><!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) --><link rel=\"apple-touch-startup-image\" sizes=\"640x1136\" href=\"/splash-screen-640x1136.png\"/><!-- iOS 启动画面 end --><!-- iOS 设备 end --><!-- Windows 8 磁贴颜色 --><meta name=\"msapplication-TileColor\" content=\"#000\"/><!-- Windows 8 磁贴图标 --><meta name=\"msapplication-TileImage\" content=\"icon.png\"/><!-- 添加 RSS 订阅 --><link rel=\"alternate\" type=\"application/rss+xml\" title=\"RSS\" href=\"/rss.xml\"/><!-- sns 社交标签 begin --><!-- 参考微博API --><meta property=\"og:type\" content=\"类型\" /><meta property=\"og:url\" content=\"URL地址\" /><meta property=\"og:title\" content=\"标题\" /><meta property=\"og:image\" content=\"图片\" /><meta property=\"og:description\" content=\"描述\" /><!-- sns 社交标签 end --><title>标题</title></head> 转自网络，如有侵权，联系删除。","categories":[{"name":"前端","slug":"前端","permalink":"http://yoursite.com/categories/前端/"}],"tags":[{"name":"css","slug":"css","permalink":"http://yoursite.com/tags/css/"}],"keywords":[{"name":"前端","slug":"前端","permalink":"http://yoursite.com/categories/前端/"}]},{"title":"Retina屏的移动设备如何实现真正1px的线？","slug":"Retina屏的移动设备如何实现真正1px的线？","date":"2019-05-12T01:19:16.786Z","updated":"2019-05-12T02:19:28.457Z","comments":true,"path":"2019/05/12/Retina屏的移动设备如何实现真正1px的线？/","link":"","permalink":"http://yoursite.com/2019/05/12/Retina屏的移动设备如何实现真正1px的线？/","excerpt":"","text":"Retina屏的移动设备如何实现真正1px的线？ 前些日子总被人问起 iOS Retina 屏，设置 1px 边框，实际显示 2px，如何解决？原来一直没在意，源于自己根本不是像素眼……今天仔细瞅了瞅原生实现的边框和CSS设置的边框，确实差距不小…… 上图是原生实现，下图是 CSS 边框，手机上对比更加明显 然后，如何解决呢？搜遍整个谷歌，发现好多人早已开始研究解决方案了。到底有哪些方案，到底好不好用呢？试过才知道，把我试过的结论记录一下。 有说用 0.5px 解决的在2014年的 WWDC，“设计响应的Web体验” 一讲中，Ted O’Connor 讲到关于“retinahairlines”（retina 极细的线）：在retina屏上仅仅显示1物理像素的边框，开发者应该如何处理呢。 他们曾介绍到 iOS 8 和 OS X Yosemite 即将支持 0.5px 的边框： 额的神呐！so easy! 果真如此吗？ 这样还不够（WWDC幻灯片通常是“唬人”的），但是相差不多。 问题是 retina 屏的浏览器可能不认识0.5px的边框，将会把它解释成0px，没有边框。包括 iOS 7 和 之前版本，OS X Mavericks 及以前版本，还有 Android 设备。 解决方案 解决方案是通过 JavaScript 检测浏览器能否处理0.5px的边框，如果可以，给<html>元素添加个class。 1234567891011if (window.devicePixelRatio && devicePixelRatio >= 2) { var testElem = document.createElement('div'); testElem.style.border = '.5px solid transparent'; document.body.appendChild(testElem); if (testElem.offsetHeight == 1) { document.querySelector('html').classList.add('hairlines'); } document.body.removeChild(testElem);}// 脚本应该放在<body>内， 如果在<head>里面运行，需要包装 $(document).ready(function() { }) 然后，极细的边框样式就容易了： 1234567div { border: 1px solid #bbb;} .hairlines div { border-width: 0.5px;} 看起来是个解决方案，可是我要兼容安卓设备，和 iOS 8 以下设备怎么办？这个思路行不通。 还有用图片实现 border 的6x6 的 一张图片 可以用 gif，png，或 base64 图片 1234.border{ border-width: 1px; border-image: url(border.gif) 2 repeat;} 缺点是改边框颜色时要改图片，不是很方便。 还有用多背景渐变实现的设置1px的渐变背景，50%有颜色，50%透明 1234567.border { background: linear-gradient(180deg, black, black 50%, transparent 50%) top left / 100% 1px no-repeat, linear-gradient(90deg, black, black 50%, transparent 50%) top right / 1px 100% no-repeat, linear-gradient(0, black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat, linear-gradient(-90deg, black, black 50%, transparent 50%) bottom left / 1px 100% no-repeat;} 多写了不少代码，圆角也没法实现，也是不太好用。 还有用 box-shadow 模拟边框的1234.hairlines li { border: none; box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);} 试了下不太好用，颜色不好处理，有阴影出现。 淘宝M站是通过 viewport + rem 实现的在devicePixelRatio = 2 时，输出viewport 1<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no"> 在devicePixelRatio = 3 时，输出viewport 1<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no"> 同时通过设置对应viewport的rem基准值，这种方式就可以像以前一样轻松愉快的写1px了。 个人感觉为了做个 border 多准备两套样式，还得动态改变 viewport ，有点费劲。 最后找到一个还算好用的方法：伪类 + transform原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位 单条 border 12345678910111213141516.hairlines li{ position: relative; border:none;}.hairlines li:after{ content: ''; position: absolute; left: 0; background: #000; width: 100%; height: 1px; -webkit-transform: scaleY(0.5); transform: scaleY(0.5); -webkit-transform-origin: 0 0; transform-origin: 0 0;} 四条 border 1234567891011121314151617181920.hairlines li{ position: relative; margin-bottom: 20px; border:none;}.hairlines li:after{ content: ''; position: absolute; top: 0; left: 0; border: 1px solid #000; -webkit-box-sizing: border-box; box-sizing: border-box; width: 200%; height: 200%; -webkit-transform: scale(0.5); transform: scale(0.5); -webkit-transform-origin: left top; transform-origin: left top;} 样式使用的时候，也要结合 JS 代码，判断是否 Retina 屏 123if(window.devicePixelRatio && devicePixelRatio >= 2){ document.querySelector('ul').className = 'hairlines';} 可以支持圆角，唯一的一点小缺陷是 <td> 用不了。 转自网络，如有侵权，联系删除。","categories":[{"name":"前端","slug":"前端","permalink":"http://yoursite.com/categories/前端/"}],"tags":[{"name":"css","slug":"css","permalink":"http://yoursite.com/tags/css/"}],"keywords":[{"name":"前端","slug":"前端","permalink":"http://yoursite.com/categories/前端/"}]},{"title":"Flex 布局语法教程","slug":"Flex 布局语法教程","date":"2019-05-12T01:19:16.740Z","updated":"2019-05-12T01:56:19.524Z","comments":true,"path":"2019/05/12/Flex 布局语法教程/","link":"","permalink":"http://yoursite.com/2019/05/12/Flex 布局语法教程/","excerpt":"","text":"Flex 布局语法教程网页布局（layout）是CSS的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 Flex布局将成为未来布局的首选方案。本文介绍Flex布局的语法。 以下内容主要参考了下面两篇文章：A Complete Guide to Flexbox 和 A Visual Guide to CSS3 Flexbox Properties。 一、Flex布局是什么？Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{ display: flex; } 行内元素也可以使用Flex布局。 .box{ display: inline-flex; } Webkit内核的浏览器，必须加上-webkit前缀。 .box{ display: -webkit-flex; /* Safari */ display: flex; } 注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 二、基本概念采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。 三、容器的属性以下6个属性设置在容器上。 flex-direction flex-wrap flex-flow justify-content align-items align-content 3.1 flex-direction属性flex-direction属性决定主轴的方向（即项目的排列方向）。 .box { flex-direction: row | row-reverse | column | column-reverse; } 它可能有4个值。 row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。 3.2 flex-wrap属性默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。 .box{ flex-wrap: nowrap | wrap | wrap-reverse; } 它可能取三个值。 （1）nowrap（默认）：不换行。 （2）wrap：换行，第一行在上方。 （3）wrap-reverse：换行，第一行在下方。 3.3 flex-flowflex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。 .box { flex-flow: <flex-direction> <flex-wrap>; } 3.4 justify-content属性justify-content属性定义了项目在主轴上的对齐方式。 .box { justify-content: flex-start | flex-end | center | space-between | space-around; } 它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。 flex-start（默认值）：左对齐 flex-end：右对齐 center： 居中 space-between：两端对齐，项目之间的间隔都相等。 space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 3.5 align-items属性align-items属性定义项目在交叉轴上如何对齐。 .box { align-items: flex-start | flex-end | center | baseline | stretch; } 它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。 flex-start：交叉轴的起点对齐。 flex-end：交叉轴的终点对齐。 center：交叉轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 3.6 align-content属性align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 .box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; } 该属性可能取6个值。 flex-start：与交叉轴的起点对齐。 flex-end：与交叉轴的终点对齐。 center：与交叉轴的中点对齐。 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 stretch（默认值）：轴线占满整个交叉轴。 四、项目的属性以下6个属性设置在项目上。 order flex-grow flex-shrink flex-basis flex align-self 4.1 order属性order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 .item { order: ; } 4.2 flex-grow属性flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 .item { flex-grow: ; /* default 0 */ } 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。 4.3 flex-shrink属性flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 .item { flex-shrink: ; /* default 1 */ } 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。 负值对该属性无效。 4.4 flex-basis属性flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。 .item { flex-basis: | auto; /* default auto */ } 它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。 4.5 flex属性flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 .item { flex: none | [ <’flex-grow’> <’flex-shrink’>? || <’flex-basis’> ] } 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。 建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。 4.6 align-self属性align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } 该属性可能取6个值，除了auto，其他都与align-items属性完全一致。 转载自菜鸟教学 - 如有侵权，联系删除。","categories":[{"name":"前端","slug":"前端","permalink":"http://yoursite.com/categories/前端/"}],"tags":[{"name":"css","slug":"css","permalink":"http://yoursite.com/tags/css/"}],"keywords":[{"name":"前端","slug":"前端","permalink":"http://yoursite.com/categories/前端/"}]},{"title":"我的简历","slug":"resume","date":"2019-01-25T06:53:22.000Z","updated":"2019-05-12T02:09:26.048Z","comments":true,"path":"2019/01/25/resume/","link":"","permalink":"http://yoursite.com/2019/01/25/resume/","excerpt":"","text":"我的简历拟写中。。。 近期上传","categories":[{"name":"简历","slug":"简历","permalink":"http://yoursite.com/categories/简历/"}],"tags":[{"name":"简历","slug":"简历","permalink":"http://yoursite.com/tags/简历/"}],"keywords":[{"name":"简历","slug":"简历","permalink":"http://yoursite.com/categories/简历/"}]},{"title":"Hello World","slug":"hello-world","date":"2019-01-24T11:36:45.209Z","updated":"2019-05-12T02:10:02.468Z","comments":true,"path":"2019/01/24/hello-world/","link":"","permalink":"http://yoursite.com/2019/01/24/hello-world/","excerpt":"","text":"Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. Quick StartCreate a new post1$ hexo new \"My New Post\" More info: Writing Run server1$ hexo server More info: Server Generate static files1$ hexo generate More info: Generating Deploy to remote sites1$ hexo deploy More info: Deployment","categories":[],"tags":[{"name":"doc","slug":"doc","permalink":"http://yoursite.com/tags/doc/"}],"keywords":[]}]}