inline-block和float的区别,什么时候使用
文章转载于新浪博客http://blog.sina.com.cn/s/blog_5f39af320101qckt.html
只用于学习交流
什么时候使用inline-block,什么时候使用float
什么时候使用,取决于你的设计稿跟解决方法。如果你需要文字环绕容器,那浮动是不二选择。如果你需要居中对齐元素,inline-block是个好选择。
最终,这可以归结为float跟inline-block的两种属性作用后的区别,你需要对其作出选择。
- 使用inline-block:当你需要控制元素的垂直对齐跟水平排列时,使用inline-block。
- 使用浮动:当你需要让元素环绕某一个元素时,或者需要支持旧版本ie,或者不想处理inline-block带来的空白问题时,使用浮动。
上图,把一系列元素设置了浮动,因为盒子二号宽度的关系,可以发现盒子五号被挤进去了(这些元素都脱离了文档流),这是图片排列中很常见的问题。
浮动、inline-block和图像排列
我使用inline-block主要是为了处理垂直对齐问题。我想这也是很多人使用这个属性的原因。我制作的很多站点都不可避免的带有一些图片列表。
若父元素中的图片等高,设置浮动就会工作正常。但一旦有一列图片比较高时,图片的排列就会出现问题。这是因为浮动后,图片脱离了文档流。
而inline-block由于未脱离文档流,不会出现这个问题。如果你想再创建一列图片时,不会受到上一列图片inline:block的影响。而你在使用时需要时刻注意清除浮动,当内容不断变化时这很容易产生bug。
这里有个更明显的例子来体现inline-block跟float的区别:
我制作了一个demo来展示一下两个写法效果的区别
上面的块级元素被设置了inline-block。由于他们没有脱离文档流,所以元素不会被某个过长的列挤上来。
inline-block导航
另一种inline-block的适用场景:横向导航栏。通常,我们一般会设置a元素display:block然后进行浮动来制作。有时候我会直接通过对列表元素设置display:inline来制作。如果在制作中,你需要设置不同的display属性来处理浮动,那么inline-block不失为一种更好的解决方案。
当你需要将元素排列成一行或者多行时,更倾向于考虑使用inline-block代替float。当然,直接使用table也是一种方法,他毕竟是专门用来处理横向与纵向排列的元素的。
如果你需要创建一个很复杂的包含行列的布局,table是你的最佳选择,不过你同样也可以考虑inline-block
总结
我们经常使用浮动,但浮动并不是唯一的解决方案。有时候inline-block会更好,特别是你想排列一些图片,或者横向排列链接时。
Inline-block元素带有一些行内元素的特征(横向排列),同时内部也拥有块级元素的属性。这个跟浮动很类似,只不过有些区别。
这些区别决定了你该使用哪种方案。如果你很纠结垂直对齐问题或者横向排列元素,不妨使用inline-block。如果你需要对一个元素跟围绕他的一些元素进行更多控制,你需要浮动。
当然,table也是你处理一些问题的最佳方案。
同样我想说的,这不是什么新东西,但我会通过这篇文档还有demo来介绍一些应该使用但有些人尚未使用inline-block的场景。
项目demo:
#columnContent .item_ul>li
{
flaot:left;
width:203px;
margin:3px 5px;
vertical-align:top;
text-align:left;
}
效果
菜单居中和自适应需要根据页面的宽度计算
css:
#columnContent .item_ul>li
{
display:inline-block;
width:203px;
margin:3px 5px;
vertical-align:top;
text-align:left;
*display:inline;
zoom:1;
}
菜单用ul-li标签水平排列流状显示,float:left也可实现同样的显示效果,但是float时撑开一个li标签,其他li标签会环绕,特别注意和学习float和inline-block的区别,特殊情况下利用inline-block的特殊性可以实现别样的效果
上面是在实际项目中应用,要求实现后面一张图的效果,起初li标签用的是float:left,整体样式没问题,但是展开li标签内容时,其他li标签环绕,这里又存在自适应,当页面缩小时,每行的li标签个数会减少,并且居中,曾经做过自适应和居中的计算以及考虑用table布局,现在回过头太悲区了,inline-block只需替换一个浮动样式就都解决了,细节和差异理解透彻了,才能做出更好的效果和节省更多不必要的时间
inline-block和float的区别,什么时候使用的更多相关文章
- inline-block,inline,block,table-cell,float
float:left ---------------------------------------------------------------------------------------- ...
- display:inline、block、inline-block 的区别
一.块级元素 与 行级元素 要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫 ...
- HTML5 display:inline、block、inline-block的区别--备用
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline、block、inline-block的区别(转)
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- 2017-08-20 block,inline和inline-block概念和区别
display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
- display:inline、block、inline-block的区别(摘抄)
display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
- display:inline、block、inline-block的区别 摘】
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- css菜鸟学习之block,inline和inline-block概念和区别
block,inline和inline-block概念和区别 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) ...
- (转载)display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
随机推荐
- typescript项目中import 图片时报错:TS2307: Cannot find module ‘...’
最近在用typescript写项目时,我用import来加载一个图片,webpack编译文件是会报错如下: 报错: 解决: 如果在js中引入本地静态资源图片时使用import img from './ ...
- dedicated bearer
Session Initiation Protocol (SIP) Basic Call Flow ExamplesRFC3665 intuitive, done. PDF] TS 123 401 ...
- python 面向过程和面向对象比较
面向过程 VS 面向对象 面向过程的程序设计:核心是过程二字,过程指的是解决问题的步骤,即先干什么再干什么......面向过程的设计就好比精心设计好一条流水线,是一种机械式的思维方式. 优点是:复杂度 ...
- @RequestMapping的value属性
package com.zby.controller; import javax.servlet.http.HttpServletRequest; import org.springframework ...
- laravel5.8的使用
首先,确定电脑已经安装了composer.最好是全局安装 然后打开phpstorm的控制台: composer create-project --prefer-dist laravel/laravel ...
- js中自执行函数写法
//自执行写法1 (function T(){ alert(1) })() //自执行写法2 var T1=function(){ alert(1) }(); //传值 var para1={a:1; ...
- es第三篇:Search APIs
大多数search API都是可以操作多个索引的,除了explain API. 当执行一个search API时,可以指定routing参数,去搜索特定的主分片及其副本分片.routing参数值可以是 ...
- SystemVerilog中枚举类型注意事项
enum logic {a = 'bx, d = 1'bz}; 在SystemVerilog枚举类型中当使用logic进行声明时,注意logic为四态,所以当使用时如果声明时需要x.z态需要显式声明. ...
- [原]SuperMap GIS(JavaScript) 拉框放大和缩小功能实现
版权声明:本文为博主原创文章,未经博主允许不得转载. var ZoomControl; /* * 拉框缩小 */ function ZoomOut(){ if(ZoomControl==null||Z ...
- vue中的坑 --- 锚点与查询字符串
在vue中,由于是单页面SPA,所以需要使用锚点来定位,在vue的官方文档中提到过也可以不使用锚点的情况,就是在vue-router中使用history模式,这样,在url中就不会出现丑陋的#了,但是 ...