[转]内联元素和块状元素，盒子模型

块元素(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 非排序列表

内联元素(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 定义变量

注：内联样式权重高于外部样式。

综上所述，用实例总结一下权重分配：

每个HTML元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。

盒模型的实际宽度

关于盒模型，还有以下几点需要注意：
A. 对于块级元素（display:block），未浮动的垂直相邻元素的上边界和下边界会被压缩，例如：有上下2个元素，上元素的下边界为5px，下面元素的上边界为20px，则实际2个元素的间距为20px（2个边界值中较大的值）。如图所示：

B. 块级元素（display： block）
每个块级元素都从一个新行开始，而且其后的元素也需另起一行开始，标题、段落、表格、层、body等都是块级元素。块级元素只能作为其他块级元素的子元素，而且需要一定的条件。

C. 内联元素，例如<a>、<span>等，定义上下边界不会影响到行高（line-height），内联元素距离上一行元素的距离由行高决定，而不是填充或边界。

D. 内联元素（display：inline）
内联元素不需要在新行内显示，而且也不强迫其后的元素换行，如a、em、span等都为内联元素。内联元素可以为任何其他元素的子元素。

浮动元素（无论左或者右浮动）边界不压缩，且若浮动元素不声明宽度，则其宽度趋向于0，即压缩到其内容能承受的最小宽度。如果盒中没有内容，则即使定义了宽度和高度都为100%，实际上只占0%，因此不会被显示，此点在采取层布局的时候需特别注意。边界值可为负，其显示效果各浏览器可能不相同。填充值不可为负。边框默认的样式（border-style）为不显示（none）。

补充：

1 http://hi.baidu.com/sonan/blog/item/229b5f4ee0b3e501b2de05a7.html

2 http://www.birdol.com/article/566.html

3. http://www.w3.org/TR/CSS2/box.html

?

原文地址：http://www.livingelsewhere.net/2010/05/22/inline-block-box-model/