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函数,所有我们不用显示地去 ...
随机推荐
- Spring Cloud(Dalston.SR5)--Config 集群配置中心-刷新配置
远程 SVN 服务器上面的配置修改后,需要通知客户端来改变配置,需要增加 spring-boot-starter-actuator 依赖并将 management.security.enabled 设 ...
- 通用Mapper简单使用
通用Mapper 1.通用Mapper的使用 1.0.实体类 @Table(name = "tb_user") public class User { @Id @Generated ...
- h5交互动画如何制作
最近几年随着h5的兴起,复杂的h5动画,甚至是交互动画类型的产品不断涌现,尤其在课件产品方面,很多公司都有相关需求,最近很多h5开发工程师想了解相关方面的技术. 针对h5,如果是简单的动画效果,可以考 ...
- os常用模块，json，pickle，shelve模块，正则表达式（实现运算符分离），logging模块，配置模块，路径叠加，哈希算法
一.os常用模块 显示当前工作目录 print(os.getcwd()) 返回上一层目录 os.chdir("..") 创建文件包 os.makedirs('python2/bin ...
- 工控随笔_12_西门子_WinCC的VBS脚本_03_变量类型
说到编程语言,总是绕不开数据类型,因为数据类型决定了数据可以进行什么样的操作.同时数据类型 从广义上来说是一种数据结构,在过程式编程的过程中,曾经有过这样一种说法: 程序 = 数据结构 + 算法 可见 ...
- 自动编译批处理设置（MSBuild）
基本设置,如果想更改可以设置. @echo off rem --------------------------------- rem ----作成者:李暁賓--------------- rem - ...
- 京东饭粒捡漏V1.13
20180629 更新 V1.131.解决下单异常问题:2.增加秒杀价格:3.增加购买数量: 功能介绍1.京东商城专用,支持饭粒模式下单,自己获得京豆返利 2.捡漏模式:帮助用户监控抢购商品,有库存的 ...
- PHP 概览
运行环境 Windows Linux Centos Ubuntu MacOS 编辑器 编码风格 依赖管理 Composer 发布包 热门框架 热门类库 热门系统 架构支持 源码分析 扩展开发
- gin的url查询参数解析
gin作为go语言最知名的网络库,在这里我简要介绍一下url的查询参数解析.主要是这里面存在一些需要注意的地方.这里,直接给出代码,和运行结果,在必要的地方进行分析. 代码1: type Struct ...
- ES6系列之箭头函数
本系列是在平时阅读.学习.实际项目中有关于es6中的新特性.用发的简单总结,目的是记录以备日后温习:本系列预计包含let/const.箭头函数.解构.常用新增方法.Symbol.Set&Map ...