小程序学习总结

rgba(0,0,0,.3)  a--盒子透明度,最大是1,不透明,最小是0,全透明

盒子宽度
width 取值可以是百分比(父亲的宽度的百分比),也可是具体大小,一般用rpx单位


圆角边框、
border-radius  取值可以是百分比,可以是具体值
.gg {
  width: 300rpx;
  height: 300rpx;
  background: pink;
  border-radius: 150rpx;
}

====================
盒子模型
    标准盒子:设置的宽高是内容的宽高
    ie盒子(怪异盒子):设置的宽高是padding+内容的宽高
box-sizing: border-box;--设置ie盒子
===================
padding:内边距(边框线到内容之间的距离)
padding:10rpx; 上下左右边距都是10
padding:10rpx 20rpx 上下10rpx  左右20rpx
padding:10rpx 20rpx 30rpx  上10rpx 左右20rpx 下30rpx
padding:10rpx 20rpx 30rpx 40rpx 上10右20下30左40

========================
line-height 行高

顶线到底线之间的距离,文字跟着中线跑
文字居中:设置行高为容器的高度


版心

盒子居中:(1、必须是块级元素;2、必须要有宽度)
    margin:0 auto;
=============================================
盒子模式转换

    块级(div):自己独占一行;可以设置宽高;宽度默认为容器的百分百;高度默认为0;
        
    行级(span):可以与非块级元素共占一行;默认宽高为0。大小被内容撑起来;宽高无效;
    行内块:可以与非块级元素共占一行;默认宽高为0。大小被内容撑起来;可以设置宽高


display可以设置盒子模式
inline-block--行内块
inline--行级元素
block--块级元素

========================
盒子阴影
box-shadow: x轴距离 y轴的距离 模糊距离 大小 颜色 inset
  box-shadow: 0rpx 10rpx 20rpx #DEDEDE ;

======================
默认与文字基线对齐
vertical-align 设置与文字的对齐方式
top:与顶线对齐
middle:与中线对齐
bottom:与文字的底线对齐

=================
float:浮动
脱离标准流,改变原有位置
left,right
浮动有隐形的模式转换,浮动的元素会转换为行内块
  子元素浮动之后无法撑起父元素,解决方案:1、给父元素设置高度。2.给父元素设置overflow: hidden;

=======================
  overflow: hidden;


=====================
文字的css属性可以被继承


text-align:文字水平位置
left:居左
center:居中
right:居右

===========================
定位
相对定位,相对于元素原有位置进行定位,且不释放掉原有占据的空间
position: relative;
绝对定位:相对于最先出现定位属性的祖先元素进行定位,释放掉原有占据的空间;子绝父相
position: absolute;
相对定位:相对于浏览器窗口进行定位,且释放掉原有占据的空间
position: fixed;
======================
元素强制在同一行展示
white-space: nowrap;

===================
内嵌盒子 外边距合并(外边距塌陷)
<view class='a'>
  <view class='b'></view>
</view>
.a {
  width: 300rpx;
  height: 300rpx;
  background: pink;
}
.b {
  width: 100rpx;
  height: 100rpx;
  background: gray;
  margin-top: 50rpx; 
}
解决方案:
1、给父盒子加:overflow: hidden;
2、给父盒子加:border: 1px solid;
3、给父盒子加:padding: 1px;


======================
弹性布局
父元素添加:display: flex;
需要布局的子元素:flex:数字,数字为占有的份数,也可以是具体的像素值;

====================
结构位置选择器
:firdt-child  第一个孩子
:last-child   最后一个孩子
nth-child(n)  第n个孩子   也可以写2n所有的偶数孩子,2n-1所有的奇数孩子 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值