web前端第五節課
margin屬性值所指方向：css
margin屬性包含了margin left ：距左元素塊距離（設置距左內邊距） ；margin top：距頭頂(上)元素塊距離（設置距頂部元素塊距離）；margin right ：距右元素塊距離（設置距右元素塊距） ；margin bottom ：底元素塊距離（設置距低（下）元素塊距）。html
單標籤和雙標籤：前端
雙標籤：
<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>java
相對長度em定義即便用方法：web
<em> 標籤告訴瀏覽器把其中的文本表示爲強調的內容。對於全部瀏覽器來講，這意味着要把這段文字用斜體來顯示。chrome
在文本中加入強調也須要有技巧。若是強調太多，有些重要的短語就會被漏掉；若是強調太少，就沒法真正突出重要的部分。這與調味品同樣，最好仍是不要濫用強調。瀏覽器
儘管如今 <em> 標籤修飾的內容都是用斜體字來顯示，但這些內容也具備更普遍的含義，未來的某一天，瀏覽器也可能會使用其餘的特殊效果來顯示強調的文本。若是你只想使用斜體字來顯示文本的話，請使用 <i> 標籤。除此以外，文檔中還能夠包括用來改變文本顯示的級聯樣式定義。安全
除強調以外，當引入新的術語或在引用特定類型的術語或概念時做爲固定樣式的時候，也能夠考慮使用 <em> 標籤。例如，W3School 常常對重要的術語使用 <em> 標籤。<em> 標籤能夠用來把這些名稱和其餘斜體字區別開來。服務器
不一樣瀏覽器的兼容性： cookie
爲何會出現兼容性問題
所謂的瀏覽器兼容性問題，是指由於不一樣的瀏覽器對同一段代碼有不一樣的解析，形成頁面顯示效果不統一的狀況。在大多數狀況下，用戶用什麼瀏覽器來查看同一網站，都應該是統一的顯示效果。因此瀏覽器的兼容性問題是前端開發人員常常會碰到和必需要解決的問題。
瀏覽器兼容問題一：不一樣瀏覽器的標籤默認的外邊框和內邊框不一樣
問題症狀： 隨便寫幾個標籤，不加樣式控制的狀況下，各自的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，遨遊中高度超出本身設置高度
問題症狀： IE六、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；當內容高度大於這個值時，容器高度被撐高，而不是出現滾動條。這時候咱們就會面臨這個兼容性問題。
2、如何應對兼容性問題
作兼容頁面的方法是：每寫一小段代碼（佈局中的一行或者一塊）咱們都要在不一樣的瀏覽器中看是否兼容，固然熟練到必定的程度就沒這麼麻煩了。建議常常會碰到兼容性問題的新手使用。不少兼容性問題都是由於瀏覽器對標籤的默認屬性解析不一樣形成的，只要咱們稍加設置都能輕鬆地解決這些兼容問題。若是咱們熟悉標籤的默認屬性的話，就能很好的理解爲何會出現兼容問題以及怎麼去解決這些兼容問題
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設計的網頁，就應該更注意IE六、 IE7 和FF對CSS樣式的兼容。
什麼是瀏覽器兼容：當咱們使用不一樣的瀏覽器（Firefox、IE七、IE6）訪問同一個網站，或者頁面的時候，會出現一些不兼容的問題，在這種瀏覽器下顯示正常，在另外一種下就亂了，目前解決這個瀏覽器的問題，最直接的方法就是利用CSS hack技術爲每一個瀏覽器各寫一段css，讓它們各執行各的，這就是CSS hack技術解決CSS在不一樣瀏覽器中的兼容性問題的核心。
2. !important
!important是被Firefox瀏覽器所支持的一種用於肯定優先級的技術。隨着IE7對!important的支持， !important 方法如今只針對IE6的兼容性問題。注意：!important也算是hack的一種。不過實用性較小。
例如:
#example {
width: 100px !important;
width: 200px;
}
3、CSS HACK的經常使用方法
首先須要知道的是：
全部瀏覽器 通用 height: 100px;
IE6 專用 _height: 100px;
IE7 專用 *+height: 100px;
IE六、IE7 共用 *height: 100px;
IE七、FF 共用 height: 100px !important;
例如：
#example { height:100px; }
* html #example { height:200px; }
*+html #example { height:300px; }
下面的這種方法比較簡單
舉幾個例子：
一、IE6 - IE7+FF（-爲區別，+爲共同）
#example {
height:100px;
_height:200px;
}
其實這個用上面說的第一種方法也能夠
#example {
height:100px !important;
height:200px;
}
二、IE6+IE7 - FF
#example {
height:100px;
*height:200px;
}
三、IE6+FF - IE7
#example {
height:100px;
*+height:200px;
}
四、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 ">
4、使用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 小於或等於
5、FLOAT閉合（clearing float）
網頁在某些瀏覽器上顯示錯位不少時候都是由於使用了float浮動而沒有真正閉合，這也是div沒法自適應高度的一個緣由。若是父div沒有設 float而其子div卻設了float的話，父div沒法包住整個子DIV，這種狀況通常出如今一個父DIV下包含多個子DIV。解決辦法：
一、給父DIV也設上float。
二、在全部子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>
三、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%」，這個問題就徹底解決了。
6、須要注意的一些兼容細節
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; //實現同一行排列的的效果
五、頁面的最小寬度
min-width是個很是方便的CSS命令，它能夠指定元素最小也不能小於某個寬度，這樣就能保證排版一直正確。但IE不認得min-這個定義，但實際上它把正常的width和height看成有min的狀況來使。這樣問題就大了，若是隻用寬度和高度，正常的瀏覽器裏這兩個值就不會變，若是隻用min-width和min-height的話，IE下面根本等於沒有設置寬度和高度。好比要設置背景圖片，這個寬度是比較重要的。
解決辦法：爲了讓這一命令在IE上也能用，能夠把一個<div> 放到 <body> 標籤下，而後爲div指定一個類：
而後CSS這樣設計：
#container{
min-width: 600px;
width:expression(document.body.clIEntWidth < 600? 「600px」: 「auto」 );
}
第一個min-width是正常的；但第2行的width使用了Javascript，這隻有IE才認得，這也會讓你的HTML文檔不太正規。它實際上經過Javascript的判斷來實現最小寬度。
六、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>
上面這段代碼的理解：
第1、只要right定義了width屬性，在FF下絕對就會兩行顯示
第2、兩個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並不支持。
九、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的區別：
1、爲何會出現兼容性問題
所謂的瀏覽器兼容性問題，是指由於不一樣的瀏覽器對同一段代碼有不一樣的解析，形成頁面顯示效果不統一的狀況。在大多數狀況下，用戶用什麼瀏覽器來查看同一網站，都應該是統一的顯示效果。因此瀏覽器的兼容性問題是前端開發人員常常會碰到和必需要解決的問題。
瀏覽器兼容問題一：不一樣瀏覽器的標籤默認的外邊框和內邊框不一樣
問題症狀： 隨便寫幾個標籤，不加樣式控制的狀況下，各自的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，遨遊中高度超出本身設置高度
問題症狀： IE六、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；當內容高度大於這個值時，容器高度被撐高，而不是出現滾動條。這時候咱們就會面臨這個兼容性問題。
2、如何應對兼容性問題
作兼容頁面的方法是：每寫一小段代碼（佈局中的一行或者一塊）咱們都要在不一樣的瀏覽器中看是否兼容，固然熟練到必定的程度就沒這麼麻煩了。建議常常會碰到兼容性問題的新手使用。不少兼容性問題都是由於瀏覽器對標籤的默認屬性解析不一樣形成的，只要咱們稍加設置都能輕鬆地解決這些兼容問題。若是咱們熟悉標籤的默認屬性的話，就能很好的理解爲何會出現兼容問題以及怎麼去解決這些兼容問題
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設計的網頁，就應該更注意IE六、 IE7 和FF對CSS樣式的兼容。
什麼是瀏覽器兼容：當咱們使用不一樣的瀏覽器（Firefox、IE七、IE6）訪問同一個網站，或者頁面的時候，會出現一些不兼容的問題，在這種瀏覽器下顯示正常，在另外一種下就亂了，目前解決這個瀏覽器的問題，最直接的方法就是利用CSS hack技術爲每一個瀏覽器各寫一段css，讓它們各執行各的，這就是CSS hack技術解決CSS在不一樣瀏覽器中的兼容性問題的核心。
2. !important
!important是被Firefox瀏覽器所支持的一種用於肯定優先級的技術。隨着IE7對!important的支持， !important 方法如今只針對IE6的兼容性問題。注意：!important也算是hack的一種。不過實用性較小。
例如:
#example {
width: 100px !important;
width: 200px;
}
3、CSS HACK的經常使用方法
首先須要知道的是：
全部瀏覽器 通用 height: 100px;
IE6 專用 _height: 100px;
IE7 專用 *+height: 100px;
IE六、IE7 共用 *height: 100px;
IE七、FF 共用 height: 100px !important;
例如：
#example { height:100px; }
* html #example { height:200px; }
*+html #example { height:300px; }
下面的這種方法比較簡單
舉幾個例子：
一、IE6 - IE7+FF（-爲區別，+爲共同）
#example {
height:100px;
_height:200px;
}
其實這個用上面說的第一種方法也能夠
#example {
height:100px !important;
height:200px;
}
二、IE6+IE7 - FF
#example {
height:100px;
*height:200px;
}
三、IE6+FF - IE7
#example {
height:100px;
*+height:200px;
}
四、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 ">
4、使用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 小於或等於
5、FLOAT閉合（clearing float）
網頁在某些瀏覽器上顯示錯位不少時候都是由於使用了float浮動而沒有真正閉合，這也是div沒法自適應高度的一個緣由。若是父div沒有設 float而其子div卻設了float的話，父div沒法包住整個子DIV，這種狀況通常出如今一個父DIV下包含多個子DIV。解決辦法：
一、給父DIV也設上float。
二、在全部子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>
三、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%」，這個問題就徹底解決了。
6、須要注意的一些兼容細節
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; //實現同一行排列的的效果
五、頁面的最小寬度
min-width是個很是方便的CSS命令，它能夠指定元素最小也不能小於某個寬度，這樣就能保證排版一直正確。但IE不認得min-這個定義，但實際上它把正常的width和height看成有min的狀況來使。這樣問題就大了，若是隻用寬度和高度，正常的瀏覽器裏這兩個值就不會變，若是隻用min-width和min-height的話，IE下面根本等於沒有設置寬度和高度。好比要設置背景圖片，這個寬度是比較重要的。
解決辦法：爲了讓這一命令在IE上也能用，能夠把一個<div> 放到 <body> 標籤下，而後爲div指定一個類：
而後CSS這樣設計：
#container{
min-width: 600px;
width:expression(document.body.clIEntWidth < 600? 「600px」: 「auto」 );
}
第一個min-width是正常的；但第2行的width使用了Javascript，這隻有IE才認得，這也會讓你的HTML文檔不太正規。它實際上經過Javascript的判斷來實現最小寬度。
六、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>
上面這段代碼的理解：
第1、只要right定義了width屬性，在FF下絕對就會兩行顯示
第2、兩個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並不支持。
九、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（傳輸層安全）協議把通訊內容加密後通過網絡傳輸。
- 1. Web前端學習-第五課JavaScript篇
- 2. Python 第五節 第五課
- 3. Python 第五節 第四課
- 4. Python 第六節 第五課
- 5. Python 第八節 第五課
- 6. Python 第五節 第三課
- 7. Python 第十節 第五課
- 8. Python 第四節 第五課
- 9. Python 第九節 第五課
- 10. Python 第五節 第一課
- 更多相關文章...
- • WSDL 端口 - WSDL 教程
- • 第一個MyBatis程序 - MyBatis教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • RxJava操作符（五）Error Handling
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. CVPR 2020 論文大盤點-光流篇
- 2. Photoshop教程_ps中怎麼載入圖案？PS圖案如何導入？
- 3. org.pentaho.di.core.exception.KettleDatabaseException:Error occurred while trying to connect to the
- 4. SonarQube Scanner execution execution Error --- Failed to upload report - 500: An error has occurred
- 5. idea 導入源碼包
- 6. python學習 day2——基礎學習
- 7. 3D將是頁遊市場新賽道？
- 8. osg--交互
- 9. OSG-交互
- 10. Idea、spring boot 圖片(pgn顯示、jpg不顯示)解決方案
- 1. Web前端學習-第五課JavaScript篇
- 2. Python 第五節 第五課
- 3. Python 第五節 第四課
- 4. Python 第六節 第五課
- 5. Python 第八節 第五課
- 6. Python 第五節 第三課
- 7. Python 第十節 第五課
- 8. Python 第四節 第五課
- 9. Python 第九節 第五課
- 10. Python 第五節 第一課