转载 什么是块级格式化上下文？

转文请标明 --- 出处：穆乙 http://www.cnblogs.com/pigtail/一、BFC是什么？BFC（Block Formatting Context）直译为“块级格式化范围”。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Cont

转载 拒绝Float！

一、引言你我看待事物的方式不同，价值取向也不同，因为我们有着不同的世界观，价值观。这种世界观的差异不仅仅体现在实际的生活中，也反映在代码上。你我看待代码的方式，或者说是代码在我们情感层面的位置是不一样的，我这里说的是情感层面，与逻辑无关，与算法无关（虽然算法受情感影响）。这种看待代码的方式是我们在不断学习与工作的过程中积累出来的，是在潜意识层面逐渐积累起来的，一切悄然而至，不知不觉。当我们

转载 浅谈Inline-Block的跨浏览器兼容

Ah, inline-block, that elusive and oh so tempting display declaration that promises so much, yet delivers so little. Too many times have I received PSD files like this:and begin to cry.Nor

转载 讲讲haslayout吧

要想更好的理解 css， 尤其是 IE 下对 css 的渲染，haslayout 是一个非常有必要彻底弄清除的概念。大多 IE下的显示错误，就是源于 haslayout。什么是 haslayout ？haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在Internet Explorer中，一个元素要么自己对自身的内容进行计算大小

转载 <meta>标签之viewport

6，标签-viewport大多数情况下 这个标签比上面要给力的多。viewport起源于apple，但现在被绝大多数移动浏览器所支持。这个标签的写法可以让你的layout viewport完全适配设备宽度。然，什么是viewport，为什么需要viewport：viewport：视口，视觉窗口，显示区域。在显示面积上手机屏幕相对桌面显示器要小很多，在几年前

转载 HTML中的<meta>标签详解

META标签是HTML语言HEAD区的一个辅助性标签，它位于HTML文档头部的标记和标记之间，它提供用户不可见的信息。meta标签通常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面使其可以根据你定义的时间间隔刷新自己,以及设置RASC内容等级，等等。 　　详细介绍　　下

转载 关于“媒体查询”

1，CSS pixelscss pixels 是浏览器使用的抽象单位，主要用来在网页上绘制内容。2，device pixels设备像素是显示屏幕的最小物理单位，每个dp包含自己的颜色，亮度。我们常说的分辨率，就是设备像素点。960*640,480*800等。3，物理尺寸我们常说的手机屏幕尺寸说的就是手机屏幕对角线的长度4，PPI也叫DPI，物

转载 HTML5-Cheatsheet（文字版）

文字备忘之标签HTML5中新增的标签定义文章定义页面内容旁边的内容定义声音内容定义图形定义一个控制按钮指树或表格状数据格式中的动态数据定义一个下拉列表定义一个元素的细节定义会话

转载 CSS的选择器

转载 HTML5-Cheatsheet

转载 【:before与:after】css的伪类与伪元素

1，什么是伪类2，伪类和伪元素分别有哪些

转载 【pt-px-em】有关磅、像素和em的整理

字体大小的设置单位，常用的有2种：px、pt。这两个有什么区别呢？先搞清基本概念：px就是表示pixel，像素，是屏幕上显示数据的最基本的点；pt就是point，是印刷行业常用单位，等于1/72英寸。这样很明白，px是一个点，它不是自然界的长度单位，谁能说出一个“点”有多长多大么？可以画的很小，也可以很大。如果点很小，那画面就清晰，我们称它为“分辨率高”，反之，就是“分辨率

转载 从块级元素和内联元素浅谈标签的嵌套规则

从一个问题说起吧------------div能不能放在p标签里面？？？ 首先还是一个老概念： 块级元素---h1,h2,h3,h4,h5,h6,hr,div,fieldset,form,dl,address,ol,p,table,ul,pre等常见内联元素---a,b,br,em,i,img,input,strong,textarea,span,lab

转载 jQuery的deferred对象详解

jQuery的开发速度很快，几乎每半年一个大版本，每两个月一个小版本。每个版本都会引入一些新功能。今天我想介绍的，就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象。这个功能很重要，未来将成为jQuery的核心方法，它彻底改变了如何在jQuery中使用ajax。为了实现它，jQuery的全部ajax代码都被改写了。但是，它比较抽象，初学者很难掌握，网上的教程

转载 HTML中<!DOCTYPE>作用及用法详解

一、浏览器呈现模式和doctype      有的网页是遵循标准而创作的，但也有很多不是。即使你不能创建遵循标准的网页，也希望浏览器根据标准来正确显示那些页。目前，大量网页充斥着大量非标准代码，它们仍能正常地工作。事实上，为旧版浏览器设计的大多数代码都能在新版浏览器中正确显示（虽然呈现方式可能有所区别）。这是什么原因呢？事实上，假如严格遵循最新标准，会完全破坏那些页的生存基础。对于任何希望

原创 canvas的简单绘图应用の刮刮乐

刚好最近有一个需求是实现刮刮乐，服务器随机返回一串字符，我需要把抽奖的过程实现成刮刮乐。说到这个需求，自然就想到了canvas，在网上找了蛮多案例，又是设置canvas背景图为img，刮开显示这张背景图，又是设置两层canvas，一前一后，忒复杂。很明显，基本思路是，一个文本层，被一个canvas覆盖，“刮开”canvas后，露出里面的几乎从来不变的文本内容——“谢谢惠顾！”。

转载 【line-height】 line-height详解

本文摘自不同文章，楼主自己汇总集合，对比概念，相对比较全面。楼楼自己的博客：http://blog.youkuaiyun.com/taotao6039原文1，http://www.woaicss.com/article/div/line-height.htm原文2，http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98

转载 Less的函数

escape(@string); // 通过 URL-encoding 编码字符串e(@string); // 对字符串转义%(@string, values...); // 格式化字符串unit(@dimension, [@unit: ""]); // 移除或替换属性值的单位color(@string); // 将字符串解析为颜色值data-uri([mimetype,] url); // *

转载 动态样式语言——Less 的学习

变量很容易理解：@nice-blue: #5B83AD;@light-blue: @nice-blue + #111;#header { color: @light-blue; }输出：#header { color: #6c94be; }甚至可以在定义变量值时使用其它的变量：@fnord: "I am fnord.";@var: 'fnord'

转载 css标准解读：属性值和选择器优先级的计算过程

一，属性值的计算过程大家都知道一个属性的值会经过一个计算过程，比如width:50%明显需要计算父容器的宽度才能确定，那么属性值的计算具体过程是怎么样的？一个属性的最终值经过四步计算产生1，定义值（specified value）：通过定义产生的2，计算值（computed value）：由定义值计算出来用来继承的值3，使用值（used value）：如果有必要的话会把

转载 Git命令行笔记

对一些命令行的整理，原文：http://blog.jobbole.com/25808/楼楼自己的博客：http://blog.youkuaiyun.com/taotao60391、取得项目的Git仓库1）在工作目录中初始化新仓库$ git init2）从现有仓库克隆$ git clone git://github.com/schacon/grit.git

转载 Mongoose入门

一、快速通道1.1 名词解释Schema ： 一种以文件形式存储的数据库模型骨架，不具备数据库的操作能力Model ： 由Schema发布生成的模型，具有抽象属性和行为的数据库操作对Entity ： 由Model创建的实体，他的操作也会影响数据库注意：1.本学习文档采用严格命名方式来区别不同对象，例如： var PersonSchema;

转载 JavaScript语义模板库handlebars教程

前言Web应用开发正在处于一个快速发展的时期，随着HTML5规范的落实和普及，相信会有越来越多的优秀的web应用呈现出来。JavaScript是web应用开发中是非常重要的语言，该语言有很多流行的库供大家使用。本期给大家介绍语义模板库Handlebars的使用方法。本文示例代码已经全部上传GitHub：https://github.com/DaweiCheng/handlebars

转载 node.js入门之helloworld

介绍这是我的关于Node.js系列入门教程的第一篇。必须说明一下，我并不是Node.js的专家，但是尝试向别人解释这是怎么回事是自我学习的一个好方法。如果你发现有些地方并不是那么正确，请提出来让我知道以便修正，谢之。最近Node.js如此流行，到处是讨论这个的话题，我决定一探究竟学学这玩意儿。软件行业技术更新如此之快，如果落在后面是很危险滴（汗，这哥们才20岁出头，就有这么强的落后

转载 【margin】不要告诉我你懂margin

转自: http://www.hicss.net/do-not-tell-me-you-understand-margin/你真的了解margin吗？你知道margin有什么特性吗？你知道什么是垂直外边距合并？margin在块元素、内联元素中的区别？什么时候该用padding而不是margin？你知道负margin吗？你知道负margin在实际工作中的用途吗？常见的浏览器下margin出现

转载 网站的易用性测试如何进行？都包括哪些内容？

【转自知乎】张光明，商业产品运营@百度通常对“网站易用性”有如下定义： 易理解Easy to discover：单单凭观察，用户能否在几秒钟知道网站是做什么的。以及知道可以采取的行动。易操作Easy to use：初次接触网站功能或界面时，用户完成的难易程度，是否可不用帮助文档就能使用网站。易学习Easy to learn：通过简单的帮助文件，用户能否能解决遇到的问题效

原创 scrollWidth,clientWidth和offsetWidth的不同

楼楼之前一看到scrollWidth和clientWidth之类的就一个头两个大，根本就没搞明白几个宽度的含义。刚好最近学习视差滚动网页的编写，所以一定要搞清楚scrollTop之类的含义。才能理解的更加透彻的说。废话少说，首先我们看一段代码：onclick="alert('scrollWidth:'+this.scrollWidth+'\n scrollHeigh

转载 CSS3 Transitions, Transforms和Animation使用简介与应用展示

by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=1268一、前言兼目录索引《天龙八部》里的虚竹小和尚之前可以说是和尚的先进人物与代表模范，各类清规戒律谨记与严守。但是，后来呢，花姑娘送到跟前，什么戒律都成了浮云，禁不住诱惑享乐去了。啊，我现在似乎有类似

转载 【clear】闭合浮动(clear)的原理和应用

原作者: 水獭先生浮动(float)，一个我们即爱又恨的属性。爱，因为通过浮动，我们能很方便地布局； 恨，浮动之后遗留下来太多的问题需要解决，特别是IE6-7（以下无特殊说明均指 windows 平台的 IE浏览器）。也许很多人都有这样的疑问，浮动从何而来？我们为何要清除浮动？清除浮动的原理是什么？本文将一步一步地深入剖析其中的奥秘，让浮动使用起来更加得心应手。一、清除浮动

转载 Hybrid开发的优化策略

Hybrid越来越成为开发的一种常见的开发方式，但说到Hybrid，除了开发上的高效和更新上的快捷之外，速度是被提到最多的，我们就从这里开始着手。这里跟大家分享一些这方面的经验，希望能对大家有所帮助。我们把一个Html页面的加载过程分为三段：加载、渲染、Ajax请求。然后从这三个阶段分别谈一下优化的策略。1、加载。首先，要充分利用浏览器的缓存策略来实现快速加载。这样就能保证只要不升

转载 AJAX跨域详解

域(Domain)是Windows网络中独立运行的单位，域之间相互访问则需要建立信任关系(即Trust Relation)。信任关系是连接在域与域之间的桥梁。当一个域与其他域建立了信任关系后，2个域之间不但可以按需要相互进行管理，还可以跨网分配文件和打印机等设备资源，使不同的域之间实现网络资源的共享与管理。 有一种简明的说法来解释广域跨域：跨域访问，简单来说就是 A 网站的 javascript

原创 前端需要知道的零碎小知识

出自：http://blog.youkuaiyun.com/taotao60391，HTML页面有中文乱码时，传数据的过程中用escape(string)即可；使用url参数传递数据有乱码时，使用encodeURIComponent；escape()可对字符串编码以便在所有计算机上读取该字符串。可用unescape()对用escape()编码的串解码。ECMAScript v3反对使用

转载 移动端webapp开发必备知识

转载自：移动终端开发必备知识请尊重版权，转载请注明来源，多谢~~移动设备的用户越来越多，每天android手机的激活量都已经超过130万台，所以我们面向移动终端的WebAPP也开始跟进了。本文主要介绍webapp的开发与调试的相关知识和经验，以及给出几种可选的解决方案。一、基本概念（1） CSS pixels与device pixelsCSS pixels： 浏

转载 移动端webapp开发知识小结

1、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用       (1)       (2)       (3)       (4)        第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；尤其要注意的是content里多个属性

转载 解决html5 audio iphone,ipd，safari不能自动播放问题

http://leiyongping88.iteye.com/blog/1831145 html audio 在iPhone，ipd,safari浏览器不能播放是有原因滴(在safri on ios里面明确指出等待用户的交互动作后才能播放media，也就是说如果你没有得到用户的action就播放的话就会被safri拦截)找了很多资料都没有解决，不过最终在国外网站

转载 移动端webapp开发要点总结

如果你是一名前端er,又想在移动设备上开发出自己的应用，那怎么实现呢？幸好，webkit内核的浏览器能帮助我们完成这一切。接触 webkit webApp的开发已经有一段时间了，现把一些技巧分享给大家 ：1. viewport：也就是可视区域。对于桌面浏览器，我们都很清楚viewport是什么，就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域，这是真正有效的区域。由于移

转载 在微信公众平台前端网页上添加分享按钮

微信公众平台开始支持前端网页，大家可能看到很多网页上都有分享到朋友圈，关注微信等按钮，点击它们都会弹出一个窗口让你分享和关注，这个是怎么实现的呢? 　　今天就给大家讲解下如何在微信公众平台前端网页上添加分享到朋友圈，关注微信号等按钮。　　微信内嵌浏览器　　通过 Mac 远程调试 iPhone 上微信自己的网页，我们可以发现微信内嵌浏览器定义了一个私有 JavaScr

转载 使用用Chrome开发者工具（Timeline、Profiler）做JavaScript性能分析

你的网站正常运转。现在我们来让它运转的更快。网站的性能由页面载入速度和代码执行效率决定。一些服务可以让你的网站载入更快，比如压缩JS和CDN，但是让代码执行的更快你要做的事情。代码中很小的改动都可能对性能造成巨大的影响。快速灵活的网站和可怕的“无响应脚本”对话框可能只有几行代码的差别。这篇文章告诉你如何通过用Chrome开发者工具（Chrome Developer Tools）找到这几

转载 浏览器判断是否安装了ios/android客户端程序

pre>最近在做一个项目，该项目的前身是为mobile browser量身打造的一个网站。现在有这样一个需求：p>p>p>当用户在用mobile browser浏览该网站的时候会点击一个按钮/超链接，通过这个按钮的点击事情需要打开安装在本机的应用程序，或者如果本机没有安装该应用程序则打开应用商店并打开该程序在商店中的搜索结果页面。p>p>p>p>刚开始的时候iPhone team的人给出一个sol

转载 HTML5的性能优化

1.更简洁的标签接下来可能并不是一件很常见的事情，但是却是我比较推崇的，使用更简洁的标签方式。HTML5从这个名字大家可以听出，它是从HTML4继承过来的。HTML4里面有严格模式跟过渡模式，HTML5是支持这种过渡模式的，就是你可以不把一些标签闭合。但是，我并不推荐所有的标签，比方说BODY标签的不闭合，这种我们不推荐。但是像P标签最常用的，还有列表标签LI。为什么这样说？首先从视觉的角