inline-block的理解
首先我们大概区分下 inline与inline-block、block的区别，
官方定义如下：
inline：内联元素，从左到右依次排列，宽度高度由内容决定；
block：块级元素，独占一行，可以设定宽高；
inline-block：内联块元素，从左到右依次排列，可以设定宽高。
这里我们需要注意的地方有：
1.在有多个内容高度不一样的 内联元素的时候， 内联元素的位置是从最高的高度范围内从下到上排列的，如下：
<div>
小字体<span style="font-size:50px">大字体</span>
</div>
样式如下：
2.inline-block在排列的时候，元素和元素之间有空隙，如下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.lineblock{
width:100px;
height:100px;
background-color:green;
display:inline-block;
}
</style>
</head>
<body>
<div class="lineblock"></div>
<div class="lineblock"></div>
<div class="lineblock"></div>
<div class="lineblock"></div>
</body>
</html>
效果如下：
对此，我们又两种解决方案：
（1）设置容器的font-size:0，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
#container{
font-size:0;
}
.lineblock{
width:100px;
height:100px;
background-color:green;
display:inline-block;
}
</style>
</head>
<body>
<div id="container">
<div class="lineblock"></div>
<div class="lineblock"></div>
<div class="lineblock"></div>
<div class="lineblock"></div>
</div>
</body>
</html>
效果如下：
完美解决，不过font-size:0在容器里面有文字的时候，比较麻烦，还得重新设置容器中文字的大小，而且有的浏览器会失效，比如IE7或者低版本的chrome。
（2）设置letter-spaceing的值，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
#container{
letter-spacing:-4px;
}
.lineblock{
width:100px;
height:100px;
background-color:green;
display:inline-block;
}
</style>
</head>
<body>
<div id="container">
<div class="lineblock"></div>
<div class="lineblock"></div>
<div class="lineblock"></div>
<div class="lineblock"></div>
<div class="lineblock"></div>
</div>
</body>
</html>
但是有个问题，中间的间隙变的不一样了，可以解决间隙的问题，但是有点勉强
（3）把元素和元素之间的换行去掉，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.lineblock{
width:100px;
height:100px;
background-color:green;
display:inline-block;
}
</style>
</head>
<body>
<div id="container">
<div class="lineblock"></div><div class="lineblock"></div><div class="lineblock"></div>
<div class="lineblock"></div>
<div class="lineblock"></div>
</div>
</body>
</html>
效果如下：
，我们发现不换行，则没有空格，换行则有空格，这是因为浏览器中对HTML文档流解析的时候，把空格解析为空格了，所以就会有间隙，对于inline元素的布局同理，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
我是代码中的第一行
我是第二行
</body>
</html>
效果如下：
（4）这种也是我们解决间隙常用到的一中方法，设置容器的font-size:0，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
#container{
font-size:0;
}
.lineblock{
width:100px;
height:100px;
background-color:green;
display:inline-block;
}
</style>
</head>
<body>
<div id="container">
<div class="lineblock"></div><div class="lineblock"></div><div class="lineblock"></div>
<div class="lineblock"></div>
<div class="lineblock"></div>
</div>
</body>
</html>
效果如下：
讲了这么多，其实就为了了解一句话：多个inline 、inline-block元素的换行在浏览器中会解析为空格，希望对大家有帮助。
inline-block的理解的更多相关文章
- 对于block的理解,block的面试题
1.block跟swift中的闭包(closure)基本一样,都常用于值的回调,特别是在多线程的网络请求回调中,使用起来极为方便. 2.block的开头是"^",接着是由小括号所报 ...
- Block 朴实理解
转载自:http://www.cnblogs.com/lzz900201/archive/2013/04/17/3025340.html block是个什么玩意儿 Block是Apple Inc.为C ...
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- inline,block,inline-block解析
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- inline,block,inline-block的区别
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...
- 块状元素和内联元素 【inline block】
// 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...
- inline, block, and inline-block
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- Objective-C block深入理解
一.block是什么? block是带有自动变量(局部变量)的匿名函数.它是C语言的扩展功能,C语言标准并不支持block. block是Objective-C的闭包实现,正如C++中的Lambda表 ...
- inline-block,inline,block,table-cell,float
float:left ---------------------------------------------------------------------------------------- ...
- c++ inline关键字的理解
1. inline是实现修饰符,而非声明修饰符,所以应该用于实现部分的修饰(你也可以放置inline在声明,但是没有必要) 2. 所有中类中定义的函数都默认声明为inline函数,所有我们不用显示地去 ...
随机推荐
- 修改windows7 的管理员密码
某天,公司财务同事的电脑出现了一个相当奇葩的现象,有些程序不能用了,经过查看,发现本是管理员的账户变得只有一个users用户组了 造成程序在运行时,无权限修改一些文件,造成程序无法启动 my god, ...
- 使用LAP数据集进行年龄训练及估计
一.背景 原本是打算按<DEX Deep EXpectation of apparent age from a single image>进行表面年龄的训练,可由于IMDB-WIKI的数据 ...
- ORA-00984: 列在此处不允许 SQL parse error location
ORA-00984: 列在此处不允许SQL parse error location Oracle 插入数据的时候一直提示列在此处不允许.网上搜索答案说是类型不匹配的多,但我的错误确是一个低级错误 ...
- 使用velodyne16线激光雷达跑loam-velodyne
一.velodyne-VLP16使用教程 推荐网址: http://blog.csdn.net/littlethunder/article/details/51920681 https://www.c ...
- [UE4]Overlap Event 碰撞事件
一.对于VR中角色的手模型,一般是在角色中另外添加一个球型碰撞体 二.并且一定要勾选“Generate Overlap Events(触发重叠事件)”选项(默认状态是勾选的) 三.添加开始碰撞事件 ...
- js 合并多行表格
最近在整理之前的工作记录,有很多信息是借鉴他人,亲测有效的,遗憾的是当初记录时没有留下来源,如侵权请联系fourOfour@163.com. 1.autoRowSpan函数的第一个参数是table的i ...
- 游戏AI
玩游戏太累了,我或许可以写一个机器人帮我玩游戏发QQ发空间啥的
- Android几种视频播放方式，VideoView、SurfaceView+MediaPlayer、TextureView+MediaPlayer,以及主流视频播放器开源项目
简单的说下一Android的几种视频播放功能: 1.VideoView:最简单的视频播放 <FrameLayout xmlns:android="http://schemas.andr ...
- spring事务学习笔记
事务管理器 default使用数据库默认的隔离级别
- java生成word
import freemarker.template.Configuration; import freemarker.template.Template; import javax.servlet. ...