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& ...
随机推荐
- dede首页调用分类信息
格兰斯-与你共同开创门窗定制5G时代 5G战略--明确的,没有歧义的明亮奥尼克斯的观点与追求 {dede:channelartlist row=1} {dede:arclistsg r ...
- 邓_ Php·魔术方法
================================================ 1.__tostring() 用于定义输出对象引用时调用 常用于打印一些对象的信息 必须有返回值 ...
- 注解Responsebody RequestBody RequestMapping
编写代码时候很容易遗漏注解,尤其比较重要的注解,调试很久也找不到原因,在处理页面请求异常时,如果后台正常,就是发现没有把想要的对象传到页面就注意下看注解是否缺失?例如:/** * @Author gj ...
- ngRx 官方示例分析 - 4.pages
Page 中通过构造函数注入 Store,基于 Store 进行数据操作. 注意 Component 使用了 changeDetection: ChangeDetectionStrategy.OnPu ...
- 堡垒机之paramiko模块
一.paramiko简单介绍 场景预设: 很多运维人员平时进行维护linux/unix主机时候,无非通过ssh到相应主机操作,那么一旦主机有成千上百台,那该如何应对,这时候我们需要批处理工具,基于py ...
- git 简单入门
首先了解一下git的是什么: [百度百科解释]Git是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理.[2] Git 是 Linus Torvalds 为了帮助管理 ...
- mysql-SQL优化总结
1.查询首先考虑在where和order by设计的列上建立索引,尽量避免全表扫描. 2.尽量避免在where子句中对字段进行null值判断,否则将导致引擎放弃使用索引而进行全表扫描. select ...
- 基于jQuery表单快速录入数据功能
一.功能介绍:完全依靠jQuery,表单table新增行(按键盘tab增一行,按esc删一行),也可以加一个新增行按钮点击新增多行,这里就不多说了~~ 二.该功能主要实现技术: 1,总体.NET MV ...
- linux 中 ping的回传值
今天在学习鸟哥私房菜的过程中,不明白ping的回传值是怎么设置的,后来网上找的结果了,特此记录一下 1 题目大意是指,ping一个网段的机器,如果可以通,就显示UP,如果不通就显示Down,其中一 ...
- CentOS 下开启PHP错误提示
我也是傻逼,一直在找图片无法上传的原因,这么久了才意识到自己没有在Linux系统的服务器下开启错误提示. 正文 默认模式下的apache是没有开启错误语法提示的,修改php.ini文件.不同的安装,p ...