CSS中display: inline-block；的使用

<template>
	<scroll-view scroll-x="true" class="parentBox">
		<view v-for="i in 20" class="box">子元素{{i}}</view>
	</scroll-view>
</template>

<script>

</script>

<style lang="scss">
	.parentBox{
		width:90%;
		height: 200px;
		border:1px solid green;
		//用于控制如何处理元素内(子元素会产生大量空白)的空白字符；
		//normal会换行
		//nowrap不会换行
		white-space: nowrap; 
		
		.box{
			width:100px;
			height:100px;
			background:gray;
			// inline-block使元素具有inline元素和block元素的特点；
			// inline-block可以像inline元素与其周围的元素在同一行上显示（如果有足够的空间）；
			// inline-block元素的宽度和高度、边距、填充可以设置，这与 inline 元素不同(inline不能设置这些)，因为 inline 元素的宽度和高度由其内容决定。
			// inline-block元素可以包含块级元素。
			// display: inline-block; 的一个常见场景是多个元素并排显示，但又想为每个元素设置特定的宽度、高度和边距时。例如，你可以使用它来创建水平导航菜单，其中每个菜单项都是一个 inline-block 元素。
			display: inline-block;
			margin: 5px;
		}
	}
</style>