Div盒模型+浮動

盒模型

在CSS中，width和height指的是內容區域的寬度和高度。增長內邊距、外框和外邊距不會影響內容區域的尺寸，可是會增長元素框的總尺寸。

假設框的每一個邊上有px的外邊距和5px的內邊距，若是但願這個框達到100px寬，就須要將內容的寬度設置爲70px。

Ps：外邊距能夠是負值。

外邊距疊加

• 當兩個或更多垂直外邊距相遇時，他們將造成一個外邊距。這個外邊距的高度等於兩個發生疊加的外邊距的高度中的較大者。
• 當一個元素包含在另外一個元素中時（假設沒有內邊距或邊框將外邊距分隔開），元素的頂外邊距就會與父元素的頂外邊距發生疊加。

假設有一個空元素，他有外邊距，可是沒有邊框或內邊距。此時，頂外邊距和底外邊距就碰到一塊兒，發生疊加。
只有普通文檔流中塊框的垂直外邊距纔會發生外邊距疊加。行內框、浮動框或絕對定位框之間的外邊距不會疊加。

CSS定位機制

• 普通流
• 浮動
• 絕對定位

塊級框從上到下一個接一個地垂直排列，框之間的垂直距離由框的垂直外邊距計算出來。
行內框在一行中水平排列。可使用水平內邊距、邊框和外邊距調整他們的水平間距。垂直內邊距、邊框、外邊距不影響行內框的高度。
由一行造成的水平框稱爲行框，行框的高度老是足以容納它包含的全部行內框。可是，，設置行高能夠增長這個框的高度。

將dispaly的屬性設置爲inline-block。顧名思義，這個聲明讓元素像行內元素同樣水平地依次排列。可是，框的內容仍符合塊級框的行爲。
框能夠按照HTML元素的嵌套方式包含其餘框。大多數框由顯式定義的元素造成。可是，若是將一些文本添加到一個塊級元素（例如div）的開頭時。即便沒有把這些文本定義爲塊級元素，他也會被看成塊級元素對待。

相對定位

將一個元素相對定位，他將出如今他所在的位置上，而後，能夠經過設置垂直或水平位置，讓這個元素「相對於」它的起點移動。若是將top設置爲20px，那麼它就會向下移動20px。
Ps：在使用相對定位時，不管是否移動，元素仍然佔據原來的空間。所以，移動元素會致使他覆蓋其餘框

絕對定位

相對定位實際上被看做普通流定位模型的一部分，由於元素的位置是相對於他在普通流中的位置。與之相反，絕對定位使元素的位置與文檔流無關，所以不佔據空間。普通文檔流中其餘元素的佈局就像絕對定位的元素不存在同樣。

決定定位的元素的位置是相對於距離它最近的那個已定位的祖先元素肯定的。若是元素沒有已定位的祖先元素，那麼他的位置是相對於初始包含塊的。
絕對定位的框與文件流無關，因此他們覆蓋頁面上的其餘元素。能夠經過設置z-index屬性來控制這些框的疊放次序。z-index值越高，框在棧中的位置就越高

若是擴大絕對定位的框，周圍的框不會從新定位。所以，尺寸的任何改變都會致使絕對定位的框產生重疊。

固定定位

固定定位是絕對定位的一種，差別在於固定元素的包含塊是視口（viewport）。這使咱們可以建立老是出如今窗口中相同位置的浮動元素。

浮動

浮動框不在標準文檔流中，一個元素設置浮動以後，他就脫離了標準文檔流，不佔據空間。他會超設置的方向移動，直到他的邊緣碰到包含框的邊緣。

行框和清理

若是浮動的元素後面有一個文檔流中的元素，那麼這個元素的框會表現得像浮動根本不存在同樣。可是框的文本內容會受到會受到浮動元素的影響
應用：建立浮動框使文本能夠圍繞圖像。
想要阻止行框圍繞在浮動框的外邊，須要對包含這些行框的元素應用clear屬性。clear屬性的值能夠是left、right、both或none，他表示框的哪些邊不該該挨着浮動框
在清理浮動時，瀏覽器在元素頂上添加足夠的外邊距，使元素的頂邊緣垂直降低到浮動框下面。
對元素進行清理實際上爲前面的浮動元素流出了垂直空間。

案例：假設有一張圖片，但願讓它浮動到一個文本塊的左邊。而後將他們包含在另外一個具備背景顏色和邊框的元素中。
可是浮動元素脫離了文檔流，因此包圍圖片和文本的div不佔據空間。
- 這時就須要在這個元素中的某個地方應用clear。可是父元素div中沒有現有的元素能夠清理，因此要在最後一個段落中添加一個空元素而且清理它。
能夠添加一個<br class="clear" / > - 或者直接浮動容器div