关于css z-index 层叠一些不为人知的事儿
关于z-index的真正问题是，很少有人理解它到底是怎么用。其实它并不复杂，但是如果你从来没有花一定时间去看具体的z-index相关文档，那么你很可能会忽略一些重要的信息。 不相信我吗？好吧，看看你能否解决下面这个问题： 问题： 在 接下来的xhtml代码里有…
伪元素:before和:after学习和使用
如果你一直密切关注着各种网页设计的博客，你可能已经注意到了：before和：after伪元素已经在前端开发中获得了相当多的关注。特别是在Nicolas Gallagher的博客中，后期运用了很多伪类元素。 Nicolas Gallagher使用伪元素用静态的HTML标签创建84个GUI图标…
如何自适应宽度的水平居中
当父元素和子元素都没有定义宽度的情况下实现水平居中： display:inline-block 可以使用text-align:center和display:inline-block相结合，这个技巧需要一个父元素。 HTML代码: <div class="navbar"> <ul> <li>&…
通过CSS3 Media Query实现响应式Web设计
如今的屏幕分辨率，小至320px(iPhone)，大到2560px甚至更高(大显示器)，变化范围极大。除了使用传统的台式机，用户会越来越多的通过手机、上网本、iPad一类的平板设备来浏览页面。 这种情况下，固定宽度的设计方案将会显得越发不合理。页面需要有更好的适…
margin负值-权威指南
在1998年CSS2的建议使用CSS进行页面设计布局，table就渐渐淡出了历史舞台。也因为如此，CSS也变成了编码优雅的代名词。 页面设计者用过的所有CSS概念中，margin常被设计者使用,而负margin应当是最少被谈及的定位方法，margin每个人都使用它，但很少人去讨…
CSS z-index 属性的使用方法和层级树的概念
CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也未必能将节点显示在最前面. 本文将通过一些…
CSS3实战让我们尽情的使用圆角吧
如果说，WAP2.0网页的机型、浏览器适配给我们无线制作经理造成了巨大的心理阴影，那么从iPhone、Android这些高端手机应用起，我们终于可以庆幸比其他同行提前迎来了一个新时代，这两种高端手机上的Safari Mobile和Google Android浏览器近乎完美的渲染效果…
让 CSS 的 &https://csswang.com/8220;vertical-align: middle&https://csswang.com/8221; 属性支持 IE 6/7
本篇文章展现一些能够将目标元素放在父元素的中间例子。第一个例子可以在除IE7以下的所有浏览器中实现，第二个例子虽然看起来有些复杂，但它的一些技巧可以在IE7和IE6中实现。 在这个例子中，类名为valign的div作为父类元素，需要特别注意的是，valign的cs…
CSS3完美圆角实现的研究
上图中这些按钮漂亮吗？喜欢吗？你是否曾经有意或无意想要设计这样一个漂亮的按钮，一个圆角矩形嵌套在另外一个圆角矩形中，然后你不知道应该怎么根据给定的外部半径设置内部半径大小，或者反过来根据内部半径大小设置外部大小？这就是我们接下来要探讨的…
前端需要理解的CSS3技巧
现在使用CSS3的网站越来越普及了，但是我们现在能真正用到的CSS3技巧又有哪些呢？这篇文章，我将向你展示一些与众不同的CSS3技巧，这些技巧在一些主要的浏览器中表现良好（如Firefox，Chrome，Safari，Opera浏览器）。 这些效果会在不支持的浏览器中降级渲…
overflow:hidden真的失效了吗
项目中常常有同学遇到这样的问题，现象是给元素设置了overflow:hidden，但超出容器的部分并没有被隐藏，难道是设置的hidden失效了吗？ 其实看似不合理的现象背后都会有其合理的解释。 我们知道，overflow属性值有这几种： visible：声明内容不会被剪裁。比…
CSS布局中一个简单的应用BFC的例子
什么是BFC BFC(Block Formatting Context)，简单讲，它是提供了一个独立布局的环境，每个BFC都遵守同一套布局规则。例如，在同一个BFC内，盒子会一个挨着一个的排，相邻盒子的间距是由margin决定且垂直方向的margin会重叠。而float和clear float也只对同一…
CSS基线之道
这或许是因为缺少基线网格的理解和欣赏，更或者是因为基线网格是出了名的难以实现， 迄今为止还没有人拿着蓝图让它成功实现。 有些人甚至认为基线在网络上是多余的，基线作为一种排版术语和网络上的行为，在网络上遵循的规则有别于用于印刷的，line-height…
使用css sprites来优化你的网站在Retina屏幕下显示
CSS srites(CSS图片精灵)已经存在很久了。事实上， 八年前就有CSS Sprites的详细介绍。CSS Sprites为一些大型的网站节约了带宽，让提高了用户的加载速度和用户体验，不需要加载更多的图片。 对于小型网站，CSS Sprtes并没有带来很大的变化，或许这样使用并…
css文本两端对齐
在做表单时我们经常遇到让上下两个字段对齐的情况，比如姓名， 手机号码， 出生地。这样我们就要用到 text-align， text-justify样式了。 text-align直接设为justify就行了，text-justify的情况就复杂了，可能有人对它还不熟悉。IE的取值如下： auto :允…
