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函数,所有我们不用显示地去 ...
随机推荐
- 【SQLServer】附加数据库失败
一个参考:https://blog.csdn.net/zjx86320/article/details/25562361 如果类似Administrator.Everyone等都依照网上的权限改过之后 ...
- mysql数据备份及恢复
备份工具 mysqldump mysqldump是mysql和mariadb上最好的备份工具之一,免费开源. mysqldump 首先查询每个数据库和每个表的结构与数据,然后把查出的所有内容导出到文本 ...
- 漫画赏析：Linux 内核到底长啥样（转）
知乎链接:https://zhuanlan.zhihu.com/p/51679405 来自 http://TurnOff.us 的漫画 “InSide The Linux Kernel” 本文转载自: ...
- maven：Fatal error compiling: 无效的目标 发行版: 1.8 -> [Help 1]
https://blog.csdn.net/kkgbn/article/details/72777750
- 测试开发学习进阶教程 视频&PDF
测试开发学习进阶教程 视频&PDF,7天后失效,更多学习资料加Q群 https://pan.baidu.com/s/196KEo791NeZKyfV_E-36Uw 提取码: 41vu ...
- 双网卡单IP实现网卡冗余与负载均衡
WINDOWS下: 所谓双网卡,就是通过软件将双网卡绑定为一个IP地址,这个技术对于许多朋友来说并不陌生,许多高档服务器网卡(例如intel8255x系列.3COM服务器网卡等)都具有多网卡绑定功能, ...
- win10 vs2015源码编译opencv、opencv_contrib、Tesseract
1.软件包准备 opencv源码包地址: 官网 github opencv_contrib源码包地址: github Tesseract源码包地址: ...
- ARC085F NRE
看了题解. 题目大意 你有一个长度为 \(N\) 的全为 \(0\) 的序列 \(A\),给你一个长度同样为 \(N\) 的 \(0/1\) 序列 \(B\),允许你对把 \(A\) 的一些区间中的数 ...
- 2016310Exp4 恶意代码及分析
网络对抗 Exp4 恶意代码分析 实验内容 系统运行监控 恶意软件分析 报告评分 基础问题回答 实践目标 实验内容 1. 系统运行监控——计划任务 2. 系统运行监控——利用Sysmon 3.1恶意软 ...
- supersocket 遇到的Failed to initialize 和 log4net用法
使用Bootstrap来通过配置启动SuperSocket的时候总是显示Failed to initialize! , 官网配置中 <superSocket> <servers&g ...