文章关键字 ‘display:inline-block’

CSS深入理解vertical-align和line-height的基友关系

2015年08月30日,星期日

CSS深入理解vertical-align和line-height的基友关系
本文深入探讨vertical-align和line-height之间的关系,属于中长篇,有很多其他地方看不到的知识点。实例效果就在文章页面上,因此,请使用合适的浏览器查看本文。截图丰富,源代码展示详尽,相信本文的内容会对您的学习有所帮助的。

阅读全文…

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

2015年02月12日,星期四


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

阅读全文…

Chrome absolute绝对定位display/visibility渲染bug

2015年01月10日,星期六

一般我们对Chrome浏览器的评价是:Chrome好棒!Chrome好潮!Chrome就是多来A梦,要什么有什么!但是,再好的奶茶也会有过期的时候。很多次遇到,Chrome下的渲染表现是最糟糕的那个。比方说本文要介绍的两个bug就是Chrome浏览器下特有的,到底是什么bug呢?点击去瞅瞅就知道啦!

当然,除了bug展示,也提供了解决方案。有demo,有截图,有必要的源代码展示,总之希望本文的内容能够对您的学习有所帮助。

阅读全文…

去除inline-block元素间间距的N种方法

2012年04月24日,星期二

真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距。
我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问题。
这类间距有时会对我们布局,或是兼容性处理产生影响,需要去掉它,该怎么办呢?
本文的内容就是详尽展示各种去除这类元素间距的方法。一如既往,有必要的截图、demo页面以及源代码展示等。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

display:inline-block/text-align:justify下列表的两端对齐布局

2011年03月13日,星期日


本文可以说是本月的重磅文章之一,讲的是如何利用text-align:justify在display:inline-block列表布局基础上实现列表元素的两端对齐布局,分门别类,由浅入深,逐层深入,并有一些总结性的注意事项。一如既往,本文不仅提供丰富的截图示意,提供必要的源代码展示,及时雨般的demo页面,更上一层楼,还提供总结性的表格数据。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…