padding 和 margin
- 输入文字的文本框布局
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;
啊啊啊未完待续