- css 盒模型的組成
- css盒模型的注意點
- 現象描述：
- 原因：
- 解決方案：
- 1. 使用
padding代替margin： - 2. 使用
overflow: hidden;或其他非visible的值： - 3. 使用
border或padding阻止合併： - 4. 使用
display: flow-root;（CSS中的BFC）： - 5. 使用
position定位：
- 1. 使用
- 塊級盒子（Block Box）：
- 特點：
- 例子：
- 內聯盒子（Inline Box）：
- 特點：
- 例子：
- 塊級盒子與內聯盒子的區別：
- CSS中轉換塊級和內聯顯示：
- 例子：
- Content-box 盒模型（預設的盒模型,標準盒模型）
- 總寬度計算公式：
- 總高度計算公式：
- Border-box 盒模型(怪異盒模型)
- 總寬度計算公式：
- 總高度計算公式：
- 總結對比：
- 浮動樣式詳解
- 清除浮動方案
- 1. 使用清除浮動的偽元素（clearfix）
- 2. 使用
overflow屬性 - 3. 使用
clearfix類 - 4. 使用 Flexbox 佈局
- css浮動需要注意的點
- 定位樣式詳解
css 盒模型的組成
在css中,所有的元素都被一個個的盒子(box)包圍著,理解這些盒子的基本原理,是我們使用css實現準確佈局,處理元素排列的關鍵
盒子的組成:
- content內容
- padding內填充
- border邊框
- margin外邊距
box-model
css盒模型的注意點
- padding不能為負值,margin可以為負值
- 背景色會平鋪到非margin的區域,包含border,padding,content
margin-top傳遞的現象及解決方案- margin 上下疊加的的現象及解決方案
現象描述：
- 當兩個塊級元素上下排列時，它們之間的
margin-top和margin-bottom不會疊加，而是取其較大的值。 - 如果一個塊級元素的
margin-top和父元素的margin-bottom直接相鄰，它們也會合並。 - 甚至一個元素的
margin-top可能會與其父元素的margin-top合併，從而產生 “傳遞” 的效果，看起來像是子元素的margin-top影響了父元素。
原因：
CSS的標準規定，塊級元素的垂直方向 margin 會發生摺疊，這是垂直外邊距合併的效果。它通常出現在以下情況下：
- 相鄰的塊級元素：相鄰塊級元素的上下外邊距合併。
- 空白塊級元素：如果一個塊級元素內沒有其他內容，它的
margin-top和margin-bottom會合並。 - 父子元素關係：如果子元素是父元素中的第一個子元素，它的
margin-top可能會與父元素的margin-top合併。
解決方案：
1. 使用 padding 代替 margin：
padding 不會像 margin 一樣合併，可以用 padding 代替來避免摺疊。
.parent {
padding-top: 50px; /* 使用 padding 而非 margin */
}
2. 使用 overflow: hidden; 或其他非 visible 的值：
將父元素的 overflow 設定為 hidden 或 auto，可以防止子元素的 margin 傳遞到父元素。
.parent {
overflow: hidden;
}
3. 使用 border 或 padding 阻止合併：
如果父元素沒有 padding 或 border，margin 合併會發生。即使給父元素設定一個1px的邊框或少量 padding，也可以阻止合併。
.parent {
border: 1px solid transparent; /* 設定一個透明的邊框 */
}
4. 使用 display: flow-root;（CSS中的BFC）：
將父元素設定為 塊格式化上下文（BFC） 可以阻止 margin 摺疊。你可以透過設定 display: flow-root; 來建立一個新的 BFC。
.parent {
display: flow-root;
}
5. 使用 position 定位：
如果元素的 position 設定為 absolute 或 relative，它的 margin 不會與其他元素合併。
.parent {
position: relative;
}
塊級盒子（Block Box）：
塊級元素預設生成塊級盒子，這類盒子會佔據其父容器的整個寬度，並且每一個塊級元素都會獨佔一行。
特點：
- 獨佔一行：塊級盒子總是從新行開始，其他元素會被排列到它的下面。
- 寬度自動填充：預設情況下，塊級元素的寬度會自動填充其父容器的寬度，除非手動設定寬度。
- 可以包含塊級和內聯元素：塊級盒子可以容納其他塊級元素，也可以包含內聯元素。
- 可設定寬度和高度：塊級盒子可以透過
width和height屬性來定義其寬高。 - 常見的塊級元素：
<div>、<p>、<h1>-<h6>、<section>、<header>等。
例子：
<style>
.block-box {
width: 50%;
background-color: lightblue;
margin-bottom: 20px;
}
</style>
<div class="block-box">我是塊級盒子1</div>
<div class="block-box">我是塊級盒子2</div>
在這個例子中，每個 div 都是一個塊級盒子，佔據父容器50%的寬度，並且各自獨佔一行。
內聯盒子（Inline Box）：
內聯元素生成內聯盒子，通常用於包裝文字或小的內容。內聯盒子不會獨佔一行，它們會在一行內順序排列，直到無法容納更多為止。
特點：
- 不獨佔一行：內聯元素在一行內排列，不會換行，除非內容溢位到父容器的寬度。
- 寬高由內容決定：內聯盒子的寬度和高度由其內容決定，不能像塊級元素那樣透過
width和height設定尺寸。 - 隻影響內容周圍的區域：內聯元素的
padding、margin和border只會影響元素的內容區域，不能影響元素上下的內容佈局（即不會增加行高）。 - 常見的內聯元素：
<span>、<a>、<strong>、<em>、<img>等。
例子：
<style>
.inline-box {
background-color: yellow;
padding: 5px;
margin: 10px;
}
</style>
<p>
這是一個段落中的 <span class="inline-box">內聯盒子1</span> 和 <span class="inline-box">內聯盒子2</span>。
</p>
在這個例子中，<span> 元素是內聯盒子，它們不會獨佔一行，而是和文字混排在同一行。
塊級盒子與內聯盒子的區別：
| 特性 | 塊級盒子 (Block Box) | 內聯盒子 (Inline Box) |
|---|---|---|
| 佈局行為 | 獨佔一行 | 與其他元素排列在同一行 |
| 寬度 | 預設佔滿父容器的寬度 | 寬度由內容決定 |
| 高度 | 可以手動設定 height |
高度由內容決定，不能手動設定 |
| 可包含的內容 | 可以包含塊級和內聯元素 | 通常只包含文字或其他內聯元素 |
| 常見元素 | <div>, <p>, <section>, <header>, <h1>-<h6> |
<span>, <a>, <strong>, <em>, <img> |
| 影響佈局的方式 | 會影響上下文的其他元素佈局 | 不會影響上下文其他元素的佈局 |
| 設定寬高 | 可以設定 width 和 height |
width 和 height 無法生效 |
CSS中轉換塊級和內聯顯示：
透過 display 屬性，塊級元素和內聯元素可以互相轉換：
-
將內聯元素轉換為塊級元素：
.inline-to-block { display: block; } -
將塊級元素轉換為內聯元素：
.block-to-inline { display: inline; }
例子：
<style>
.block-to-inline {
display: inline;
background-color: lightblue;
}
.inline-to-block {
display: block;
background-color: yellow;
}
</style>
<div class="block-to-inline">塊級元素變為內聯元素</div>
<span class="inline-to-block">內聯元素變為塊級元素</span>
在這個例子中，透過 display 屬性的設定，可以改變元素的預設展示方式。
- 塊級盒子用於佔據整個行的佈局，並適合結構化頁面內容，如段落和容器。
- 內聯盒子則用於在一行中排列小的內容，如文字或圖示。
透過display屬性，塊級盒子和內聯盒子可以互相轉換，根據頁面設計的需要來靈活佈局。
Content-box 盒模型（預設的盒模型,標準盒模型）
在 content-box 模型中，width 和 height 指的是內容區域的寬高，而 padding 和 border 是額外計算的部分。
總寬度計算公式：
總寬度 = 內容寬度 + 左右 padding + 左右 border + 左右 margin
總高度計算公式：
總高度 = 內容高度 + 上下 padding + 上下 border + 上下 margin
Border-box 盒模型(怪異盒模型)
在 border-box 模型中，width 和 height 包含了 padding 和 border，因此不需要額外加上這兩個部分。
總寬度計算公式：
總寬度 = 設定的 width（包含 padding 和 border） + 左右 margin
總高度計算公式：
總高度 = 設定的 height（包含 padding 和 border） + 上下 margin
總結對比：
| 盒模型 | 總寬度計算公式 | 總高度計算公式 |
|---|---|---|
| Content-box | 總寬度 = 內容寬度 + 左右 padding + 左右 border + 左右 margin | 總高度 = 內容高度 + 上下 padding + 上下 border + 上下 margin |
| Border-box | 總寬度 = 設定的寬度 + 左右 margin | 總高度 = 設定的高度 + 上下 margin |
選擇使用 content-box 還是 border-box 取決於你的佈局需求。border-box 更適合自適應佈局，因為你不需要手動調整寬度來考慮 padding 和 border 的影響。
浮動樣式詳解
當元素被浮動時,會脫離文件流,根據float的值向左或向右移動,直到它的外邊界碰到父元素的內邊界或另一個浮動元素的外邊界上,是css佈局中實現左右佈局的一種方式
文件流: 文件流是元素在web介面上的一種顯現方式,按照出現的先後順序進行排列
清除浮動方案
清除浮動是解決父元素高度塌陷問題的常用方法
1. 使用清除浮動的偽元素（clearfix）
這種方法是透過在父元素中新增一個偽元素來清除浮動。偽元素會建立一個新的塊級上下文，使父元素能夠計算其高度。
.box {
width: 400px;
border: 1px solid black;
}
.box::after {
content: ""; /* 建立偽元素 */
display: table; /* 設定為塊級元素 */
clear: both; /* 清除浮動 */
}
2. 使用 overflow 屬性
給父元素新增 overflow 屬性（如 overflow: auto; 或 overflow: hidden;），這樣父元素就會擴充套件以包含浮動子元素。
.box {
width: 400px;
border: 1px solid black;
overflow: auto; /* 清除浮動 */
}
3. 使用 clearfix 類
在專案中定義一個 .clearfix 類，以便於複用。可以將其應用於任何需要清除浮動的元素。
.clearfix::after {
content: "";
display: table;
clear: both;
}
4. 使用 Flexbox 佈局
Flexbox 是現代佈局技術，可以輕鬆處理浮動問題。它會自動調整父元素的高度，以包含所有子元素。
.box {
display: flex; /* 設定為 Flexbox 佈局 */
width: 400px;
border: 1px solid black;
}
css浮動需要注意的點
- 脫離文件流：浮動元素不佔據父元素高度，導致高度塌陷。解決方法：
clear、clearfix、overflow: hidden;。 - 浮動後的元素行為：後續元素會圍繞浮動元素。解決方法：使用
clear控制。 - 寬度問題：未指定寬度時，浮動元素會收縮到內容寬度。
- 父元素高度塌陷：使用
clearfix或overflow: hidden;解決。 - 佈局複雜性：浮動適合小規模佈局，推薦使用 Flexbox 或 Grid 進行復雜佈局。
浮動用於區域性佈局，避免用於複雜的頁面結構。
定位樣式詳解
css position屬性用於指定一個元素在文件中的定位方式,其中top,right,bottom,left屬性則決定該元素的最終位置
相對定位及特性