一些基本概念

HTML 的大多数元素都是块级 (block) 元素或行内 (inline) 元素

块级元素

默认情况下，块级元素会另起一行，并尽可能的充满整个容器。
块级元素可以包含行内元素和其他块级元素，相比于行内元素可以创建更复杂和大型的结构

块级元素列表：

html5 新增的元素：
figcation：图文信息组标题 ，article：文章，figure：图文信息组
output：表单输出，aside：侧栏内容，footer：区段尾或页尾，audio：音频播放
video：视频播放，section：页面区段，canvas：画布、绘制图形，header：区段头或页头
hgroup：标题组，

address：联系方式信息，ol：有序列表，p：行，form：表单，pre：预格式化文本，blockqute：块引用
h1-h6：标题，table：表格，dd：列表中条目描述，dl：定义列表，div，hr：水平分割线

行内元素

行内元素不会另起一行只占据它对应的标签的边框所包含内容的空间，
只能包含数据和其他行内元素

行内元素列表

b，big，i，small，tt，
abbr，acronym，cite，code，dfn，em，kbd，strong，samp，var，
a，bdo，br，img，map，object，q，script，span，sub，sup，
button，input，label，select，textarea

块级元素和行内元素的区别

块级元素：
1. 会另起一行，
2. 可以设置 width，height，margin，padding，border 属性
3. 默认宽度是容器的 100%

行内元素：
1. 和其他元素在同一行内
2. 高度和宽度就是内容的高度和宽度
3. 可以设置 margin-left 和 margin-right 属性，无法设置 margin-top 和 margin-bottom 属性
4.border 和 padding 可以设置，但是 border-top 和 padding-top 到页面顶部后就不再增加

正常流

正常流指：从左到右，从上到下显示。要让一个元素不在正常流中，唯一的办法是让元素浮动或定位

非替换元素

如果元素的内容包含在文档中，则称之为非替换元素。比如一个段落的文本都在该元素本身之内，这个段落就是一个非替换元素。

替换元素

作为其他内容占位符的一个元素称为替换元素，根据标签和属性的值来显示内容的元素。比如 img 元素，它只是指向一个图像文件，这个文件插入到文档流中。大多数表单元素（input，根据 type 属性来显示内容）也是替换元素。

根元素

位于文档树的顶端，在 html 文档中就是 html 元素

盒模型

html 文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒模型。盒模型通过四个边界来描述：margin（外边距），border（边框），padding（内边距），content（内容区域），如图所示：

几点提示

1.padding，border，margin 都是可选的，默认值为 0，但是浏览器会自行设置元素的 margin 和 padding，通过在 css 样式表中设置

来覆盖浏览器样式。注意：这里的 * 表示所有元素，但是这样性能不好，建议依次列出常用的元素来设置

2. 如果给元素设置背景，并且边框的颜色为透明，背景将应用于内容，内边距和边框组成的区域。

3. 浏览器兼容性
一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。
根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。
不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

水平格式化

非替换元素的水平格式化

水平格式化的 7 大属性是：margin-left，border-left，padding-left，width，padding-right，border-right，margin-right。这 7 个属性值加起来往往是父级元素的 width 值。

其中 margin-left，width，margin-right 可以设置为 auto。
主要有下面几种情况：

一个属性设置成 auto

如果三个属性中某个属性设置了 auto，其余两个为特定的值，那么设置 auto 的属性为确定所需的元素，从而使得元素框的宽度等于父级元素的 width。

例子

HTML 代码

 <div class="parent"> 
     <span class="block"> 块级元素 </span> 
 </div>

CSS 代码

.parent{width:600px}
div {
background: #eeb3b3 none repeat scroll 0 0;
}
.block {
background: #ffd800 none repeat scroll 0 0;
display: block;
margin-left: auto;
margin-right: 100px;
padding: 30px;
width: 100px;
}

被设置为 auto 的 margin-auto 属性值为 340px，即 margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=340+0+30+100+30+0+100=600

总和不等于父级元素的 width

使用 auto 可以弥补实际值与所需总和的差距，如果三个属性都设置了特定值，但是总和不等于父级元素的 width。
修改上面例子中的 margin-left 为 100px，即

.block {
    background: #ffd800 none repeat scroll 0 0;
    display: block;
    margin-left: 100px;
    margin-right: 100px;
    padding: 30px;
    width: 100px;
}

在上面的 CSS 中，margin-left，width，margin-right 都设置了特定值，但是七大属性总和不等于父级元素的 width。这种情况下：
在 FF 中，margin-right 的值为开发者设定的值
在 Chrome 中，margin-right 被强制为 auto

width 设置为 auto

如果 margin-left 和 margin-right 都设置特定值，width 设置为 auto，则 width 将会等于某个特定值以达到父级元素的 width。
如果将 width 修改为 auto，即：

.block {
    background: #ffd800 none repeat scroll 0 0;
    display: block;
    margin-left: 100px;
    margin-right: 100px;
    padding: 30px;
    width: auto;
}

元素的 width 将被被设定为 340px 来使总和达到父级元素的 width

margin-left 和 margin-right 设置成 auto

如果 margin-left 和 amrgin-right 都设置为 auto，则它们会设置相等的值，因此元素将在父级元素中居中。这是将块级元素居中的一种方法。注意：text-align 设置为 center 只适用于块级元素中的内联内容居中，并不能使块级元素居中。
设置 margin 属性为 margin:0 auto

margin-left 和 margin-right 的值会被设置为相等，使得元素居中

某个外边距和 width 设置成 auto

如果设置某个外边距和 width 为 auto，则设置为 auto 的外边距会为 0，width 会设置为所需的值来填充父级元素。

.block {
    background: #ffd800 none repeat scroll 0 0;
    display: block;
    margin-left: auto;
    margin-right: 100px;
    padding: 30px;
    width: auto;
}

设置 margin-left 和 width 为 auto，则 margin-left 将被设置为 0，width 会被设置为 440px 来满足父级元素的 width

全设置成 auto

如果 margin 和 width 都设置为 auto，则两个外边距会设置为 0，width 会尽可能宽。

.block {
    background: #ffd800 none repeat scroll 0 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 30px;
    width: auto;
}

三个值都设置为 auto，则两个外边距会设置为 0，width 会被设置为 540px

负外边距

7 个属性只要都是大于等于 0 的值，总和总是等于父级元素的 width，不会超过父级元素的区域
但是可以通过制定负外边距来得到比父级元素 width 更大的区域

.block {
    background: #ffd800 none repeat scroll 0 0;
    display: block;
    margin-left: 100px;
    margin-right: -400px;
    padding: 30px;
    width: auto;
}

设置 margin-right 为 -400px，则元素会大于父级元素 width，因为 100+0+30+840+30+0-400=600，元素的 width 为 840px

替换元素的水平格式化

替换元素的水平格式化规则和非替换元素的规则类似，只有一个 width 有区别，如果 width 设置为 auto，则元素的宽度是内容的固有宽度。注意：对于 img 标签，如果 width 不等于其固有宽度，则 height 也会等比例增加，除非设置特定值。反过来如果 height 设置高度，width 也会等比例增加

垂直格式化

垂直格式化和水平格式化类似，也有 7 个相关属性：margin-top，border-top，padding-top，height，padding-bottom，border-bottom，margin-bottom，这 7 个属性的总和必须等于父级元素的 height 属性。
其中 margin-top，margin-bottom 和 height 可以设置成 auto
一个正常流中的块元素的 margin-top 和 margin-bottom 设置为 auto 后，会被设置为 0，即不能将元素垂直居中，实际上元素没有外边距。定位元素如果设置成 auto 有不同的处理结果。

如果正常流元素的 height 设置为 auto，则其高度将会被设置为其内容元素的高度总和。

垂直外边距合并

垂直外边距合并：当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

例子：

html 代码

<div class="m20"> 外边距 20px </div>
<div class="m10"> 外边距 10px </div>

css 代码

.m20 {padding: 20px;}
.m10 {padding: 10px;}

如图所示，两个 div 标签的外边距分别是 20px，10px，但是最终两个 div 之间的距离是 20px，而不是 20+10=30px

行内元素的盒模型

行内元素也是有盒模型的，但是有几点要注意：

1. 对于非替换元素，比如 a，span 标签等
（1）可以设置 margin-left 和 margin-right 属性，无法设置 margin-top 和 margin-bottom 属性
（2）行内元素 border 和 padding 可以设置，但是 border-top 和 padding-top 到页面顶部后就不再增加

2. 对于替换元素，比如 input，img 标签

margin，padding，border 都有效果