胡椒粉hjf - 博客园

2017年8月17日

摘要：法大师傅撒旦阅读全文

posted @ 2017-08-17 23:12 胡椒粉hjf 阅读(139) 评论(0) 推荐(0) 编辑

摘要：图片懒加载（当然不仅限于图片，还可以有视频，flash）也是一种优化前端性能的方式。使用懒加载可以想要看图片时才加载图片，而不是一次性加载所有的图片，从而在一定程度从减少服务端的请求什么是懒加载懒加载怎么个懒法，就是你不想看就不给你看，我也懒得加载出来，懒得去请求。通俗的说就是你不要就不给你，怎阅读全文

posted @ 2017-08-17 18:09 胡椒粉hjf 阅读(2122) 评论(0) 推荐(0) 编辑

前端性能优化成神之路-异步加载

摘要：浏览器渲染阻塞与优化什么是阻塞：在页面中我们通常会引用外部文件，而浏览器在解析HTML页面是从上到下依次解析、渲染，如果<head>中引用了一个a.js文件，而这个文件很大或者有问题，需要2秒加载，那么浏览器会停止渲染页面（此时是白屏显示，就是页面啥都没有），2秒后加载完成才会继续渲染，这个就是阻阅读全文

posted @ 2017-08-17 02:31 胡椒粉hjf 阅读(1246) 评论(0) 推荐(0) 编辑

2017年8月16日

浮动布局详解

摘要：什么是浮动在我们布局的时用到的一种技术，能够方便我们进行布局，通过让元素浮动，我们可以使元素在水平上左右移动，再通过margin属性调整位置浮动的原理使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘浮动的生成使用css属性flo 阅读全文

posted @ 2017-08-16 22:17 胡椒粉hjf 阅读(789) 评论(0) 推荐(0) 编辑

布局：上下两个div高度固定，中间自适应

摘要：需求：经典布局 —— 头尾固定高度中间高度自适应布局头部固定高度，宽度100%自适应父容器；底部固定高度，宽度100%自适应父容器；中间是主体部分，自动填满，浏览器可视区域剩余部分，内容超出则中间部分出现流动条；整个内容填满浏览器可视区域，并且不超出此区域！方法一：position:abs 阅读全文

posted @ 2017-08-16 20:28 胡椒粉hjf 阅读(3583) 评论(0) 推荐(0) 编辑

2017年8月15日

盒子模型和弹性盒子模型的详解

摘要：什么是CSS盒子模型 W3C组织建议把所有的网页上的对象都放在一个盒子中(在定义盒子宽高的时候，要考虑到内填充，边框，边界的存在） CSS盒子模型的组成盒子中的内容：content，盒子的边框：border，盒子边框与内容之间的距离：称为填充 padding内边距（内补丁），如果有多个盒子存在，盒阅读全文

posted @ 2017-08-15 22:49 胡椒粉hjf 阅读(1796) 评论(0) 推荐(0) 编辑

CSRF攻击详解

摘要： CSRF是什么 CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session riding，缩写为：CSRF/XSRF CSRF可以做什么你这可以这么理解CSRF攻击：攻击者盗用了你的身份，以你的名义发送恶意请阅读全文

posted @ 2017-08-15 21:44 胡椒粉hjf 阅读(469) 评论(0) 推荐(0) 编辑

2017年8月11日

使用Base64格式的图片制作ICON

摘要：使用Base64格式的图片制作ICON的优势是Base64图片可以减少请求次数；加快首屏数据的显示速度；使用这种方式不会对图片压缩使用base64工具将图片转成字符串使用站长工具可以将图片转成字符串，直接将图片上传即可，地址：http://tool.chinaz.com/tools/imgtob 阅读全文

posted @ 2017-08-11 18:34 胡椒粉hjf 阅读(878) 评论(0) 推荐(0) 编辑

如何让父元素有透明度，但里面的子元素不透明

摘要：方法1：使用透明的图片将父元素的背景颜色透明，然后使用一张带透明的背景图片覆盖整个区块，然后再这个区块中添加的子元素就不会透明方法2：背景色透明 rgba来代替opacity css3中新增了一种颜色表示方法，就是rgba，前面三个参数表示颜色，第四个参数表示透明度完全可以用背景色透明 rgb 阅读全文

posted @ 2017-08-11 16:35 胡椒粉hjf 阅读(2169) 评论(0) 推荐(0) 编辑

父级元素以及子元素高度宽度未知如何实现水平垂直居中

摘要：方法一：使用css3 transform:translate(-50%; -50%) 思路：子元素绝对定位，距离顶部 50%，左边50%，然后使用css3 transform:translate(-50%; -50%)，第一个值是X轴，第二个值是Y轴，表示位移（详情查看transform总结）优点：阅读全文

posted @ 2017-08-11 15:44 胡椒粉hjf 阅读(2100) 评论(0) 推荐(0) 编辑

たLOME

公告