摘要：使用em 判断的media query 在用户缩放的时候不会被破坏，使用em更加合适内容为王的页面趋势 内容的容器需要根据内容而按比例设置，就像line-height：1.14em，文字大小的1.14倍 100% = 1 em ~= 16px ~= 14pt ，这是默认浏览器baseline为16p 阅读全文

摘要：1、透明图片+背景定位 background-position: center; <img src="transparent.jpg" style="background-image:url(need.jpg);"> 2、在IE下使用 font-size 使图片垂直居中显示，firefox,chro 阅读全文

摘要：display：grid 是一种新的布局方式，旧的布局方式通常有副作用，例如float（需要额外修复浮动）或者inline-block（两个元素之间的空格问题） 把父元素定义为grid，就像表格一样，然后就可以给他的子元素定义各自占的行和列 不需要改动标签就可以通过纯css实现表格布局 目前只有ie 阅读全文

摘要：widows = minimum number of lines in a paragraph split on the new page.orphans = minimum number of lines in a paragraph split on the old page. 换页的时候，当文 阅读全文

摘要：::-webkit-scrollbar { /* 1 */ } ::-webkit-scrollbar-button { /* 2 */ } ::-webkit-scrollbar-track { /* 3 */ } ::-webkit-scrollbar-track-piece { /* 4 */ 阅读全文

摘要：在页面做动画效果主要方式 1 CSS 2D/3D transforms and translate() （做动画的三个属性：transition，animation/keyframe） 2 position:absolute and top/left 使用top/left来做动画的时候，所有CSS样 阅读全文

摘要：空格：$('parent childchild')表示获取parent下的所有的childchild节点，所有的子孙。 大于号：$('parent>child')表示获取parent下的所有child的儿子，第一代。 加号：$('pre + nextbrother')表示获得pre节点的下一个兄弟节 阅读全文

摘要：一个元素不管是块元素还是行内元素 在添加了 display:none 之后，就变成了不可见的块元素，可以给他添加长度和高度 在float之后内联元素也会隐性成为 inline-block 元素 阅读全文

摘要：backface-visibility 是作用于 3D transform 时候 默认是 backface-visibility: hidden; 当一个元素3D变换的时候，会立即看到背面的内容，有时候会影响效果 设为 backface-visibility: hidden 就不会在3D动画效果时看 阅读全文

摘要：If a sibling block box (that does not float and is not absolutely positioned) follows the run-in box, the run-in box becomes the first inline box of t 阅读全文

摘要：table 布局最大的特点 1、同行等高 2、宽度自动调节 那么table-cell是不是具备这个特点呢？答案是yes，为什么呢？css中有一个有意思的规则“创建匿名表格元素”。 拿table-cell来扯，就是，当某个元素被设置为display:table-cell的时候，如果她的父节点不是dis 阅读全文

摘要：让连续的英文数字字符换行显示 word-break: break-all; 让单行文字超出的时候使用点点点表示 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;（移动开发浏览器支持良好） WebKit可以让多行文字点点点（ 阅读全文

摘要：:after伪类+content 清除浮动的影响 浮动元素会让此div的高度塌陷。如下例子： .box{padding:10px; background:gray;} .l{float:left;} <div class="box fix"> <img class="l" src="http://i 阅读全文

摘要：1.页面上实现css sprite背景定位效果其实margin:-40px 0 0 -160px;与background-position:-160px -40px;实现的原理是一致的，而差别就在于background-position会自动让区域外的图片部分不显示，所以我们要做的很简单，就是给ma... 阅读全文

摘要：text-align属性的元素可以有效作用于inline/inline-block水平的子元素，但是，text-align属性对应用了position:absloute/fixed声明的元素无效！没有应用left/top等属性值的absolute元素就是个不占据空间的普通元素，如果是block水平的... 阅读全文

摘要：方法一:.element {width: 600px; height: 400px;position: absolute; left: 50%; top: 50%;margin-top: -200px; /* 高度的一半 */ margin-left: -300px; /* 宽度的一半 */ }这种... 阅读全文

摘要：Flex Layout 的目的是为了提供一种高效的方式去为一个容器里面元素布局，对齐，分配空间，即使他们的大小尺寸是未知的，或者是动态变化的父容器有能力修改里面子元素的宽度和高度从而更好的分配空间。更重要的是flexbox布局方向可以灵活变化，比较适合小范围的布局，grid比较适合大范围的布局要想f... 阅读全文

摘要：第一种方法，采用左列 left 浮动，右列不浮动，采用 margin-left 定位的方式。此方法会有一个 ie6 3px bug . 另外，当浏览器框缩小到一定程度时，右侧会掉下来。#left{width:100px;height:100px;border:2pxsolid#333;float:l... 阅读全文

摘要：1 绝对定位实现2 margin负值实现 3 浮动法http://www.zhangxinxu.com/wordpress/2009/11/%E6%88%91%E7%86%9F%E7%9F%A5%E7%9A%84%E4%B8%89%E7%A7%8D%E4%B8%89%E6%A0%8F%E7%B... 阅读全文

摘要：The browser default which is something like 16pt for Firefox, You can check by going into Firefox options, clicking the Content tab, and checking the ... 阅读全文