1、浮動帶來的問題及其清除方法
問題：（1）父元素的高度無法被撐開苦锨，影響與父元素同級的元素（2）與浮動元素同級的非浮動元素會跟隨其后（3）若非第一個元素浮動氓润，則該元素之前的元素也需要浮動璧帝，否則會影響頁面顯示的結構叔锐。
浮動元素脫離文檔流，不占據(jù)空間紧帕。浮動元素碰到包含它的邊框或者浮動元素的邊框停留盔然。
1. 使用空標簽清除浮動。
這種方法是在所有浮動標簽后面添加一個空標簽 定義css clear:both. 弊端就是增加了無意義標簽是嗜。
<div style="clear:both"></div>
2. 使用overflow愈案。
給包含浮動元素的父標簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
3. 使用after偽對象清除浮動鹅搪。
該方法只適用于非IE瀏覽器站绪。具體寫法可參照以下示例。使用中需注意以下幾點丽柿。一恢准、該方法中必須為需要清除浮動元素的偽對象中設置 height:0魂挂，否則該元素會比實際高出若干像素；
浮動元素引起的問題：
1. 父元素的高度無法被撐開馁筐，影響與父元素同級的元素
2. 與浮動元素同級的非浮動元素會跟隨其后
3. 若非第一個元素浮動涂召，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構
使用 CSS 中的 clear:both; 屬性來清除元素的浮動可解決2敏沉、3問題果正，對于問題1，添加如下樣式赦抖，給父元素添加clearfix樣式：.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display: inline-block;}/* for IE/Mac */
清除浮動的幾種方法：
1. 額外標簽法舱卡，
（缺點：不過這個辦法會增加額外的標簽使HTML結構看起來不夠簡潔。）
2. 使用after偽元素：#parent:after{content:".";height:0;visibility:hidden;display:block;clear:both;}
3. 浮動外部元素
4. 設置 overflow 為 hidden 或者 auto
2队萤、關于display的值
1.block 像塊類型元素一樣顯示，有寬度和高度等矫钓。
2.inline 缺省值要尔。像行內元素類型一樣顯示。
3.inline-block 像行內元素一樣顯示新娜，但其內容象塊類型元素一樣顯示赵辕。
4.list-item 像塊類型元素一樣顯示，并添加樣式列表標記概龄。
隱藏元素的方式：
a还惠、使用CSS的display:none，不會占有原來的位置
b私杜、使用CSS的visibility:hidden蚕键，會占有原來的位置
c、使用HTML5中的新增屬性hidden="hidden"衰粹，不會占有原來的位置
display:none和visibility:hidden的區(qū)別:
none? 隱藏對應的元素锣光，在文檔布局中不再給它分配空間，它各邊的元素會合攏铝耻，
就當他從來不存在誊爹。
?hidden ?隱藏對應的元素，但是在文檔布局中仍保留原來的空間瓢捉。
3频丘、position的值
1.absolute 生成絕對定位的元素，脫離常規(guī)流泡态，通過left搂漠、right、bottom兽赁、top屬性相對于 static 定位以外的第一個祖先元素進行定位状答。如不存在這樣的祖先元素冷守，則相對于body即瀏覽器窗口進行絕對定位。
2.fixed 生成固定定位的元素惊科，與絕對定位類似拍摇，但其相對于視圖窗口進行定位（老IE不支持），當出現(xiàn)滾動條時馆截，對象不會隨著滾動充活。
3.relative 生成相對定位的元素，對象遵循常規(guī)流蜡娶，相對以前的位置偏移混卵，偏移量由left、right窖张、bottom幕随、top決定，偏移前的位置保留
4.static 默認值宿接。默認元素都是靜態(tài)的定位赘淮，對象遵循常規(guī)流沒有定位（忽略 top, bottom, left, right z-index 聲明）。
5.inherit 規(guī)定從父元素繼承 position 屬性的值睦霎。
(6)梢卸、center
與absolute一致，但偏移定位是以定位祖先元素的中心點為參考副女。盒子在其包含容器垂直水平居中蛤高。（CSS3）
(7)、page
與absolute一致碑幅。元素在分頁媒體或者區(qū)域塊內戴陡，元素的包含塊始終是初始包含塊，否則取決于每個absolute模式枕赵。（CSS3）
(8)猜欺、sticky
對象在常態(tài)時遵循常規(guī)流。它就像是relative和fixed的合體拷窜，當在屏幕中時按常規(guī)流排版开皿，當卷動到屏幕外時則表現(xiàn)如fixed。該屬性的表現(xiàn)是現(xiàn)實中你見到的吸附效果篮昧。（CSS3）
absolute與fixed共同點與不同點：
A：共同點：
1.改變行內元素的呈現(xiàn)方式赋荆，display被置為block；
2.讓元素脫離普通流懊昨，不占據(jù)空間窄潭；
3.默認會覆蓋到非定位元素上
B不同點：
absolute的”根元素“是可以設置的，而fixed的”根元素“固定為瀏覽器窗口酵颁。
當你滾動網(wǎng)頁嫉你，fixed元素與瀏覽器窗口之間的距離是不變的月帝。
4、web storage和cookie的區(qū)別
Web Storage的概念和cookie相似幽污，區(qū)別是它是為了更大容量存儲設計的嚷辅。Cookie的大小是受限的，并且每次你請求一個新的頁面的時候Cookie都會被發(fā)送過去距误，這樣無形中浪費了帶寬簸搞，另外cookie還需要指定作用域，不可以跨域調用准潭。
除此之外趁俊，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發(fā)者自己封裝setCookie刑然，getCookie寺擂。
但是Cookie也是不可以或缺的：Cookie的作用是與服務器進行交互，作為HTTP規(guī)范的一部分而存在 泼掠，而Web Storage僅僅是為了在本地“存儲”數(shù)據(jù)而生沽讹。
cookie雖然在持久保存客戶端數(shù)據(jù)提供了方便，分擔了服務器存儲的負擔武鲁，但還是有很多局限性的。
第一：每個特定的域名下最多生成20個cookie
1.IE6或更低版本最多20個cookie
2.IE7和之后的版本最后可以有50個cookie蝠检。
3.Firefox最多50個cookie
4.chrome和Safari沒有做硬性限制
IE和Opera 會清理近期最少使用的cookie沐鼠，F(xiàn)irefox會隨機清理cookie泛烙。
cookie的最大大約為4096字節(jié)彰导，為了兼容性，一般不能超過4095字節(jié)早歇。
IE 提供了一種存儲可以持久化用戶數(shù)據(jù)焰檩，叫做uerData憔涉，從IE5.0就開始支持。每個數(shù)據(jù)最多128K析苫，每個域名下最多1M兜叨。這個持久化數(shù)據(jù)放在緩存中，如果緩存沒有清理衩侥，那么會一直存在国旷。
優(yōu)點：極高的擴展性和可用性
1.通過良好的編程，控制保存在cookie中的session對象的大小茫死。
2.通過加密和安全傳輸技術（SSL）跪但，減少cookie被破解的可能性。
3.只在cookie中存放不敏感數(shù)據(jù)峦萎，即使被盜也不會有重大損失屡久。
4.控制cookie的生命期忆首，使之不會永遠有效。偷盜者很可能拿到一個過期的cookie被环。
缺點：
1.`Cookie`數(shù)量和長度的限制糙及。每個domain最多只能有20條cookie，每個cookie長度不能超過4KB蛤售，否則會被截掉丁鹉。
2.安全性問題。如果cookie被人攔截了悴能，那人就可以取得所有的session信息揣钦。即使加密也與事無補，因為攔截者并不需要知道cookie的意義漠酿，他只要原樣轉發(fā)cookie就可以達到目的了冯凹。
3.有些狀態(tài)不可能保存在客戶端。例如炒嘲，為了防止重復提交表單宇姚，我們需要在服務器端保存一個計數(shù)器。如果我們把這個計數(shù)器保存在客戶端夫凸，那么它起不到任何作用浑劳。
在較高版本的瀏覽器中，js提供了sessionStorage和globalStorage夭拌。在HTML5中提供了localStorage來取代globalStorage魔熏。
html5中的Web Storage包括了兩種存儲方式：sessionStorage和localStorage。
sessionStorage用于本地存儲一個會話（session）中的數(shù)據(jù)鸽扁，這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當會話結束后數(shù)據(jù)也隨之銷毀蒜绽。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲桶现。而localStorage用于持久化的本地存儲躲雅，除非主動刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠不會過期的骡和。localStorage和sessionStorage都具有相同的操作方法相赁，例如setItem、getItem和removeItem等
