小程序开发——页面布局

两种方式可以同时使用。

一、flex布局

flex容器属性

1. flex-direction：元素的排列方向，默认为row（横排），column为竖排
2. flex-wrap：元素是否换行，nowrap(默认)、wrap、wrap-reverse（换行方向与wrap主轴相反）
3. flex-flow：flex-direction和flex-wrap的简写，比如 row wrap
4. justify-content：元素在主轴的对齐方式，flex-start（默认）、flex-end、center、space-between、space-around、space-evenly
5. align-items：元素在交叉轴对齐方式，stretch（默认值）、flex-start、center、flex-end、baseline（以元素中文字为基线）
   
   

flex元素属性

1. flex-grow：当容器有多余空间时，元素的放大比例（默认为1）
2. flex-shrink：当容器空间不足时，元素的缩小比例（默认为1）
3. flex-basis:元素在主轴上占据的空间
4. flex：grow、shrink、basis的简写
5. order定义元素的排列顺序
6. align-self：定义元素自身的对齐方式（可改变父元素的排列方式）auto（默认值） | flex-start | center | flex-end | baseline |stretch

元素即是项目一、项目二等

二、相对布局和绝对布局

1. 相对定位的元素是相对自身进行定位，参照物是自己
2. 绝对定位的元素是相对离它最近的一个已定位的父级元素进行定位

三、一些例子

1. 实现文字加边框

.text{
	border-left:2rpx solid #fff;
	}

或者

.text{
	border-left-width:2ps;
	border-left-style:solid;
	border-left-color:#fff;
	}

2. 两块元素间加分割线
   

.line{
	border-bottom:2rpx solid #fff;
	}

3. 文字渐变效果实现
   

.text{
	background:-webkit-linear-gradient(bottom,rgba(0,0,0,0.5),rgba(0,0,0,0)		
	//第一个参数为从哪里开始（bottom），第二个参数开始颜色rgba（前三个参数为颜色，最后一个参数为透明度）
	//第三个参数结束颜色rgba（前三个参数为颜色，最后一个参数为透明度）
}

要使图像上文字块居中，必须设置宽width、高height、display：flex、flex-direction。
绝对定位、相对定位需要设置bottom、top、right、left属性。

4. 图片头像框实现
   

.list{
	height:500rpx;
	width:100%;
}

.list-miages{
	height:300rpx;
	width:100%;
	position:relative;			//头像相对于这个父元素绝对定位
										//相对定位，子元素的absolute才能生效
										//绝对定位的父级必须要定位
}

.list-images image{
	height:100%;
	width:100%					//组件当中的image属性
}

.list-images-icon{
	width:75rpx;
	height:75rpx;					//设置容器高度，显示渐变的高度
	border-radius:50% 			//头像弧度
	position:absolute;			//绝对定位,父元素的position位置固定，这个绝对定位才会生效
	bottom:-75rpx;					//位置在父级元素底部往下75
	right:100rpx;					//位置在父级元素右部
}

三、注意

1. 组件的属性在组件标签中定义，而不是在css中定义。

<image style="width: 200px; height: 200px; background-color: #eeeeee;" mode="{{item.mode}}" src="{{src}}">

style中的属性是在css中定义的，即：

.wxml文件中
<image class=“imageitem” mode="{{item.mode}}" src="{{src}}">

.wxss文件中
.imageitem{
	width: 200px; 
	height: 200px; 
	background-color: #eeeeee;
}

2.注意组件属性与css属性写法的不同。
3.<view>中嵌套 <image>时，两者都需要定义尺寸

wxml文件中
<view class='view'>
	<image mode='aspectFit'/>
</view>

wxss文件中
.view{
	width:60rpx;
	heigth:60rpx;
}

若只定义view的尺寸，image会溢出view，因此程序改为：

wxml文件中
<view class='view'>
	<image mode='aspectFit'/>
</view>

wxss文件中
.view{
	width:60rpx;
	heigth:60rpx;
}
.view image{
	width:100%;
	height:100%;
}

4.每一级标签中都要定义宽和高。
5.<image>中若长宽都定义为上一级的百分比，则图片不能显示,如3中的就是不能显示的，改为：

wxml文件中
<view class='view'>
	<image mode='aspectFit'/>
</view>

wxss文件中
.view{
	width:60rpx;
	heigth:60rpx;
}
.view image{
	width:100%;
	height:40rpx;
}

6.让组件更有层次的写法，每个上级组件都写出来

wxml文件中
<view class='a'>
	<view class='b'>
		<image mode='aspectFit'/>
	</view>
</view>

wxss文件中
.a{
}

.a .b{

}

.a .b image{

}

7.只要是需要用到flex布局属性，一中所述的属性，均需要先定义display：flex，不管上一级的组件有无定义。
8.为了方便调整布局，不会牵一发而动全身，需要定义许多没有意义的嵌套容器。
9.调整布局的时候，不要心烦气乱，一层层的推敲，大部分问题都是没有分析到具体是哪个容器。

四、知识拓展与深度理解

盒模型与box-sizing
生动讲解绝对定位与相对定位
绝对定位与相对定位的例子
CSS line-height

五、CSS模块化

从CSS谈模块化
CSS预处理语言的模块化实践

六、CSS实用工具

10款漂亮的CSS按钮源码