块级元素和行内元素

学习css时，接触到display属性时，收集和整理下块级元素和行内元素相关信息。

boxModel盒模型：

html元素都可以看成一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

• Margin（外边距）：边框外的区域，外边距是透明的。
• Border（边框）：围绕在内边距和内容外的边框。
• Padding（内边距）：内容周围的区域，内边距是透明的。
• Content（内容）：盒子的内容，显示文本和图像。

标准模式和混杂模式：

当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种呈现模式：标准模式和混杂模式。在标准模式下浏览器按照规范呈现页面；在混杂模式下，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。

怎样区分标准模式和混杂模式：
浏览器根据DOCTYPE（文档声明）是否存在以及使用那种DTD来选择要使用的呈现方式。如果XHTML和HTML文档保航形式完整的DOCTYPE，那么它一般以标准模式呈现。相反，如果文档的DOCTYPE不存在或者形式不正确则导致HTML和XHTML以混杂模式呈现。

标准模式的boxModel：

标准模式下盒子的实际宽度为：
width + padding-left + padding-right + border-left-width + border-right-width

实际高度为：
heigth + padding-top +padding-bottom + border-top-width + border-bottom-width

混合模式的boxModel：

混杂模式下盒子的实际宽度为：css中设定的width值，高度为设置的height值。当然在没有设置overflow的情况下，若盒子内容、内边距、或是边框的值较大，会把盒子撑开，实际宽度和高度则大于设定值。

块级元素和行内元素：

我们在做页面布局的时候,一般会将html元素分为两种，即块级元素和行内元素。

块级元素：
- 总是在新行上开始，块状元素排斥其他元素与其位于同一行。
- 可以设定元素的宽（width）和高（height）；高度，行高以及外边距和内边距都可控制；
- 块级元素一般是其他元素的容器，可容纳块级元素和行内元素。
- 宽带始终是与浏览器宽度一样，与内容无关；

行内元素：
- 行内元素不可以设置宽（width）和高（height），行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。
- 可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。
- 高，行高及外边距和内边距部分可改变；

当然我们还可以通过样式display属性来改变元素的显示方式。当display的值设为block时，元素将以块级方式呈现；当display值设为inline时，元素将以行内形式呈现。所以我们可以给img标签应用以下样式：

img{display:block; width:200px;}
h2{display:inline; width:50px;}

如果我们即想让一个元素可以设置宽度高度，又想让它以行内形式显示，这时我们可以设置display的值为inline-block。

input{display:inline-block; width:100px; height:100px;}

内联元素（行内元素）内联元素(inline element)

• a - 锚点
• abbr - 缩写
• acronym - 首字
• b - 粗体(不推荐)
• bdo - bidi override
• 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 - 定义变量

块元素(block element)
* address - 地址
* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级容易，也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
* noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容）
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表

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

• applet - java applet
• button - 按钮
• del - 删除文本
• iframe - inline frame
• ins - 插入的文本
• map - 图片区块(map)
• object - object对象
• script - 客户端脚本