实践中常用样式布局总结

padding 和 margin

1. 输入文字的文本框布局

2.文字-按钮等样式

.button {
<!-- 立即购买 -->
		padding: 14rpx 20rpx;       
		background: #0080FF;
		border-radius: 50rpx;
		font-size: 24rpx;
		color: #FFFFFF;
	}

遇到对文字周围进行修饰等（按钮）的，最常见的就是用padding属性用文字把盒子撑起来，而且padding修饰出的样式不会随着文字的长短而改变；这时候就不适合用margin（不仅限制宽高代码还复杂）！！

遇到文字前有小图标的经常遇到一个问题：！！！文字与图片不能水平居中对齐！！！

原因：默认情况，是图片置顶对齐，文字置底对齐，所以通常图片高，文字低，不能水平居中对齐

解决方法（一）：从图片下手！在css中设置图片的vertical-align属性，

<img src="" style="vertical-align:middle" />

方法（二）：不改变图片样式，采用flex布局；在父盒子上align-items：center属性，让图片和文字居中

	display: flex;
	align-items: center;

flex

类似上图的信息底部的布局
思考解析：我们将分享、点赞、评论分为三个小部分；然后对它们父盒子添加justify-content 属性；在对三小部分各自里面进行样式修改（如图片+文字布局类似）；

.footer {
				display: flex;
				justify-content:space-between;
				padding: 0 20rpx;    //留出左右两边距离（可自己设置边距）
				}
.footer {
				display: flex;
				justify-content:space-around;
				}

类似上图也可以采用justify-content:space-between，还可以使用float对两个小部分分布左右浮动。

组件

<view class="container">
		<!-- 登录入口 -->
		<view class="container-login">
			<view class="logo">
				<image src="../../static/fixed/logo.png" mode=""></image>
				<text>wltb智慧家庭</text>
			</view>
			<input type="text" value="" placeholder="邮箱/手机号"/>
			<input type="text" value="" placeholder="密码" />
			<view>
				<text class="forgot">忘记密码？</text>
			</view>
			<view class="login">登 录</view>
			<view class="login-logregistered">
				<text>还没有账号？</text>
				<text class="register">立即注册</text>
			</view>
		</view>
	</view>

<style lang="scss">
	.container{
		// 背景色
		background: #eef0f5;
		height: 100vh;
		.container-login {
			color: #696b73;
			// 所有的盒子的文字对齐居中
			font-size: 28rpx;
			text-align: center;
			image {
				width: 210rpx;
				height: 210rpx;
			}
			.logo {
				padding: 70rpx 0 0;
				text {
					display: block;
					margin-top: 22rpx;
					font-size: 40rpx;
					font-weight: 800;
					color: #000;
				}
			}
			input {
				// input继承了宽高
				width: 550rpx;
				height: 100rpx;
				margin: 0 auto;
				margin-top: 68rpx;
				border-radius: 50rpx;
				// 输入框的凹陷效果 inset是内阴影
				box-shadow: 8rpx 8rpx 9rpx #dcdee5 inset, -8rpx -8rpx 5rpx #f5f7f9 inset;
				background-color: #EEF0F5;
				font-size: 24rpx;
			}
			view {
				width: 550rpx;
				margin: 0 auto;
			}
			.forgot {
				//让该盒子与上下保持距离
				display: block;
				padding: 34rpx 0 24rpx;
				text-align: right;
			}
			.login {
				border-radius: 50rpx;
				box-shadow: 8rpx 14rpx 12rpx 0rpx rgba(0, 0, 0, 0.13);
				background-color: #e8ebf2;
				color:#1495A4;
				font-size: 32rpx;
				line-height: 100rpx;
			}
			.login-logregistered {
				margin-top: 84rpx;
				.register {
					color:#1495A4;
				}
			}
		}
	}
</style>

要实现内嵌效果
要对左上加深阴影；对右下突出高光；代码如下
box-shadow: 8rpx 8rpx 9rpx #dcdee5 inset, -8rpx -8rpx 5rpx #f5f7f9 inset;

啊啊啊未完待续