tailwindcss 系列 Box Sizing

Box Sizing

实现效果如下

包含border和paddin,代码实现如下:

    <div
      class="box-border h-20 w-32 p-4 border-4 border-gray-400 bg-gray-200 mb-4"
    >
      <div class="h-full w-full bg-gray-400"></div>
    </div>

不包含border和padding,代码实现:

    <div
      class="box-content h-20 w-32 p-4 border-4 border-gray-400 bg-gray-200 mb-4"
    >
      <div class="h-full w-full bg-gray-400"></div>
    </div>

响应式实现

   <div
      class="box-border md:box-content h-20 w-32 p-4 border-4 border-gray-400 bg-gray-200 mb-4"
    >
      <div class="h-full w-full bg-gray-400"></div>
    </div>