uni-app学习小记--4（盒模型）

本期主要学习盒模型，一个很经典又很实用且不是特别复杂的一个工具：（样式和代码在本文末尾！）

display:Flex;

什么是盒模型？

对于盒模型的理解我认为十分简单，将其看作一个盒子，那么我们所要展现的元素或者全局要体现出来的样式，可以通过一个一个小盒子来装载和构造；

浏览器控制台里面所显示的四方形就是模型展示样式图： 

盒模型样式有哪些实用的？

一、根据图片，主要有三个元素需要注意：

1. margin：盒子同外部的关系；

 2.boder：盒子本体样式； 

3.padding：盒子内部元素同盒子的关系；

 衍生出来的位置样式---xxx-top、xxx-left等等就相对和好理解啦

二、盒与盒之间的关系：Flex

flex-direction：设置元素的排列方向

row 从左到右排序、主轴是横向的

row-reverse 从右向左排序、主轴是横向的的

column 从上到下排序、、主轴是垂直的

column-reverse 从下到上排序、主轴是垂直的

flex-wrap： 使容器内的元素换行

nowrap 不换行
wrap 换行
wrap-reverse 逆向换行排序

 justify-content：设置元素在主轴上的对齐方式

根据主轴方向的不同：
flex-start 左对齐 或者 向上对齐
flex-end 右对齐 或者 向下对齐
center 居中对齐
space-between 两端对齐，空白均匀地填充到flex成员项之间。
space-around 元素两边平均等分剩余空白间隙部分，最左或最右和元素之间距离是1：2

 

 三、实际应用

 首先上样式图：

 Vue代码：

<view class="Tab_Box" style="justify-content: space-between;align-items: center;margin-bottom:15rpx;background-color: lightgray;padding-bottom: 10rpx;">
			<scroll-view scroll-x style="white-space: nowrap;">
				<view :class="{'active':isActive==1}" @click="chencked(1)" class="Tab_One">
					新闻
				</view>
				<view :class="{'active':isActive==2}" @click="chencked(2)" class="Tab_Two">
					阅读量数据
				</view>
				<view :class="{'active':isActive==3}" @click="chencked(3)" class="Tab_Three">
					详细功能
				</view>
				<view :class="{'active':isActive==4}" @click="chencked(4)" class="Tab_Four">
					你瞅啥？
				</view>
			</scroll-view>
		</view>
		
		<!-- 详情内容页面 -->
		<view style="background-color: aquamarine;">
			<view v-if="isActive==1">11</view>
			<view v-if="isActive==2">22</view>
			<view v-if="isActive==3">33</view>
			<view v-if="isActive==4">44</view>
		</view>

CSS代码：

.Tab_One{
	text-align: center;
	display: inline-block;
	box-sizing: border-box;
	margin-left: 60rpx;
	margin-top: 6px;
	font-size: 30rpx;
	padding: 10rpx;
	&.active{
		color:blue;
		font-weight: 600;
	}
}