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

简介

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

对比

特殊的元素

几个特殊的块元素只能包含内联元素而不能包含块级元素：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.都会使得原先的行内元素变为块级元素。

块元素大全

内联元素大全

可变元素大全

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