总体概念

block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。
大体来说HTML元素各有其自身的布局级别（block元素还是inline元素）：
- 常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等。
- 常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR 等。
block元素可以包含block元素和inline元素；但inline元素只能包含inline元素。要注意的是这个是个大概的说法，每个特定的元素能包含的元素也是特定的，所以具体到个别元素上，这条规律是不适用的。比如 P 元素，只能包含inline元素，而不能包含block元素。
一般来说，可以通过display:inline和display:block的设置，改变元素的布局级别。

block，inline和inlinke-block细节对比

display:block

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

display:inline

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

display:inline-block

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

补充说明

一般我们会用display:block，display:inline或者display:inline-block来调整元素的布局级别，其实display的参数远远不止这三种，仅仅是比较常用而已。
IE（低版本IE）本来是不支持inline-block的，所以在IE中对内联元素使用display:inline-block，理论上IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表象。

本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/p/4987551.html，如需转载请自行联系原作者

block，inline和inline-block概念和区别相关推荐

inline-block什么意思中文_block，inline和inline-block概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
PSIM软件中 Simplified C Block模块和 C Block模块区别
在使用PSIM的C语言模块时,一直以为Simplified C Block模块和 C Block模块用法基本是一样的,但是今天在仿真BUCK电路时,同样的代码使用C Block模块仿真结果就正常 ...
linux block framework(1) - 块设备概念
了解linux block 基本概念 1.概念块设备是I/O设备中的一类,当应用层对该设备读写时,是按扇区大小来读写数据的,若读写的数据小于扇区的大小,就会需要缓存区, 可以随机读写设备的任意位 ...
block的用法以及block和delegate的比较（转发）
看到一篇写的关于block和delegate放在一起来方便大家理解的文章,感觉不错,就推荐给大家来看一下. 代理设计模式对于iOS开发的人来说肯定很熟悉了,代理delegate就是委托另一个对象来帮忙 ...
浅析 VO、DTO、DO、PO 的概念、区别和用处！
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章来源:cnblogs.com/qixuejia/p/4390086 ...
java写一个外网访问的接口_【JAVA基础】一个案例搞懂类、对象、重载、封装、继承、多态、覆盖、抽象和接口概念及区别（中篇）...
0 前言初学JAVA时,总会对一些概念一知半解,相互混淆,不明其设计的用意,如类.对象.重载.封装.继承.多态.覆盖.抽象类.接口概念.为便于理解和巩固,本文将基于一个案例及其变形,展现各个概念的定 ...
map和foreach的区别和应用场景_浅析项目中常用的 VO、DTO、DO、PO的概念、区别和用处...
概念: 模型: VO与DTO的区别 VO与DTO的应用 DTO与DO的区别 DTO与DO的应用 DO与PO的区别 DO与PO的应用本篇文章主要讨论一下我们经常会用到的一些对象:VO.DTO.DO和P ...
ios 添加block 类别_ios之Block的详细使用和具体说明
image.png iOS代码块Block 一:概述闭包 = 一个函数「或指向函数的指针」+ 该函数执行的外部的上下文变量「也就是自由变量」:Block 是 Objective-C 对于闭包的实现. ...
ios 添加block 类别_iOS 关于Block代码块的详解
概述 block 上图就是一个block简单使用,它包括了block的声明.赋值实现.调用三个部分,其中,实现部分可以看作是一种匿名函数:跟函数一样,block也是需要调用才能执行内部代码的:赋值的 ...

block，inline和inline-block概念和区别

总体概念

block，inline和inlinke-block细节对比

补充说明

block，inline和inline-block概念和区别相关推荐

最新文章

热门文章