display:inline-block与float在布局时的差异分析
来源:互联网 发布:macbook下不了软件 编辑:程序博客网 时间:2024/06/14 19:00
在布局的时候,很多设计都需要将元素排列在一行,使元素排列在一行的方法有多种,从兼容性和易用性来考虑,先介绍display:inline-block(显示为内联块)和float(浮动)。
float: 浮动,闻其名而知其意:使元素浮起来,脱离文档流,从而达到多个元素排列在一行的目的。浮动元素有哪些特征呢?如下所示:
- 支持宽高;
- 在一行显示;
- 不设置宽度时, 宽度由内容撑开 ;
- 会按照指定的顺序移动,直到碰到浮动元素,或父级的边界停止;
- 元素浮动之后会使浮动元素父级高度塌陷;
- 脱离文档流;
- 元素浮动之后,上下margin不再叠加;
- 浮动元素默认顶部对齐;
- 触发BFC。
inline-block:内联块,即既有内嵌的部分特征也具有块级元素的特征。如下所示:
- 支持宽高;
- 在一行显示;
- 代码换行会解析成空格;
- 不设置宽度时,宽度由内容撑开;
- inline-block类型元素底部默认会有一个空隙;
- inline-block类型元素上下margin不叠加;
- inline-block可设立垂直对齐方式;
- 触发BFC。
可以从这两个样式的特征中看出,它们相同的地方在于:1.支持宽高;2.在一行显示;3.不设置内容时,宽度由内容撑开;7,.上下margin不叠加以及8.触发BFC。在一行显示这一特征,决定了这两可以使元素排列在一行。那么使用差异,就得从他们不同的特征开始分析:
- 排列方向限定 。 浮动的第4个特征决定了它可以决定元素的排列顺序。float:left:元素从左至右排列,float:right:元素从右至左排列。而display:inline-block,只能从左往右。
- 是否脱离文档流。浮动元素会脱离文档流,而display:inline-block不会。所以会有这样一个现象:当第一个浮动元素或者inline-block元素已经占满一行,同时给第二个元素加margin-left:-100%,第二个浮动元素会覆盖在第二个浮动元素上面,而第二个inline-block会换行显示并再根据margin-left进行移动;
- 垂直对齐方式设置。inline-block可自主设置垂直对齐方式而浮动元素仅能顶部对齐;
- 浮动元素会父级的高度塌陷。为了避免父元素的高度塌陷,一般在使用浮动的时候,都要对这一特征进行处理:给父级设置高度或者进行清浮动处理;
- inline-block元素底部默认有一个空隙。在网页制作时,需要设置垂直对齐方式:vertical-align来进行空隙的消除;
- inline-block类型元素html代码换行时会产生空格,为了消除空格的影响,需要:在结构中将内联元素写成一行或者在样式中给内联元素父级font-size设置为0;
从上述差异分析,已经可以看出float与inline-block的优缺点:float之后,大部分情况下需要清浮动或者设置高度且只能顶部对齐。display:inline-block需在不更改默认排列方式(从左至右)的情况下才可使用,而且需要清除底部空隙和左右因为代码换行产生的空格但可以有多种对齐方式。
阅读全文
1 0
- display:inline-block与float在布局时的差异分析
- display:inline、block、inline-block的区别,与下文float相关。
- 基于display:inline-block 的列表布局
- css之display:inline-block与float区别
- html的display的block,inline与inline-block区别
- display:inline与float:left的区别
- display:inline-block,block,inline的区别与用法
- display:inline-block,block,inline的区别与用法
- display:inline-block,block,inline的区别与用法
- display:inline-block 和float:left 的区别
- display:inline-block 和 float:left的区别
- inline-block与float
- display:inline-block列表布局
- 浮动布局-基于display:inline-block的列表布局
- 浮动布局-基于display:inline-block的列表布局
- 浮动布局-基于display:inline-block的列表布局
- 浮动布局 VS 基于display:inline-block的列表布局
- css inline-block 与 float的使用
- h3c 实验设备型号整理 笔记
- 大数C++板子
- web前端基础入门学习第三天css
- 451. Sort Characters By Frequency
- @RequestMapping springmvc helloworld 2
- display:inline-block与float在布局时的差异分析
- 转载 IOS Xcode中快捷键大全
- 堆排序构建大根堆 java
- Selenium操作CNKI(中国知网)网站的远见搜索
- 大数模板
- 用Java2D画出树的结构(是不是感觉标题很熟悉)
- 1007. 素数对猜想 (20)
- Java中常见OOM的场景及解决方法
- Lintcode124 Longest Consecutive Sequence solution 题解