代码改变世界

文章分类 -  CSS

如何只用CSS做到完全居中

2013-10-15 14:54 by focusdada, 206 阅读, 收藏,
摘要： 我们都知道margin:0 auto;的样式能让元素水平居中，而margin: auto;却不能做到垂直居中……直到现在。但是，请注意！想让元素绝对居中，只需要声明元素高度，并且附加以下样式，就可以做到：12345.Absolute-Center {margin: auto;position: absolute;top: 0; left: 0; bottom: 0; right: 0;} 我并不是第一个发现这种方法的人（不过我还是敢把它叫做“完全居中”），它有可能是种非常普遍的技巧。但大多数介绍垂直居中的文章中并没有提到过这种方法。如果不是浏览这篇文章的评论，我甚至根本就不会发现这个办法。　. 阅读全文

CSS z-index 属性的使用方法和层级树的概念

2013-07-11 10:45 by focusdada, 181 阅读, 收藏,
摘要： CSS中的z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也未必能将节点显示在最前面. 本文将通过一些例子对 z-index 的使用方法进行分析, 并且为各位带入 z-index层级树的概念.这个星期我们团队做了一次内部的技术分享,南瓜小米粥为我们分享了他对 CSS z-index 的理解和引入层级树这个概念. 这个分享的现场效果很好, 所以我也将 z-index 和层级树话题搬到博客来谈一谈.本文谈及多个影响节点显示层级 阅读全文

selector性能

2011-01-31 15:41 by focusdada, 162 阅读, 收藏,
摘要： 先说selector效率优化策略三条:1. 最右边的自选器精准化，以减少海选数。“.aaa”优化成“input.aaa”-----海选*.aaa变成了海选input.aaa“.ctn .aaa”优化成“.ctn input.aaa”-----海选*.aaa变成了海选input.aaa2. 带上容器id，以减少海选数。“div.aaa”优化成“#container div.aaa”-----海选div.aaa变成了海选#container input.aaa3. 除带id祖先或带id旁系亲属外，关系尽量简单，以减少血缘鉴定难度。“body input.aaa”优化成“input.aaa”---- 阅读全文