盒子模型&position定位

有時候深深的感受語文這門課程其實頗有用， 至少之前學的時候沒有感受到

直到如今閱讀大量的別人的資料文章的時候或者是看一些題目.......

總之：認真閱讀當心品味

固然，前面的孤言自語和本文無關，只是筆者在有段時間內誤解一個與本文有關的知識點源於閱讀的不當心，

筆者在寫本篇文章以前閱讀了大量的資料，試圖以一種簡單易懂的方式把佈局的精髓展示給讀者；

盒子模型：

所謂盒子模型：把頁面上的任何一個元素都當作一個盒子，究竟是一個怎麼樣的盒子，固然這個盒子有本身獨特的區別

下面就是盒子的模型圖：

邊框邊距那些通常要自行指定，其實每一個瀏覽器有本身的內置默認css文件，若是用戶對有些屬性沒有設定即按照瀏覽器默認的

css文件屬性進行配置，不一樣的瀏覽器的默認css文件不同，爲了避免同瀏覽器的兼容問題，咱們經常要清除這種瀏覽器默認行爲

因此在別人的css文件裏面經常看到最前面有這麼幾行：*{margin:0;  padding:0;}

前面的 * 號表明全部的標籤元素，就是把全部的標籤的外邊距和內邊距屬性歸零，

這樣作的缺點是，標籤太多，這句話是在每一個標籤都加了這個屬性，可是有不少標籤在整個頁面中沒有被使用，

標籤這麼多，這樣籠統的強加了這兩個屬性顯然頁面載入方面性能很差；

如今比較好的作法是把須要的元素才加這兩個屬性，好比我只須要將 body div ul

這幾個標籤加上這兩個屬性就ok了：body,div,ul{margin:0;  padding:0;}

盒子模型在頁面佈局中舉足輕重，內外邊距能夠控制元素位置距離，邊框能夠作一些樣式；

html元素有兩種：行內元素    塊狀元素

塊狀元素裏面放的內容能夠是一個或多個塊狀元素也能夠是行內元素，

可是行內元素裏面不能放塊狀元素

好比在span 裏面放一個div是錯誤的，

position定位：static  relative absolute fixed

若是沒有指定就是默認的：static  

relative：相對定位-------相對於父元素定位，沒有父元素就參照頁面左上角（瀏覽器）；

absolute：絕對定位-------相對於父元素定位

分兩種狀況：1：父元素的position屬性值爲：static  也就是沒有設置position屬性

定位標準始終爲瀏覽器；

2：父元素的position屬性值爲：absolute || relative ；

定位標準爲父元素；

 

使用絕對定位的盒子以它的「最近」一個「已經定位」（使用了position屬性，而且設置爲不是「static」的任意一種方式)

      的「祖先元素」爲基準進行偏移，若是沒有已經定位的祖先元素，那麼會以瀏覽器窗口爲基準進行定位。

 

網上看到不少float定位的這類說法，這種說法是不對的，利用浮動能夠起到定位的效果，因此有的人慣以定位的說法，

引發初學者的疑惑；

還有個常見的說法 ：DIV+CSS佈局，這種說法原由和上面同樣，正確的叫法是：xHTML+CSS佈局，

好了 ，就寫到這裏，行裏字間仍有不少不足的地方，筆者隨時更改；

尊重做者，轉載請註明出處：http://blog.csdn.net/jiecooner