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& ...
随机推荐
- Spark算子--reduceByKey
reduceByKey--Transformation类算子 代码示例 result
- hbase伪分布式安装（单节点安装）
hbase伪分布式安装(单节点安装) http://hbase.apache.org/book.html#quickstart 1. 前提配置好java,环境java变量 上传jdk ...
- Spark学习笔记3（IDEA编写scala代码并打包上传集群运行）
Spark学习笔记3 IDEA编写scala代码并打包上传集群运行 我们在IDEA上的maven项目已经搭建完成了,现在可以写一个简单的spark代码并且打成jar包 上传至集群,来检验一下我们的sp ...
- Java中的SerialVersionUID
Java中的SerialVersionUID 序列化及SergalVersionUID困扰着许多Java开发人员.我经常会看到这样的问题,什么是SerialVersionUID,如果实现了Serial ...
- c# gdi设置画刷透明
使用solidBrush新建画刷,定义画刷的颜色为透明色 Brush b = new SolidBrush(Color.FromArgb(50, Color.Green)); 这里的50是透明度的设置 ...
- (2-2)SpringCloud-服务注册到Eureka Server集群并消费
服务注册到Eureka Server集群 在(2-1)SpringCloue-Eureka实现高可用注册中心中我们搭建好了高可用的Eureka注册中心,下面我们要把服务注册到Eureka Server ...
- .NET: 谈谈共享项目 (Shared Project) 的使用
从 Visual Studio 2015 起,共享项目 (Shared Project) 作为新的一种项目类型被添加到项目模板列表中,它的主要目的是使多个不同类型的项目之间可以共享代码或资源.相比它的 ...
- JS正则表达式的基础用法
RegExp(正则表达式)对象 正则表达式是一个描述字符模式的对象,可以处理更复杂的字符串.进行匹配替换. 常用的修饰符: i/m/g 使用方法: [声明方法一: new RegExp(value)] ...
- centos7创建新用户
创建新用户 创建一个叫xiaoming的用户: [root@192 ~]# adduser xiaoming 为这个用户初始化密码,linux会判断密码复杂度,不过可以强行忽略: [root@192 ...
- springMVC中@RequestParam和@RequestBody注解的用法
springMVC中@RequestParam注解用在Controller层获解析.提取参数,当然你也可以用request.getParameter("name")来获取参数,而@ ...