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函数,所有我们不用显示地去 ...
随机推荐
- JVM-crash查看hs_err_pid.log日志
参考链接: https://www.cnblogs.com/shiyangxt/archive/2009/01/06/1370627.html https://blog.csdn.net/chenss ...
- Rabbit MQ
前言: MQ 是什么?队列是什么,MQ 我们可以理解为消息队列,队列我们可以理解为管道.以管道的方式做消息传递. 场景: 1.其实我们在双11的时候,当我们凌晨大量的秒杀和抢购商品,然后去结算的时候, ...
- java注解篇
@SuppressWarnings注解 该批注的作用是给编译器一条指令,告诉它对被批注的代码元素内部的某些警告保持静默. 允许您选择性地取消特定代码段(即,类或方法)中的警告.其中的想法是当您看到警告 ...
- 【译】Optaplanner开发手册本地化: (0) - 前言及概念
在此之前,针对APS写了一些理论性的文章:而对于Optaplanner也写了一些介绍性质,几少量入门级的帮助初学者走近Optaplanner.在此以后,老农将会按照Optaplanner官方的用户手册 ...
- SSH 服务配置
服务端 启用使用密钥登录 登录到服务器 检查是否存在.ssh文件夹,如果没有则创建该文件夹 $ mkdir ~/.ssh $ chmod 700 ~/.ssh 检查公钥列表文件是否存在,如果没有则创建 ...
- 未来-IOT-Aliyun：阿里云 IOT - 开发者社区
ylbtech-未来-IOT-Aliyun:阿里云 IOT - 开发者社区 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 1. https://dev.iot. ...
- 7.12 vowels.c 程序
7.12 vowels.c 程序 #vowels.c -- 使用多重标签 #include <stdio.h> int main(void) { char ch; int a_ct, e_ ...
- webview之如何设计一个优雅健壮的Android WebView？（下）(转)
转载:https://iluhcm.com/2018/02/27/design-an-elegant-and-powerful-android-webview-part-two/ (这篇文章写得有点晚 ...
- SketchUp 建模练习（一）从图像建模运货木板 Pallet
软件环境 SketchUp Pro 2017 GIMP 2.10.6 参考书籍 Google SketchUp for Game Design 作者:Robin de Jongh 运货木板效果图 制作 ...
- 5、分布式缓存Redis之bitmap、setbit
基本语法: 1)SETBIT redis 127.0.0.1:6379> setbit KEY_NAME OFFSET VALUE //该命令用于对 key 所储存的字符串值,设置或清除指定偏移 ...