舉例說明如何從html元素繼承box-sizing？

王铁柱6發表於2024-12-04
HTML繼承

在前端開發中，box-sizing 屬性控制如何計算一個元素的總寬度和總高度。預設情況下，box-sizing 的值為 content-box，這意味著 width 和 height 屬性只應用於元素的內容，而不包括 padding 和 border。如果要將 padding 和 border 包含在 width 和 height 中，則需要將 box-sizing 設定為 border-box。

為了從 HTML 元素繼承 box-sizing，可以使用 CSS 繼承機制。最常見的方法是將 box-sizing 應用於 html 元素或一個高層級的祖先元素，然後讓其後代元素繼承該值。

以下是一些例子：

1. 全域性繼承：

<!DOCTYPE html>
<html style="box-sizing: border-box;">
<head>
  <title>Box-sizing Inheritance</title>
</head>
<body>
  <div>Div 1</div>
  <p>Paragraph 1</p>
  <span>Span 1</span>
</body>
</html>

在這個例子中，box-sizing: border-box; 應用於 html 元素。這意味著所有後代元素，包括 div、p 和 span，都將繼承 border-box 值。因此，所有這些元素的寬度和高度都將包括 padding 和 border。

2. 部分繼承：

<!DOCTYPE html>
<html>
<head>
  <title>Box-sizing Inheritance</title>
  <style>
    .container {
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div class="container">
    <div>Div 1</div>
    <p>Paragraph 1</p>
    <span>Span 1</span>
  </div>
  <div>Div 2 (outside container)</div>
</body>
</html>

在這個例子中，box-sizing: border-box; 應用於 .container 類。這意味著只有 .container 的後代元素 (Div 1, Paragraph 1, Span 1) 會繼承 border-box。Div 2 位於容器外部，因此不會繼承，並使用預設的 content-box。

3. 使用 inherit 關鍵字:

雖然不常用，但你可以顯式地使用 inherit 關鍵字來確保一個元素繼承其父元素的 box-sizing 值：

<!DOCTYPE html>
<html style="box-sizing: border-box;">
<head>
  <title>Box-sizing Inheritance</title>
</head>
<body>
  <div style="box-sizing: inherit;">Div 1</div>
</body>
</html>

在這個例子中，即使沒有直接在 div 上設定 box-sizing，它也會透過 inherit 關鍵字從其父元素（html）繼承 border-box 值。

通常情況下，將 box-sizing: border-box; 應用於 html 元素是最方便和推薦的做法，因為它可以確保所有元素都使用相同的盒模型，避免佈局問題。 這也被稱為 "universal box-sizing" 或 "* box-sizing" 並且經常在 CSS resets 或 normalize stylesheets 中使用。

相關文章