Tailwind CSS Box Sizing

Box Sizing

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

包括邊框和內(nèi)邊距

使用 ?box-border? 將元素的 ?box-sizing? 設(shè)置為 ?border-box?，告訴瀏覽器，當(dāng)您給它一個(gè)高度或?qū)挾葧r(shí)，它將包括元素的邊框和內(nèi)邊距。

這意味著一個(gè) 100px × 100px 的元素，邊框?yàn)?nbsp;2px，四邊有 4px 的內(nèi)邊距，將渲染為 100px × 100px，內(nèi)部?jī)?nèi)容區(qū)域?yàn)?nbsp;88px × 88px。

Tailwind 在 preflight基礎(chǔ)樣式 中針對(duì)所有元素把這做為默認(rèn)設(shè)置。

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

不包括邊框和內(nèi)邊距

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

這意味著一個(gè) 100px × 100px 的元素，如果有 2px 的邊框，四邊有 4px 的內(nèi)邊距，實(shí)際上會(huì)渲染為 112px × 112px，內(nèi)部?jī)?nèi)容區(qū)域?yàn)?nbsp;100px × 100px。

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

響應(yīng)式

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

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

關(guān)于 Tailwind 的響應(yīng)式設(shè)計(jì)功能的更多信息，請(qǐng)查看 響應(yīng)式設(shè)計(jì) 文檔。

自定義

變體

默認(rèn)情況下， 針對(duì) box-sizing 功能類，只生成 responsive 變體。

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

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

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

禁用

如果您不打算在您的項(xiàng)目中使用 box-sizing 功能，您可以通過(guò)在配置文件的 ?corePlugins ?部分將 ?boxSizing ?屬性設(shè)置為 ?false ?來(lái)完全禁用它們：

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