一. 块级元素和内联元素

块级元素(block)特性：

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;

宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

和相邻的内联元素在同一行;

宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，

就是里面文字或图片的大小;

块级元素主要有：

 address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex ,

 menu , noframes , noscript , ol , p , pre , table , ul , li

内联元素主要有：

a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s ,

 samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

可变元素(根据上下文关系确定该元素是块元素还是内联元素)：

applet ,button ,del ,iframe , ins ,map ,object , script

CSS中块级、内联元素的应用：

利用CSS我们可以摆脱上面表格里HTML标签归类的限制，自由地在不同标签/元素上应用我们需要的属性。

主要用的CSS样式有以下三个：

display:block  -- 显示为块级元素

display:inline  -- 显示为内联元素

display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

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

二. display

display属性用于规定元素生成的框类型，影响显示方式

　　值：none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-colume-group | table-colume | table-cell | table-caption | inherit

　　初始值：inline

【1】block     例如: span {display:block;}

　　【特征】

　　　　【1】不设置宽度时，宽度为父元素宽度

　　　　【2】独占一行

　　　　【3】支持宽高

【2】inline   可以使列表元素显示为内联元素

　　【特征】

　　　　【1】内容撑开宽度

　　　　【2】并非独占一行

　　　　【3】不支持宽高

　　　　【4】代码换行被解析成空格 

3.inline-block

　　【特征】

　　　　【1】不设置宽度时，内容撑开宽度

　　　　【2】非独占一行

　　　　【3】支持宽高

　　　　【4】代码换行解析成空格

4.none

　　【特征】

　　　可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

5.list-item

　　【特征】

　　　　【1】不设置宽度时，宽度撑满一行

　　　　【2】独占一行

　　　　【3】支持宽高

6.run-in

　　【特征】

　　　　run-in是一个有意思的块/行内元素混合，可以使某些块级元素成为下一个元素的行内部分。如果一个元素生成run-in框，而且该框后面是一个块级框，那么该run-in元素将成为块级框开始处的一个行内框，run-in框格式化成另一个元素中的行内框，但它们仍从文档中的父元素继承属性

　　　　若run-in框后面不是块级框时，run-in框本身将成为块级框

　　【注意】只有Safari和IE8+支持

变更元素的显示类型看该元素是如何显示，它是什么样的元素。例如：一个内联元素设置为display:block是不允许有它内部的嵌套块元素

1.table

　　【特征】

　　　　【1】不设置宽度时，宽度由内容撑开

　　　　【2】独占一行

　　　　【3】支持宽高

　　　　【4】默认具有表格特征，能够设置table-layout  

　　　　【注意】对于display为table和inline-table，若处于分隔边框模型即border-collapse:separate;，margin和padding都可设置；若处于合并边框模型即border-collapse:collapse，只可设置margin

2.inline-table

　　【特征】

　　　　【1】不设置宽度时，宽度由内容撑开

　　　　【2】非独占一行

　　　　【3】支持宽高

　　　　【4】默认具有表格特征

3.table-cell

　　【特征】

　　　　【1】不设置宽度时，宽度由内容撑开

　　　　【2】非独占一行

              【3】支持宽高

　　　　【4】垂直对齐

　　　　【5】同级等高

　　【注意】display:table-cell的元素不能设置margin，但是可以设置padding

4.table-caption

　　【特征】

　　　　【1】不设置宽度时，宽度由内容撑开

　　　　【2】独占一行

　　　　【3】支持宽高