block,inline,inline-block的区别
最近正在复习，紧张地准备几天后的笔试，然后刚好看到这个地方。
block：块级元素，会换行，如div,p,h1~h6,table这些，可以设置宽高；
inline:行内元素，不换行，挤在一行显示，如span,a,i,em,strong,mark,input,button之类,不能设置宽高。
inline-block:行内块级元素，本质还是块级元素，可以设置宽高，只不过多了一个挤在一行显示的特性，但是这种特性会有一个问题，就是会有一个默认间距。
下面贴个代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试界面</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
} .div{
display:inline-block;
width: 100px;
height: 100px;
background-color: aqua;
text-align: center;
line-height: 100px;
font-size: 25px;
border:1px solid #000;
} </style>
</head>
<body>
<div class="div">111</div>
<div class="div">222</div>
<div class="div">333</div> </body>
</html>
可以看到是有默认间隙的，而要去除这种间隙的方法我目前知道两种，一种是在其父级容器中将font-size设置为0，另外一种则是将自身设置为浮动；选用任意一种方法后，默认间距都消失不见了。
另外还有一个很容易被忽略的问题，就是对于行内元素来说，无论是padding还是margin，都是只有左右的真实有效，而上下的是无效的。把上面代码改一下，换成一堆span元素，并设置每个元素的margin为30px;去掉line-height，代码如下：
.span{
margin: 30px;
width: 100px;
height: 100px;
background-color: aqua;
text-align: center;
font-size: 25px;
border:1px solid #000;
}
可以看到最后的效果是这样的：
block,inline,inline-block的区别的更多相关文章
- display：inline、block、inline-block 的区别
一.块级元素 与 行级元素 要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫 ...
- css学习--inline-block详解及dispaly:inline inline-block block 三者区别精要概括
*知识储备: 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行. 块级元素:是可以控制宽和高.margin等,并且会换行. 1.inline-block 详解 (1)一句话就是在 ...
- HTML5 display:inline、block、inline-block的区别--备用
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline、block、inline-block的区别(转)
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- block, inline和inline-block的区别
display:block元素的特点是:总是在新行上开始:高度,行高以及顶和底边距都可控制:宽度缺省是它的容器的100%,除非设定一个宽度<div>, <p>, <h1& ...
- display:inline-block，block，inline的区别与用法
一.首先要了解什么是块级元素与行级元素 块级元素 会占领页面的一行,其后多个block元素自动换行. 可以设置width,height,设置了width后同样也占领一行.同样也可以设置 margi ...
- 2017-08-20 block，inline和inline-block概念和区别
display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
- display:inline、block、inline-block区别
display:inline.block.inline-block区别 display:block就是将元素显示为块级元素. display:inline就是将元素显示为行内元素. inline-bl ...
- display:inline、block、inline-block的区别（摘抄）
display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
- display:inline、block、inline-block的区别 摘】
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
随机推荐
- TP5使用phpmailer实现邮件发送
1.从github下载PHPMailer,在vendor目录中新建文件夹phpmailer,将压缩包中的class.phpmailer.php和class.smtp.php复制到phpmailer中, ...
- win7 64位wamp2.5无法启动MSVCR110.DLL丢失听语音
从网上下载wampserver2.5 64位的PHP集成环境,根本无法使用,说是丢失了MSVCR110.DLL,然后再网上找了一大堆资料工具都无用,比如下微软的了vcredist_x64,重新卸载安装 ...
- oracle11g安装教程（注意事项及图文教程）
Oracle安装与重装注意事项 1.安装oracle(**) 注意:安装Oracle之前确定自己的主机(计算机)名要保证计算机名是英文的. 1.oracle的安装文件不要放在含有中文的目录当中,如:d ...
- JS中获取session中传过来的值对象
摘录自:http://www.360doc.com/content/11/0316/13/5790498_101627263.shtml 把某一对象置于session范围内,并在JSP页面中提取ses ...
- ESP8266重点知识
每一个mcu对应一个库文件,所以每次上传烧写arduino都需要对应的库文件,修改起来很麻烦,不如记录下来每次的库文件,或者每次都自动生成.这样效果最佳.而且我想应该是比较稳定的, 现在比较朦胧一个问 ...
- linux常用命令_1
linux中命令格式是什么? 命令 [参数选项] [文件或路径] 中括号表示可选,命令的参数与路径文件可选 参数选择表示一个命令的不同功能 命令 和 参数选项 中必有一空格,多个参数连在一起写 几乎所 ...
- python_5_模块
创:5_4_2017 修: 什么是模块? --标准库+第三方库+自定义,为实现某一方面的功能集合(变量,函数,类) 如何安装第三方库? --pip install 第三方库 如何导入和使用模块? -- ...
- JAVA中文件与Byte数组相互转换的方法
JAVA中文件与Byte数组相互转换的方法,如下: public class FileUtil { //将文件转换成Byte数组 public static byte[] getBytesByFile ...
- restful 风格的理解
rest 其实就是representation status transfer(表现层状态转换) restful 风格的API具有如下特征: 1. 每个URI 包含一种资源,而且URI ...
- android studio获取sha1签名
转载 :http://blog.csdn.net/kezhongke/article/details/42678077