文档章节

block、inline、inline-block对比

路小磊
 路小磊
发布于 2015/07/23 22:55
字数 314
阅读 73
收藏 5
点赞 0
评论 0

display:block

  1. block元素会独占一行,多个block元素会各自新起一行。默认情况下,block元素宽度自动填满其父元素宽度。
  2. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
  3. block元素可以设置margin和padding属性。

display:inline

  1. inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
  2. inline元素设置width,height属性无效。
  3. inline元素的margin和padding属性,水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

display:inline-block

  1. 简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

本文转载自:http://www.cnblogs.com/KeithWang/p/3139517.html

共有 人打赏支持
路小磊

路小磊

粉丝 279
博文 53
码字总数 39918
作品 5
乌海
程序员
block,inline和inline-block概念和区别

总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;i...

巴顿
2015/08/27
335
1
block,inline和inline-block概念和区别

总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块,会单独换一行;i...

Galy_绿
2015/12/05
48
0
前端——display:inline-block兼容ie6/7的写法

1、display:inline-block作用? 使用display:inline-block属性,可以使行内元素或块元素能够变成行内块元素,简单直白点讲就是不加float属性就可以定义自身的宽、高,同时又能使该元素轻松在父...

coolrp
2016/12/02
8
0
inline-block 前世今生

曾几何时,display:inline-block 已经深入「大街小巷」,随处可见 「display:inline-block; display:inline; zoom:1; 」这样的代码。如今现代浏览器已经全面支持这个属性值了,上面的代码只是...

GIFCOOL
2012/09/04
0
0
block/inline/inline-block 与 置换元素/非置换元素

概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。 block元素通常被现实为独立的一块,会占据一整行的空间;...

evenyao
07/03
0
0
CSS中 inline、block、inline-block的区别

我们用firbug浏览别人网站时会发现设计者会在很多地方使用inline-block。我们都知道inline是声明div是内联对象,block是声明块对象,那么inline-block是什么意思,即内联又成块?接下来做个测...

喜欢敲代码的感觉
2014/10/20
0
0
IE6/IE7下:inline-block解决方案

IE6/IE7下:inline-block解决方案 IE6/IE7下对display:inline-block的支持性不好。 1、inline元素的display属性设置为inline-block时,所有的浏览器都支持; 2、block元素的display属性设置为...

LorinLuo
2016/03/31
74
0
应不应该使用inline-block代替float

本文由99根据Steven Bradley的《Should You Use Inline-Blocks As A Substitute For Floats?》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此...

石佛慈悲
2013/12/08
0
2
display的inline,block,inline-block

之前用的display属性的值只会用inline或者block,这两个值的显示形式如下: (1)inline:设置了display:inline;属性的元素,不会自动换行,并且即使元素设置了宽高也没有效果,属于行内元素,...

sunshinewyf
2015/07/23
0
0
display:inline、display:block、display:inline-block三者真实用途及含义是什么?

1、display:block就是将元素显示为块级元素。   block元素的特点是:   总是在新行上开始;   高度,行高以及顶和底边距都可控制;   宽度缺省是它的容器的100%,除非设定一个宽度 ...

sinat_34719507
2016/12/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Jvm堆内存的划分结构和优化,垃圾回收详解(详细解答篇)

在JVM中堆空间划分如下图所示 上图中,刻画了Java程序运行时的堆空间,可以简述成如下2条 1.JVM中堆空间可以分成三个大区,新生代、老年代、永久代 2.新生代可以划分为三个区,Eden区,两个幸...

嘻哈开发者
12分钟前
0
0
CentOS 7.4 设置系统字符编码

1.语言变量LANG在 /etc/locale 文件中。 2.可以通过/ect/profile 来修改LC_TYPE 变量的值 添加如下代码 export LC_ALL="zh_CN.GBK" export LANG="zh_CN.GBK" 到profile文件中,变量的可以修改...

qimh
13分钟前
0
0
Kafka相关使用

安装前提,需要有jdk环境,还有zookeeper环境 zookeeper下载地址:https://www.apache.org/dyn/closer.cgi/zookeeper/ zookeeper安装参考:https://www.jianshu.com/p/f7037105db46 kafka的下......

朝如青丝暮成雪
14分钟前
0
0
CentOS7 解决无法使用tab自动补全 tab代码提示

一、前言 对于刚刚开始学习linux的新人来说,linux的一切都显着神秘,只能惊叹于大牛在Linux上行云流水的操作。今天介绍一下在linux中自动补全的功能。 对于新人来说,在不懂得技巧的情况下,...

ziluopao
20分钟前
0
0
redis安装

https://www.cnblogs.com/feijl/p/6879929.html

ghou-靠墙哭
20分钟前
0
0
Spring核心——注解自动装载

从配置上扩展 之前的文章介绍了Spring的IoC容器配置管理方面的详细内容,需要了解的可以从IoC容器的设计模式开始阅读。在介绍基于注解配置的配置之前我们再重复一下在之前提到的基本认识: ...

随风溜达的向日葵
23分钟前
1
0
ElasticSearch学习(8)—— SearchType

Elasticsearch有四种类型的SearchType 1、query and fetch 向索引的所有分片(shard)都发出查询请求,各分片返回的时候把元素文档(document)和计算后的排名信息一起返回。这种搜索方式是最...

叶枫啦啦
24分钟前
0
0
MYSQL备份工具-mysqldump

介绍 mysqldump 是文本备份还是二进制备份 它是文本备份,如果你打开备份文件你将看到所有的语句,可以用于重新创建表和对象。它也有 insert 语句来使用数据构成表。 语法 mysqldump 的语法是...

郭恩洲_OSC博客
26分钟前
0
0
我的第一个go web框架

使用了beego等go web开发框架之后,感觉各种不方便,尤其是在接收参数、和自定义输出的时候,各种难受,定义各种model,这不是找事情嘛??尤其是在角色权限控制的时候我也感觉力不从心。。。...

独坐苔痕但观罗敷
27分钟前
0
0
自动代码生成图形化工具

自动生成Spring代码 https://github.com/EliMirren/Spring-generator 自动生成Vertx https://gitee.com/duhua/vertx-generator...

奋斗的小牛
30分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部