摘要：display：grid 是一种新的布局方式，旧的布局方式通常有副作用，例如float（需要额外修复浮动）或者inline-block（两个元素之间的空格问题） 把父元素定义为grid，就像表格一样，然后就可以给他的子元素定义各自占的行和列 .area { display: -ms-grid; /* 阅读全文

摘要：伪元素上就不要做动画了，页面果然应该做一个测试一个啊 拿到设计稿一开始就先看看这个设计稿的布局，有一些是从页面顶部到底部都有效果的，这个时候就要考虑在 iPhone4 这样屏幕不够高的设备上如何保证页面完整呈现；或者在不影响交互的情况下，隐藏哪些元素。有的时候页面上元素比较集中，这个时候就要考虑在 阅读全文

摘要：1、提升元素的z-index层级，下面这个例子会让前面的图片显示在上面，一般来说应该是后面的覆盖前面图片的 <img src="mm1" style="-ms-transform:scale(1);transform:scale(1);"><img src="mm2" style="margin-l 阅读全文

摘要：.half { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } .full { *zoom: expression( this.runtimeStyle['zoom'] = '1', this. 阅读全文

摘要：.wrap-outer { margin-left: calc(100vw - 100%); } .wrap-outer { padding-left: calc(100vw - 100%); } 首先，.wrap-outer指的是居中定宽主体的父级，如果没有，创建一个（使用主体也是可以实现类似效果 阅读全文

摘要：包含了两个属性和一个方法： 1. counter-reset 2. counter-increment 3. counter()/counters() counter-reset（主要作用就是给计数器起个名字。如果可能，顺便告诉下从哪个数字开始计数。默认是0）： .xxx { counter-res 阅读全文

摘要：rem（font size of the root element）是指相对于根元素的字体大小的单位。 主流的一些web app的适配解决方案： 流式布局： 流式布局在页面布局的时候都是通过百分比来定义宽度，但是高度大都是用px来固定住，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长， 阅读全文

摘要：客户端使用： <link rel="stylesheet/less" type="text/css" href="styles.less"> 在引入 .less 文件时，rel 属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是：LESS 源文件一定要在 less.js 引 阅读全文

摘要：CSS基本形状都是矩形，CSS shapes允许开发者用定制的路径来包裹内容，例如圆形，椭圆，多边形等。 形状可以自定义也可以从图片中推断 从图片推断，例如可以让文字按照图片形状来浮动到一边： <img class=”element” src=”image.png” /> <p>Lorem ipsu 阅读全文

摘要：Perspective 透视点，视角，CSS3D 的透视点在浏览器前方 默认值为none，是作用于子元素，指定观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定。 三维元素在观察者后面的部分不会绘制出来，即z轴坐标 阅读全文

摘要：原理是：创建一个节点，判断其的style属性是否含有textOverflow属性，有则进一步判断是否支持ellipsis这个值。当遇到不支持的属性值时，浏览器会直接把这个值抛弃。因此这里就可以先给textOverflow赋值“ellipsis”，如果不支持，则其值肯定为空或者其它不等于“ellips 阅读全文

摘要：网页内都有快速滚动和回弹的效果： overflow: scroll; -webkit-overflow-scrolling: touch; 实际上，Safari用了原生控件来实现，对于有-webkit-overflow-scrolling的网页，会创建一个UIScrollView，提供子layer给 阅读全文

摘要：Filters主要是运用在图片上，以实现一些特效。（也能运用于video上），类似滤镜效果 img { -webkit-filter:grayscale(1); } grayscale灰度 下面大部分一样，默认值都为100% sepia褐色 saturate饱和度 hue-rotate色相旋转 默认 阅读全文

摘要：@font-face存在的问题： 1、不同浏览器支持不同格式 2、Firefox默认情况下不允许跨域font-face，除非你可以添加“Access-Control-Allow-Origin” header to the font. 一个暂时的解决方案： 1、去fontsquirrel.com下载需 阅读全文

摘要：font-face自定义字体，iconfont就是把各种图片做成字体。iconfont优势： 字体文件小，一般20-50kb； 容易编辑和维护，尺寸和颜色可以用css来控制； 透明完全兼容IE6； http://www.qianduan.net/zai-shuo-iconfont-he-font-f 阅读全文

摘要：它的表现类似position:relative和position:fixed的合体，当目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。 .sticky { position: -web 阅读全文

摘要：目前只有ie支持http://samples.msdn.microsoft.com/iedevcenter/MultiColumn/default.html column-count 分割的列数 默认auto，可由其他属性来计算 column-width 设置每一列的宽度 默认值为auto，由其他属 阅读全文

摘要：修复塌陷问题的核心： Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, 阅读全文

摘要：在可视化格式模型里，每个元素都是由一个或者多个盒子组成，这些盒子的布局由下面规则控制： box dimensions and type.（块元素和行内元素） positioning scheme (normal flow, float, and absolute positioning). rela 阅读全文

摘要：.game { position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; } 使游戏容器绝对定位之后，上下左右四边都与手机屏幕贴紧 http://isux.tencent.com/html5-game-de 阅读全文