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只会一部分不可见（超出容器），因为是相对自身定位。从

1.根据新建样式的适用范围分为三级：全站级、产品级、页面级全站级： 需要放在所有CSS引用的最前面，它包括：标签reset、常用规则(链接、字体、隐藏、清浮动等)、布局、各种模块基本样式等。注：不要轻易改动全站级CSS。改动后，要经过全面测试页面级： 指仅在一个或少量几个页面中用到。 如果仅在一个页面中用到的采用内联方式嵌入于页面head里； 多于两个页面的放到外联的CSS文件中，该文件再放到相应的产品目录下。产品级： 仅...

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。作者：梁海链接：http://www.zhihu.com/question/19911793/answer/13329819来源：知乎如果受不了长篇分析，请直接看第三部分。另外，请注意，此答案最初作于2011年底，随几经修订但总体上还是略有点过时。如今其实我推荐有能力的开发者判断 UA 然后为不

这算是一种图片路径的新写法。将图片进行编码，然后存在文档中。我先解释一下各自含义：data: ----获取数据类型名称image/gif; -----指数据类型名称base64 -----指编码模式AAAAA ------指编码以后的结果。background-image: url(data:image/gif;base64,AAAA)这句话的意思总体就是“获取数据类型是image

本文由99根据Johan Johansson的《How To Make Your Websites Faster On Mobile Devices》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://mobile.smashingmagazine.com/2013/04/03/build-fast-loading-

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

对字体进行抗锯齿渲染可以使字体看起来会更清晰舒服。在图标字体成为一种趋势的今天，抗锯齿渲染使用也越来越多。font-smoothing是非标准的CSS定义。它被列入标准规范的草案中，后由于某些原因从web标准中被移除了。但是，我们可以用以下两种定义进行抗锯齿渲染-webkit-font-smoothing: antialiased; /*chrome、safari*/-moz-osx-font...

概述：-webkit-tap-highlight-color 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色。该属性可以只设置透明度。如果未设置透明度，iOS Safari使用默认的透明度。当透明度设为0，则会禁用此属性；当透明度...

网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地...

上一篇文章介绍了Flex布局的语法，今天介绍常见布局的Flex写法。你会看到，不管是什么布局，Flex往往都可以几行命令搞定。我只列出代码，详细的语法解释请查阅《Flex布局教程：语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。一、骰子的布局骰子的一面，最多可以放置9个点。下面，就来看看Flex如何实现，从1个点到9个...

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

转自：http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84-6%E7%A7%8D%E6%96%B9%E6%B3%95/2012年03月30日 ⁄ Web设计 ⁄ 评论数 1 ⁄ 被围观 306+利用CSS进行元素

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

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

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

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

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

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

一、哥，我被你吓住了打架的时候会被块头大的吓住，学习的时候会被奇怪名字吓住（如“拉普拉斯不等式”）。这与情感化设计本质一致：界面设计好会让人觉得这个软件好用！所以，当看到上面“Matrix(矩阵)”的时候，难免会心生畏惧（即使你已经学过），正常心理。实际上，这玩意确实有点复杂。然而，这却是屌丝逆袭的一个好机会。CSS同行间：你是不是有这样的感觉：哎呀呀，每天就是

1. :before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素。如需定位定位伪类元素在制定元素之内，需设置指定元素的定位属性，这样伪类添加的元素才会相对于指定元素定位。否则伪类元素将相对于更上一级已定位的元素定位，如果没有，则相对于浏览器窗口定位。注：行内元素只有设置了display：inline-block设

1. margin-left：不管块级元素还是行级元素都有效。box-shadow:inset -50px 0 10px 12px;各参数解释：第一个：阴影方式，inset为内阴影，不设置则默认为外阴影。第二个和第三个：阴影偏移位置，第一个x轴偏移，第二个y轴偏移。第四个：阴影模糊半径。第五个：阴影扩展半径。

1. width 设置实际宽 ， min-width设置最小宽。 当实际宽小于最小宽时，按最小宽显示。 当实际宽大于最小宽时，按实际宽显示。

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

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