微信小程序以及前端css小知识总结

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;