盒模型：
1 盒模型概述:
- width和height 設置內容區的寬度和高度。增加內邊距、邊框、外邊距不會影響內容區的尺寸，但是會增加元素框的總尺寸。
- 背景會鋪滿內容區和內邊距，不會加到border上的。
- 內邊距、邊框、外邊距默認值為0，但是用戶代理（瀏覽器樣式表）會提供自己的樣式屬性值，為了在不同的瀏覽器中表現相同，一般對部分屬性進行重設。
1.1 通用選擇器重設：
- 缺點：對option元素有不利的影響。
*{
vertical-align:baseline;
font-weight:inherit;
font-family:inherit;
font-style:inherit;
font-size:100%;
outline:0;
padding:0;
margin:0;
border:0;
}
1.2 Poor Man Reset:
1.3 Siiolon's Global Reset
2 外邊距疊加：
- 同級元素上下疊加： 兩者相遇取其大。(無條件)
- 自己跟自己疊加： 有外邊距，但是沒有內邊距和邊框，這時候頂外邊距和底外邊距就碰到一起了。
- 父子元素外邊距疊加： 在沒有邊框和內邊距的前提下，兩者相遇取其大。
只有普通文檔流中的 塊框 才會疊加，行內框、浮動框、絕對定位框之間的外邊距不會疊加。
3 定位概述：
3.1 格式模型：
- css中3中定位機制：普通流、浮動、絕對定位。
3.2 行內框：
- 可以使用 水平 外邊距、邊框、內邊距調整他們的水平間距，但在垂直方向上的屬性是不影響行內框的高度的。so， 在行內框上設置顯示的寬高是沒有影響的 。
- 修改行內元素尺寸的唯一方法就是：修改行高和水平屬性（外邊距、邊框、內邊距）。
- 將行內元素的 display 設置為 block，可以讓行內元素表現的像塊元素一樣。同時也能顯示的設置寬高、以及垂直外邊距和內邊距。
3.3 塊級元素：
- 塊級元素能夠顯示的設置寬高。（p、div、h1）。
- 將塊級元素的 display 設置為 inline-block，可以讓塊級元素像行內元素一樣水平的依次排列。但是，其余行為不變，比如仍然能夠顯示的設置寬高、垂直外邊距和內邊距。
3.4 定位：
- static：無特殊定位，對象遵循HTML規則。
- absolute：將對象從文檔流中拖出，使用：left、right、top、bottom進行絕對定位，通過 z-index 定義層疊屬性，不具有邊距，但仍有補白和邊框。相對于已經定位的祖先元素進行定位。
- relative：對象不可以層疊，將依據left、right、top、bottom等屬性在正常的文檔流中進行偏移。相對對于本體所在左上位置進行定位。
- fixed：固定定位是絕對定位的一種，固定定位的元素在滾動時一直出現在屏幕的固定位置，比如博客評論表單的設計。（<=IE6不支持）
3.5 浮動：
- 浮動的框可以左右移動，直到它的邊緣碰到包含框或者另一個浮動框的邊緣。
- 1號元素浮動后，2號元素如果是塊級元素，它會被1號覆蓋在下面，如果是行內元素，它仍會繼續使用1號元素所在位置的行，不會被1號元素覆蓋。
- 阻止行框圍繞浮動元素：給這些行框應用 clear 屬性：left,right,both,none
3.6 浮動框旁邊的行框被縮短：
- 無論是行內元素還是塊級元素中的內容都會圍繞浮動元素。
