css之inline-block
来源:互联网 发布:linux 查看进程的流量 编辑:程序博客网 时间:2024/05/19 06:38
这是display的一个属性,规定元素生成的框类型为“行内块元素”,早在CSS2已经被广泛支持。所谓行内块元素,就是既有行内元素的性质(排在一行)又有块级元素的性质(能设置宽高)。当然行内元素有占位属性的也能设置宽高,比如IMG,这里只是针对绝大多数。
既然属性的兼容性很好,那么对于前端来说是很激动的一件事。所以我一般在需要横排的结构数量较少时会选择该属性。
inline-block默认间距。
这个问题之前一直没有发现,在我写一个选项卡的list的时候用到了该属性,在没有给任何margin的情况下各个tabs之间存在了5px左右的间距,在检查CSS初始化没有问题的时候呢,我将问题的产生原因定位到了inline-block上,结果网上一搜果然如此。各大神早对这个问题的来龙去脉搞得很清楚了。
产生原因:标签段之间的空格导致的,这不是BUG,应该是设计语义化所致。
解决办法:①去除html中空格(不推荐)②负margin③font-size:0④字符间距处理等。使用情况
以上默认间距的处理办法都是一些前端大神已经整理过的,当然还有很多的解决办法,写这篇文章的重点不是怎么去解决默认间距的问题,而是明白怎么去使用inline-block.当明白了这个属性的特点和一些注意事项后,在以后布局使用该属性会更加得心应手。
①宜少不宜多,对于三个以下的横排元素用该属性会比较好,普通的导航或需要脱离文档定时触发的元素还是老老实实用float。
②横排元素间距大于inline-block的默认间距的时候可以用该属性。如果小于或者没有不推荐,原因是用兼容性的写法去搞定默认样式会带来不必要的问题。如果非要这样做,我个人推荐使用②的方法。
- css之inline-block
- CSS之display:inline、block、inline-block
- css之display:inline-block
- css布局之inline-block
- css学习之路(5)--display:inline、block、inline-block的区别及inline-block兼容
- css之min-width 和 inline-block
- css学习笔记之 inline-block
- css基础学习之--inline-block
- css属性之display:none、block、inline
- CSS{display:inline-block}
- css inline block兼容
- [CSS]display:inline-block
- css inline-block
- CSS display:block inline
- css样式,inline-block
- CSS display:inline-block
- css中的inline-block
- css中的inline-block
- 如何很好的使用SVN
- Android studio下使用ShareSDK
- ListView与Adapter
- JS网址正则验证
- Jenkins中使用ant管理Android应用开发生命周期
- css之inline-block
- android opencv 环境搭建
- 兔子问题
- Linux(CentOS) SVN服务器搭建+同步更新+多版本库+开机启动
- Jenkins入门系列之——02第二章 Jenkins安装与配置
- Android与服务器网站交互(一)
- SpringMVC利用AOP实现自定义注解记录日志
- oracle----------查询
- iOS UINavigationController的iOS 7的手势滑动返回功能