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 會發生折疊，這是垂直外邊距合并的效果。它通常出現在以下情況下：

1. 相鄰的塊級元素：相鄰塊級元素的上下外邊距合并。
2. 空白塊級元素：如果一個塊級元素內沒有其他內容，它的 margin-top 和 margin-bottom 會合并。
3. 父子元素關系：如果子元素是父元素中的第一個子元素，它的 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）：

塊級元素默認生成塊級盒子，這類盒子會占據其父容器的整個寬度，并且每一個塊級元素都會獨占一行。

特點：

1. 獨占一行：塊級盒子總是從新行開始，其他元素會被排列到它的下面。
2. 寬度自動填充：默認情況下，塊級元素的寬度會自動填充其父容器的寬度，除非手動設置寬度。
3. 可以包含塊級和內聯元素：塊級盒子可以容納其他塊級元素，也可以包含內聯元素。
4. 可設置寬度和高度：塊級盒子可以通過 width 和 height 屬性來定義其寬高。
5. 常見的塊級元素：
   • <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）：

內聯元素生成內聯盒子，通常用于包裝文本或小的內容。內聯盒子不會獨占一行，它們會在一行內順序排列，直到無法容納更多為止。

特點：

1. 不獨占一行：內聯元素在一行內排列，不會換行，除非內容溢出到父容器的寬度。
2. 寬高由內容決定：內聯盒子的寬度和高度由其內容決定，不能像塊級元素那樣通過 width 和 height 設置尺寸。
3. 只影響內容周圍的區域：內聯元素的 padding、margin 和 border 只會影響元素的內容區域，不能影響元素上下的內容布局（即不會增加行高）。
4. 常見的內聯元素：
   • <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> 元素是內聯盒子，它們不會獨占一行，而是和文本混排在同一行。

塊級盒子與內聯盒子的區別：

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 還是 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浮動需要注意的點

1. 脫離文檔流：浮動元素不占據父元素高度，導致高度塌陷。解決方法：clear、clearfix、overflow: hidden;。
2. 浮動后的元素行為：后續元素會圍繞浮動元素。解決方法：使用 clear 控制。
3. 寬度問題：未指定寬度時，浮動元素會收縮到內容寬度。
4. 父元素高度塌陷：使用 clearfix 或 overflow: hidden; 解決。
5. 布局復雜性：浮動適合小規模布局，推薦使用 Flexbox 或 Grid 進行復雜布局。

浮動用于局部布局，避免用于復雜的頁面結構。

定位樣式詳解

css position屬性用于指定一個元素在文檔中的定位方式,其中top,right,bottom,left屬性則決定該元素的最終位置

相對定位及特性