web前端第五節課
margin屬性值所指方向：
margin屬性包含了margin left ：距左元素塊距離（設置距左內邊距） ；margin top：距頭頂(上)元素塊距離（設置距頂部元素塊距離）；margin right ：距右元素塊距離（設置距右元素塊距） ；margin bottom ：底元素塊距離（設置距低（下）元素塊距）。
單標簽和雙標簽：
雙標簽：
<html><head><title><body><table><tr><td><span><p><form><h1><h2><h3><h4><h5><h6><object><style><b><u><strong><i><div><a><script><center>
單標簽：
<br><hr><img><input><param><meta><link>
相對長度em定義即使用方法：
<em> 標簽告訴瀏覽器把其中的文本表示為強調的內容。對於所有瀏覽器來說，這意味著要把這段文字用斜體來顯示。
在文本中加入強調也需要有技巧。如果強調太多，有些重要的短語就會被漏掉；如果強調太少，就無法真正突出重要的部分。這與調味品一樣，最好還是不要濫用強調。
盡管現在 <em> 標簽修飾的內容都是用斜體字來顯示，但這些內容也具有更廣泛的含義，將來的某一天，瀏覽器也可能會使用其他的特殊效果來顯示強調的文本。如果你只想使用斜體字來顯示文本的話，請使用 <i> 標簽。除此之外，文檔中還可以包括用來改變文本顯示的級聯樣式定義。
除強調之外，當引入新的術語或在引用特定類型的術語或概念時作為固定樣式的時候，也可以考慮使用 <em> 標簽。例如，W3School 經常對重要的術語使用 <em> 標簽。<em> 標簽可以用來把這些名稱和其他斜體字區別開來。
不同瀏覽器的兼容性：
為什麽會出現兼容性問題
所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統一的情況。在大多數情況下，用戶用什麽瀏覽器來查看同一網站，都應該是統一的顯示效果。所以瀏覽器的兼容性問題是前端開發人員經常會碰到和必須要解決的問題。
瀏覽器兼容問題一：不同瀏覽器的標簽默認的外邊框和內邊框不同
問題癥狀： 隨便寫幾個標簽，不加樣式控制的情況下，各自的margin 和padding差異較大。
碰到頻率: 100%
解決方案： css裏 *{margin:0;padding:0;}
備註： 這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的css文件開頭都會用通配符*來設置各個標簽的內外邊框是0。
瀏覽器兼容問題二：塊屬性標簽float後，又有橫行的margin情況下，在IE6顯示margin比設置的大
問題癥狀: 常見癥狀是IE6中後面的一塊被頂到下一行
碰到頻率： 90%（稍微復雜點的頁面都會碰到，float布局最常見的瀏覽器兼容問題）
解決方案： 在float的標簽樣式控制中加入display:inline;將其轉化為行內屬性
備註： 我們最常用的就是div+css布局了，而div就是一個典型的塊屬性標簽，橫向布局的時候我們通常都是用div float實現的，橫向的間距設置如果用margin實現，這就是一個必然會碰到的兼容性問題。
瀏覽器兼容問題三：設置較小高度標簽（一般小於10px），在IE6，IE7，遨遊中高度超出自己設置高度
問題癥狀： IE6、7和遨遊裏這個標簽的高度不受控制，超出自己設置的高度
碰到頻率： 60%
解決方案： 給超出高度的標簽設置overflow:hidden;或者設置行高line-height 小於你設置的高度。
備註： 這種情況一般出現在我們設置小圓角背景的標簽裏。出現這個問題的原因是IE8之前的瀏覽器都會給標簽一個最小默認的行高的高度。即使你的標簽是空的，這個標簽的高度還是會達到默認的行高。
瀏覽器兼容問題四：行內屬性標簽，設置display:block後采用float布局，又有橫行的margin的情況，IE6間距bug（類似第二種）
問題癥狀： IE6裏的間距比超過設置的間距
碰到幾率： 20%
解決方案： 在display:block;後面加入display:inline;display:table;
備註： 行內屬性標簽，為了設置寬高，我們需要設置display:block;(除了 input標簽比較特殊)。在用float布局並有橫向的margin後，在IE6下，他就具有了塊屬性float後的橫向margin的bug。不過因為它本身就是行內屬性標簽，所以我們再加上display:inline的話，它的高寬就不可設了。這時候我們還需要在display:inline後面加入display:talbe。
瀏覽器兼容問題五：圖片默認有間距
問題癥狀： 幾個img標簽放在一起的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起作用。
碰到幾率 ：20%
解決方案： 使用float屬性為img布局
備註： 因為img標簽是行內屬性標簽，所以只要不超出容器寬度，img標簽都會排在一行裏，但是部分瀏覽器的img標簽之間會有個間距。去掉這個間距使用float是正道。（使用負margin，雖然能解決，但負margin 本身就是容易引起瀏覽器兼容問題的用法，所以不建議使用）
瀏覽器兼容問題六：標簽最低高度設置min-height不兼容
問題癥狀： 因為min-height本身就是一個不兼容的css屬性，所以設置min-height時不能很好的被各個瀏覽器兼容
碰到幾率 ：5%
解決方案： 如果我們要設置一個標簽的最小高度200px，需要進行的設置為：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
備註： 在B/S系統前端開時， 有很多情況下我們又這種需求。當內容小於一個值（如300px）時。容器的高度為300px；當內容高度大於這個值時，容器高度被撐高，而不是出現滾動條。這時候我們就會面臨這個兼容性問題。
二、如何應對兼容性問題
做兼容頁面的方法是：每寫一小段代碼（布局中的一行或者一塊）我們都要在不同的瀏覽器中看是否兼容，當然熟練到一定的程度就沒這麽麻煩了。建議經常會碰到兼容性問題的新手使用。很多兼容性問題都是因為瀏覽器對標簽的默認屬性解析不同造成的，只要我們稍加設置都能輕松地解決這些兼容問題。如果我們熟悉標簽的默認屬性的話，就能很好的理解為什麽會出現兼容問題以及怎麽去解決這些兼容問題
1. css hack技術
css hack 技術是通過一些瀏覽器特殊支持或者不支持的語句，確定一個css樣式能給被瀏覽器解析或者不能被瀏覽器解析。css hack技術針對不同瀏覽器的差異進行利用和設計，使用它可以在最大限度的讓所以的瀏覽器下顯示同樣的風格和模式。
css hack 技術是一種改善CSS在不同瀏覽器下的表現形式的技巧與方法。 CSS hack技術是通過一些瀏覽器特殊或者不支持的語句，使一個CSS樣式能夠被瀏覽器解析或者不能解析的方法實現的。
CSS Hack的原理只有兩條：兼容性和順序。就是利用書寫順序和不同瀏覽器對一些特定書寫方法的解析方式不同而達到不同的效果。不管是什麽方法，書寫的順序都是firefox的寫在前面，IE7的寫在中間，IE6的寫在最後面。（其順序正好是對CSS2.0標準執行的好壞程度）
可把瀏覽器分為3類：IE6 ；IE7和遨遊；其他（IE8 chrome ff safari opera等）。IE6認識的hacker 是下劃線_ 和星號 *；IE7和遨遊只認識的hacker是星號 * ；而其他瀏覽器下劃線_和星號*都不認識。
比如有這樣一個css樣式設置
#exam{height:300px;
*height:200px;
_height:100px; }
IE6瀏覽器在讀到 height:300px的時候會認為高度是300px；繼續往下讀，他也認識*heihgt，所以當IE6讀到*height:200px的時候會覆蓋掉前一條的相沖突設置，認為高度是200px。繼續往下讀，IE6還認識_height，所以他又會覆蓋掉200px高的設置，把高度設置為100px；IE7和遨遊也是一樣的從高度300px的設置往下讀。當它們讀到*height200px的時候就停下了，因為它們不認識_height。所以它們會把高度解析為200px；剩下的瀏覽器只認識第一個height:300px;所以他們會把高度解析為300px。因為優先級相同且相沖突的屬性設置後一個會覆蓋掉前一個，所以書寫的次序是很重要的。
DIV＋CSS網頁布局這是一種趨勢，不過在使用DIV＋CSS網站設計的時候，應該註意css樣式兼容不同瀏覽器問題，特別是對完全使用DIV+CSS設計的網頁，就應該更註意IE6、 IE7 和FF對CSS樣式的兼容。
什麽是瀏覽器兼容：當我們使用不同的瀏覽器（Firefox、IE7、IE6）訪問同一個網站，或者頁面的時候，會出現一些不兼容的問題，在這種瀏覽器下顯示正常，在另一種下就亂了，目前解決這個瀏覽器的問題，最直接的方法就是利用CSS hack技術為每個瀏覽器各寫一段css，讓它們各執行各的，這就是CSS hack技術解決CSS在不同瀏覽器中的兼容性問題的核心。
2. !important
!important是被Firefox瀏覽器所支持的一種用於確定優先級的技術。隨著IE7對!important的支持， !important 方法現在只針對IE6的兼容性問題。註意：!important也算是hack的一種。不過實用性較小。
例如:
#example {
width: 100px !important;
width: 200px;
}
三、CSS HACK的常用方法
首先需要知道的是：
所有瀏覽器 通用 height: 100px;
IE6 專用 _height: 100px;
IE7 專用 *+height: 100px;
IE6、IE7 共用 *height: 100px;
IE7、FF 共用 height: 100px !important;
例如：
#example { height:100px; }
* html #example { height:200px; }
*+html #example { height:300px; }
下面的這種方法比較簡單
舉幾個例子：
1、IE6 - IE7+FF（-為區別，+為共同）
#example {
height:100px;
_height:200px;
}
其實這個用上面說的第一種方法也可以
#example {
height:100px !important;
height:200px;
}
2、IE6+IE7 - FF
#example {
height:100px;
*height:200px;
}
3、IE6+FF - IE7
#example {
height:100px;
*+height:200px;
}
4、IE6 IE7 FF 各不相同
#example {
height:100px;
_height:200px;
*+height:300px;
}
或：
#example {
height:100px;
*height:300px;
_height:200px;
}
需要註意的是，代碼的順序一定不能顛倒了，要不又前功盡棄了。因為瀏覽器在解釋程序的時候，如果重名的話，會用後面的覆蓋前面的，就象給變量賦值一個道理，所以我們把通用的放前面，越專用的越放後面。
解釋一下4的代碼：讀代碼的時候，第一行height:100px; 大家都通用，IE6 IE7 FF 都顯示100px。到了第二行*height:300px; FF不認識這個屬性，IE6 IE7都認，所以FF還顯示100px，而IE6 IE7把第一行得到的height屬性給覆蓋了，都顯示300px。到了第三行_height:200px;只有IE6認識，所以IE6就又覆蓋了在第二行得到的height，最終顯示200px。這樣，三個瀏覽器都有自己的height屬性了。
需要說明的是：*+html 對IE7的兼容 必須保證HTML頂部有如下聲明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd ">
四、使用IE專用的條件註釋
條件註釋是IE特有的一種功能，能對IE系列產品進行單獨的XHTML代碼處理，註意，主要是針對XHTML,而非CSS。
條件註釋能被IE判斷是什麽版本的瀏覽器，並在符合條件的情況下顯示其中的內容，從IE5.0到7.0都支持註釋功能，而且版本號精確到小數點後4位。
如：<!--[if IE 6.0]>此內容只有IE6.0可見<![endif]-->
IE條件註釋還支持感嘆號非操作：
如：<!--[if !IE 6.0]>此內容除了IE6.0版本之外都可見<![endif]-->
<!--其他瀏覽器 -->
<link rel="stylesheet" type="text/css" href="css.css" />
<!--[if IE 7]>
<!-- 適合於IE7 -->
<link rel="stylesheet" type="text/css" href="IE7.css" />
<![endif]-->
<!--[if lte IE 6]>
<!-- 適合於IE6及以下 -->
<link rel="stylesheet" type="text/css" href="IE.css" />
<![endif]-->
IE的if條件Hack
1. <!--[if !IE]><!--> 除IE外都可識別 <!--<![endif]-->
2. <!--[if IE]> 所有的IE可識別 <![endif]-->
3. <!--[if IE 5.0]> 只有IE5.0可以識別 <![endif]-->
4. <!--[if IE 5]> 僅IE5.0與IE5.5可以識別<![endif]-->
5. <!--[if gt IE 5.0]> IE5.0以上版本都可以識別 <![endif]-->
6. <!--[if IE 6]> 僅IE6可識別 <![endif]-->
7. <!--[if lt IE 6]> IE6以及IE6以下版本可識別<![endif]-->
8. <!--[if gte IE 6]> IE6以及IE6以上版本可識別<![endif]-->
9. <!--[if IE 7]> 僅IE7可識別 <![endif]-->
10. <!--[if lt IE 7]> IE7以及IE7以下版本可識別<![endif]-->
11. <!--[if gte IE 7]> IE7以及IE7以上版本可識別<![endif]-->
註:
gt = Great Then 大於
> = > 大於號
lt = Less Then 小於
< = < 小於號
gte = Great Then or Equal 大於或等於
lte = Less Then or Equal 小於或等於
五、FLOAT閉合（clearing float）
網頁在某些瀏覽器上顯示錯位很多時候都是因為使用了float浮動而沒有真正閉合，這也是div無法自適應高度的一個原因。如果父div沒有設 float而其子div卻設了float的話，父div無法包住整個子DIV，這種情況一般出現在一個父DIV下包含多個子DIV。解決辦法：
1、給父DIV也設上float。
2、在所有子DIV後新加一個空DIV(不推薦，有些瀏覽器可以看見空DIV產生的空隙)
比如：
.parent{width:100px;}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
.clear{clear:both;margin:0;parding0;height:0px;font-size:0px;}
<div class="parent">
<div class="son1"></div>
<div class="son2"></div>
<div class="clear"></div>
</div>
3、overflow:auto
只要在父DIV的CSS中加上overflow:auto就搞定。
舉例：
.parent{width:100px;overflow:auto }
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
<div class="parent">
<div class="son1"></div>
<div class="son2"></div>
</div>
原理是，外圍元素之所以不能很好的延伸，問題出在了overflow上，因為overflow不可見。現在只要將給外圍元素添加一個“overflow:auto”，就可以解決問題，結果是除了IE，真的可以解決。下來就要解決IE的問題了，再加上“_height:1%”，這個問題就完全解決了。
六、需要註意的一些兼容細節
1， FF下給 div 設置 padding 後會導致 width 和 height 增加(DIV的實際寬度=DIV寬+Padding)， 但IE不會。
解決辦法：給DIV設定IE、FF兩個寬度，在IE的寬度前加上IE特有標記" * "號。
2， 頁面居中問題.
body {TEXT-ALIGN: center;} 在IE下足夠了，但FF下失效。
解決辦法：加上"MARGIN-RIGHT: auto; MARGIN-LEFT: auto; "
3， 有的時候在IE6上看見一些奇怪的間隙，可我們高度明明設好了呀。
解決辦法：試試在有空隙的DIV上加上"font-size:0px;"
4， 浮動IE6產生的雙倍距離
#box{ float:left;
width:100px;
margin:0 0 0 100px;
}
這種情況之下IE6會產生200px的距離
解決辦法：加上display:inline，使浮動忽略
這裏細說一下block，inline兩個元素，Block元素的特點是:總是在新行上開始，高度，寬度，行高，邊距都可以控制(塊元素);Inline元素的特點是:和其他元素在同一行上，…不可控制(內嵌元素);
#box{ display:block; //可以為內嵌元素模擬為塊元素 display:inline; //實現同一行排列的的效果
5、頁面的最小寬度
min-width是個非常方便的CSS命令，它可以指定元素最小也不能小於某個寬度，這樣就能保證排版一直正確。但IE不認得min-這個定義，但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了，如果只用寬度和高度，正常的瀏覽器裏這兩個值就不會變，如果只用min-width和min-height的話，IE下面根本等於沒有設置寬度和高度。比如要設置背景圖片，這個寬度是比較重要的。
解決辦法：為了讓這一命令在IE上也能用，可以把一個<div> 放到 <body> 標簽下，然後為div指定一個類：
然後CSS這樣設計：
#container{
min-width: 600px;
width:e-xpression(document.body.clIEntWidth < 600? “600px”: “auto” );
}
第一個min-width是正常的；但第2行的width使用了Javascript，這只有IE才認得，這也會讓你的HTML文檔不太正規。它實際上通過Javascript的判斷來實現最小寬度。
6、UL和FORM標簽的padding與margin
ul標簽在FF中默認是有padding值的，而在IE中只有margin默認有值。FORM標簽在IE中，將會自動margin一些邊距，而在FF中margin則是0；
解決辦法：css中首先都使用這樣的樣式ul，form{margin:0;padding:0;}給定義死了，後面就不會為這個頭疼了.
7 ，DIV浮動IE文本產生3象素的bug
左邊對象浮動，右邊采用外補丁的左邊距來定位，右邊對象內的文本會離左邊有3px的間距。
#box{
float:left;
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
//這句是關鍵
}
HTML代碼
<DIV id=box>
<DIV id=left></DIV>
<DIV id=right></DIV>
</DIV>
上面這段代碼的理解：
第一、只要right定義了width屬性，在FF下絕對就會兩行顯示
第二、兩個width都定義為百分比的話，就算都為100%在IE下也會一行顯示。所以上面那句所謂“這句是關鍵”根本沒用，不加也在一行，除非width定義的是數值才用得上。
所以說上面這段代碼其實用處不大，至少在FF下不行。其實只要只定義left的width就行了，right不定義width就不管在IE還是FF 下都能成功，但這樣的話父DIV BOX並沒有真正的包含LEFT和RIGHT兩子DIV。最簡單的辦法就是在RIGHT中加上float:left就 OK了。
8，截字省略號
.hh { -o-text-overflow:ellipsis;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
這個是在越出長度後會自行的截掉多出部分的文字，並以省略號結尾。技術是好技術，很多人都喜歡亂用，但註意Firefox並不支持。
9、DOCTYPE聲明的重要性
DOCTYPE是document type(文檔類型)的簡寫，在web設計中用來說明你用的XHTML或者HTML是什麽版本。
要建立符合標準的網頁，DOCTYPE聲明是必不可少的關鍵組成部分；除非你的XHTML確定了一個正確的DOCTYPE，否則你的標識和CSS都不會生效。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文檔類型定義，裏面包含了文檔的規則，瀏覽器就根據你定義的DTD來解釋你頁面的標識，並展現出來。
XHTML 1.0 提供了三種DTD聲明可供選擇：
* 過渡的(Transitional)：要求非常寬松的DTD，它允許你繼續使用HTML4.01的標識(但是要符合xhtml的寫法)，完整代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
* 嚴格的(Strict)：要求嚴格的DTD，你不能使用任何表現層的標識和屬性，例如<br>，完整代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
* 框架的(Frameset)：專門針對框架頁面設計使用的DTD，如果你的頁面中包含有框架，需要采用這種DTD，完整代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
理想情況當然是嚴格的DTD，但對於我們大多數剛接觸web標準的設計師來說，過渡的DTD(XHTML 1.0 Transitional)是目前理想選擇。因為這種DTD還允許我們使用表現層的標識、元素和屬性，也比較容易通過W3C的代碼校驗。
註：上面說的"表現層的標識、屬性"是指那些純粹用來控制表現的tag，例如用於排版的表格、背景顏色標識等。在XHTML中標識是用來表示結構的，而不是用來實現表現形式，我們過渡的目的是最終實現數據和表現相分離。
DOCTYPE聲明必須放在每一個XHTML文檔最頂部，在所有代碼和標識之上。
post和get的區別：
一、為什麽會出現兼容性問題
所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統一的情況。在大多數情況下，用戶用什麽瀏覽器來查看同一網站，都應該是統一的顯示效果。所以瀏覽器的兼容性問題是前端開發人員經常會碰到和必須要解決的問題。
瀏覽器兼容問題一：不同瀏覽器的標簽默認的外邊框和內邊框不同
問題癥狀： 隨便寫幾個標簽，不加樣式控制的情況下，各自的margin 和padding差異較大。
碰到頻率: 100%
解決方案： css裏 *{margin:0;padding:0;}
備註： 這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的css文件開頭都會用通配符*來設置各個標簽的內外邊框是0。
瀏覽器兼容問題二：塊屬性標簽float後，又有橫行的margin情況下，在IE6顯示margin比設置的大
問題癥狀: 常見癥狀是IE6中後面的一塊被頂到下一行
碰到頻率： 90%（稍微復雜點的頁面都會碰到，float布局最常見的瀏覽器兼容問題）
解決方案： 在float的標簽樣式控制中加入display:inline;將其轉化為行內屬性
備註： 我們最常用的就是div+css布局了，而div就是一個典型的塊屬性標簽，橫向布局的時候我們通常都是用div float實現的，橫向的間距設置如果用margin實現，這就是一個必然會碰到的兼容性問題。
瀏覽器兼容問題三：設置較小高度標簽（一般小於10px），在IE6，IE7，遨遊中高度超出自己設置高度
問題癥狀： IE6、7和遨遊裏這個標簽的高度不受控制，超出自己設置的高度
碰到頻率： 60%
解決方案： 給超出高度的標簽設置overflow:hidden;或者設置行高line-height 小於你設置的高度。
備註： 這種情況一般出現在我們設置小圓角背景的標簽裏。出現這個問題的原因是IE8之前的瀏覽器都會給標簽一個最小默認的行高的高度。即使你的標簽是空的，這個標簽的高度還是會達到默認的行高。
瀏覽器兼容問題四：行內屬性標簽，設置display:block後采用float布局，又有橫行的margin的情況，IE6間距bug（類似第二種）
問題癥狀： IE6裏的間距比超過設置的間距
碰到幾率： 20%
解決方案： 在display:block;後面加入display:inline;display:table;
備註： 行內屬性標簽，為了設置寬高，我們需要設置display:block;(除了 input標簽比較特殊)。在用float布局並有橫向的margin後，在IE6下，他就具有了塊屬性float後的橫向margin的bug。不過因為它本身就是行內屬性標簽，所以我們再加上display:inline的話，它的高寬就不可設了。這時候我們還需要在display:inline後面加入display:talbe。
瀏覽器兼容問題五：圖片默認有間距
問題癥狀： 幾個img標簽放在一起的時候，有些瀏覽器會有默認的間距，加了問題一中提到的通配符也不起作用。
碰到幾率 ：20%
解決方案： 使用float屬性為img布局
備註： 因為img標簽是行內屬性標簽，所以只要不超出容器寬度，img標簽都會排在一行裏，但是部分瀏覽器的img標簽之間會有個間距。去掉這個間距使用float是正道。（使用負margin，雖然能解決，但負margin 本身就是容易引起瀏覽器兼容問題的用法，所以不建議使用）
瀏覽器兼容問題六：標簽最低高度設置min-height不兼容
問題癥狀： 因為min-height本身就是一個不兼容的css屬性，所以設置min-height時不能很好的被各個瀏覽器兼容
碰到幾率 ：5%
解決方案： 如果我們要設置一個標簽的最小高度200px，需要進行的設置為：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
備註： 在B/S系統前端開時， 有很多情況下我們又這種需求。當內容小於一個值（如300px）時。容器的高度為300px；當內容高度大於這個值時，容器高度被撐高，而不是出現滾動條。這時候我們就會面臨這個兼容性問題。
二、如何應對兼容性問題
做兼容頁面的方法是：每寫一小段代碼（布局中的一行或者一塊）我們都要在不同的瀏覽器中看是否兼容，當然熟練到一定的程度就沒這麽麻煩了。建議經常會碰到兼容性問題的新手使用。很多兼容性問題都是因為瀏覽器對標簽的默認屬性解析不同造成的，只要我們稍加設置都能輕松地解決這些兼容問題。如果我們熟悉標簽的默認屬性的話，就能很好的理解為什麽會出現兼容問題以及怎麽去解決這些兼容問題
1. css hack技術
css hack 技術是通過一些瀏覽器特殊支持或者不支持的語句，確定一個css樣式能給被瀏覽器解析或者不能被瀏覽器解析。css hack技術針對不同瀏覽器的差異進行利用和設計，使用它可以在最大限度的讓所以的瀏覽器下顯示同樣的風格和模式。
css hack 技術是一種改善CSS在不同瀏覽器下的表現形式的技巧與方法。 CSS hack技術是通過一些瀏覽器特殊或者不支持的語句，使一個CSS樣式能夠被瀏覽器解析或者不能解析的方法實現的。
CSS Hack的原理只有兩條：兼容性和順序。就是利用書寫順序和不同瀏覽器對一些特定書寫方法的解析方式不同而達到不同的效果。不管是什麽方法，書寫的順序都是firefox的寫在前面，IE7的寫在中間，IE6的寫在最後面。（其順序正好是對CSS2.0標準執行的好壞程度）
可把瀏覽器分為3類：IE6 ；IE7和遨遊；其他（IE8 chrome ff safari opera等）。IE6認識的hacker 是下劃線_ 和星號 *；IE7和遨遊只認識的hacker是星號 * ；而其他瀏覽器下劃線_和星號*都不認識。
比如有這樣一個css樣式設置
#exam{height:300px;
*height:200px;
_height:100px; }
IE6瀏覽器在讀到 height:300px的時候會認為高度是300px；繼續往下讀，他也認識*heihgt，所以當IE6讀到*height:200px的時候會覆蓋掉前一條的相沖突設置，認為高度是200px。繼續往下讀，IE6還認識_height，所以他又會覆蓋掉200px高的設置，把高度設置為100px；IE7和遨遊也是一樣的從高度300px的設置往下讀。當它們讀到*height200px的時候就停下了，因為它們不認識_height。所以它們會把高度解析為200px；剩下的瀏覽器只認識第一個height:300px;所以他們會把高度解析為300px。因為優先級相同且相沖突的屬性設置後一個會覆蓋掉前一個，所以書寫的次序是很重要的。
DIV＋CSS網頁布局這是一種趨勢，不過在使用DIV＋CSS網站設計的時候，應該註意css樣式兼容不同瀏覽器問題，特別是對完全使用DIV+CSS設計的網頁，就應該更註意IE6、 IE7 和FF對CSS樣式的兼容。
什麽是瀏覽器兼容：當我們使用不同的瀏覽器（Firefox、IE7、IE6）訪問同一個網站，或者頁面的時候，會出現一些不兼容的問題，在這種瀏覽器下顯示正常，在另一種下就亂了，目前解決這個瀏覽器的問題，最直接的方法就是利用CSS hack技術為每個瀏覽器各寫一段css，讓它們各執行各的，這就是CSS hack技術解決CSS在不同瀏覽器中的兼容性問題的核心。
2. !important
!important是被Firefox瀏覽器所支持的一種用於確定優先級的技術。隨著IE7對!important的支持， !important 方法現在只針對IE6的兼容性問題。註意：!important也算是hack的一種。不過實用性較小。
例如:
#example {
width: 100px !important;
width: 200px;
}
三、CSS HACK的常用方法
首先需要知道的是：
所有瀏覽器 通用 height: 100px;
IE6 專用 _height: 100px;
IE7 專用 *+height: 100px;
IE6、IE7 共用 *height: 100px;
IE7、FF 共用 height: 100px !important;
例如：
#example { height:100px; }
* html #example { height:200px; }
*+html #example { height:300px; }
下面的這種方法比較簡單
舉幾個例子：
1、IE6 - IE7+FF（-為區別，+為共同）
#example {
height:100px;
_height:200px;
}
其實這個用上面說的第一種方法也可以
#example {
height:100px !important;
height:200px;
}
2、IE6+IE7 - FF
#example {
height:100px;
*height:200px;
}
3、IE6+FF - IE7
#example {
height:100px;
*+height:200px;
}
4、IE6 IE7 FF 各不相同
#example {
height:100px;
_height:200px;
*+height:300px;
}
或：
#example {
height:100px;
*height:300px;
_height:200px;
}
需要註意的是，代碼的順序一定不能顛倒了，要不又前功盡棄了。因為瀏覽器在解釋程序的時候，如果重名的話，會用後面的覆蓋前面的，就象給變量賦值一個道理，所以我們把通用的放前面，越專用的越放後面。
解釋一下4的代碼：讀代碼的時候，第一行height:100px; 大家都通用，IE6 IE7 FF 都顯示100px。到了第二行*height:300px; FF不認識這個屬性，IE6 IE7都認，所以FF還顯示100px，而IE6 IE7把第一行得到的height屬性給覆蓋了，都顯示300px。到了第三行_height:200px;只有IE6認識，所以IE6就又覆蓋了在第二行得到的height，最終顯示200px。這樣，三個瀏覽器都有自己的height屬性了。
需要說明的是：*+html 對IE7的兼容 必須保證HTML頂部有如下聲明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd ">
四、使用IE專用的條件註釋
條件註釋是IE特有的一種功能，能對IE系列產品進行單獨的XHTML代碼處理，註意，主要是針對XHTML,而非CSS。
條件註釋能被IE判斷是什麽版本的瀏覽器，並在符合條件的情況下顯示其中的內容，從IE5.0到7.0都支持註釋功能，而且版本號精確到小數點後4位。
如：<!--[if IE 6.0]>此內容只有IE6.0可見<![endif]-->
IE條件註釋還支持感嘆號非操作：
如：<!--[if !IE 6.0]>此內容除了IE6.0版本之外都可見<![endif]-->
<!--其他瀏覽器 -->
<link rel="stylesheet" type="text/css" href="css.css" />
<!--[if IE 7]>
<!-- 適合於IE7 -->
<link rel="stylesheet" type="text/css" href="IE7.css" />
<![endif]-->
<!--[if lte IE 6]>
<!-- 適合於IE6及以下 -->
<link rel="stylesheet" type="text/css" href="IE.css" />
<![endif]-->
IE的if條件Hack
1. <!--[if !IE]><!--> 除IE外都可識別 <!--<![endif]-->
2. <!--[if IE]> 所有的IE可識別 <![endif]-->
3. <!--[if IE 5.0]> 只有IE5.0可以識別 <![endif]-->
4. <!--[if IE 5]> 僅IE5.0與IE5.5可以識別<![endif]-->
5. <!--[if gt IE 5.0]> IE5.0以上版本都可以識別 <![endif]-->
6. <!--[if IE 6]> 僅IE6可識別 <![endif]-->
7. <!--[if lt IE 6]> IE6以及IE6以下版本可識別<![endif]-->
8. <!--[if gte IE 6]> IE6以及IE6以上版本可識別<![endif]-->
9. <!--[if IE 7]> 僅IE7可識別 <![endif]-->
10. <!--[if lt IE 7]> IE7以及IE7以下版本可識別<![endif]-->
11. <!--[if gte IE 7]> IE7以及IE7以上版本可識別<![endif]-->
註:
gt = Great Then 大於
> = > 大於號
lt = Less Then 小於
< = < 小於號
gte = Great Then or Equal 大於或等於
lte = Less Then or Equal 小於或等於
五、FLOAT閉合（clearing float）
網頁在某些瀏覽器上顯示錯位很多時候都是因為使用了float浮動而沒有真正閉合，這也是div無法自適應高度的一個原因。如果父div沒有設 float而其子div卻設了float的話，父div無法包住整個子DIV，這種情況一般出現在一個父DIV下包含多個子DIV。解決辦法：
1、給父DIV也設上float。
2、在所有子DIV後新加一個空DIV(不推薦，有些瀏覽器可以看見空DIV產生的空隙)
比如：
.parent{width:100px;}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
.clear{clear:both;margin:0;parding0;height:0px;font-size:0px;}
<div class="parent">
<div class="son1"></div>
<div class="son2"></div>
<div class="clear"></div>
</div>
3、overflow:auto
只要在父DIV的CSS中加上overflow:auto就搞定。
舉例：
.parent{width:100px;overflow:auto }
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
<div class="parent">
<div class="son1"></div>
<div class="son2"></div>
</div>
原理是，外圍元素之所以不能很好的延伸，問題出在了overflow上，因為overflow不可見。現在只要將給外圍元素添加一個“overflow:auto”，就可以解決問題，結果是除了IE，真的可以解決。下來就要解決IE的問題了，再加上“_height:1%”，這個問題就完全解決了。
六、需要註意的一些兼容細節
1， FF下給 div 設置 padding 後會導致 width 和 height 增加(DIV的實際寬度=DIV寬+Padding)， 但IE不會。
解決辦法：給DIV設定IE、FF兩個寬度，在IE的寬度前加上IE特有標記" * "號。
2， 頁面居中問題.
body {TEXT-ALIGN: center;} 在IE下足夠了，但FF下失效。
解決辦法：加上"MARGIN-RIGHT: auto; MARGIN-LEFT: auto; "
3， 有的時候在IE6上看見一些奇怪的間隙，可我們高度明明設好了呀。
解決辦法：試試在有空隙的DIV上加上"font-size:0px;"
4， 浮動IE6產生的雙倍距離
#box{ float:left;
width:100px;
margin:0 0 0 100px;
}
這種情況之下IE6會產生200px的距離
解決辦法：加上display:inline，使浮動忽略
這裏細說一下block，inline兩個元素，Block元素的特點是:總是在新行上開始，高度，寬度，行高，邊距都可以控制(塊元素);Inline元素的特點是:和其他元素在同一行上，…不可控制(內嵌元素);
#box{ display:block; //可以為內嵌元素模擬為塊元素 display:inline; //實現同一行排列的的效果
5、頁面的最小寬度
min-width是個非常方便的CSS命令，它可以指定元素最小也不能小於某個寬度，這樣就能保證排版一直正確。但IE不認得min-這個定義，但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了，如果只用寬度和高度，正常的瀏覽器裏這兩個值就不會變，如果只用min-width和min-height的話，IE下面根本等於沒有設置寬度和高度。比如要設置背景圖片，這個寬度是比較重要的。
解決辦法：為了讓這一命令在IE上也能用，可以把一個<div> 放到 <body> 標簽下，然後為div指定一個類：
然後CSS這樣設計：
#container{
min-width: 600px;
width:e-xpression(document.body.clIEntWidth < 600? “600px”: “auto” );
}
第一個min-width是正常的；但第2行的width使用了Javascript，這只有IE才認得，這也會讓你的HTML文檔不太正規。它實際上通過Javascript的判斷來實現最小寬度。
6、UL和FORM標簽的padding與margin
ul標簽在FF中默認是有padding值的，而在IE中只有margin默認有值。FORM標簽在IE中，將會自動margin一些邊距，而在FF中margin則是0；
解決辦法：css中首先都使用這樣的樣式ul，form{margin:0;padding:0;}給定義死了，後面就不會為這個頭疼了.
7 ，DIV浮動IE文本產生3象素的bug
左邊對象浮動，右邊采用外補丁的左邊距來定位，右邊對象內的文本會離左邊有3px的間距。
#box{
float:left;
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
//這句是關鍵
}
HTML代碼
<DIV id=box>
<DIV id=left></DIV>
<DIV id=right></DIV>
</DIV>
上面這段代碼的理解：
第一、只要right定義了width屬性，在FF下絕對就會兩行顯示
第二、兩個width都定義為百分比的話，就算都為100%在IE下也會一行顯示。所以上面那句所謂“這句是關鍵”根本沒用，不加也在一行，除非width定義的是數值才用得上。
所以說上面這段代碼其實用處不大，至少在FF下不行。其實只要只定義left的width就行了，right不定義width就不管在IE還是FF 下都能成功，但這樣的話父DIV BOX並沒有真正的包含LEFT和RIGHT兩子DIV。最簡單的辦法就是在RIGHT中加上float:left就 OK了。
8，截字省略號
.hh { -o-text-overflow:ellipsis;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
這個是在越出長度後會自行的截掉多出部分的文字，並以省略號結尾。技術是好技術，很多人都喜歡亂用，但註意Firefox並不支持。
9、DOCTYPE聲明的重要性
DOCTYPE是document type(文檔類型)的簡寫，在web設計中用來說明你用的XHTML或者HTML是什麽版本。
要建立符合標準的網頁，DOCTYPE聲明是必不可少的關鍵組成部分；除非你的XHTML確定了一個正確的DOCTYPE，否則你的標識和CSS都不會生效。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文檔類型定義，裏面包含了文檔的規則，瀏覽器就根據你定義的DTD來解釋你頁面的標識，並展現出來。
XHTML 1.0 提供了三種DTD聲明可供選擇：
* 過渡的(Transitional)：要求非常寬松的DTD，它允許你繼續使用HTML4.01的標識(但是要符合xhtml的寫法)，完整代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
* 嚴格的(Strict)：要求嚴格的DTD，你不能使用任何表現層的標識和屬性，例如<br>，完整代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
* 框架的(Frameset)：專門針對框架頁面設計使用的DTD，如果你的頁面中包含有框架，需要采用這種DTD，完整代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
理想情況當然是嚴格的DTD，但對於我們大多數剛接觸web標準的設計師來說，過渡的DTD(XHTML 1.0 Transitional)是目前理想選擇。因為這種DTD還允許我們使用表現層的標識、元素和屬性，也比較容易通過W3C的代碼校驗。
註：上面說的"表現層的標識、屬性"是指那些純粹用來控制表現的tag，例如用於排版的表格、背景顏色標識等。在XHTML中標識是用來表示結構的，而不是用來實現表現形式，我們過渡的目的是最終實現數據和表現相分離。
DOCTYPE聲明必須放在每一個XHTML文檔最頂部，在所有代碼和標識之上。
http的傳輸方式：
1）無狀態
http協議是一種自身不對請求和響應之間的通信狀態進行保存的協議，即無狀態協議。
這種設置的好處是：更快的處理更多的請求事務，確保協議的可伸縮性
不過隨著web的不斷發展，有時候，需要將這種狀態進行保持，隨即，就引入了cookie技術，cookie技術通過在請求和響應報文中寫入cookie信息來控制客戶端的狀態。
有關cookie的內容後面我們再說。。。
2）持久性
正常在發送http時，都需要建立TCP的連接，再發送報文。
如果每次想要發送http報文都需要經過這個過程，那麽時間大部分都會消耗在建立和斷開連接的過程中。
因此http中使用了connection屬性，用於指定連接的方式。
當設置成keep-alive，http就會建立一條持久化的連接，不需要每次都建立連接，再中斷。
這樣做的好處是：減輕了服務器端的負載，減少開銷的那部分時間，使http請求和響應都能更快的結束，相應的，web頁面顯示速度也就相對提升了。
3）管線化
如果一個http請求，請求了大量的圖片等大文件，那麽其他的http請求怎麽辦呢？
現在，管線化技術的出現，使得http請求比持久性連接更要快；特點在於：請求數越多，時間差越明顯。
4）內容編碼
由於某些報文的內容過大，因此在傳輸時，為了減少傳輸的時間，會采取一些壓縮的措施。
例如上面的報文信息中，Accept-Encoding就定義了內容編碼的格式：gzip
有下面幾種方式：
gzip：GNU壓縮格式
compress：UNIX系統的標準壓縮格式
deflate：是一種同時使用了LZ77和哈弗曼編碼的無損壓縮格式
identity：不進行壓縮
5）多部分對象集合
有的時候傳輸的內容，不僅僅是一些字符串，還有可能是一些圖片，字符，音樂二進制等混雜的內容。
這就需要使用多部分對象集合，multipart，例如在使用java編寫web上傳文件的代碼時，需要在form中指定form的編碼格式。
設置form的enctype屬性的值為multipart/form-data。
這是因為默認的情況下form使用的編碼格式是：applicatin/x-www-form-urlencoded，這種編碼格式會把所有的內容進行編碼，不適合上傳文件這種情況。
這兩種編碼格式的區別主要是：
multipart/form-data 會以控件為基準，編碼form中的內容。
application/x-www-form-urlencoded 會把form中的內容編碼成鍵值對的形式。
6）範圍請求
有些場景下，http報文請求一些很大的圖片，但是加載過程很慢。
比如我們登錄一些大圖片的網址，會發現有時候圖片是一塊一塊加載的。
這就是因為設置了http請求的長度，這樣就可以分塊的加載資源文件。
在請求報文中使用Range屬性，在響應報文中使用Content-Type屬性都可以指定一定字節範圍的http請求。
http協議的傳輸方式有很多種，處於安全考慮，常用的一般都是GET和POST兩種，先來介紹下這兩種
1）GET：獲取資源
GET方法用來請求訪問已被URL識別的資源
2）POST：傳輸實體主體
POST方法用來請求服務器傳輸信息實體的主體
GET和POST的區別：
首先，使用目標不同：GET方法只是用來查詢，不會對瀏覽器上的信息產生影響，每次GET的方法都是相同的
其次，大小不同：GET是放在URL首部，因此大小隨著瀏覽器而定，而POST則是在報文中，只要沒有具體限制，文件的大小是沒限制的
然後，安全性不同：GET采用的是明文傳輸，而POST是放在報文內部，無法看到
從使用場景的角度來說，一般像用戶註冊登錄這種信息都是私密的，采用POST，而針對查詢等，為了快速，大多采用GET傳輸。
（關於關於GET和POST的區別，最近重新看了很多別人寫的博客啊資料什麽的，發現上面的解釋比較模糊，我就在下面的評論區裏面將區別清晰的描述一下，當然，後面的博客也會詳細的解釋）
接下來介紹其他幾種數據傳輸方式：
3）PUT：傳輸文件
PUT要求在請求報文的主體中包含文件內容，然後保存到請求URL指定的位置
處於安全考慮，一般web網站不使用此方法，若配合web的安全驗證機制，或者架構采用REST標準的網站，就可能開放使用此方法
4）HEAD：獲得報文首部
HEAD和GET方法一樣，只不過不返回報文主體部分，用於確認URI的有效性及資源更新的日期時間等
5）DELETE：刪除文件
DELETE是與PUT相反的方法，是按請求URI刪除指定的資源
處於安全考慮，一般web網站不使用此方法，若配合web的安全驗證機制，或者架構采用REST標準的網站，就可能開放使用此方法
6）OPYIONS：詢問支持的方法
用來查詢針對請求URI指定的資源支持的方法
7）TRACE：追蹤路徑
是讓web服務器端將之前的請求通信還回給客戶端的方法
發送請求時，在Max-Frowards首部字段中填入數值，每經過一個服務器端就-1，當數值為0時，停止傳輸，最後收到服務器返回狀態碼200 OK的響應
但是，這種方法基本很少使用，而且很容易引起XST（跨站追蹤）攻擊，就更不會用到了。
8）CONNECT：要求采用隧道協議連接代理
該方法要求在於代理服務器通信時建立隧道，實現用隧道協議進行TCP通信，主要使用SSL（安全套接層）和TLS（傳輸層安全）協議把通信內容加密後經過網絡傳輸。
web前端第五節課