HTML | DOM 样式 boxSizing 属性

DOM 样式boxSizing属性用于设置或返回应如何制作对象以适应元素，同时考虑到它的 padding、border 和 content 。
当通过自动计算元素的尺寸将元素拟合到所需位置时，此属性非常有用。

句法：

• 它返回 boxSizing 属性：

  object.style.boxSizing

• 它用于设置 boxSizing 属性：

  object.style.boxSizing = "border-box | content-box | initial | 
  inherit"

属性值：

• border-box：使用此值，元素上指定的任何填充或边框都包含并绘制在指定的宽度和高度内。内容的尺寸是通过从元素本身的指定“宽度”和“高度”属性中减去边框和填充来计算的。

  示例 1：

    
  
      
        DOM Style boxSizing Property
      
      
          .container {
              width: 200px;
              height: 300px;
              border: 10px solid green;
          }
            
          .box {
              width: 200px;
              height: 100px;
              border: 5px solid lightgreen;
              text-align: center;
              font-size: 2rem;
          }
      
  
    
  
      
        GeeksForGeeks
      
      
        DOM Style boxSizing Property
      
      
        The container element has a
        height of 500px and width of 200px.
          The boxes inside have a height
        of 100px and width of 200px.
      
      
          
            Geeks
        
          
            For
        
          
            Geeks
        
      
    
      
        Click the button to set the boxSizing 
        property of the three boxes to 
        border-box.
      
      
        Change boxSizing
      
      
          function setBoxSizing() {
              
              document.getElementById(
                "box-1").style.boxSizing =
                "border-box";
              
              document.getElementById(
                "box-2").style.boxSizing = 
                "border-box";
              
              document.getElementById(
                "box-3").style.boxSizing = 
                "border-box";
          }
      
  
    

  输出：

  点击按钮前：
  

  点击按钮后：
  

• content-box：使用此值，指定的宽度和高度应用于元素的 content-box。元素上指定的任何填充和边框都将添加并绘制到框的指定尺寸之外。这是默认值。

  示例 2：

    
  
      
        DOM Style boxSizing Property
      
      
          .container {
              width: 200px;
              height: 300px;
              border: 10px solid green;
          }
            
          .box {
              width: 200px;
              height: 100px;
              border: 5px solid lightgreen;
              text-align: center;
              font-size: 2rem;
              box-sizing: border-box;
          }
      
  
    
  
      
        GeeksForGeeks
      
      
        DOM Style boxSizing Property
      
      
        The container element has a height 
        of 500px and width of 200px.
          The boxes inside have a height
        of 100px and width of 200px.
      
      
          
            Geeks
        
          
            For
        
          
            Geeks
        
      
    
      
        Click the button to set the boxSizing
        property of the three boxes to 
        content-box.
      
    
      
        Change boxSizing
      
    
      
          function setBoxSizing() {
              
              document.getElementById(
                "box-1").style.boxSizing = "content-box";
              document.getElementById(
                "box-2").style.boxSizing = "content-box";
              document.getElementById(
                "box-3").style.boxSizing = "content-box";
          }
      
  
    

  输出：
  点击按钮前：
  

  点击按钮后：
  

• 初始值：用于将此属性设置为其默认值。

  示例 3：

    
  
      
        DOM Style boxSizing Property
      
      
          .container {
              width: 200px;
              height: 300px;
              border: 10px solid green;
          }
            
          .box {
              width: 200px;
              height: 100px;
              border: 5px solid lightgreen;
              text-align: center;
              font-size: 2rem;
              box-sizing: border-box;
          }
      
  
    
  
      
        GeeksForGeeks
      
      
        DOM Style boxSizing Property
      
      
        The container element has a height 
        of 500px and width of 200px.
          The boxes inside have a height
        of 100px and width of 200px.
      
      
          
            Geeks
        
          
            For
        
          
            Geeks
        
      
    
      
        Click the button to set the boxSizing 
        property of the three boxes to initial.
      
      
        Change boxSizing
      
      
          function setBoxSizing() {
              
              document.getElementById(
                "box-1").style.boxSizing = "initial";
              
              document.getElementById(
                "box-2").style.boxSizing = "initial";
              
              document.getElementById(
                "box-3").style.boxSizing = "initial";
          }
      
  
    

  输出：
  点击按钮前：
  

  点击按钮后：
  

• 继承：这从其父级继承属性。

  示例 4：

    
  
      
        DOM Style boxSizing Property
      
      
          .container {
              width: 200px;
              height: 300px;
              border: 10px solid green;
              /* this acts as the parent */
              box-sizing: border-box;
          }
            
          .box {
              width: 200px;
              height: 100px;
              border: 5px solid lightgreen;
              text-align: center;
              font-size: 2rem;
          }
      
  
    
  
      
        GeeksForGeeks
      
      
        DOM Style boxSizing Property
      
      
        The container element has a 
        height of 500px and width of 200px.
          The boxes inside have a 
        height of 100px and width of 200px.
      
      
          
            Geeks
        
          
            For
        
          
            Geeks
        
      
      
        Click the button to set the boxSizing
        property of the three boxes to inherit.
      
      
        Change boxSizing
      
      
          function setBoxSizing() {
              
              document.getElementById(
                "box-1").style.boxSizing = "inherit";
              
              document.getElementById(
                "box-2").style.boxSizing = "inherit";
              
              document.getElementById(
                "box-3").style.boxSizing = "inherit";
          }
      
  
    

  输出：
  点击按钮前：
  

  点击按钮后：
  

支持的浏览器： boxSizing属性支持的浏览器如下：

• 谷歌浏览器
• IE浏览器
• 火狐
• 歌剧
• 苹果Safari