inline-block总结
来源:互联网 发布:jdk1.8源码下载官网 编辑:程序博客网 时间:2024/06/04 18:36
众所周知,display属性经常用到了几个属性:inline,block,inline-block,下面先来各自回顾一下吧:
display:inline也就是行内元素,是将元素排列成一行显示,span, a, label, input, img, strong, em等就是默认行内元素,然后行内元素不能改变高度,行高,底边距,而
宽度也是自适应的,也是无法改变;
dispaly:block则是块级元素,它默认在文本流中占一行,高度,行高,底边距都是可以改变的,宽度默认100%, h1~h6,ul li等就是块元素的例子。
而display:inline-block则是综合了inline和block的一个属性,它默认是行内元素,但是可以改变宽高,然后不是所有的浏览器都兼容。目前FF,chrome,opera的问题
都不大了,那么IE呢?
微软MSDN开发者社区是这样说的:
——————————————————
The inline-block value is supported starting with Internet Explorer 5.5. You can use this value to give an object a layout without specifying the object’s height or width.
——————————————————
那么IE5.5以上都是支持的,不过要通过一点hack手段实现,这里涉及IE的haslayout只是,详情可参考这里
#1 兼容ie的inline-block写法
所以要想兼容inline-block,常用的做法是
若是行内元素,则直接添加display:inline-block即可:
.span{display:inline-block;}
而如果是块级元素,如div首先要定义display:inline-block,然后再定义*display:inline,使其声明为行内元素,然后再加zoom:1激发haslayout:
1.div{display:inline-block;*display:inline;*zoom:1;}
效果和上面一样,大家可以试试。
- inline-block总结
- inline-block元素总结
- inline block inline-block
- block inline inline-block
- 关于display:inline-block问题总结
- inline-block
- inline-block
- inline-block
- inline-block
- block & inline
- inline-block
- inline-block
- inline-block
- display:inline、block、inline-block
- display:inline、block、inline-block
- block,inline和inline-block
- 区分block,inline,inline-block
- display:inline、block、inline-block
- poj3176 dp
- 如何从ST官网获取标准外设库文件
- HDU 2586 How far away ? (离线LCA Tarjan算法模板)
- 又来了,上班又开始了,奋斗还得继续....
- Hadoop-2.6.0集群HA搭建
- inline-block总结
- 计算机字节对齐
- 《第一行代码-Android》学习笔记(二十三)
- Codeforces 514E Darth Vader and Tree DP + 矩阵快速幂
- 为CToolBar工具栏窗口按钮添加ICON图标需要注意的一点
- LeetCode(2) Add Two Numbers实现
- CVS导出所有项目提交注释的Eclipse插件(类似于svn的showhistory)
- iOS应用如何实现64位的支持
- android的UI开发中如何确定登陆界面