（一）行内元素与块级函数的三个区别
1.行内元素与块级元素直观上的区别
行内元素会在一条直线上排列，都是同一行的，水平方向排列
块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。
2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
3.行内元素与块级元素属性的不同，主要是盒模型属性上
行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效
（二）行内元素转换为块级元素（重要标签 :下面详细）
display:block (字面意思表现形式设为块级)
（三）分类
| 块级元素列 | ||
| <address> | 定义地址 | |
| <caption> | 定义表格标题 | |
| <dd> | 定义列表中定义条目 | |
| <div> | 定义文档中的分区或节 | |
| <dl> | 定义列表 | |
| <dt> | 定义列表中的项目 | |
| <fieldset> | 定义一个框架集 | |
| <form> | 创建 HTML 表单 | |
| <h1> | 定义最大的标题 | |
| <h2> | 定义副标题 | |
| <h3> | 定义标题 | |
| <h4> | 定义标题 | |
| <h5> | 定义标题 | |
| <h6> | 定义最小的标题 | |
| <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> | 客户端脚本 | |
（四）居中问题
（先说水平居中）
1，用display标签，把块元素转换为行级元素，使用text-align居中
2，margin:0 auto; 居中问题（必有宽度）
margin:0 auto;的意思就是：上下边界为0，左右根据宽度自适应！其实就是~~水平居中的意思，两个典型的错误引起的不能居中的问题：
1.1、没有设置宽度
<div style="margin:0 auto;"></div>
看看上面的代码，根本没有设置DIV的宽度，如何根据宽度自适应呢？新手比较容易忽略的问题！
1.2、没声明DOCTYPE
DOCTYPE是document type（文档类型）的简写，在web设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分！
你有三种选择，用来声明DOCTYPE
* 过渡的(Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
* 严格的(Strict)：要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
* 框架的(Frameset)：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD，完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
还有就是 margin:0 auto; 和 margin-left:auto; margin-right:auto;的现实效果有时间还不一样，其原意可能在于设置了margin-top的高度不为0时，会出现意想不到的效果。
（五）Display详解
display:inline-block与display:-moz-inline-box display:-moz-inline-stack 的区别
很多时候我们必须使一些块元素并排显示，一般想到的是必须使用浮动，但是块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG，所以很多时候不得不把这个块元素套在一个内联元素里面，然后给内联元素浮动和边距。今天看到这篇文章不错 就COPY 过来 希望大家做个参考：
display:inline-block
简单来说就是将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。但是这个属性目前不是所有的浏览器都支持，只有Opera和Safari支持，FireFox3和IE8据说将会支持，Firefox2和IE使用特殊办法可以实现这种效果，下面就来探讨一下
在Firefox2中有-moz-inline-stack和-moz-inline-box实现，但是这两个私有属性在某些情况下都会有异常，具体如下：
1、display:-moz-inline-stack
“当它所应用的外包装器（wrapper）的display为inline的时候，它所包含的a或button将无法点击或无法选取，需要通过position:relative还hack掉这个bug”
2、display:-moz-inline-box
使用这一属性后，text-align就会出问题，必须使用Firefox的私有属性 -moz-box-align来解决所以，建议不要使用-moz-inline-box，还是使用-moz-inline-stack
在IE（以下IE8除外）下，如果对内联元素，比如a或span元素，使用inline-block属性是有效的，似乎IE是支持的，其实是触发了IE的layout，从而拥有了inline-block属性的表症。这样我们就有了一种在
IE下实现display:inline-block效果的两种方法：
1、先用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（原理：这是IE的一个经典bug，如果先定义了display:inline-block，然后再设置display回inline或block，layout不会消失），代码如下：
div {display:inline-block;}
div {display:inline;}
2、直接让块元素设置为内联对象(display:inline)，然后通过zoom:1触发块元素的layout，代码如下：
div {display:inline; zoom:1;}
那么为了能够让所有浏览器支持display:inline-block，综合一下，最终的实现代码如下（参考怿飞：模拟兼容性的 inline-block 属性）：
display:inline-block; /*一方面Firefox3 beta、IE8 beta、Opera、Safari 支持，另一方面下触发IE下inline 元素的 hasLayout*/
display:-moz-inline-stack; /* Firefox 的私有属性，需要时还必须用到position:relative解决上面提到的bug */
zoom:1; /*同样是IE 下触发 hasLayout*/
*display:inline; /*一旦IE 下触发了 hasLayout，设置 block 元素为 inline 会使 display:inline
效果与 display:inline-block 相似*/
292
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
