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函数,所有我们不用显示地去 ...
随机推荐
- python selenium-webdriver 登录验证码的处理（十二）
很多系统为了防止坏人,会增加各样形式的验证码,做测试最头痛的莫过于验证码的处理,验证码的处理一般分为三种方法 1.开发给我们设置一个万能的验证码: 2.开发将验证码给屏蔽掉: 3.自己识别图片的上的千 ...
- spring事务详解（四）测试验证
系列目录 spring事务详解(一)初探事务 spring事务详解(二)简单样例 spring事务详解(三)源码详解 spring事务详解(四)测试验证 spring事务详解(五)总结提高 一.引子 ...
- Python 标准库笔记(1) — String模块
原文出处: j_hao104 String模块包含大量实用常量和类,以及一些过时的遗留功能,并还可用作字符串操作. 1. 常用方法 常用方法 描述 str.capitalize() 把字符串的首字母大 ...
- JavaScript 版本的 RSA加密库文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 微信小程序计算金额长度异常解决办法
今天在做微信小程序,在测试的时候偶然出现了一些问题,如下图. 心中的一阵不爽猛然袭来,完全是搞事情哈! 然后经过一番探索,用toFixed方法搞定了,此方法是对值进行四舍五入的. 解决后点了一大堆控制 ...
- WebApi Owin OAuth
Microsoft.Owin.Host.SystemWeb Owin Microsoft.Owin Microsoft.Owin.Diagnostics Owin Micros ...
- Stripes视图框架实现纯Java代码控制表现层参考文档
https://blog.csdn.net/boonya/article/details/14101477 Stripes是一个开放源码的Web应用程序框架的基础上的模型 - 视图 - 控制器(MVC ...
- Windows硬链接 软链接 符号链接 快捷方式
http://blog.nsfocus.net/shortcuthard-linkjunction-pointsymbolic-link/ Windows支持4种”链接”机制,分别是shortcut. ...
- Git世界历险记
Git-版本管理器 Git ||属于分散型版本管理系统,是为版本管理而而设计的软件.(Linux的创始人Linus Torvalds在2005年开发了Git的原型程序,在此之前人们大多选用Subve ...
- 【转】Lombok 安装、入门 - 消除冗长的 java 代码
前言: 逛开源社区的时候无意发现的,用了一段时间,觉得还可以,特此推荐一下. lombok 提供了简单的注解的形式来帮助我们简化消除一些必须有但显得很臃肿的 java 代码.特别是相对于 ...