/* 这是写的一个通用小程序 uinapp 等移协端标准css 样公式 避免写重复的css 文件 */



/* display:flex; 
 定义为 flex 布局 */

/* 
  
flex-direction{
	 项目的排列方向
	row: 默认值，表示沿水平方向，由左到右。
	row-reverse ：表示沿水平方向，由右到左
	column：表示垂直方向，由上到下
	column-reverse:表示垂直方向，由下到上
} */


 /* 水平居中还在垂直居中要,要看作用域是控制自己较上级居中,还是控制下级居中,没起作用,看下作用域,有些div 有用,可能下级控件如img butuen 并不起作用. */

/* 
flex-wrap属性{
	决定一条轴线排不下该如何换行  换不换行取决是看有多少个相同的控件，比如商品列表，个数不确定要换行。确定是几个控件，不需要换行
	nowrap：表示不换行
	wrap：正常换行
} */


/* .justify-content{
    设置子布局主轴上容器中的对齐方式
	flex-start：默认值，左对齐
	flex-end：右对齐
	center：居中对齐
	space-between：两端对齐
	space-around：每个项目两侧的间距相等
} */
/* align-items属性 {
	
	 定义项目在交叉轴上如何对齐
	 如果是水平布局,这项就是垂直方向的对齐方式,这样就能控制控件在水平方向和垂直方向的摆放
	 flex-start：交叉轴的起点对齐。 如是左右局部，就是从顶部开始排列子控件 如果是上下布局，就是从左往右排列
	 flex-end：交叉轴的终点对齐。  如是左右局部，就是从底部开始向上排列子控件
	 center：交叉轴的中点对齐。    居中对齐
	 baseline: 项目的第一行文字的基线对齐。
	 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度	 
 } */
/* align-content属性
 align-content属性定义了多根轴线的对齐方式。就是子级下面还有子级布局，爷级控制父集，父集控制孙级，如果项目只有一根轴线，该属性不起作用
 flex-start：与交叉轴的起点对齐。
 flex-end：与交叉轴的终点对齐。
 center：与交叉轴的中点对齐。
 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
 space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 */

/* 左右布局 水平布局从左往右排列 X轴  并且子控件从上往下排列*/
.x {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}
/* 水平居中 */
.x-c {
	display: flex;
	flex-direction: row;
	align-items:center;
	justify-content: center;
}
/* 水平居中 各组平均间距都一样 */
.x-c-c {
	display: flex;
	flex-direction: row;
	align-items:center;
	justify-content: center;
	align-content:space-around;
}
/* 垂直布局上下布局  Y轴   并且子控件从左往右排列 */
.y {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
/* 垂直居中 */
.y-c {
	display: flex;
	flex-direction: column;
	align-items:center;
	justify-content: flex-start;
}

/* 不换行 */
.nowrap {
	flex-wrap: nowrap;
}

/* 换行 */
.wrap {
	flex-wrap: wrap;
}


/* 边框圆角 */
.b-r-10 {
	border-radius: 10px;
}

.b-r-20 {
	border-radius: 20px;
}

/* 圆角50% */
.b-r-50 {
	border-radius: 50%;
	
}



/* border:1px solid red;边框大小 样式 颜色
样式{
	dotted: 定义一个点线边框
	dashed: 定义一个虚线边框
	solid: 定义实线边框
	double: 定义两个边框
}
border-bottom 设置下边框的样式 这个用的最多
border-left  设置左边框的样式
border-right 设置右边框的样式
border-top   设置顶部上边框的样式 */
/* 底部黑色边框 */
.b-b {
	/* 灰色 */
	border-bottom:1px solid #C0C0C0;
}

/* 外边框 */
/* 外边框 左右10px */
.m-x-10 {
	margin-left: 10px;
	margin-right: 10px;
}

/* 外边框 左右10px */
.m-x-20 {
	margin-left: 20px;
	margin-right: 20px;
}

/* 外边框 上下10px */
.m-y-10 {
	margin-top: 10px;
	margin-bottom: 10px;
}

/* 外边框 上下10px */
.m-y-20 {
	margin-top: 20px;
	margin-bottom: 20px;
}

/* 外边框 上下左右各10px */
.m-xy-10 {
	margin: 10px;
}

/* 外边框 上下左右各10px */
.m-xy-20 {
	margin: 20px;
}

/* *内边距* */

/* 左右10px */
.p-x-10 {
	padding-left: 10px;
	padding-right: 10px;
}

/* 左右10px */
.p-x-20 {
	padding-left: 20px;
	padding-right: 20px;
}

/* 上下10px */
.p-y-10 {
	padding-top: 10px;
	padding-bottom: 10px;
}

/* 上下20px */
.p-y-20 {
	padding-top: 20px;
	padding-bottom: 20px;
}

/* 上下左右10px */
.p-10 {
	padding: 10px;
}

/* 上下左右20px */
.p-20 {
	padding: 20px;
}

/* 宽高 */
.w-100 {
	width: 100%;
}

.w-50 {
	width: 50%;
}

.h-100 {
	height: 100%;
}



.h-50 {
	height: 50%;
}

/* 文本居中对齐 */
.text-align {
	text-align: center;
}

/* 图片居中对齐  控制自己 */
.img-align {
	display: block;
	margin: 0 auto;
}

/* color:字体的颜色
font-weight	指定字体的粗细。
font-size	指定文本的字体大小 */


.weight {
	font-weight: bold;
}

.text-35 {
	font-size: 35px;
}

.text-40 {
	font-size: 40px;
}


/* 图片大小 */
.img-50 {
	width: 50px;
	height: 50px
}

.img-80 {
	width: 80px;
	height: 80px
}

.limg-100 {
	width: 100px;
	height: 100px
}

.img-160 {
	width: 160px;
	height: 160px
}

.img-200 {
	width: 200px;
	height: 200px
}
.img-250 {
	width: 250px;
	height: 250px
}
.img-250 {
	width: 300px;
	height: 300px
}

/* 图片大小 */
.img-345 {
	width: 345px;
	height: 345px
}

/* css对齐   扩展 不需要可以删除或者参考 */

/* 要水平居中对齐一个元素(如 <div>),控制子无素 可以使用 margin: auto;。 */
.div-margin {
	margin: auto;
}

/* position 属性
 relative相对定位,是相对于父集无素;您可以通过 top、bottom、left 和 right 四个属性的组合来设置元素相对于默认位置在不同方向上的偏移量
 absolute绝对定位;您同样可以使用 top、bottom、left 和 right 四个属性来设置元素相对于父元素或浏览器窗口不同方向上的偏移量。
 上面两种区别一个相对的默认位置,应该的位置(本质还是相对于父集元素),一个是相对对父集元素,差别不大.
 fixed固定定位 前两种用的最多 */

/* 左右对齐 - 使用定位方式  是控制自己与父集元素的对齐方式
 我们可以使用 position: absolute; 属性来对齐元素 */

/* 右对齐 */
.right {
	position: absolute;
	/* 距离右边多个px  实现右对齐 */
	right: 0px;
}

.left {
	position: absolute;
	/* 距离左边多个px  实现左对齐 */
	left:0px;
	
}

/* 左右对齐 - 使用 float 方式 */
/* 使用 float 方式 右对齐 */
.right-float {
	float: right;
}

/* 使用 float 方式 左对齐 */
.left-float {
	float: left;
}

/* 垂直居中对齐 - 使用 padding   控制子元素 */
.div-y {
	/* 上下多少px   左右0px 就居中了 */
	padding: 10px 0;
}

/* 如果要水平和垂直都居中，可以使用 padding 和 text-align: center: */
.div-x-y {
	padding: 10px 0;
	/*  border: 3px solid green; */
	text-align: center;
}


/* 白色背景 */
.b-c-f{
	background-color: #ffffff;
}
/* 总页面布局 */
.content{
	
}
/* 固定在底部 */
.foot{
	position: absolute;
	 bottom: 0px;
}
/* 居中对齐 */

	
/* align-content 属性{
	stretch	元素被拉伸平均分布。
	center	元素位于容器的中心。
	flex-start	元素位于容器的开头
	flex-end	元素位于容器的结尾
}
 */

/* align-items 属性{
	display: flex;  要用这个配合使用
	stretch	默认值。元素被拉伸以适应容器
	center	元素位于容器的中心
	flex-start	元素位于容器的开头。
	flex-end	元素位于容器的结尾
} */

/* 灰色  #F8F8F8  #F0F0F0   	#E0E0E0  #D0D0D0  #C0C0C0  #B0B0B0 #A0A0A0  #909090 #808080  	#707070 */

/* 基本布局+自定义个性定制样式相结合 组合calss css。  原的xpr 全部替换为px pc不支付pc*/