display属性设置弹性布局

flex： 将对象作为弹性伸缩盒显示

inline-flex：将对象作为内联块级弹性伸缩盒显示

两者的区别

参考：https://www.jb51.net/css/520392.html

1 14 15     
     16     
     17        
     
      18             
      
       1
      
19             
      
       1
      
20             
      
       1
      
21             
      
       1
      
22             
      
       1
      
23        
     
24   25 

 

使用display:flex效果是这样

使用display:inline-flex效果是这样

，将上面的display:flex,换成display:inline-flex,并且将width:200px删除。在没有测试之前，有的人可能会认为.container会占据整个一行，但是，测试结果是，它会根据子元素所有的div大小自适应宽度和高度

 上面这里用到border-sizing,那我们来看下box-sizing:content-box 和 box-sizing:border-box，content-box被称为正常盒子模型，border-box被称为怪异盒子模型

border-box限定了盒子模型的总面积

这里的维度计算为： width = border + padding + 内容的  width， height = border + padding + 内容的 height。

当我们设置 box-sizing: content-box; 时，浏览器对盒模型的解释遵从我们之前认识到的 W3C 标准，当它定义width和height时，它的宽度不包括border和padding。

当我们设置box-sizing: border-box; 时，浏览器对盒模型的解释与 IE6之前的版本相同，当它定义width和height时，border和padding则是被包含在宽高之内的。内容的宽和高可以通过定义的“width”和 “height”减去相应方向的“padding”和“border”的宽度得到。内容的宽和高必须保证不能为负，必要时将自动增大该元素border box的尺寸以使其内容的宽或高最小为0。

box-sizing:border-box;通过从已设定的宽度和高度分别减去边框和内边距才能得到内容

红色的部分是内容

 box-sizing:content-box;在宽度和高度之外绘制元素的内边距和边框。