終於到了css最重要的3個部分：盒模型，定位，浮動。先講盒模型吧。
1.盒模型概述
頁面上的每個元素都被看成乙個矩形框。這個框由元素的內容、內邊距、邊框和外邊距組成。
內邊距、邊框和外邊距都是可選的預設為0。但是許多元素由使用者**樣式表設定外邊距和內邊距。所以不見的一定是0。
在css中，width和height是指內容區域的寬度和高度，對邊距沒有影響。所以增加width/height/內容/邊框/內外邊距中的任何乙個都會使盒子變大。值得高興的是，ie6在混雜模式的使用的是非標準的盒模型。他的width不是內容的寬度，而是內容+內邊距+邊框的總寬度。
外邊距疊加條件：只有普通文件流中塊框的垂直外邊距才會發生疊加。行內框，浮動框，絕對定位框的外邊距都不會疊加。外邊距疊加有3類：
當兩個或更多垂直外邊距相遇時，大的外邊距會包含小的外邊距。這個外邊距的總和等於兩個疊加者中外邊距較大者；
當乙個元素包含在另外乙個元素中時，他們的頂外邊距也會疊加；
如果給乙個空元素設定外邊距，那麼頂外邊距和底外邊距就會疊加：
css 有三種基本的定位機制：普通流、浮動和絕對定位。
除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (x)html 中的位置決定。
塊級框從上到下乙個接乙個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。
行內框在一行中水平布置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行形成的水平框稱為行框，行框的高度總是足以容納它包含的所有行內框。不過，設定行高可以增加這個框的高度。因此，修改行內框尺寸的唯一方法是修改行高或者水平邊距。
順便說一下display屬性
display：none將元素隱藏起來,visible:hidden也是隱藏元素，但二者有區別：前者不占用空間，而後者雖然看不見，但還是佔著地方！
display:inline-block將物件呈遞為內聯物件，但是物件的內容作為塊物件呈遞。旁邊的內聯物件會被呈遞在同一行內，允許空格。ie6,7不支援inline-block屬性，但是可以觸發塊元素。解決方法是先設定inline-block觸發塊元素，具有layout的特性，然後設定display:inline，使塊元素呈現內聯元素，此時layout的特性不會消失；或者直接設定display：inline，然後使用zoom：1觸發layout。下面是通用做法：
[plain]view plain先說一下position屬性:copy
絕對定位（absolute）：要注意的是絕對定位元素的位置與文件流無關，因此不佔據空間！就好比普通流中的元素看不見他，但是我們看的見！
固定定位（fixed）：絕對定位的一種，區別上面說了（fixed相對瀏覽器視窗定位，absolute相對第乙個非static父元素定位）。不過高興的是，ie6不支援固定定位，ie7部分支援，但有許多bug。
相對定位：相對於普通流中正常位置位移，但是元素仍然佔據原來的空間，所以移動元素可能會覆蓋其他框。
浮動的框可以左右移動，直到它的外邊緣碰到包含框或另外乙個浮動框邊緣。浮動不在文件的普通流中。
有浮動就可能會要clear清浮，以下是clear屬性:
清浮常用偽類的方法：
[plain]view plain
copy
.clearfix:after
這個方法在ie6，7下有bug，需要給浮動塊新增haslayout來撐高：
[plain]view plain
copy
.clearfix
還可以用overflow：hidden屬性。因為overflow會迫使父元素貼緊其內物件的內容，從而達到清浮的作用，但也可能觸發滑動條或者隱藏內容。
浮動的具體說明參考w3c：
理論的東西就先講這些吧，接下來開始實踐了！
css3 定位和浮動
1 css定位 改變元素在頁面上的位置 2 css定位機制 普通流 元素按照其在html中的位置順序決定排布的過程 浮動 絕對布局 3 css定位的屬性 position 把元素放在乙個靜態的，相對的，絕對的，或者固定的位置中 top left right botom 元素向上 左 右 下的偏移量 ...
CSS盒模型 定位流 浮動流
一 盒模型 1 border 寬度 樣式顏色 2 padding 內邊距 3 margin 外邊距 垂直方向會合併 4 content 其它操作 1 box sizing content box 預設 border box 固定元素大小 2 水平居中 1.margin 0 atuo 盒子居中 2.t...
CSS 盒模型 屬性 浮動 定位 顯示
border之外是margin，border之內是padding padding之內是width height.margin垂直外邊距疊加，水平外邊距不疊加。上右下左，如圓形鐘錶，從半夜0點開始 width，預設值 auto，會讓元素的寬度與其父元素同寬 float leftorright 建立多欄...