本系列可作為前端學習系列的筆記，代碼的運行環境是在HBuilder中，小編會將代碼復制下來，大家復制下來就可以練習了，方便大家學習。
HTML系列文章?已經收錄在前端專欄，有需要的寶寶們可以點擊前端專欄查看！
點贊關注不迷路！您的點贊、關注和收藏是對小編最大的支持和鼓勵！
系列文章目錄
CSS- 1.1 css選擇器
CSS- 2.1 實戰之圖文混排、表格、表單、學校官網一級導航欄
CSS- 3.1 盒子模型-塊級元素、行內元素、行內塊級元素和display屬性
CSS- 4.1 浮動（Float）
CSS- 4.2 相對定位（position: relative）
CSS- 4.3 絕對定位（position: absolute）&學校官網導航欄實例
CSS- 4.4 固定定位（fixed）& 咖啡售賣官網實例
CSS- 4.5 css + div 布局 & 簡易網易云音樂 官網布置實例?
CSS- 4.6 radiu、shadow、animation動畫?
目錄
系列文章目錄
前言
一、CSS + Div 布局詳解
1.基本概念
Div 元素
CSS 布局優勢
2.常用布局技術
1. 標準流布局
2. Float 浮動布局
3. Flexbox 彈性布局
4. Grid 網格布局
3.響應式布局實現
4.常見布局模式
圣杯布局 (Holy Grail)
固定-流動-固定布局
5.最佳實踐
6.現代布局趨勢
二、代碼實例
1.練習代碼實例如下：
2.網易云音樂 代碼實例：
總結
前言
小編作為新晉碼農一枚，會定期整理一些寫的比較好的代碼，作為自己的學習筆記，會試著做一下批注和補充，如轉載或者參考他人文獻會標明出處，非商用，如有侵權會刪改！歡迎大家斧正和討論！
一、CSS + Div 布局詳解
CSS + Div 布局是現代網頁設計中最常用的布局方式之一，它使用?<div>?元素作為容器，結合 CSS 進行樣式控制和布局定位。
1.基本概念
Div 元素
<div>?(division) 是一個塊級容器元素，本身不表示任何特定內容，主要用于布局和樣式控制。
CSS 布局優勢
- 分離內容與表現
- 精確控制布局
- 響應式設計支持
- 代碼簡潔高效
2.常用布局技術
1. 標準流布局
默認情況下，元素按照 HTML 文檔流順序從上到下排列。
html
<div class="container"><div class="header">頁眉</div><div class="content">內容</div><div class="footer">頁腳</div>
</div>2. Float 浮動布局
css
.left {float: left;width: 200px;
}
.right {float: right;width: 200px;
}
.main {margin-left: 200px;margin-right: 200px;
}注意：浮動布局需要清除浮動，常用方法：
css
.clearfix::after {content: "";display: block;clear: both;
}3. Flexbox 彈性布局
css
.container {display: flex;justify-content: space-between;
}
.item {flex: 1;
}Flexbox 特點：
- 一維布局（行或列）
- 響應式設計友好
- 簡單對齊控制
4. Grid 網格布局
css
.container {display: grid;grid-template-columns: 1fr 2fr 1fr;grid-template-rows: 100px auto 50px;gap: 10px;
}Grid 特點：
- 二維布局（行和列）
- 精確控制行列大小
- 復雜布局實現簡單
3.響應式布局實現
css
/* 默認移動端樣式 */
.container {width: 100%;
}/* 平板及以上 */
@media (min-width: 768px) {.container {width: 750px;margin: 0 auto;}
}/* 桌面及以上 */
@media (min-width: 992px) {.container {width: 970px;}
}4.常見布局模式
圣杯布局 (Holy Grail)
html
<div class="container"><div class="header">Header</div><div class="content"><div class="main">Main Content</div><div class="left">Left Sidebar</div><div class="right">Right Sidebar</div></div><div class="footer">Footer</div>
</div>固定-流動-固定布局
css
.left {float: left;width: 200px;
}
.right {float: right;width: 200px;
}
.main {margin: 0 200px;
}5.最佳實踐
- 語義化 HTML：合理使用 HTML5 語義化標簽（
<header>,?<nav>,?<main>?等） - 盒模型設置：
box-sizing: border-box?更易控制尺寸 - CSS 復位：統一不同瀏覽器的默認樣式
- 性能優化：避免過多嵌套，減少選擇器復雜度
- 響應式設計：使用媒體查詢適配不同設備
6.現代布局趨勢
- CSS Grid + Flexbox 結合使用
- CSS 變量實現主題切換
- 容器查詢（Container Queries）
- 子網格（Subgrid）
CSS + Div 布局是前端開發的基礎，掌握這些技術可以構建各種復雜的網頁布局。隨著 CSS 標準的不斷演進，布局方式變得越來越強大和靈活。
二、代碼實例
1.練習代碼實例如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css + div 布局</title><style type="text/css">* {padding: 0;margin: 0;}.jz {margin: 1px auto;}.header {width: 1300px;height: 120px;background-color: #0000FF;}.nvg {width: 1300px;height: 120px;background-color: #002099;}.main {width: 1300px;height: 400px;border: 1px solid black;}.main-left,.main-right {width: 300px;height: 400px;background-color: #CCCCCC;}.main-center {width: 700px;height: 400px;background-color: #666666;}.fl {float: left;}.mright2 {margin-right: 2px;}</style></head><body><div class="header jz"></div><div class="nvg jz"></div><div class="main jz"><div class="main-left fl mright2"></div><div class="main-center fl"></div><div class="main-right fl mright2"></div></div><div class="footer jz"></div></body>
</html>
代碼運行：
2.網易云音樂 代碼實例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>網易云音樂</title><style type="text/css">* {padding: 0;margin: 0;}.header {position: relative;width: 100%;height: 100px;background-color: #242424;}.nag {width: 100%;height: 40px;background-color: #c20c04;}/* 第一種占全屏幕 圖片寬100% *//* .showpic img {width: 100%;} */.showpic img {width: 1080px;}.showpic {width: 1080px;height: 279px;margin: 1px auto;}.main {width: 1080px;height: 600px;margin: 1px auto;}.left {float: left;width: 500px;height: 300px;background-color: #CCCCCC;}.right-top {float: left;width: 250px;height: 147px;background-color: #888;}.right-bottom {float: left;width: 250px;height: 147px;background-color: #666666;}.footer {width: 100%;height: 88px;background-color: #242424;}.header img {width: 150px;position: absolute;left: 50px;top: 50%;transform: translateY(-50%);}</style></head><body><div class="header"><img src="../img/wyy2.jpg" ></div><div class="nag"></div><div class="showpic"><img src="../img/wyy1.jpg" ></div><div class="main"><div class="left"></div><div class="right-top"></div><div class="right-bottom"></div></div><div class="footer"></div></body>
</html>
代碼運行如下：
總結
以上就是今天要講的內容，本文簡單記錄了css + div 布局 & 簡易網易云音樂 官網布置實例，僅作為一份簡單的筆記使用，大家根據注釋理解
