CSS基礎知識---浮動，定位和盒模型

轉載請註明出處！

須要掌握的三個最重要的CSS概念是浮動，定位和盒模型。

 

盒模型概述：

頁面上的每一個元素都被看作一個矩形框（元素框or盒模型），這個框由元素內容，內邊距，邊框和外邊距組成。

內邊距出如今內容區域的周圍，若是爲元素添加背景，那麼背景就會應用於由內容和內邊距組成的區域。添加邊框會在內邊距的區域外邊加一條線。在邊框外邊是外邊距，外邊距是透明的，通常用它來控制元素之間的間隔。

內邊距，邊框，和外邊距是可選的，默認值爲零。可是許多元素由用戶代理樣式表設置了外邊距和內邊距，咱們能夠將元素的margin和padding手動設置爲零來覆蓋這些瀏覽器樣式！例如：

1 *{
2 
3          margin: 0;
4 
5          padding: 0;
6 
7 }      （不建議，建議使用全局的reset單獨設置）

 

PS：在CSS中，width和height指的是內容區的寬度和高度。增長內邊距，邊框和外邊距不會影響內容區的尺寸。但會增長元素框（盒模型）的總尺寸。

內邊距，邊框和外邊距能夠應用於一個元素的全部邊，也能夠用於單獨的邊。外邊距還能夠是負值，這能夠用在多種技術中（例如margin-top：-10px;意思是說盒子向上移動10px）。

PS：IE6的混雜模式中使用本身的非標準的盒模型。這些瀏覽器的width屬性不是內容的寬度，而是內容，內邊距和邊框的寬度總和。所以在固定width以後，添加的內邊距越多，給內容留下的空間就越少。

 

外邊距疊加：

簡單地說就是，當兩個或更多的垂直外邊距相遇時，他們將造成一個外邊距。這個外邊距的高度等於兩個發生疊加的外邊距的高度中的較大者。

當一個元素包含在另外一個元素中時（假設沒有內邊距或邊框將外邊距分隔開），他們的頂或底外邊距也會發生疊加。

外邊距甚至能夠與自己疊加，假設一個空元素，它有外邊距，可是沒有邊框或內邊距。在這種狀況下，頂外邊距和底外邊距碰到了一塊兒，他們就會發生疊加。若是此時這個外邊距和另外一個元素的外邊距相碰，還會發生疊加。

這就是一系列空的段落元素佔用的空間很是小的緣由。由於他們全部的外邊距都疊加在了一塊兒，造成一個小的外邊距。

PS：只有普通文檔流中的塊框的垂直外邊距纔會發生疊加，行內框，浮動框或絕對定位框之間的外邊距不會發生疊加。

（參考連接：http://www.smallni.com/collapsing-margin/）

 

 

定位概述：

1.       可視化格式模型

兩個框一個屬性：塊框和行內框+display(block, inline, none)屬性。

CSS中三種基本的定位機制：普通流，浮動和絕對定位。除非專門指定，不然全部的框都在普通流中定位。顧名思義，普通流中元素的位置由元素在HTML中的位置決定。

塊框，從上到下一個接一個的垂直排列，框之間的垂直距離由框的垂直外邊距計算出來。

行內框，在一行中水平排列。可使用水平內邊距，邊框和水平外邊距調整他們的水平間距。注意：可是垂直外邊距，邊框和內邊距不影響行內框的高度。一樣在行內框上顯式的設置高度和寬度也沒有影響。行內框的高度老是足以容納它所包含的全部行內框。可是設置行高能夠增長這個框的高度，因此，修改行內框的惟一方法是修改行高或者水平內邊距，外邊距或邊框。

好在CSS2.1容許把元素的display屬性設置爲inline-block。這個聲明讓元素像行內元素同樣水平的依次排列。可是，框的內容仍然符合塊框的行爲，例如能顯式的設置寬度，高度和垂直外邊距和內邊距。FireFox3.0及以上，IE8以及Safari和Opera的高版本支持此屬性值。

 

另外匿名行框和匿名塊框的定義做了解：

匿名塊框：將一些文本添加到一個塊級元素的開頭時候，即便沒有把這些文本定義爲塊級元素，它們也會被當作塊級元素對待，例如：

1 <div>
2 
3          some text                //匿名塊框
4 
5          <p>some more text</p>
6 
7 </div>

 

匿名行框：假設有一個包含三行文本的段落，每行文本會造成一個匿名行框。

咱們沒法直接對匿名塊或行框應用樣式。

 

2.       相對定位

經過設置元素的垂直和水平位置，元素「相對於」它的起點進行移動。

 

在使用相對定位的時候，元素仍然佔據原來的空間。所以，移動元素會致使他覆蓋其餘框。

相對定位實際上是被看作普通流定位模型的一部分，由於元素的位置是相對於他在普通流中的位置。

 

3.       絕對定位

與相對定位相反，絕對定位是是元素的位置與文檔流無關，所以不佔據空間。普通流中的其餘元素的佈局就像絕對定位的元素不存在時同樣。

 

絕對定位的元素的位置是相對於距離他最近的那個已定位的祖先元素肯定的，若是元素沒有已定位的祖先元素，那麼它的位置是相對於初始包含塊的。根據用戶代理的不一樣，初始包含塊多是畫布或HTML元素。

經過設置z-index屬性來控制據對定位的框的疊放順序，z-index值越高，框在棧中的位置就越高。

相對於已經相對定位的祖先元素對框進行絕對定位，在大多數現代瀏覽器中實現的很好。可是在Windows上的IE5.5和IE6有bug。若是相對於相對定位的框的右邊或底部設置絕對定位的框的位置，那麼須要確保相對定位的框已經設置了尺寸（寬度和高度）。

在進行頁面佈局的時候，絕對定位是很是有用的，尤爲是在使用了相對定位的祖先元素的狀況下。

由於絕對定位的元素與文檔流無關（不佔位），因此他們不影響普通流中的框。若是擴大絕對定位的框（例如，經過增長字號），周圍的框（指普通文檔流中的框）不會從新定位（而相對定位是佔位的），所以尺寸的任何改變都會致使絕對定位的框產生重疊，從而破壞佈局。

 

4.       固定定位

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

IE6和更低版本不支持，IE7部分支持這個屬性，在實現中有許多bug。

 

5.       浮動

浮動框能夠左右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊緣。

由於浮動框不在文檔的普通流中，因此文檔的普通流中的塊框表現的就像浮動框不存在同樣。

 

 

若是包含塊太窄，沒法容納水平排列的3個浮動元素，那麼其餘浮動塊，向下移動，直到有足夠的地方。若是浮動的元素高度不一樣，那麼當他們向下移動時可能會被其餘浮動元素「卡住」。以下圖：

 

 

行內框和清理：

浮動會讓元素脫離文檔流，再也不影響不浮動的元素。實際上，並不徹底如此。若是浮動元素後面有一個文檔流中的元素，那麼這個元素的框會表現的像浮動根本不存在同樣。可是，框的文本內容會受到浮動元素的影響，會移動以留出空間。用技術上的術語來講就是，浮動元素旁邊的行框被縮短，從而能給浮動元素留出空間，所以行框圍繞浮動框。實際上，建立浮動框是文本能夠環繞圖像，以下圖：

 

要想阻止行框圍繞在浮動框的外邊，須要對包含這些行框的元素應用clear屬性，clear(清理元素)的工做原理是：瀏覽器在元素的頂上添加足夠的外邊距，使元素的頂邊緣垂直降低到浮動框下面。以下圖：

 

 

清除浮動方法

（參考連接：http://www.cnblogs.com/ForEvErNoME/p/3383539.html）

方法1：使用帶clear屬性的空元素

在浮動元素後使用一個空元素如<div class="clear"></div>，並在CSS中賦予.clear{clear:both;}屬性便可清理浮動。亦可以使用<br class="clear" />或<hr class="clear" />來進行清理。

優勢：簡單，代碼少，瀏覽器兼容性好。

缺點：須要添加大量無語義的html元素，代碼不夠優雅，後期不容易維護。

方法2：使用CSS的overflow屬性

給浮動元素的容器添加overflow:hidden;或overflow:auto;能夠清除浮動，另外在 IE6 中還須要觸發 hasLayout ，例如爲父元素設置容器寬高或設置 zoom:1。

在添加overflow屬性後，浮動元素又回到了容器層，把容器高度撐起，達到了清理浮動的效果。

方法3：給浮動的元素的容器添加浮動

給浮動元素的容器也添加上浮動屬性便可清除內部浮動，可是這樣會使其總體浮動，影響佈局，不推薦使用。

方法4：使用鄰接元素處理

什麼都不作，給浮動元素後面的元素添加clear屬性。

方法5：使用CSS的:after僞元素

結合 :after 僞元素（注意這不是僞類，而是僞元素，表明一個元素以後最近的元素）和 IEhack ，能夠完美兼容當前主流的各大瀏覽器，這裏的 IEhack 指的是觸發 hasLayout。

給浮動元素的容器添加一個clearfix的class，而後給這個class添加一個:after僞元素實現元素末尾添加一個看不見的塊元素（Block element）清理浮動。

經過CSS僞元素在容器的內部元素最後添加了一個看不見的空格"020"或點"."，而且賦予clear屬性來清除浮動。須要注意的是爲了IE6和IE7瀏覽器，要給clearfix這個class添加一條zoom:1;觸發haslayout。 

總結：

經過上面的例子，咱們不難發現清除浮動的方法能夠分紅兩類：

一是利用 clear 屬性，包括在浮動元素末尾添加一個帶有 clear: both 屬性的空 div 來閉合元素，其實利用 :after 僞元素的方法也是在元素末尾添加一個內容爲一個點並帶有 clear: both 屬性的元素實現的。

二是觸發浮動元素父元素的 BFC (Block Formatting Contexts, 塊級格式化上下文)，使到該父元素能夠包含浮動元素。

推薦：

在網頁主要佈局時使用:after僞元素方法並做爲主要清理浮動方式；在小模塊如ul裏使用overflow:hidden;（留意可能產生的隱藏溢出元素問題）；若是自己就是浮動元素則可自動清除內部浮動，無需格外處理；正文中使用鄰接元素清理以前的浮動。

最後可使用相對完美的:after僞元素方法清理浮動，文檔結構更加清晰。

《CSS mastery》讀書筆記！

For my lover, CC!