原文网址：CSS之排列系列--块级元素、内联元素、内联块元素--区别/详解_IT利刃出鞘的博客-CSDN博客

简介

本文介绍CSS的块级元素(block)、内联元素(inline)和内联块元素(inline-block)的区别。

对比

项	块元素	内联元素	内联块元素
display值	block	inline	inline-block
换行	独占一行	相邻的内联元素排在同一行，直到一行排不下，才换行	与“内联元素”相同
width，height，line-height	width，height，line-height有效。宽度：若不设置则自动填满父元素宽度	width，height无效，line-height有效。宽度由内容决定，高度随由字体大小决定。	width，height，line-height有效。宽度：若不设置则由内容决定。
margin，padding	可设置margin和padding属性	只有横向其效果，纵向不起效果。即：margin-left、margin-right、padding-left、padding-right起作用，margin-top、margin-bottom、padding-top、padding-bottom不起作用	与“块元素”相同
容纳的内容	可容纳块元素和内联元素。	可容纳块元素和内联元素。内部的块级元素会撑大外部的内联标签。

特殊的元素

几个特殊的块元素只能包含内联元素而不能包含块级元素：h1~h6、p、dt。

li可以包含div标签

将ul元素加上display:inline-block样式，原本垂直的列表就可以水平显示了。

替换元素与非替换元素

替换元素（空元素）

替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。例如：img、input、textarea、select、object。

这样的元素也称为：空元素，因为这些元素没有实际的内容。例如： <img src=”cat.jpg” /> <input type="submit" name="submit" value="提交" /> 浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。

例1：img

浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看html代码，则看不到图片的实际内容。

例2：input

根据<input>标签的type属性来决定是显示输入框，还是单选按钮等。

不可替换元素（非空元素）

html 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。

例如： <p>段落的内容</p> 段落<p>是一个不可替换元素，文字“段落的内容”全被显示。

元素转换

1.display

块元素：默认display:block;
内联非替换元素(a,span)：默认为display：inline;
内联替换元素(input)：默认为display:inline-block;

display:none; /*不显示该元素，也不会保留该元素原先占有的文档流位置。*/
display:block; /*转换为块级元素。*/
display:inline; /*转换为行内元素。*/
display:inline-block; /*转换为行内块级元素。其实仍为行内元素，但可以设置width及height等*/

2.float

当把行内元素设置完float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。
行内元素去除了之间的莫名空白。

3.position

为行内元素进行定位时，position:absolute与position:fixed.都会使得原先的行内元素变为块级元素。

块元素大全

元素	说明
address	地址
caption	表格标题
dd	列表中条目
div	文档中的分区或节
dl	列表
dt	列表中的项目
fieldset	一个框架集
form	创建 HTML 表单
h1	1级标题
h2	2级标题
h3	3级标题
h4	4级标题
h5	5级标题
h6	6级标题
hr	创建一条水平线
legend	元素为 fieldset 元素标题
li	标签列表项目
noframes	为那些不支持框架的浏览器显示文本，在frameset元素内部
noscript	在脚本未被执行时的替代内容
ol	有序列表
ul	无序列表
p	标签段落
pre	预格式化的文本
table	标签 HTML 表格
tbody	标签表格主体（正文）
td	表格中的标准单元格
tfoot	表格的页脚（脚注或表注）
th	表头单元格
thead	标签表格的表头
tr	表格中的行

内联元素大全

元素	说明
a	锚
abbr	表示一个缩写形式
acronym	只取首字母缩写
b	字体加粗
bdo	可覆盖默认的文本方向
big	大号字体加粗
br	换行
cite	引用进行定义
code	定义计算机代码文本
dfn	定义一个定义项目
em	定义为强调的内容
i	斜体文本效果
img	向网页中嵌入一幅图像
input	输入框
kbd	定义键盘文本
label	标签为 input 元素定义标注（标记）
q	定义短的引用
samp	定义样本文本
select	创建单选或多选菜单
small	呈现小号字体效果
span	组合文档中的行内元素
strong	语气更强的强调的内容
sub	定义下标文本
sup	定义上标文本
textarea	多行的文本输入控件
tt	打字机或者等宽的文本效果
var	定义变量

可变元素大全

可变元素为根据上下文语境决定该元素为块元素或者内联元素。

元素	说明
button	按钮
del	定义文档中已被删除的文本
iframe	创建包含另外一个文档的内联框架（即行内框架）
ins	标签定义已经被插入文档中的文本
map	客户端图像映射（即热区）
object	object对象
script	客户端脚本

CSS之排列系列--块级元素、内联元素、内联块元素--区别/详解相关推荐

html块级标签转换,html标签中的块级元素详解
今天,我们就讲解一下html标签中的块级元素,主要包括块级元素的概念.作用.特点,还有就是块级元素有哪些标签等内容. 块级元素概念块级元素是一类css样式display默认值为block的html标 ...
CSS 中px、em、rem、%、vw、vh单位之间的区别详解【全网最全】
一.px(像素) [绝对单位,页面按精确像素展示] px就是pixel(像素)的缩写,相对长度单位,相对于屏幕分辨率. px表示像素 (计算机屏幕上的一个点:1px = 1/96in),是绝对单位,不 ...
三菱FX系列PLC模拟量输入AD模块的使用方法和相关编程设置详解
三菱FX系列PLC模拟量输入AD模块的使用方法和相关编程设置详解本次以FX3U系列PLC的模拟量输入模块FX3U-4AD进行举例说明:  该模块的部分技术数据如下图所示,  该模块的接线端子排列 ...
Nginx内置变量以及日志格式变量参数详解
Nginx内置变量以及日志格式变量参数详解 $args #请求中的参数值 $query_string #同 $args $arg_NAME #GET请求中NAME的值 $is_args #如果请求中有 ...
Java多线程系列(九)：CountDownLatch、Semaphore等4大并发工具类详解
之前谈过高并发编程系列:4种常用Java线程锁的特点,性能比较.使用场景 ,以及高并发编程系列:ConcurrentHashMap的实现原理(JDK1.7和JDK1.8) 今天主要介绍concurre ...
红米3 android 版本,红米3四款手机有什么不同？红米3系列手机各版本区别详解
近日,红米手机3的指纹识别升级版本通过工信部认证正式亮相.今天红米3系列产品再次亮相工信部.加上此前亮相的红米3指纹识别升级版,如今工信部认证中共有4款红米3系列的手机.分别是2015810/201 ...
Code First开发系列之管理数据库创建，填充种子数据以及LINQ操作详解
本篇目录管理数据库创建管理数据库连接管理数据库初始化填充种子数据 LINQ to Entities详解什么是LINQ to Entities 使用LINQ to Entities操作实体 L ...
Java多线程系列(七)：并发容器的原理，7大并发容器详解、及使用场景
之前谈过高并发编程系列: 高并发编程系列:4种常用Java线程锁的特点,性能比较.使用场景高并发编程系列:CountDownLatch.Semaphore等4大并发工具类详解高并发编程系列:4大J ...
unity技美27——优化项目内美术3D，2D等资源，详解unity打包体的潜规则与案例
很多朋友美术朋友在面试中经常会被问到一类问题,就是怎么优化你的美术资源. 当我们不熟练使用unity,以级不懂得unity的潜规则时,美术能做到的仅仅是: 1优化模型面数.或者用次世代的方式制作法线贴 ...

CSS之排列系列--块级元素、内联元素、内联块元素--区别/详解

简介

对比