本文深入探讨vertical-align和line-height之间的关系,属于中长篇,有很多其他地方看不到的知识点。实例效果就在文章页面上,因此,请使用合适的浏览器查看本文。截图丰富,源代码展示详尽,相信本文的内容会对您的学习有所帮助的。
文章关键字 ‘display:inline-block’
CSS深入理解vertical-align和line-height的基友关系
2015年08月30日,星期日标签:baseline, display:inline-block, inline box模型, line-height, text-align:justify, vertical-align, 两端对齐, 空白, 间隙
发布在 CSS相关 | 112 条评论 »
CSS深入理解流体特性和BFC特性下多栏自适应布局
2015年02月12日,星期四
好久没写纯粹CSS相关知识的文章了,所谓新颖的CSS3技术之流占据了现在半壁江山。本文内容还是比较传统,立足基础,深入理解。希望可以帮助相关从业者有所成长。如题,本文着重分析流体特性下的自适应布局和BFC特性下的自适应布局,demo、截图以及源代码一个都不少,耐心看完,相信会有一番收获的。
标签:BFC, display:inline-block, display:table-cell, inline-block, overflow:hidden, table-cell, 布局, 流动性布局, 自适应布局
发布在 CSS相关 | 64 条评论 »
Chrome absolute绝对定位display/visibility渲染bug
2015年01月10日,星期六一般我们对Chrome浏览器的评价是:Chrome好棒!Chrome好潮!Chrome就是多来A梦,要什么有什么!但是,再好的奶茶也会有过期的时候。很多次遇到,Chrome下的渲染表现是最糟糕的那个。比方说本文要介绍的两个bug就是Chrome浏览器下特有的,到底是什么bug呢?点击去瞅瞅就知道啦!
当然,除了bug展示,也提供了解决方案。有demo,有截图,有必要的源代码展示,总之希望本文的内容能够对您的学习有所帮助。
标签:absolute, bug, chrome, display:inline-block, translateZ, visibility, webkit, 渲染, 重绘
发布在 CSS相关 | 22 条评论 »
去除inline-block元素间间距的N种方法
2012年04月24日,星期二真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距。
我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问题。
这类间距有时会对我们布局,或是兼容性处理产生影响,需要去掉它,该怎么办呢?
本文的内容就是详尽展示各种去除这类元素间距的方法。一如既往,有必要的截图、demo页面以及源代码展示等。总之,希望本文的内容能够对您的学习有所帮助。
标签:display:inline-block, display:inline-table, display:table, font-size, HTML5, letter-spacing, margin负值, word-spacing, 字体
发布在 CSS相关 | 99 条评论 »
display:inline-block/text-align:justify下列表的两端对齐布局
2011年03月13日,星期日
本文可以说是本月的重磅文章之一,讲的是如何利用text-align:justify在display:inline-block列表布局基础上实现列表元素的两端对齐布局,分门别类,由浅入深,逐层深入,并有一些总结性的注意事项。一如既往,本文不仅提供丰富的截图示意,提供必要的源代码展示,及时雨般的demo页面,更上一层楼,还提供总结性的表格数据。总之,希望本文的内容能够对您的学习有所帮助。
标签:display:inline-block, inline, inline-block, text-align:justify, 两端对齐, 列表, 布局
发布在 CSS相关 | 76 条评论 »