文章关键字 ‘table-cell’

理解CSS3 max/min-content及fit-content等width值

2016年05月20日,星期五

在CSS3的世界里,width属性又多了几个关键字成员,fill-available, max-content, min-content, 以及fit-content。

本文就将分析与介绍这几个关键字,顺便帮忙理一下CSS世界中的尺寸概念,相信本文的内容不仅对于CSS3的学习,包括对CSS2.1整个尺寸的认知都会有一定的帮助。

阅读全文…

CSS深入理解流体特性和BFC特性下多栏自适应布局

2015年02月12日,星期四


好久没写纯粹CSS相关知识的文章了,所谓新颖的CSS3技术之流占据了现在半壁江山。本文内容还是比较传统,立足基础,深入理解。希望可以帮助相关从业者有所成长。如题,本文着重分析流体特性下的自适应布局和BFC特性下的自适应布局,demo、截图以及源代码一个都不少,耐心看完,相信会有一番收获的。

阅读全文…

CSS 相对/绝对(relative/absolute)定位系列(三)

2011年03月20日,星期日


本文是CSS 相对/绝对(relative/absolute)定位系列的第三篇,主要内容是absolute绝对定位的可用性隐藏,absolute绝对定位与等高布局,以及absolute相关的一些有趣的兼容性问题探讨。本文断断续续写了一个星期,所以行文上可能没有一气呵成之感;本周遇到些不顺心的事情,所以言语上也不如之前文章活波。但是,内容上并没有偷工减料,该有的截图还是有的,该有的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实例页面展示,和一些简单的源代码展示。时间仓促,文字可能略显粗糙,总之,希望能对您的学习有所帮助。

阅读全文…

大小不固定的图片、多行文字的水平垂直居中

2009年08月28日,星期五

想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示。
关于图片垂直居中显示,想必很多写css的人都研究过,或者说是搜寻过方法。淘宝团队似乎提供了一种不错的方法,用font-size解决IE下垂直居中的问题,是个好方法吗?是的,方法是不错,可是问题也很多:不支持img外标签的浮动,致使多图片排列时需添加额外标签;需要记住一些比例参数,上手较难;原理艰深,兼容性不稳定等。但是在我看来,这个方法不足够好!本文将提供两种更为新颖的方法,代码简洁,原理简单,上手容易,兼容性强,出错率低的方法。
css是如此的精深,我相信后来人会有更加绝妙的方法。但是,本文提供的几种实现图片垂直居中方法,一定是目前最实用的几种方法。一起来一睹为快吧!

阅读全文…