Tailwind CSS Box Sizing

Box Sizing

控制瀏覽器如何計算元素的總大小的功能類。

包括邊框和內邊距

使用 ?box-border? 將元素的 ?box-sizing? 設置為 ?border-box?，告訴瀏覽器，當您給它一個高度或寬度時，它將包括元素的邊框和內邊距。

這意味著一個 100px × 100px 的元素，邊框為 2px，四邊有 4px 的內邊距，將渲染為 100px × 100px，內部內容區(qū)域為 88px × 88px。

Tailwind 在 preflight基礎樣式 中針對所有元素把這做為默認設置。

<div class="box-border h-32 w-32 p-4 border-4 ...">
  <!-- ... -->
</div>

不包括邊框和內邊距

使用 ?box-content? 將元素的 ?box-sizing? 設置為 ?content-box?，告訴瀏覽器在元素的指定寬度或高度的基礎上添加邊框和內邊距。

這意味著一個 100px × 100px 的元素，如果有 2px 的邊框，四邊有 4px 的內邊距，實際上會渲染為 112px × 112px，內部內容區(qū)域為 100px × 100px。

<div class="box-content h-32 w-32 p-4 border-4 ...">
  <!-- ... -->
</div>

響應式

要控制特定斷點處的 box-sizing，可為任何現(xiàn)有的 box-sizing 功能類添加 ?{screen}:? 前綴。例如，使用 ?md:box-content? 只給中等以上的屏幕尺寸應用 ?box-content? 功能類。

<div class="box-border md:box-content ...">
  <!-- ... -->
</div>

關于 Tailwind 的響應式設計功能的更多信息，請查看 響應式設計 文檔。

自定義

變體

默認情況下， 針對 box-sizing 功能類，只生成 responsive 變體。

您可以通過修改您的 ?tailwind.config.js? 文件中的 ?variants ?部分中的 ?boxSizing ?屬性來控制為 box-sizing 功能生成哪些變體。

例如，這個配置也將生成 hover and focus 變體:

  // tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
       boxSizing: ['hover', 'focus'],
      }
    }
  }

禁用

如果您不打算在您的項目中使用 box-sizing 功能，您可以通過在配置文件的 ?corePlugins ?部分將 ?boxSizing ?屬性設置為 ?false ?來完全禁用它們：

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
     boxSizing: false,
    }
  }