html5+css3的神奇搭配

 

 

1.關於浮動

浮動的元素會脫離標準文檔流（float）,從而不佔據空間，實現了一行排列多個元素的效果 ，可是又致使上級元素height消失，處理這種狀況的方法就是有兩種：

1.第一種在css裏寫個僞類，哪些地方須要清除浮動，直接調用類名。

.clearfix::after
{
display: block;
clear: both;

height: 0;

content: ' ';

}
.clearfix
{
zoom: 1;
}

2.第二種狀況就是溢出隱藏。

overflow:hidden;

zoom:1;

 

 

2.靜態定位，相對定位，絕對定位，固定定位

1.靜態定位：是元素的默認定位方式，不能使用top，bottom，left，right和z-index屬性。

2.相對定位：就是相對於當前的位置進行的left,top,right,bottom。

3.絕對定位：脫離文檔流，不佔據空間，用position:absolute;這條語句。進行left,right,top,bottom進行相對於具備定位屬性得父級元素進行定位，若是未找到就會依次向上尋找，直到找到body中止相對於瀏覽器窗口進行絕對定位。

4.固定定位：設置position:fixed;，直接以瀏覽器窗口做爲參考進行定位，它是浮動在頁面中，元素位置不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變瀏覽器窗口的顯示大小，所以固定定位的元素會始終位於瀏覽器窗口內視圖的某個位置，不會受文檔流動影響。

 

3.css3響應式

1.整體來講css3的響應式知足了全部分辨率的需求，@media媒體查詢進行主流分辨率的響應式調節。

2.切記代碼中不可寫固定高度！