首页 » 水哥专栏 » 【笔记】Web 前端开发疑难

【笔记】Web 前端开发疑难

网页布局 方方面面疑难解答的优秀文章,由本人肉眼搜集于 sogou.com(按一般的技术学习路线排序;技术更迭,未完待续)——

【CSS 盒模型】元素长宽计算与 padding、border 的关系

  1. http://bbs.aau.cn/forum.php/?mod=viewthread&tid=7398
  2. http://www.cnblogs.com/muyun/p/3567235.html

【浏览器乱象】网页长宽属性

  1. http://blog.sina.com.cn/s/blog_48e6792c0100z7ge.html
  2. http://blog.csdn.net/u010200222/article/details/10948059
  3. http://www.cnblogs.com/yesw/p/4259727.html

【CSS】伪元素特性

  1. http://www.cnblogs.com/oooweb/p/css-pseudo-element-before-and-after.html
  2. http://www.hulufei.com/post/about-before-and-after-pseudo-element

【CSS】content 属性用法详解

  1. http://blog.dimpurr.com/css-before-after/
  2. http://www.zhangxinxu.com/wordpress/2010/04/css-content%e5%86%85%e5%ae%b9%e7%94%9f%e6%88%90%e6%8a%80%e6%9c%af%e4%bb%a5%e5%8f%8a%e5%ba%94%e7%94%a8/
  3. http://www.zhangxinxu.com/wordpress/2014/08/css-counters-automatic-number-content/
  4. http://www.w3cplus.com/css3/css-counters.html

【CSS】文本溢出显示省略号

  1. http://www.cnblogs.com/lilyimage/p/3653864.html

【CSS 盒模型】position、float 与 display 关系梳理

http://www.cnblogs.com/coffeedeveloper/p/3145790.html

【CSS 盒模型】内容、元素水平、垂直居中

  1. http://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods.html
  2. http://www.zhangxinxu.com/wordpress/2010/10/%e6%88%91%e6%89%80%e7%9f%a5%e9%81%93%e7%9a%84%e5%87%a0%e7%a7%8ddisplaytable-cell%e7%9a%84%e5%ba%94%e7%94%a8/

【CSS 盒模型】z-index 堆叠规则

  1. http://blog.doyoe.com/2014/01/21/css/%E4%BD%A0%E9%9C%80%E8%A6%81%E4%BA%86%E8%A7%A3%E7%9A%84z-index%E4%B8%96%E7%95%8C/

【CSS 3】IE CSS 滤镜

  1. http://www.cnblogs.com/shiyangxt/archive/2008/11/16/1334633.html
  2. http://www.javascriptkit.com/filters/filters.shtml
  3. http://www.laoshu133.com/post/css_background_transparence.html?jdfwkey=ggieh1
  4. http://www.cnblogs.com/yushiro/archive/2008/11/26/1341219.html
  5. http://www.75team.com/archives/303

【动态 CSS】JavaScript 操作 CSS 属性

  1. http://www.cnblogs.com/flyjs/archive/2012/02/20/2360502.html
  2. http://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/

【动态 CSS】JavaScript 操作 CSS 规则

  1. http://blog.csdn.net/renfufei/article/details/39085235
  2. http://javascript.ruanyifeng.com/dom/css.html
  3. http://robinqu.iteye.com/blog/461359
  4. http://www.alloyteam.com/2013/12/powerfuljs-1-to-operate-an-html-document-using-js/

【DOM 特性】Attribute 与 Property

  1. http://www.cnblogs.com/dolphinX/p/3348582.html
  2. http://www.cnblogs.com/zhwl/p/3520162.html

【DOM 兼容】innerText、textContent

  1. http://www.cnblogs.com/sniper007/archive/2012/04/24/2468175.html
  2. http://www.360doc.com/content/14/0414/16/15727046_368828277.shtml

【DOM 兼容】动态创建元素

  1. http://www.cnblogs.com/yizihan/p/4386431.html
  2. http://qbaok.blog.163.com/blog/static/101292652013022296590/

【DOM 监控】Mutation 的 Event 与 Observer

  1. http://www.cnblogs.com/rubylouvre/p/3192021.html
  2. http://www.cnblogs.com/rubylouvre/archive/2012/05/28/2520721.html
  3. http://chrisyip.github.io/post/mutation-events-and-mutationobserver/
  4. http://javascript.ruanyifeng.com/dom/mutationobserver.html
  5. https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

【浏览器数据流操作】JavaScript 转换 DataURL

  1. http://www.iunbug.com/archives/2012/06/05/254.html
  2. http://www.78oa.com/news/news727.html
  3. http://my.oschina.net/l3ve/blog/300097
  4. http://stackoverflow.com/questions/11335460/how-do-i-parse-a-data-url-in-node
  5. http://stackoverflow.com/questions/6926016/nodejs-saving-a-base64-encoded-image-to-disk
  6. http://segmentfault.com/q/1010000000095621
  7. https://cnodejs.org/topic/4f939c84407edba2143c12f7
  8. https://developer.mozilla.org/zh-CN/docs/Using_files_from_web_applications
  9. http://www.cnblogs.com/boychenney/archive/2011/10/08/2203036.html

【浏览器数据流操作】JavaScript Base64 编解码

  1. http://qianduanblog.com/post/js-learning-34-en-decodeuri-en-decodeuricomponent-un-escape-btoa-atob.html
  2. http://www.cnblogs.com/rubylouvre/archive/2010/09/19/1829898.html

【浏览器数据流操作】JavaScript 二进制数据操作

  1. http://javascript.ruanyifeng.com/htmlapi/file.html
  2. http://javascript.ruanyifeng.com/stdlib/arraybuffer.html#toc7
  3. http://www.douban.com/note/225494734/
  4. http://www.blogjava.net/jidebingfeng/articles/406171.html
  5. http://www.cnblogs.com/axes/p/4603984.html

【浏览器加密】window.crypto

  1. http://blog.csdn.net/emu/article/details/39618297
  2. http://www.cnblogs.com/rubylouvre/p/3462457.html

【浏览器乱象】键盘事件对象的 keyCode 属性

  1. http://www.tychio.net/tech/2013/06/06/event-keycode.html

【浏览器乱象】网页文档模式

  1. http://blog.csdn.net/ennyhong/article/details/8330160
  2. http://blog.csdn.net/justremind/article/details/25913639
  3. http://www.oschina.net/translate/doctype

【浏览器乱象】Window 对象的识别

  1. http://www.w3school.com.cn/jsref/dom_obj_window.asp
  2. http://www.cnblogs.com/rubylouvre/archive/2010/02/20/1669886.html

【浏览器乱象】鼠标事件兼容

  1. http://segmentfault.com/a/1190000002499967
  2. http://w3help.org/zh-cn/causes/BT9017
  3. http://blog.csdn.net/ge_yulong/article/details/38924475
  4. http://www.cnblogs.com/_franky/archive/2010/05/01/1725624.html

【DOM 事件】事件模拟

  1. http://web.jaxedit.com/post/2013/03/30/2990442.html

【HTML 5 API】鼠标拖拽

  1. http://www.cnblogs.com/hooray/archive/2012/01/30/2331648.html

【AJAX】跨域通信

  1. https://segmentfault.com/a/1190000003642057
  2. http://segmentfault.com/a/1190000000702539
  3. https://github.com/luics/storage/wiki/Storage
  4. http://cssha.com/cross-domain-local-storage/
  5. http://stackoverflow.com/questions/1653308/access-control-allow-origin-multiple-origin-domains
  6. http://blog.csdn.net/vivianhope/article/details/46581039
  7. http://www.tuicool.com/articles/3UBzIbb
  8. http://my.oschina.net/blogshi/blog/303758
  9. https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
  10. https://dev.opera.com/articles/dom-access-control-using-cors/

【AJAX】跨域 XHR 兼容

  1. http://segmentfault.com/a/1190000000702550
  2. http://www.vinqon.com/codeblog/?detail/11103
  3. http://www.w3cmm.com/ajax/xdomainrequest.html
  4. https://msdn.microsoft.com/en-us/library/ie/cc288060(v=vs.85).aspx
  5. http://blogs.msdn.com/b/ieinternals/archive/2009/07/23/the-ie8-native-xmlhttprequest-object.aspx

【HTML 5 API】历史记录 与 AJAX

  1. http://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/
  2. http://blog.csdn.net/tianyitianyi1/article/details/7426606
  3. http://blog.csdn.net/fdipzone/article/details/8928202
  4. https://github.com/browserstate/history.js

【JSON 本地处理】JSON 对象方法的详细用法

  1. http://www.cnblogs.com/mu-mu/p/3394475.html
  2. http://www.cnblogs.com/anychem/archive/2012/04/02/2429785.html
  3. http://www.cnblogs.com/damonlan/archive/2012/03/13/2394787.html

【JS 技巧】in 操作符

  1. http://www.linuxfly.org/post/524/

【JS 技巧】类数组对象

  1. http://www.cnblogs.com/littledu/archive/2012/05/19/2508672.html
  2. http://www.zipeng.info/archives/js-array-like-obj.html
  3. http://www.cnblogs.com/fool/archive/2010/10/09/1846966.html
  4. http://www.zuojj.com/archives/218.html
  5. http://blueion.iteye.com/blog/371861

【JS 技巧】对象自定义属性的单独处理

  1. http://birdshome.cnblogs.com/archive/2005/06/24/GetExpandoAttributes.html
  2. http://fsy0718.com/?p=36

【SVG】浏览器 JS 网页截图

  1. http://www.raychase.net/1152
  2. http://www.webhek.com/drawwindow
  3. https://github.com/niklasvh/html2canvas
  4. https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

【浏览器性能】JavaScript 函数调用降频

  1. http://www.webhek.com/function-debounce

【Web 前端性能】

  • http://www.csdn.net/article/2013-09-23/2817020-web-performance-optimization

【HTTP 协议】Header 标准

  1. http://www.cnblogs.com/shanyou/archive/2012/05/06/2486134.html
  2. http://kb.cnblogs.com/page/92320/
  3. https://imququ.com/post/vary-header-in-http.html

【HTTP 协议】缓存机制

  1. http://www.cnblogs.com/TankXiao/archive/2012/11/28/2793365.html
  2. http://www.studyofnet.com/news/935.html
  3. http://blog.csdn.net/crazyhacking/article/details/44497293

【HTTP 协议】ETag 缓存头

  1. http://blog.csdn.net/21aspnet/article/details/6604822
  2. http://blog.csdn.net/chenzhiqin20/article/details/10947857

【实时通讯】HTTP SSE

  1. http://www.ituring.com.cn/tupubarticle/1408