元素的分类：

块状元素

内联元素

可变元素

块状元素与内联元素的区别：

块状元素可以设置宽度和高度，内联元素不可以，内联元素的宽高是其自身的内容；

块状元素自上而下在显示，内联元素自左向右在一排显示；

内联元素和块状元素都遵循和模型设置，都可以设置padding、border、margin，但是内联元素的padding、和margin有时显示不正常；

块状元素一般作为其他内联元素的盒子使用；

常见的块状元素：div 、h1、h2、h3、h4、h5、h6、p、ul、dl、ol、li、dd、dt、form

常见的内联元素：span、a、b、strong、i、em、sup、sub、u、ins、s、del

元素类型转换的属性display

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。

大多数块状元素的display默认值为block，

li的display默认值为list-item

大多数的内联元素的display默认值为inline，

img、input、textarea、select的默认值为inline-block

 

当内联元素，在CSS中定义下列属性中的一种，便具有块元素的特征
1）display:block;
2）float:left; （不但具有块元素的特征，同时像左侧浮动）
但是这时候的内联元素，虽然具有块状元素的特征，但是这两种有一点区别，第一种，彻头彻尾和块元素一模一样，都要单独占一行，从左至右，前提没有width和height属性，严格遵循流动布局模型块状元素的流动方式，自上至下流动，第二种，大小是恰好能将内容包含，并且右侧浮动，可以多个在一行。

当加上position:absolute/relative的时候，块状元素和内联元素，就不受父级区域的限制了，可以移动到任何位置，此时如果加上width和height属性，那么就具有层的特征了。（加上width和height还有一点好处，就是可以兼容IE浏览器了，所有的浏览器现实效果都一样了）

块元素(block element)一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素

块元素(block element)一般是其他元素的容器元素，块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素。
如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table标签也是块元素的一种，table based layout和cssbased layout从一般使用者（不包括视力障碍者、盲人等）的角度来看这两种布局，除了页面载入速度的差别外，没有其他的差别。但是如果普通使用者不经意点了查看页面源代码按钮后，两者所表现出来的差异就非常大了。基于良好重构理念设计的css布局页面源码，至少也能让没有web开发经验的普通使用者把内容快速的读懂。从这个角度来说，css layout code应该有更好的美学体验。
你能够把块容器元素div想象成一个个box，或者如果你玩过剪贴文载的话，那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪 下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图，用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报了。作为一种技术的延伸，网页布局设计也遵循了同样的模式。

内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素 “a”。
需要说明的是：inline element的中文叫法，有多种内联元素、内嵌元素、行内元素、直进式元素。基本上没有统一的翻译，爱怎么叫怎么叫吧。另外提到内联元素，我们会想到有个display的属性是display:inline;这个属性能够修复著名的IE双倍浮动边界问题。
块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新行开始的属性。

注意！置换元素和非置换元素

什么是置换元素？

一个 内容 不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）的元素，被称之为置换元素。

什么是非置换元素？

w3c并没有给出明确的非置换元素的解释，但能确定的是除置换元素之外，所有的元素都是非置换元素。

行内级置换和非置换元素的宽度定义

对于行内级非置换元素，宽度设置是不适用的。

对于行内级置换元素来说，其宽度的设置需遵循以下几点：

• 若宽高的计算值都为 auto 且元素有固有宽度，则 width 的使用值为该固有宽度；
  典型的例子是：拥有默认宽高的 input 当宽度的计算值为auto时，则宽度使用值为其默认的固有宽度
• 若宽度的计算值为 auto 且元素有固有宽度，则 width 的使用值为该固有宽度；
  例子同上
• 若宽度的计算值为 auto 且高度有 非auto 的计算值，并且元素有固有宽高比，则 width 的使用值为 高度使用值 * 固有宽高比；
  典型的例子：img 当只定义了其高度值时，其宽度将会根据固有宽高比进行等比设置
• 除此之外，当 width 的计算值为 auto 时，则宽度的使用值为 300px
  典型的例子：比如iframe, canvas

其它类型的置换元素，其宽度的定义都参照行内置换元素的定义。

行内级置换和非置换元素的高度定义

对于行内级非置换元素，高度设置是不适用的。

对于行内级置换元素来说，其高度的设置需遵循以下几点：

• 若宽高的计算值都为 auto 且元素有固有高度，则 height 的使用值为该固有高度；
• 若高度的计算值为 auto 且元素有固有高度，则 height 的使用值为该固有高度；
• 若高度的计算值为 auto 且宽度有 非auto 的计算值，并且元素有固有宽高比，则 height 的使用值为：宽度使用值 / 固有宽高比；
• 若高度的计算值为 auto 且上述条件完全不符，则 height 的使用值 不能大于150px，且宽度不能大于长方形高度的2倍。

其它类型的置换元素，其高度的定义都参照行内置换元素的定义。