display:inline-block 和 float 水平排列区别?
2016-05-09 14:23
302 查看
文档流(Document flow):浮动元素会脱离文档流,并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然,周围元素不会环绕这个元素,你也不可能通过清除inline-block就让一个元素跑到下面去。
水平位置(Horizontal position):很明显你不能通过给父元素设置text- align:center让浮动元素居中。事实上定位类属性设置到父元素上,均不会影响父元素内浮动的元素。但是父元素内元素如果设置了 display:inline-block,则对父元素设置一些定位属性会影响到子元素。(这还是因为浮动元素脱离文档流的关系)。
垂直对齐(Vertical alignment):inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你可以通过vertical属性设置这个默认基线,但对浮动元素这种方法就不行了。这也是我倾向于inline-block的主要原因。
空白(Whitespace):inline-block包含html空白节点。如果你的html中一系列元素每个元素之间都换行了,当你对这些元素设置inline-block时,这些元素之间就会出现空白。而浮动元素会忽略空白节点,互相紧贴
IE6和IE7:Ie67对此属性部分支持。如果你要兼容这些浏览器,必须解决这个问题。这不是个大问题,但值得留意一下。
关于第4条空白节点的解决方案
[b]删除html中的空白:不要让元素之间换行,这可能比较蛋疼,但也是一种方法,特别是你元素不多的时候。[/b]
[b]使用负边距:你可以用负边距来补齐空白。但你需要调整font-size,因为空白的宽度与这个属性有关系。我认为是0.25em,但我不确定。如果有人知道可以留言告诉我。[/b]
[b]给父元素设置font-size:0:不管空白多大,由于空白跟font-size的关系,设置这个属性即可把空白的宽度设置为0.在实际使用的时候,你还需要给子元素重新设置font-size。[/b]
水平位置(Horizontal position):很明显你不能通过给父元素设置text- align:center让浮动元素居中。事实上定位类属性设置到父元素上,均不会影响父元素内浮动的元素。但是父元素内元素如果设置了 display:inline-block,则对父元素设置一些定位属性会影响到子元素。(这还是因为浮动元素脱离文档流的关系)。
垂直对齐(Vertical alignment):inline-block元素沿着默认的基线对齐。浮动元素紧贴顶部。你可以通过vertical属性设置这个默认基线,但对浮动元素这种方法就不行了。这也是我倾向于inline-block的主要原因。
空白(Whitespace):inline-block包含html空白节点。如果你的html中一系列元素每个元素之间都换行了,当你对这些元素设置inline-block时,这些元素之间就会出现空白。而浮动元素会忽略空白节点,互相紧贴
IE6和IE7:Ie67对此属性部分支持。如果你要兼容这些浏览器,必须解决这个问题。这不是个大问题,但值得留意一下。
关于第4条空白节点的解决方案
[b]删除html中的空白:不要让元素之间换行,这可能比较蛋疼,但也是一种方法,特别是你元素不多的时候。[/b]
[b]使用负边距:你可以用负边距来补齐空白。但你需要调整font-size,因为空白的宽度与这个属性有关系。我认为是0.25em,但我不确定。如果有人知道可以留言告诉我。[/b]
[b]给父元素设置font-size:0:不管空白多大,由于空白跟font-size的关系,设置这个属性即可把空白的宽度设置为0.在实际使用的时候,你还需要给子元素重新设置font-size。[/b]
相关文章推荐
- 发现 git忽略没用
- App开发需要了解的基本技术
- [z] error C2471 错误
- linux下安装libsvm
- 多线程简介(多线程001)
- iOS 字符属性NSAttributedString描述
- Python中的Numpy入门教程
- Oracle insert hang引发的行锁等待
- Python 教程推荐
- [No00008F]PLSQL自动登录,记住用户名密码&日常使用技巧
- Android开发学习总结(六)—— APK反编译
- Nexus 搭建maven 私有仓库
- d3.js——箭头的绘制
- ProgressBar简单使用
- Nexus 搭建maven 私有仓库
- jquery和js进行添加样式
- VS 之 InstallShield Limited Edition for Visual Studio 2015 图文教程
- poj 2778 AC自动机构建有向图 + 邻接矩阵快速幂
- ubuntu14.04安装jdk
- ecshop二次开发--添加普通时间显示