2024-11-21CSS樣式整理
針對(duì) CSS學(xué)習(xí)過(guò)程中核心的知識(shí)進(jìn)行總結(jié)，內(nèi)容可能不全，當(dāng)前只是為了知識(shí)掃盲！
1-針對(duì)CSS中的 選擇器 給出具體的知識(shí)案例
CSS 選擇器詳解及案例
CSS 選擇器用于選擇你想要樣式化的 HTML 元素。選擇器是 CSS 規(guī)則的一部分，它指定了你要應(yīng)用樣式的元素。以下是一些常見的 CSS 選擇器及其具體案例：
1. 元素選擇器
用于選擇特定類型的 HTML 元素。
案例：
<style>
p {
color: blue;
}
</style>
<p>這是一個(gè)段落。</p>
<p>這是另一個(gè)段落。</p>
解釋： 所有 <p> 元素的文本顏色將被設(shè)置為藍(lán)色。
2. 類選擇器
用于選擇具有特定 class 屬性的元素。
案例：
<style>
.highlight {
background-color: yellow;
}
</style>
<p class="highlight">這是一個(gè)高亮的段落。</p>
<p>這是另一個(gè)段落。</p>
解釋： 具有 highlight 類的段落背景顏色將被設(shè)置為黃色。
3. ID 選擇器
用于選擇具有特定 id 屬性的元素。
案例：
<style>
#unique {
font-weight: bold;
}
</style>
<p id="unique">這是一個(gè)唯一標(biāo)識(shí)的段落。</p>
<p>這是另一個(gè)段落。</p>
解釋： 具有 unique ID 的段落文本將加粗顯示。
4. 屬性選擇器
用于選擇具有特定屬性的元素。
案例：
<style>
input[type="text"] {
border: 2px solid green;
}
</style>
<input type="text" placeholder="輸入文本">
<input type="password" placeholder="輸入密碼">
解釋： 所有 type="text" 的輸入框?qū)⒕哂芯G色邊框。
5. 偽類選擇器
用于選擇處于特定狀態(tài)的元素，如懸停、點(diǎn)擊等。
案例：
<style>
a:hover {
text-decoration: underline;
}
</style>
<a href="#">這是一個(gè)鏈接</a>
解釋： 當(dāng)鼠標(biāo)懸停在鏈接上時(shí)，鏈接將顯示下劃線。
6. 偽元素選擇器
用于選擇元素的特定部分，如第一行、第一個(gè)字母等。
案例：
<style>
p::first-letter {
font-size: 2em;
}
</style>
<p>這是一個(gè)段落。</p>
解釋： 段落中的第一個(gè)字母將放大顯示。
7. 組合選擇器
用于通過(guò)組合不同的選擇器來(lái)選擇元素。
案例：
<style>
div p {
color: red;
}
</style>
<div>
<p>這是一個(gè)在 div 中的段落。</p>
</div>
<p>這是一個(gè)不在 div 中的段落。</p>
解釋： 所有位于 <div> 內(nèi)的 <p> 元素的文本顏色將被設(shè)置為紅色。
8. 子選擇器
用于選擇直接子元素。
案例：
<style>
ul > li {
list-style-type: square;
}
</style>
<ul>
<li>第一項(xiàng)</li>
<li>第二項(xiàng)</li>
</ul>
解釋： 所有直接位于 <ul> 內(nèi)的 <li> 元素將以方形項(xiàng)目符號(hào)顯示。
9. 相鄰兄弟選擇器
用于選擇緊接在另一個(gè)元素后的元素。
案例：
<style>
h2 + p {
font-style: italic;
}
</style>
<h2>標(biāo)題</h2>
<p>這是一個(gè)段落。</p>
<p>這是另一個(gè)段落。</p>
解釋： 直接位于 <h2> 元素后的第一個(gè) <p> 元素將顯示為斜體。
10. 通用選擇器
用于選擇所有元素。
案例：
<style>
* {
margin: 0;
padding: 0;
}
</style>
<!-- 頁(yè)面內(nèi)容 -->
解釋： 所有元素的 margin 和 padding 將被重置為 0。
這些選擇器可以單獨(dú)使用，也可以組合使用，以實(shí)現(xiàn)更復(fù)雜和精確的樣式控制。理解并熟練使用這些選擇器是掌握 CSS 的關(guān)鍵。
2-針對(duì)CSS中的 顏色 給出具體的知識(shí)案例
CSS 顏色詳解及案例
在 CSS 中，顏色可以通過(guò)多種方式指定，包括顏色名稱、十六進(jìn)制值、RGB 值、RGBA 值、HSL 值和 HSLA 值。以下是一些具體的知識(shí)案例，展示了如何在 CSS 中使用這些顏色表示法。
1. 顏色名稱
CSS 支持許多預(yù)定義的顏色名稱。
案例：
<style>
p {
color: red;
}
</style>
<p>這是紅色的文本。</p>
解釋： 文本顏色將被設(shè)置為紅色。
2. 十六進(jìn)制顏色值 (Hexadecimal)
十六進(jìn)制顏色值是最常見的顏色表示法之一，由 # 符號(hào)和六位十六進(jìn)制數(shù)組成。
案例：
<style>
p {
color: #00FF00;
}
</style>
<p>這是綠色的文本。</p>
解釋： 文本顏色將被設(shè)置為綠色（RGB 值為 0, 255, 0）。
3. 簡(jiǎn)寫的十六進(jìn)制顏色值
如果每?jī)晌粩?shù)字相同，可以簡(jiǎn)寫為三位數(shù)字。
案例：
<style>
p {
color: #F00;
}
</style>
<p>這是紅色的文本。</p>
解釋： 文本顏色將被設(shè)置為紅色（RGB 值為 255, 0, 0）。
4. RGB 顏色值
RGB 顏色值由紅、綠、藍(lán)三個(gè)分量組成，每個(gè)分量的值范圍是 0 到 255。
案例：
<style>
p {
color: rgb(0, 0, 255);
}
</style>
<p>這是藍(lán)色的文本。</p>
解釋： 文本顏色將被設(shè)置為藍(lán)色（RGB 值為 0, 0, 255）。
5. RGBA 顏色值
RGBA 顏色值在 RGB 的基礎(chǔ)上增加了一個(gè)透明度（Alpha）分量，范圍是 0 到 1。
案例：
<style>
p {
color: rgba(255, 0, 0, 0.5);
}
</style>
<p>這是半透明的紅色文本。</p>
解釋： 文本顏色將被設(shè)置為半透明的紅色（RGB 值為 255, 0, 0，透明度為 0.5）。
6. HSL 顏色值
HSL 顏色值由色相（Hue）、飽和度（Saturation）和亮度（Lightness）三個(gè)分量組成。
案例：
<style>
p {
color: hsl(120, 100%, 50%);
}
</style>
<p>這是綠色的文本。</p>
解釋： 文本顏色將被設(shè)置為綠色（色相為 120，飽和度為 100%，亮度為 50%）。
7. HSLA 顏色值
HSLA 顏色值在 HSL 的基礎(chǔ)上增加了一個(gè)透明度（Alpha）分量，范圍是 0 到 1。
案例：
<style>
p {
color: hsla(240, 100%, 50%, 0.3);
}
</style>
<p>這是半透明的藍(lán)色文本。</p>
解釋： 文本顏色將被設(shè)置為半透明的藍(lán)色（色相為 240，飽和度為 100%，亮度為 50%，透明度為 0.3）。
8. 背景顏色
除了文本顏色，還可以設(shè)置元素的背景顏色。
案例：
<style>
div {
background-color: #FFA500;
}
</style>
<div>這是一個(gè)橙色背景的元素。</div>
解釋： 元素的背景顏色將被設(shè)置為橙色（十六進(jìn)制值為 #FFA500）。
9. 邊框顏色
可以為元素的邊框設(shè)置顏色。
案例：
<style>
div {
border: 2px solid green;
}
</style>
<div>這是一個(gè)綠色邊框的元素。</div>
解釋： 元素的邊框?qū)⒈辉O(shè)置為綠色（顏色名稱為 green）。
10. 漸變背景
可以使用 CSS 漸變功能來(lái)創(chuàng)建復(fù)雜的背景顏色效果。
案例：
<style>
div {
background: linear-gradient(to right, red, yellow);
}
</style>
<div>這是一個(gè)紅色到黃色漸變的背景。</div>
解釋： 元素的背景將從左到右由紅色漸變?yōu)辄S色。
這些顏色表示法可以根據(jù)具體需求靈活使用，幫助你實(shí)現(xiàn)豐富的視覺(jué)效果。
3-針對(duì)CSS中的 文本 給出具體的知識(shí)案例
CSS 文本樣式詳解及案例
在 CSS 中，文本樣式可以通過(guò)多種屬性進(jìn)行控制，包括字體、顏色、對(duì)齊方式、裝飾、縮進(jìn)、行高等。以下是一些具體的知識(shí)案例，展示了如何在 CSS 中應(yīng)用這些文本樣式。
1. 字體 (Font Family)
使用 font-family 屬性可以設(shè)置文本的字體。
案例：
<style>
p {
font-family: "Arial", sans-serif;
}
</style>
<p>這是一個(gè)使用 Arial 字體的段落。</p>
解釋： 文本將使用 Arial 字體，如果 Arial 不可用，將使用系統(tǒng)默認(rèn)的 sans-serif 字體。
2. 字體大小 (Font Size)
使用 font-size 屬性可以設(shè)置文本的字體大小。
案例：
<style>
p {
font-size: 16px;
}
</style>
<p>這是一個(gè)字體大小為 16px 的段落。</p>
解釋： 文本的字體大小將被設(shè)置為 16 像素。
3. 字體粗細(xì) (Font Weight)
使用 font-weight 屬性可以設(shè)置文本的字體粗細(xì)。
案例：
<style>
p {
font-weight: bold;
}
</style>
<p>這是一個(gè)加粗的段落。</p>
解釋： 文本將加粗顯示。
4. 字體樣式 (Font Style)
使用 font-style 屬性可以設(shè)置文本的字體樣式，如斜體。
案例：
<style>
p {
font-style: italic;
}
</style>
<p>這是一個(gè)斜體的段落。</p>
解釋： 文本將以斜體顯示。
5. 文本顏色 (Color)
使用 color 屬性可以設(shè)置文本的顏色。
案例：
<style>
p {
color: blue;
}
</style>
<p>這是一個(gè)藍(lán)色的段落。</p>
解釋： 文本顏色將被設(shè)置為藍(lán)色。
6. 文本對(duì)齊 (Text Align)
使用 text-align 屬性可以設(shè)置文本的對(duì)齊方式。
案例：
<style>
p {
text-align: center;
}
</style>
<p>這是一個(gè)居中對(duì)齊的段落。</p>
解釋： 文本將居中對(duì)齊。
7. 文本裝飾 (Text Decoration)
使用 text-decoration 屬性可以為文本添加裝飾，如下劃線、刪除線等。
案例：
<style>
a {
text-decoration: none;
}
</style>
<a href="#">這是一個(gè)沒(méi)有下劃線的鏈接。</a>
解釋： 鏈接文本將沒(méi)有下劃線。
8. 文本縮進(jìn) (Text Indent)
使用 text-indent 屬性可以設(shè)置段落的首行縮進(jìn)。
案例：
<style>
p {
text-indent: 20px;
}
</style>
<p>這是一個(gè)首行縮進(jìn) 20px 的段落。這是一個(gè)首行縮進(jìn) 20px 的段落。這是一個(gè)首行縮進(jìn) 20px 的段落。</p>
解釋： 段落的首行將縮進(jìn) 20 像素。
9. 行高 (Line Height)
使用 line-height 屬性可以設(shè)置行高。
案例：
<style>
p {
line-height: 1.5;
}
</style>
<p>這是一個(gè)行高為 1.5 的段落。這是一個(gè)行高為 1.5 的段落。這是一個(gè)行高為 1.5 的段落。</p>
解釋： 行高將被設(shè)置為字體大小的 1.5 倍。
10. 字母間距 (Letter Spacing)
使用 letter-spacing 屬性可以設(shè)置字母之間的間距。
案例：
<style>
p {
letter-spacing: 2px;
}
</style>
<p>這是一個(gè)字母間距為 2px 的段落。</p>
解釋： 字母之間的間距將被設(shè)置為 2 像素。
11. 文本轉(zhuǎn)換 (Text Transform)
使用 text-transform 屬性可以改變文本的大小寫。
案例：
<style>
p {
text-transform: uppercase;
}
</style>
<p>這是一個(gè)全部大寫的段落。</p>
解釋： 文本將全部轉(zhuǎn)換為大寫。
12. 文本陰影 (Text Shadow)
使用 text-shadow 屬性可以為文本添加陰影效果。
案例：
<style>
p {
text-shadow: 2px 2px 4px #000000;
}
</style>
<p>這是一個(gè)帶有陰影的段落。</p>
解釋： 文本將有一個(gè) 2 像素的水平和垂直偏移，4 像素的模糊半徑，黑色陰影。
這些文本樣式屬性可以根據(jù)具體需求靈活使用，幫助你實(shí)現(xiàn)豐富多樣的文本效果。
4-針對(duì)CSS中的 盒子模型 給出具體的知識(shí)案例
CSS 盒子模型詳解及案例
CSS 盒子模型是理解和控制網(wǎng)頁(yè)布局的基礎(chǔ)。每個(gè) HTML 元素都被視為一個(gè)矩形盒子，這個(gè)盒子由四個(gè)部分組成：內(nèi)容區(qū)域、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）。以下是一些具體的知識(shí)案例，展示了如何在 CSS 中應(yīng)用盒子模型。
1. 內(nèi)容區(qū)域 (Content Area)
內(nèi)容區(qū)域是盒子模型的核心，包含了實(shí)際的文本、圖像或其他內(nèi)容。
案例：
<style>
div {
width: 200px;
height: 100px;
background-color: lightblue;
}
</style>
<div>這是一個(gè)內(nèi)容區(qū)域。</div>
解釋： 這個(gè) div 元素的內(nèi)容區(qū)域大小為 200px 寬、100px 高，背景顏色為淺藍(lán)色。
2. 內(nèi)邊距 (Padding)
內(nèi)邊距是內(nèi)容區(qū)域與邊框之間的空間，可以通過(guò) padding 屬性設(shè)置。
案例：
<style>
div {
width: 200px;
height: 100px;
background-color: lightblue;
padding: 20px;
}
</style>
<div>這是一個(gè)帶有內(nèi)邊距的盒子。</div>
解釋： 這個(gè) div 元素的內(nèi)容區(qū)域周圍有 20px 的內(nèi)邊距，背景顏色為淺藍(lán)色。
3. 邊框 (Border)
邊框是環(huán)繞內(nèi)容區(qū)域和內(nèi)邊距的線條，可以通過(guò) border 屬性設(shè)置。
案例：
<style>
div {
width: 200px;
height: 100px;
background-color: lightblue;
padding: 20px;
border: 2px solid black;
}
</style>
<div>這是一個(gè)帶有邊框和內(nèi)邊距的盒子。</div>
解釋： 這個(gè) div 元素的內(nèi)容區(qū)域周圍有 2px 寬的黑色實(shí)線邊框，內(nèi)部還有 20px 的內(nèi)邊距。
4. 外邊距 (Margin)
外邊距是邊框與其他元素之間的空間，可以通過(guò) margin 屬性設(shè)置。
案例：
<style>
div {
width: 200px;
height: 100px;
background-color: lightblue;
padding: 20px;
border: 2px solid black;
margin: 30px;
}
</style>
<div>這是一個(gè)帶有邊框、內(nèi)邊距和外邊距的盒子。</div>
解釋： 這個(gè) div 元素的內(nèi)容區(qū)域周圍有 2px 寬的黑色實(shí)線邊框，內(nèi)部還有 20px 的內(nèi)邊距，外部還有 30px 的外邊距。
5. 盒子模型的總寬度與高度
盒子模型的總寬度與高度包括內(nèi)容區(qū)域、內(nèi)邊距、邊框和外邊距。
案例：
<style>
div {
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid black;
margin: 30px;
}
</style>
<div>這是一個(gè)盒子模型。</div>
解釋：
- 總寬度 = 內(nèi)容寬度 (200px) + 左右內(nèi)邊距 (20px * 2) + 左右邊框 (2px * 2) + 左右外邊距 (30px * 2) = 200 + 40 + 4 + 60 = 304px
- 總高度 = 內(nèi)容高度 (100px) + 上下內(nèi)邊距 (20px * 2) + 上下邊框 (2px * 2) + 上下外邊距 (30px * 2) = 100 + 40 + 4 + 60 = 204px
6. 盒子模型的計(jì)算 (box-sizing)
默認(rèn)情況下，width 和 height 屬性只包括內(nèi)容區(qū)域?？梢酝ㄟ^(guò) box-sizing 屬性改變這種行為。
案例：
<style>
div {
width: 200px;
height: 100px;
padding: 20px;
border: 2px solid black;
margin: 30px;
box-sizing: border-box;
}
</style>
<div>這是一個(gè)盒子模型。</div>
解釋： 使用 box-sizing: border-box; 后，width 和 height 屬性將包括內(nèi)容區(qū)域、內(nèi)邊距和邊框，但不包括外邊距。
7. 內(nèi)邊距和邊框的單邊設(shè)置
可以分別設(shè)置內(nèi)邊距和邊框的四個(gè)邊。
案例：
<style>
div {
width: 200px;
height: 100px;
background-color: lightblue;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
border-top: 1px solid red;
border-right: 2px solid green;
border-bottom: 3px solid blue;
border-left: 4px solid yellow;
}
</style>
<div>這是一個(gè)帶有個(gè)性化內(nèi)邊距和邊框的盒子。</div>
解釋： 內(nèi)邊距和邊框的四個(gè)邊分別設(shè)置了不同的值。
8. 外邊距的重疊 (Margin Collapse)
在垂直方向上，兩個(gè)相鄰元素的外邊距會(huì)發(fā)生重疊，取較大的一個(gè)。
案例：
<style>
div {
width: 200px;
height: 100px;
background-color: lightblue;
margin-top: 20px;
margin-bottom: 30px;
}
</style>
<div>第一個(gè)盒子。</div>
<div>第二個(gè)盒子。</div>
解釋： 兩個(gè) div 元素之間的垂直外邊距為 30px（取較大的一個(gè)），而不是 20px + 30px = 50px。
這些盒子模型的屬性可以根據(jù)具體需求靈活使用，幫助你更好地控制網(wǎng)頁(yè)布局。
5-針對(duì)CSS中的 布局 給出具體的知識(shí)案例
CSS 布局詳解及案例
CSS 布局是網(wǎng)頁(yè)設(shè)計(jì)的核心，通過(guò)各種布局技術(shù)，可以實(shí)現(xiàn)不同的頁(yè)面結(jié)構(gòu)和視覺(jué)效果。以下是一些常見的 CSS 布局技術(shù)的具體知識(shí)案例。
1. 普通流布局 (Normal Flow Layout)
普通流布局是默認(rèn)的元素排列方式，包括塊級(jí)元素和行內(nèi)元素。
案例：
<style>
div {
width: 200px;
height: 100px;
background-color: lightblue;
margin: 10px;
}
</style>
<div>第一個(gè)盒子</div>
<div>第二個(gè)盒子</div>
解釋： 默認(rèn)情況下，塊級(jí)元素（如 div）會(huì)在垂直方向上依次排列。
2. 浮動(dòng)布局 (Float Layout)
浮動(dòng)布局通過(guò) float 屬性實(shí)現(xiàn)，常用于圖文混排。
案例：
<style>
img {
float: left;
margin-right: 10px;
}
</style>
<div>
<img src="image.jpg" alt="圖片">
這是一段包含圖片的文字，圖片位于左側(cè)浮動(dòng)。
</div>
解釋： 圖片會(huì)浮動(dòng)到左側(cè)，文字會(huì)環(huán)繞在右側(cè)。
3. 定位布局 (Position Layout)
定位布局通過(guò) position 屬性實(shí)現(xiàn)，可以精確控制元素的位置。
案例：
<style>
.box {
width: 100px;
height: 100px;
background-color: lightblue;
position: absolute;
top: 50px;
left: 100px;
}
</style>
<div class="box">絕對(duì)定位的盒子</div>
解釋： 盒子會(huì)相對(duì)于最近的已定位祖先元素（如果沒(méi)有，則相對(duì)于初始包含塊）偏移 50px 向下、100px 向右。
4. 彈性盒子布局 (Flexbox Layout)
彈性盒子布局通過(guò) display: flex 實(shí)現(xiàn)，適用于一維布局（水平或垂直）。
案例：
<style>
.container {
display: flex;
justify-content: space-between;
background-color: lightgray;
padding: 10px;
}
.item {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 5px;
}
</style>
<div class="container">
<div class="item">盒子1</div>
<div class="item">盒子2</div>
<div class="item">盒子3</div>
</div>
解釋： 容器中的子元素會(huì)水平排列，并在容器中均勻分布。
5. 網(wǎng)格布局 (Grid Layout)
網(wǎng)格布局通過(guò) display: grid 實(shí)現(xiàn)，適用于二維布局。
案例：
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 100px);
gap: 10px;
background-color: lightgray;
padding: 10px;
}
.item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
<div class="container">
<div class="item">盒子1</div>
<div class="item">盒子2</div>
<div class="item">盒子3</div>
<div class="item">盒子4</div>
<div class="item">盒子5</div>
<div class="item">盒子6</div>
</div>
解釋： 容器會(huì)創(chuàng)建一個(gè) 3 列 2 行的網(wǎng)格布局，子元素會(huì)依次填充網(wǎng)格單元。
6. 多列布局 (Multi-column Layout)
多列布局通過(guò) column-count 或 column-width 屬性實(shí)現(xiàn)，適用于內(nèi)容分欄顯示。
案例：
<style>
.container {
column-count: 3;
column-gap: 20px;
background-color: lightgray;
padding: 20px;
}
.item {
background-color: lightblue;
padding: 20px;
margin-bottom: 20px;
}
</style>
<div class="container">
<div class="item">內(nèi)容1</div>
<div class="item">內(nèi)容2</div>
<div class="item">內(nèi)容3</div>
<div class="item">內(nèi)容4</div>
<div class="item">內(nèi)容5</div>
<div class="item">內(nèi)容6</div>
</div>
解釋： 容器中的內(nèi)容會(huì)被分成 3 列顯示，每列之間有 20px 的間隔。
7. 響應(yīng)式布局 (Responsive Layout)
響應(yīng)式布局通過(guò)媒體查詢（Media Queries）實(shí)現(xiàn)，使網(wǎng)頁(yè)在不同設(shè)備上具有良好的顯示效果。
案例：
<style>
.container {
display: flex;
flex-wrap: wrap;
background-color: lightgray;
padding: 10px;
}
.item {
width: 100%;
height: 100px;
background-color: lightblue;
margin: 5px;
}
@media (min-width: 600px) {
.item {
width: 50%;
}
}
@media (min-width: 900px) {
.item {
width: 33.33%;
}
}
</style>
<div class="container">
<div class="item">盒子1</div>
<div class="item">盒子2</div>
<div class="item">盒子3</div>
<div class="item">盒子4</div>
<div class="item">盒子5</div>
<div class="item">盒子6</div>
</div>
解釋： 在不同的屏幕寬度下，子元素的寬度會(huì)根據(jù)媒體查詢的設(shè)置自動(dòng)調(diào)整。手機(jī)上每行顯示 1 個(gè)盒子，平板電腦上每行顯示 2 個(gè)盒子，桌面設(shè)備上每行顯示 3 個(gè)盒子。
這些布局技術(shù)可以根據(jù)具體需求靈活使用，幫助你實(shí)現(xiàn)豐富多樣的頁(yè)面結(jié)構(gòu)和視覺(jué)效果。
6-針對(duì)CSS中的 網(wǎng)格布局 給出具體的知識(shí)案例
CSS 網(wǎng)格布局詳解及案例
CSS 網(wǎng)格布局（Grid Layout）是一種強(qiáng)大的二維布局系統(tǒng)，能夠靈活地控制元素在行和列中的位置。以下是一些具體的知識(shí)案例。
1. 基本網(wǎng)格布局
案例：
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* 3列，每列等寬 */
grid-template-rows: 100px 100px; /* 2行，每行100px高 */
gap: 10px; /* 行和列之間的間距 */
background-color: lightgray;
padding: 10px;
}
.item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
<div class="container">
<div class="item">盒子1</div>
<div class="item">盒子2</div>
<div class="item">盒子3</div>
<div class="item">盒子4</div>
<div class="item">盒子5</div>
<div class="item">盒子6</div>
</div>
解釋：
-
display: grid;將.container設(shè)置為網(wǎng)格容器。 -
grid-template-columns: 1fr 1fr 1fr;創(chuàng)建三列，每列等寬。 -
grid-template-rows: 100px 100px;創(chuàng)建兩行，每行高 100px。 -
gap: 10px;設(shè)置行和列之間的間距。
2. 網(wǎng)格區(qū)域命名
案例：
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
grid-template-areas:
"header header header"
"sidebar content content";
gap: 10px;
background-color: lightgray;
padding: 10px;
}
.item1 { grid-area: header; }
.item2 { grid-area: sidebar; }
.item3 { grid-area: content; }
.item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
<div class="container">
<div class="item item1">Header</div>
<div class="item item2">Sidebar</div>
<div class="item item3">Content</div>
</div>
解釋：
-
grid-template-areas定義了一個(gè)網(wǎng)格區(qū)域布局。 -
.item1 { grid-area: header; }將第一個(gè)子元素放置在命名為header的區(qū)域。 -
.item2 { grid-area: sidebar; }將第二個(gè)子元素放置在命名為sidebar的區(qū)域。 -
.item3 { grid-area: content; }將第三個(gè)子元素放置在命名為content的區(qū)域。
3. 自動(dòng)填充和自動(dòng)適應(yīng)
案例：
<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
background-color: lightgray;
padding: 10px;
}
.item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
<div class="container">
<div class="item">盒子1</div>
<div class="item">盒子2</div>
<div class="item">盒子3</div>
<div class="item">盒子4</div>
<div class="item">盒子5</div>
<div class="item">盒子6</div>
</div>
解釋：
-
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));創(chuàng)建盡可能多的列，每列最小寬度為 200px，最大寬度為 1fr。 -
auto-fill自動(dòng)填充盡可能多的列，minmax(200px, 1fr)定義每列的最小和最大寬度。
4. 網(wǎng)格元素的放置
案例：
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
gap: 10px;
background-color: lightgray;
padding: 10px;
}
.item1 {
grid-column: 1 / 3; /* 從第1列到第3列 */
grid-row: 1 / 2; /* 從第1行到第2行 */
}
.item2 {
grid-column: 3 / 4; /* 從第3列到第4列 */
grid-row: 1 / 3; /* 從第1行到第3行 */
}
.item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
<div class="container">
<div class="item item1">盒子1</div>
<div class="item item2">盒子2</div>
<div class="item">盒子3</div>
<div class="item">盒子4</div>
<div class="item">盒子5</div>
<div class="item">盒子6</div>
</div>
解釋：
-
.item1 { grid-column: 1 / 3; grid-row: 1 / 2; }將第一個(gè)子元素放置在第1列到第3列，第1行。 -
.item2 { grid-column: 3 / 4; grid-row: 1 / 3; }將第二個(gè)子元素放置在第3列到第4列，第1行到第3行。
5. 響應(yīng)式網(wǎng)格布局
案例：
<style>
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
background-color: lightgray;
padding: 10px;
}
.item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
<div class="container">
<div class="item">盒子1</div>
<div class="item">盒子2</div>
<div class="item">盒子3</div>
<div class="item">盒子4</div>
<div class="item">盒子5</div>
<div class="item">盒子6</div>
</div>
解釋：
-
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));創(chuàng)建盡可能多的列，每列最小寬度為 200px，最大寬度為 1fr。 -
auto-fit類似于auto-fill，但在容器寬度不足以容納所有列時(shí)，會(huì)自動(dòng)調(diào)整列的寬度以適應(yīng)容器。
這些案例展示了 CSS 網(wǎng)格布局的各種應(yīng)用場(chǎng)景，幫助你更好地理解和使用這一強(qiáng)大的布局系統(tǒng)。
6-針對(duì)CSS中的 定位 給出具體的知識(shí)案例
CSS 定位詳解及案例
CSS 定位（Positioning）是指如何控制 HTML 元素在頁(yè)面中的位置。CSS 提供了多種定位方式，包括靜態(tài)定位（static）、相對(duì)定位（relative）、絕對(duì)定位（absolute）、固定定位（fixed）和粘性定位（sticky）。以下是具體的知識(shí)案例。
1. 靜態(tài)定位（Static Positioning）
案例：
<style>
.container {
width: 500px;
height: 300px;
border: 2px solid black;
}
.box {
width: 100px;
height: 100px;
background-color: lightblue;
position: static; /* 默認(rèn)值 */
}
</style>
<div class="container">
<div class="box">靜態(tài)定位</div>
</div>
解釋：
-
position: static;是默認(rèn)值，元素按照正常的文檔流進(jìn)行布局。
2. 相對(duì)定位（Relative Positioning）
案例：
<style>
.container {
width: 500px;
height: 300px;
border: 2px solid black;
position: relative;
}
.box {
width: 100px;
height: 100px;
background-color: lightblue;
position: relative;
top: 50px; /* 向下偏移50px */
left: 50px; /* 向右偏移50px */
}
</style>
<div class="container">
<div class="box">相對(duì)定位</div>
</div>
解釋：
-
position: relative;元素相對(duì)于其正常位置進(jìn)行定位。 -
top: 50px;向下偏移 50px，left: 50px;向右偏移 50px。
3. 絕對(duì)定位（Absolute Positioning）
案例：
<style>
.container {
width: 500px;
height: 300px;
border: 2px solid black;
position: relative;
}
.box {
width: 100px;
height: 100px;
background-color: lightblue;
position: absolute;
top: 50px; /* 相對(duì)于容器頂部偏移50px */
left: 50px; /* 相對(duì)于容器左側(cè)偏移50px */
}
</style>
<div class="container">
<div class="box">絕對(duì)定位</div>
</div>
解釋：
-
position: absolute;元素相對(duì)于最近的已定位祖先元素（非 static 定位）進(jìn)行定位。 -
top: 50px;相對(duì)于容器頂部偏移 50px，left: 50px;相對(duì)于容器左側(cè)偏移 50px。
4. 固定定位（Fixed Positioning）
案例：
<style>
.box {
width: 100px;
height: 100px;
background-color: lightblue;
position: fixed;
top: 50px; /* 相對(duì)于視口頂部偏移50px */
right: 50px; /* 相對(duì)于視口右側(cè)偏移50px */
}
</style>
<div class="box">固定定位</div>
解釋：
-
position: fixed;元素相對(duì)于視口進(jìn)行定位，即使頁(yè)面滾動(dòng)，元素位置也不會(huì)改變。 -
top: 50px;相對(duì)于視口頂部偏移 50px，right: 50px;相對(duì)于視口右側(cè)偏移 50px。
5. 粘性定位（Sticky Positioning）
案例：
<style>
.container {
width: 100%;
height: 2000px;
border: 2px solid black;
}
.box {
width: 100px;
height: 100px;
background-color: lightblue;
position: sticky;
top: 50px; /* 相對(duì)于視口頂部偏移50px */
left: 50px; /* 相對(duì)于容器左側(cè)偏移50px */
}
</style>
<div class="container">
<div class="box">粘性定位</div>
</div>
解釋：
-
position: sticky;元素在滾動(dòng)到特定位置之前是相對(duì)定位的，滾動(dòng)到該位置后變?yōu)楣潭ǘㄎ弧?/li> -
top: 50px;當(dāng)元素滾動(dòng)到距離視口頂部 50px 時(shí)，它會(huì)“粘”在那個(gè)位置。 -
left: 50px;相對(duì)于容器左側(cè)偏移 50px。
6. 混合定位案例
案例：
<style>
.container {
width: 500px;
height: 300px;
border: 2px solid black;
position: relative;
}
.box1 {
width: 100px;
height: 100px;
background-color: lightblue;
position: absolute;
top: 0;
left: 0;
}
.box2 {
width: 100px;
height: 100px;
background-color: lightgreen;
position: absolute;
top: 50px;
left: 50px;
}
.box3 {
width: 100px;
height: 100px;
background-color: lightcoral;
position: absolute;
top: 100px;
left: 100px;
}
</style>
<div class="container">
<div class="box1">絕對(duì)定位1</div>
<div class="box2">絕對(duì)定位2</div>
<div class="box3">絕對(duì)定位3</div>
</div>
7-grid針對(duì)多個(gè)圖片進(jìn)行排版
為了實(shí)現(xiàn)根據(jù)圖片數(shù)量動(dòng)態(tài)調(diào)整列數(shù)的效果，可以使用CSS Grid布局。我們可以通過(guò)JavaScript來(lái)動(dòng)態(tài)調(diào)整列數(shù)，并在CSS中定義不同數(shù)量的列布局。
基礎(chǔ)要求圖片大小250*250,padding=10,gap=10，然后1張圖片1列展示，兩張圖片2列展示，其它都是3列展示
以下是一個(gè)示例代碼：
HTML
<div class="grid-container">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<img src="image4.jpg" alt="Image 4">
<!-- 更多圖片 -->
</div>
CSS
/* 基礎(chǔ)樣式 */
.grid-container {
display: grid;
gap: 10px;
padding: 10px;
}
.grid-container img {
width: 250px;
height: 250px;
object-fit: cover;
}
/* 不同數(shù)量的列樣式 */
.grid-container.one-column {
grid-template-columns: repeat(1, 1fr);
}
.grid-container.two-columns {
grid-template-columns: repeat(2, 1fr);
}
.grid-container.three-columns {
grid-template-columns: repeat(3, 1fr);
}
JavaScript
// 獲取圖片數(shù)量并設(shè)置相應(yīng)的類
function setGridColumns() {
const gridContainer = document.querySelector('.grid-container');
const images = gridContainer.querySelectorAll('img');
const imageCount = images.length;
// 移除所有列樣式類
gridContainer.classList.remove('one-column', 'two-columns', 'three-columns');
// 根據(jù)圖片數(shù)量添加相應(yīng)的列樣式類
if (imageCount === 1) {
gridContainer.classList.add('one-column');
} else if (imageCount === 2) {
gridContainer.classList.add('two-columns');
} else {
gridContainer.classList.add('three-columns');
}
}
// 頁(yè)面加載時(shí)設(shè)置列樣式
window.addEventListener('load', setGridColumns);
解釋
- HTML: 創(chuàng)建一個(gè)包含圖片的容器。
-
CSS:
-
.grid-container使用display: grid;布局，并設(shè)置gap和padding。 -
.grid-container img設(shè)置圖片大小為 250x250，并確保圖片覆蓋整個(gè)區(qū)域。 - 針對(duì)不同數(shù)量的圖片，定義不同的列布局類（
.one-column,.two-columns,.three-columns）。
-
-
JavaScript:
-
setGridColumns函數(shù)根據(jù)圖片數(shù)量動(dòng)態(tài)調(diào)整列布局。 - 頁(yè)面加載時(shí)調(diào)用
setGridColumns函數(shù)，確保布局正確。
-
這樣，當(dāng)頁(yè)面加載時(shí)，JavaScript 會(huì)根據(jù)圖片數(shù)量自動(dòng)調(diào)整列布局，從而實(shí)現(xiàn)根據(jù)圖片數(shù)量動(dòng)態(tài)排版的效果。
