(轉)div+css 布局經驗 - 最簡單的 = 最不變形的（原創技巧）

標籤：style   io   使用   ar   div   問題   sp   代碼   html   

站酷幾年了 一直飽受其恩澤 尤為感激 一直想奉獻些什麼 但是苦於水平 苦於奔波 今天靜下心來 為大家奉獻下 自己的div+css 經驗 ，以下觀點只代表 深海個人立場 希望為初學者提供一條"捷徑". 希望廣大網友提出寶貴意見 同時不希望將初學的您 帶入走火入魔的狀態!

1 ：css （cascading style sheet）：

         初學者可以下載一本css 2.0 手冊 大概48小時的時間可以看完 試完。至於樣式手冊上的單詞（屬性和取值） 多久能背完取決你的努力和英語基礎，請注意 無論是div 還是css 還是html xhtml，其實如果你英文夠好做網頁和聊天沒有差別：

       例1：

<style type="text/css">
.style1{width:500px; height:100px; float:left;}
</style>

你在告訴html 你制定了這樣的一個樣式 寬度500像素 高度100像素 左浮動（如果你不理解什麼是浮動請相信成 靠左對齊）;

.style - 樣式名稱 為什麼使用大括弧擴起來呢？ 因為一句話2句話說不明白 括起來代表他屬於某一個集體；

冒號： 前面的教屬性 就像你自己 有身高 體重一樣！寫樣式就像是介紹：

深海:{身高:170cm; 體重:60kg; }

 

2 div （division）：

div 的英文意思是區分，不加入樣式的情況下 它和p 標記沒有什麼大的區別。

3 div+css

給div 制定了樣式 他們的組合就演繹出了html 世界中強大的組合；

為什麼使用div + css 有人說 它實現了 內容與展示形式的分離。如果你學明白了樣式你會拒絕這樣的說法；

因為table+css 一樣可以！

有人說div+css 天生最佳化了搜尋引擎，為何???

因為同樣是布局 div只需要一層結構 而表格需要3層

例：

<table width="600" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>內容</td>
  </tr>
</table>

<div>內容</div>

比較起來節省了 4行代碼 如果頁面上 出現N個table 那麼可以節省 N*4 行代碼,我覺得這是DIV 唯一可以拿來炫耀一下的東西； 甚至我們也堅信 內層用p標記也可以布局（不信你給p標記加上樣式試試）

那麼 我們要說 DIV+css 也沒什麼 初學者千萬別被他的無聊和重複嚇到

 

4 最大的呼聲！！ 不變形！！！！！！

網上有諸多的文章在說div的變形 （在不同的瀏覽器下不同的效果）

初學的你是不是很怕Firefox 很怕 ie 6？？？？

解決問題的最簡單辦法：

從哪裡來回到哪裡去！！！！！！！！！！！！

不要用什麼if 去判斷瀏覽器 這個世界上的瀏覽器種類沒你想象的 遇到的那麼少！！！！

你要知道你來自table 請你回到table！！

不是叫你用table 是想 table 怎麼布局的！！！！ table 有什麼重要的值 table 為什麼要制定對齊！

div +css 永不變形規則：

1>  記住 3個值 寬度 高度 對齊 永遠記住！

2>  頁面上出現變形 是因為你沒有用div+css 布局！！！

   你是否覺得我在開玩笑？看看以下代碼

  <div class="style1">
內容1
</div>
<img src="xxx.jpg">
<div  class="style2">
內容2
</div>

我相信在頁面的某個部分你會出現類型這樣的代碼 請注意你犯規了 你的布局方式叫 div+image+css

3> 只有矩形和矩形才能布局！！！

html 中所有外層結構都是矩形 哪怕是圖片 圖上畫了 一個圓形 你可以開啟圖片看看 他是矩形！！！

想辦法把元素轉換成矩形並制定對齊 不能轉換成矩形的（文字）利用矩形包裹！ 然後布局 永不變形適用於各種瀏覽器！！！

 

有哪些元素是矩形呢？

table p h1 - marquee embed center ...............................常見的html 標記符都是矩形！！

誰不是矩形呢？？？

文字！ 你是否有一種同感 文字和圖片布局都很難得到好的效果

誰開始不是矩形但是可以轉換成矩形呢？

a 連結本來是文字 當你制定樣式為 display:block 的時候它就變成了矩形！！

 

****************************************************

4>  只要是矩形就有3個必須的屬性： 寬度 高度 對齊 請別忘記他們 只要你時刻記得 div+css 不變形的秘密你已經掌握了 90%， 圖片 也有對齊哦！！

一定要掌握當 對齊不同是 布局出現的問題！

左右左 - 能不變形嗎？

預設 是要換行的哦

div+css的 置中對齊 是有條件的哦（所有當同級元素的對齊都為置中對齊的時候可以採用置中對齊）

 

5>  有些標記是有預設的間距的！！！（內間距 padding 外間距 margin）

body - 外間距

ul - ie下外間距 Firefox下 內間距

p - 內間距

所以一旦使用他們要記得把他們先格式化！ 操作方法（內間距 padding:0px; 外間距 margin:0px;） 

 

6> Firefox下 當高度為auto是 無法自適應 解決辦法（overfollow:hidden）

7> 在還沒有完全掌握定位之前請放棄使用。本人堅信 一般的html 不是用定位完全可以布局，因為talbe 就沒有定位！！！！！ 一樣可以布局很好 很穩定。div 和 table 沒有實際區別 只是節省代碼！！

8> 再次強調 3個值 永遠記住: 寬度 高度 對齊（永不變形的唯一秘訣）+ 只有矩形才有這樣的3個值！

 

div +css 的信心來源於多練 做的越多靜態越多 本人學習div 的總計時間是48小時。用的時間超過幾百小時。

現在有信心應對所有的瀏覽器 如果想學好div 請現在起 開啟偉大的Dreamweaver 開始你的旅程吧

祝你愉快！

 

個人拙見 歡迎批評！

本文轉自站酷，因為感覺極好，適合CSS+DIV初學者，故儲存下來，以備不時之需！

(轉)div+css 布局經驗 - 最簡單的 = 最不變形的（原創技巧）