一、display:box;

　　在元素上设置该属性，可使其子代排列在同一水平上，类似display:inline-block;。

二、可在其子代设置如下属性

　　前提：使用如下属性，必须在父代设置display:box;

　　1.box-flex:number;

　　　　1）占父级元素宽度的number份

　　　　2）若子元素设置固定宽度，则该子元素应用固定宽度，其他未设置固定宽度的字元素将余下的父级宽度（父级-已设置固定宽度的子代元素的总宽度按　number占份数

　　　　3）若子元素有margin值，则按余下（父级宽度-子代固定总宽度-总margin值）宽度占number份

　　2.box-orient:horizontal/vertical

　　　　在父级上设置该属性，则子代按水平排列或竖直排列。

　　　　注：所有主流浏览器不支持该属性，必须加上前缀。

　　　　1）horizontal  水平排列，子代总width=父级width。若父级固定宽度，则子代设置的width无效，子代会撑满父级宽度。

　　　　2）vertical  垂直排列，子代总height=父级height。若父级固定高度，则子代设置的height无效，子代会撑满父级高度。

　　3.box-direction:normal/reverse

　　　　在父级上设置该属性，确认子代的排列顺序。

　　　　1）normal  默认值，子代按html顺序排列

　　　　2）reverse  反序

　　4.box-align:start/end/center/stretch

　　　　在父级设置，子代的垂直对齐方式。

　　　　1）start  垂直顶部对齐

　　　　2）end 垂直底部对齐

　　　　3）center 垂直居中对齐

　　　　4）stretch 拉伸子代的高度，与父级设置的高度一致。子代height无效。

　　5.box-pack:start/end/center

　　　　在父级设置，子代的水平对齐方式。

　　　　1）start  水平左对齐

　　　　2）end  水平右对齐

　　　　3）center  水平居中对齐
 

总结

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Canvas中怎么进行图像处理，有哪些基础知识

  这篇文章主要介绍了canvas 基础之图像处理的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• CSS盒子高度怎样设置始终百分百？

  这篇文章给大家分享的是CSS盒子高度怎样设置始终100%。小编觉得挺实用的，因此分享给大家做个参考，文中示例代码介绍的非常详细，感兴趣的朋友接下来一起跟随小编看看吧。

• HTML5中汉字加拼音怎么实现，及如何做简单的进度条

  这篇文章主要介绍了html5给汉字加拼音加进度条的实现代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• CSS使图片变灰的方法是什么，代码怎样写？

  CSS使图片变灰的方法是什么，代码怎样写？要将图片颜色变成灰色，只要我们给图片添加一个灰度的滤镜效果就可以实现了，这里我们使用filter属性来实现，具体的实现代码如下，感兴趣的就继续往下看吧。

• CSS3如何让鼠标悬停元素后增加阴影

  在css中，可以利用“:hover”选择器和“box-shadow”属性实现鼠标悬停时的阴影效果，语法为“元素:hover{box-shadow:水平阴影位置 垂直阴影位置;}”。