Tailwind CSS 框大小调整

这个类在 Tailwind CSS 中接受多个值，所有属性都以类的形式覆盖。它是 CSS box-sizing 属性的替代品。此类用于定义用户应如何计算元素的总宽度和高度，即是否包含或不包含填充和边框。

盒子尺寸：

• 框边框
• 盒子内容

box-border：在这种模式下，宽度和高度属性包括内容、内边距和边框，即如果我们将元素的宽度设置为 200 像素，那么 200 像素将包括我们添加的任何边框或内边距，并且内容框将缩小到吸收额外的宽度。这通常使得调整元素大小变得更加容易。

句法：

..

例子：

HTML

 
 
     
     
 
  
 

    

        GeeksforGeeks
    
 
    Tailwind CSS box-border Class 
    

        A Computer Science Portal
    
 

 
  

输出：

box-content：这是 box-sizing 类的默认值。在这种模式下，宽度和高度类只包含内容。边框和内边距不包括在其中，即如果我们将元素的宽度设置为 200 像素，则元素的内容框将是 200 像素宽，并且任何边框或内边距的宽度都将添加到最终呈现的宽度中。

句法：

..

例子：

HTML

 
 
     
     
 
  
 

    

        GeeksforGeeks
    
 
    Tailwind CSS box-content Class 
    

        A Computer Science Portal
    
 

 
  

输出：