.關于浮動

浮動的元素會脫離標準文檔流（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.切記代碼中不可寫固定高度！

端必學 40個精選案例實戰 一課吃透HTML5+CSS3+JS

"xiaのke"：sisuoit.com/4737.html

隨著互聯網技術的飛速發展，HTML5、CSS3和JavaScript已經成為網頁開發的重要基石。它們分別負責網頁的結構、樣式和行為，讓網頁呈現出豐富多彩、動態交互的效果。本文將帶你吃透HTML5、CSS3和JS，從入門到精通，助你成為一名優秀的網頁開發者。

二、HTML5：網頁的結構

HTML，全稱HyperText Markup Language，是網頁的基礎語言。HTML5作為HTML的最新版本，提供了許多新的元素和API，使得網頁內容更加豐富，交互性更強。

1. 語義元素：如<header>、<footer>、<article>等，使網頁結構更清晰，便于搜索引擎優化和輔助閱讀器識別。
2. 媒體元素：如<video>和<audio>，使得在網頁上嵌入媒體內容變得簡單。
3. 圖形繪制API：Canvas、SVG等，讓網頁實現2D、3D圖形繪制。
4. 離線存儲：Web Storage、IndexedDB等，使網頁能夠在客戶端存儲數據，提升用戶體驗。

三、CSS3：網頁的樣式

CSS，全稱Cascading Style Sheets，用于描述HTML元素的樣式。CSS3作為CSS的最新版本，引入了許多新的特性，讓網頁更加美觀、動感。

1. 盒子模型：通過box-sizing屬性，你可以控制盒子的寬度和高度。
2. 動畫與過渡：transition和animation屬性，讓元素在頁面上動起來。
3. 漸變與陰影：gradients和shadows屬性，使元素呈現出生動的效果。
4. 媒體查詢：通過媒體查詢，你可以為不同的設備或視口尺寸設置不同的樣式。

四、JavaScript：網頁的行為

JavaScript是一種腳本語言，用于控制網頁的行為。通過JavaScript，你可以實現各種動態效果和交互功能。

1. DOM操作：通過JavaScript，你可以操作HTML元素，實現頁面的動態內容更新。
2. 事件處理：點擊事件、鍵盤事件等，讓網頁響應用戶的操作。
3. AJAX：通過AJAX技術，你可以在不刷新頁面的情況下與服務器進行通信，提升用戶體驗。
4. 前端框架：如React、Vue等，使開發更加高效，組件化開發使代碼復用性更高。

五、總結

HTML5、CSS3和JavaScript是網頁開發的三大核心技術。要想成為一名優秀的網頁開發者，你需要熟練掌握它們。通過不斷學習和實踐，你將能夠運用這些技術構建出功能強大、交互豐富的網頁。在這個過程中，不要忘記保持對新技術的好奇心和學習動力，因為互聯網技術日新月異，只有不斷學習，才能跟上時代的步伐。