可視化格式模型
三個重要的css概念：浮動，定位，盒模型，形成css的基本佈局
一.盒模型
1.內邊距，是爲了內容和背景區分開。外邊距，是爲了控制元素之間的間隔
2.outline屬性和border屬性不同，outline作爲輪廓不影響元素的大小或定位
3.初始化 *{margin:0;
padding:0;
}
4.width不是一成不變的，當想達到100px寬，已知每個邊有10px的外邊距和5px的內邊距，這時width要調成（100-10*2-5*2）=70px
外邊距可以爲負值
5.外邊距疊加：兩個外邊距以上相遇時，外邊距高度爲疊加後高度較大者
注意：只有文檔流中塊框的垂直外邊距纔會發生外邊距疊加。行內塊，浮動或絕對定位之間的外邊距不會疊加
二.定位
1.可視化格式模型：瀏覽器按照一定規則對文檔樹進行可視化處理
display可以改變框的類型，如display：block可以把行內元素（如錨，strong，span）轉成塊級元素（p，h，div）
display：none使生成的元素沒有框。
修改行內框尺寸的唯一方法是修改行高或者水平邊框，內邊距，外邊距
display：inline-block讓元素像行內元素一樣水平的依次排列
2.相對定位
使用相對定位，元素仍佔據原來的空間
3.絕對定位
和相對定位一樣，絕對定位的框可以從它包含塊向上下左右移動，可以將元素定位在任何地方
z-index
子絕父相
4.固定定位：是絕對定位中的一種（不同在於固定元素的塊是視口viewport），使創建總出現在窗口中相同位置的浮動元素
（效果就是頁面的回到頂部。。。）
5.浮動模型
浮動框不在文檔流，所以文檔流中的塊框表現的像浮動框不存在一樣
框1右移，脫離文檔流右移，直到它右邊緣碰到框的右邊緣
框1左浮，脫離文檔流左移，直到它左邊緣碰到框的左邊緣。它此時不處於文檔流，不佔據空間，會覆蓋框2，使框2在視圖上消失。若三個都左浮，框一左移到左邊緣，後面兩個依次碰到前一個浮動框
6.行框和清理
浮動會讓元素脫離文檔流，不再影響不浮動的元素
要阻止行框圍繞在浮動框的外邊，用屬性clear（left，right，both，none）
例子：有一個圖片，想讓他浮動到一個文本塊的左邊和文本包含在另一個具有背景顏色和邊框的元素中
方法 一：對浮動的文本和圖片清理
方法二：對包含的div
<div style="clear: both"></div>
方法三：overflow屬性有hidden、auto可以處理內容過多溢出到框外，但是有弊端就是會自動清理任何浮動元素
可以用一個類名，來指定清理的元素出現在哪
