本文是CSS 相对/绝对(relative/absolute)定位长篇系列的第一篇,大部分的内容被理论观点和题外话给占据了。本文主要内容就是分析了absolute与浮动之间的关系,一些典型的特性。还阐述了自己尽量不要使用absolute属性做普通DOM布局的观点。相对于本篇的文字量,图片啊代码啊以及demo相对少了写,但是,应该不会影响您的阅读与理解的。本文书写还是花了好些功夫的,力求准确表述自己观点的同时语言通俗生动。总之,希望本文能对您的学习有所帮助。
“CSS相关”目录存档
CSS 相对|绝对(relative/absolute)定位系列(一)
2010年12月9日,星期四CSS3 Transitions, Transforms和Animation使用简介与应用展示
2010年11月25日,星期四备忘:CSS术语词汇表
2010年11月18日,星期四拜拜了,浮动布局-基于display:inline-block的列表布局
2010年11月3日,星期三
对于浮动局部的局限性,想必同行们都知道,就是每个列表元素的高度必须要一致,否则就会像是俄罗斯方块一样,“锯齿相错”,例如一个左浮动列表布局,如果第一行有个列表高度高于其他列表,那就在第二行,第一个元素会沿着最高元素的右侧对齐。
浮动本身就是个魔鬼,所以,使用浮动布局还需要修复其带来的副作用——高度塌陷的问题,也就是常提到的“清除浮动”了。
另外,IE6下,重复的列表元素会出现莫名的bug,例如出现不知哪来的文字。
而基于display:inline-block的列表布局可以避免这些问题,本文就将一步一步地展示基于display:inline-block的列表布局的可用性以及价值所在。本文内容较多,讲解详细,配以丰富飞截图,必要的demo页面。还是视频展示,希望能对您的学习有所帮助。
我所知道的几种display:table-cell的应用
2010年10月28日,星期四display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的,但是IE6/7只能对你说sorry了,这一事实也是大大制约了display:table-cell属性在实际项目中的应用。
我们都知道,单元格有一些比较特别的属性,例如元素的垂直居中对齐,关联伸缩等,所以display:table-cell还是有不少潜在的使用价值的,虽说IE6/7不支持此属性,但是幸运的是,IE6/7一些乱糟糟的属性与渲染,我们可以其他方法实现同样或是类似的效果。
本文就将介绍使用display:table-cell属性让大小不固定元素垂直对齐,两栏自适应布局,多栏等高布局,以及不太擅长的列表布局等。提供必要的截图以及demo实例页面展示,和一些简单的源代码展示。时间仓促,文字可能略显粗糙,总之,希望能对您的学习有所帮助。
页面重构“鑫三无准则” 之“无宽度”准则
2010年10月11日,星期一使用CSS3 ::selection伪元素改变文本选中颜色
2010年10月8日,星期五本文主要介绍如何使用CSS3的一些属性改变浏览器页面文字默认选中的样式(主要是文字颜色和背景色),犹如魔术一样,知道了原理其实也就很简单了。所以本文其实没有什么内容,小技巧展示而已。一如既往的,有源代码展示,有截图,还有必要的demo页面,希望能对您的学习提供一些帮助。
:after伪类+content内容生成经典应用举例
2010年09月28日,星期二
content内容生成就是通过content属性生成内容,content属性早在CSS2.1的时候就被引入了,可以使用:before以及:after伪元素生成内容。此特性目前已被大部分的浏览器支持: (Firefox 1.5+, Safari 3.5+, IE 8+, Opera 9.2+, Chrome 0.2+)。另外,目前Opera 9.5+ 和 Safari 4已经支持所有元素的content属性,而不仅仅是:before和:after伪元素。
本文就将讲述:after伪类+content内容生成在web页面重构上非常实际的两个应用,一是清除浮动的影响,二是大小不固定图片的垂直居中效果。提供代码展示盒截图,提供demo效果页面,希望能对您的学习有所帮助。
IE9对CSS3的支持情况概述
2010年09月25日,星期六IE9 测试版好像是在9月16日凌晨发布的,如今在中国,IE已经四世同堂,这是多么温馨美满的画面啊,让人不由得“喜极而泣”啊!关于IE9的野史外传这里不做讨论,本文内容正如题目所示,主要概述下目前IE9版本对CSS3的支持情况。随着时间的推移,IE9必定会做一定的改进与修复等,所以,可能仅仅几个月后,现在还不支持的CSS3属性已经支持了,所以,本文所有的表格和数据仅作参考…