关于display: -webkit-box；

display:-webkit-box

一般用于移动端布局，没有得到firefox、Opera、chrome浏览器的完全支持，但是都可以加上浏览器私有前缀然后进行使用的
当父元素设置了这个属性之后，子元素变成内联元素(子元素的子元素不会受影响，感觉和flex十分类似)，高度默认占满父元素，当所有子元素的宽度超过父元素的宽度的时候，他不会自动换行，会继续占领那一行，父元素的宽度不会改变

box属性（父元素的属性）

1. box-orient(指定一个box子元素是否应按水平或垂直排列。)
   box-orient: horizontal|vertical|inline-axis|block-axis|inherit;
   水平方向默认从左到右，竖直方向默认从上到下，直接想在父元素整体改变子元素的排列方式，可以使用box-dection属性
   

• vertical属性值
  将子元素从上往下排列，在此时未设置子元素的宽度的时候，子元素默认和父元素一样宽，会直接无视父元素的高度
  

阴影部分是父元素的宽度，不会撑大父元素的宽度

• inline-axis和block-axis属性给我的感觉就是和horizonal、vertical属性的效果差不多，再具体也不清楚
• 上述属性值在子元素未设置宽度或高度的时候，比例分配依然满足下面的box-flex属性

2. box-direction(指定显示哪个方向的box的子元素。)
   

3. box-align(指定box的子元素如何对齐。相对于纵轴而言)
   

start

end

center

baseline

• -webkit-box-align: stretch;看效果是默认值的感觉，因为在子元素没有设置height的情况下不管设不设置这个属性，子元素都是默认占满父元素的宽度是（子元素按水平排列），但如果子元素设置了height，则不起作用，与选择器的权重无关

4. box-pack(指定一个box的子元素时，被置于该框的子元素小于该框。此属性指定横向框的水平位置，垂直位置的垂直框。)
   上面小括号里面的是菜鸟教程里面给出的解释，但个人理解就是指定box的子元素如何对齐。相对于水平轴而言（子元素的排列方式为水平）
   

start

end

center

justify

5. box-lines
   应该是被废除了
   

子元素的属性

1. box-flex属性
   针对子元素如何分配父元素中的空间，在菜鸟教程中，表示子元素会按照box-flex的值按比例分配父元素的宽度，就像flex-grow属性
   但是，他实际上的分配是存在一点点问题的，目前也不知道是为什么，如果后续查到了相关资料，就会修改的
   比如，菜鸟教程里面的实例，介绍写的一个是100px，另一个是200px，但实际上并不是这样
   

还有自己写的一个例子，加了margin之后按道理应该是父元素减去固定的宽度还有margin和padding，把剩下的部分按比例分配，但实际上也存在误差

2. box-ordinal-group属性(默认值为1)
   指定一个box的子元素的显示顺序。
   效果类似flex布局里面子元素的order属性(默认值为0)从小到大按顺序显示，取值可以为负值

在处理多行文本溢出隐藏的时候，发现了这个没有被完全支持的属性，然后就看了一下，感觉和flex差不多，但个人认为flex更成熟，更完善一点，建议看一下我写的关于flex
链接: 和flex有关.

这篇参考了这篇文章的一部分
链接: 参考部分.

主要使用了菜鸟教程。