ywb201314的专栏

实现方式的区别：col-md-offset-*，是利用margin-left实现的，col-md-push-*/col-md-pull-*是利用相对定位实现的。效果的区别，col-md-offset-*只能向右便宜，因为实现方式就是margin-left，而push/pull因为是相对定位，既可以左偏移也可以右偏移还有一点，如果一行的偏移量+实际的宽度综合超过12，col-md-offset会换行显示，也是因为margin，而push/pull只会一部分不可见（超出容器），因为是相对自身定位。从

前提：sessionStorage浏览器的tab页切换的时候，是不共享的原理：window的storage事件（H5），localStorage的tab页是可以共享的为什么不用localStorage：因为localStorage在关闭浏览器后重新打开，还会存在，不符合需求(function() {　　　　　//这里面的token是你存在sessionStorage里面的用户标识的key值 if (!sessionStorage.length) { /

Storage事件在某些复杂情况下，如果多个页面都需要访问本地存储的数据，就需要在存储区域的内容发生改变时，能够通知相关的页面。Web Storage API内建了一套事件通知机制，当存储区域的内容发生改变（包括增加、修改、删除数据）时，就会自动触发 storage 事件，并把它发送给所有感兴趣的监听者。因此，如果需要跟踪存储区域的改变，就需要在关心存储区域内容的页面监听 storage 事件。所有支持 localStorage 的浏览器都支持 storage 事件，包括 IE8。但IE 8不支

这些都是HTML5针对html tag增加的属性，一般是为不方便的人士提供的功能，比如屏幕阅读器。role的作用是描述一个非标准的tag的实际作用。比如用div做button，那么设置div 的 role="button"，辅助工具就可以认出这实际上是个button。aria的意思是Accessible Rich Internet Application，aria-*的作用就是描述这个tag在可视化的情境中的具体信息。比如：<div role="checkbox" aria-checked="c

若实现拖拽（火狐以外），被拖拽元素需添加属性：draggabledraggable是一个枚举属性，用于指定一个标签是否可以被拖拽。有以下四种取值：true表示此元素可拖拽false表示此元素不可拖拽auto除img和带href的标签a标签表示可拖拽外，其它标签均表示不可拖拽其它任何值表示不可拖拽

CSS3伪类：valid、invalid、requiredvalid、invalid、required的使用过去验证表单会通过js和正则去判断填写的内容是否正确，如email的验证。HTML5的出现为我们提供一些属性，不用编写js和正则即可解决这个检验表单内容。:required必须，那input不能为空的意思。:valid有效，即当填写的内容符合要求的时候

大家都知道，HTML 里复选框（checkbox）表示选中状态的 checked 属性，只有选中和没被选中两种情况。但有时候，我们还要表示「部分选中」状态：如实现树或表格勾选时，当用户选择一部分子记录，父记录的状态就应该是部分选择。通常的做法有很多方案可以实现这个需求，这里列举两个有代表性的简单介绍下：1）利用 checkbox 自身其他属性来模拟。如下图，用 disabl

1. translate 产生的位移始终是相对于元素最初位置，而left是相对于元素当前位置。因为translate和left产生的位移可以叠加，而两次translate产生的位移只会以最后一次为准，两次left产生的位移也只会以最后一次为准。2.translate和left产生的位移互不影响，不会因为translate的位移设置为0，而影响left的位移，反之亦然。3

注：让鼠标穿过当前层进而操作下层元素。也就是将当前层元素的click事件的监听去掉。其实早知道这个属性，但是一直没有去研究过。今天正好在twitter看到这个词，就去研究了下，正好解决了目前遇到的一个小难题，所以分享下。嗯，其实这是个比较简单的CSS3属性。在某个项目中，很多元素需要定位在一个地图层上面，这里就要用到很多绝对定位或者相对定位的元素，但是这样的话，这些浮在上面的div

SVG是描述二维矢量图形的一种图形格式。也许有人会问，为什么不用canvas，关于SVG与canvas之争这里不做讨论（详见http://msdn.microsoft.com/zh-cn/library/gg193983#Non_Starters）。现在假设一个coder权衡利弊使用了SVG，那么有一些小事是需要注意的。        1 SVG的浏览器检测        SVG作为W3C

优秀的网页意味着设计人员对页面的精雕细琢，在这一过程中，我们既要接受规则，也要乐于发现并掌握新的工具，努力让生活变得更简单，设计更优秀。其实网页的字体和真实的字体没有本质上的区别，所以我很不赞同”网页字体”和”真实的字体”不同这一说法，只能说它们的每个应用比如说网页字体、铅字、海报字体以及电影字体都有自己的特色和限制，但是归根究底，它们是同根生。本文主要是告诉大家该怎么挑选网页的字体，

CSS 的局限性：利用字体的全部特性 2012年1月18日 3:530由于提供了对 CSS3 @font-face 规则和 WOFF 字体封装格式的跨浏览器支持，现代的 Web 版式已远远超出了“Web 安全字体”所定义的范畴，像 New Yorker 这样的知名杂志就使用了 Web 字体来彰显标题版式的独特风格，而在美国总统奥巴马的竞选连任活动中，

第一步：在网页代码的头部，加入一行viewport元标签[html] view plaincopyprint?meta name="viewport" content="width=device-width, initial-scale=1" />  viewport是网页默认的宽度和高度，上面这行代码的意思是：网页宽度默认等

IE10平台预览第四版中包含了对 CSS3 新属性 -ms-user-select 的支持，Web 开发人员可以利用这一新属性轻松精确的控制用户可以在网站上选择哪些文本。以较为典型的新闻网站为例，大多数页面中会包含一条正文报道，有用户习惯在浏览新闻报道的时候边阅读边用鼠标选中内容，或者选中正文内容与他人进行分享。与此同时，新闻网站页面上还会包含一些其他内容和链接，用户可能不需要选取

贝塞尔曲线与CSS3动画、SVG和canvas的基情by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=3626一、甚忙，短言之最近谷歌那谁谁因为自己的相好被老大抢了，就去小米了！狗血的三角关系要比烂掉的TVB神剧好看多了。但这只是小菜，贝

1. outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。2. outline-offset 属性对轮廓进行偏移，并在边框边缘进行绘制。

cubic-bezier即为贝兹曲线中的绘制方法。图上有四点，P0-3，其中P0、P3是默认的点，对应了[0,0], [1,1]。而剩下的P1、P2两点则是我们通过cubic-bezier()自定义的。cubic-bezier(x1, y1, x2, y2) 为自定义，x1,x2,y1,y2的值范围在[0, 1]。    预留的几个特效：    ease: cubic-bezier