以下讨论的是和相关的css box-sizing属性（盒子模型）的用法介绍 教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

本篇文章给大家带来的内容是关于CSS中text-transform属性实现字符串转换的代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

1.关于box-sizing: 属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型。
值有：content-box（默认值），border-box，inherit。
A、content-box：宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
B、border-box：为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

  
  
  

    
这个 div 占据部分。
    
这个 div 占据部分。
    
    
    
      
    

如图所示，图1的p属性border-box的内盒尺寸（不包括margin）为200*50，盒子的长=width，包括了border、paddind、content，content=width-border*2-padding*2=170(蓝色框)；
图2的p属性content-box的内盒尺寸（不包括margin）为230*80，盒子的长=width+border*2+padding*2=230，width=content(蓝色框)；
C、inherit：规定应从父元素继承 box-sizing 属性的值。

.box2{
    width:200px;
    height: 50px;
    padding: 5px;
    border:10px solid red;
    float:left;
    box-sizing:inherit;
}


    
这个 p 占据部分。

.box2继承了box的border-box的属性值。

关于css box-sizing属性（盒子模型）的用法介绍的内容写到这里就结束啦，您可以收藏本页网址http://www.alixixi.com/web/ a/2018080995921.shtml方便下次再访问哦。