块级元素和内联元素
一. 块级元素和内联元素
块级元素(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】支持宽高
