文章目录

如何导入css文件

参考：https://www.cnblogs.com/wayneliu007/p/10560382.html

<template></template>
<style scoped>

 @import "../assets/common/common.css";//自定义.css的样式路径

</style>
float右对齐换行问题

第一种解决办法：把左右对换，比如把日期放在标题的前面，对调一下就好了。也就是说元素的顺序是：

<div>
	<右数第一个元素/><右数第二个元素/><.../><左边元素/>
</div>

第二种解决办法：给左边也加上float:left。

如何获取全屏高宽度

方法一

onLoad: function () {
   this.setData({
     height: wx.getSystemInfoSync().windowHeight,
     width: wx.getSystemInfoSync().windowWidth
   })
 }

方法二

.index{
   height: 100vh;
   width: 100vw;
}
# CSS3引入的"vw"和"vh"基于宽度/高度相对于窗口大小 
# "vw" = "view width"  "vh" = "view height"
设置背景图像

一般来说我们会用css的background属性：

background:'url(../../images/bg.png)'

但在微信小程序中无法识别url，微信小程序只能识别网络上的url，所以使用另一种方法：

<div class="pageContainer">
   <image class="bgImage" src="../../static/images/bg3.png"></image>
</div>
<style>
.pageContainer{
	width: 100vw;
	height: 100vh;
}
.bgImage{
	z-index: -1;
	width: 100vw;
	height: 100vh;
	position:absolute;
}
</style>
image适应父组件大小 
<div class="bottomButtonContainer">
    <image class="bgImage" src="../../static/images/letter1.png"></image>
</div>

<style scoped>
.bottomButtonContainer{
  width: 75vw;
  height: 60vh;
  margin:0 auto;
  position: relative;#这个是重点
}
.bgImage{
  z-index: -1;
  width: 100%;#这个是重点
  height: 100%;#这个是重点
  position:absolute;
}
</style>
居中问题 
//行内元素水平居中
text-align:center;
//块级元素水平居中
margin:0 auto;
//垂直居中
//一般没有绝对好用的方法，建议使用margin和padding设置
//或用relative布局
.father{
  height: 30vh;
  background: yellow;
}
.son{
  position: relative;
  top: 10%;
  height: 80%;
  background: gray;
}
单行文字垂直居中

因为一般文字尺寸大小是固定的，所以可以用这个方法：

<div class="textContainer">
  <span class="text">文字</span>
</div>

<style>
.text{
  position: relative;
  height: 16px;
  font-size: 16px;
  top: 50%;
  margin-top: -8px;
}
</style>
纯css实现正方形

纯CSS实现正方形、自适应正方形方法

微信小程序实现正方形

使用获取父元素高度动态加载

<template>
  <div class="iconButtonContain">
    <div class="rightButton" :style="'width:'+bottomButtonHeight+';height:'+bottomButtonHeight">
      <image class="buttonIcon" :src="../../static/images/home.png" @click="buttonClick"></image>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bottomButtonHeight:'10%'
    };
  },

  methods: {
    buttonClick() {
      this.$emit("click");
    }
  },

  created() {
    let query = wx.createSelectorQuery();
    let that = this;
    query.select('.iconButtonContain').boundingClientRect(rect=>{
      that.bottomButtonHeight = rect.height+'px';
      console.log('created....'+rect.height);
    }).exec();
  }
};
</script>

<style scoped>
.iconButtonContain{
  height: 100%;
  width: 100%;
}
.rightButton{
  float: right;
  position: relative;
  background: red;
}
.buttonIcon{
  background: orange;
  border-radius: 50%;
  border-style: none;
  width: 100%;
  height: 100%;
  position:absolute;
}
</style>
textarea透明 
<textarea style= "background:transparent;border-style:none;"
  placeholder="写点什么吧！"></textarea>
信纸效果

这个是用的图片，高度是32px，和字体的line-height一样。这个图使用ps做的。
小程序UI_小程序学习

<div class="messageCard" style="background:url(../../static/images/line.png)">
	<textarea class="letterTextarea">文字测试</textarea>
</div>
        
.letterTextarea{
  line-height: 32px;
  font-size: 17px;
  color: #595959;
  background: transparent;
  border-style: none;
}

小程序UI_小程序开发_02

白色背景半透明

根据不同的应用场景和兼容性要求，有多种方法实现背景半透明。

1.在比较现代的浏览器中大多支持背景颜色的rgba颜色。可以如下设置

background-color:rgba(255,255,255,0.5)/*背景颜色白色，50%透明度*/

2.使用opacity属性，对已设置background-color的元素设置

filter:alpha(opacity = 50);/*兼容ie*/ opacity:0.5;

3.使用白色半透明的png图片。制作一个小的（如10*10）的白色半透明的PNG图片，将该图片设置为背景，设置background-repeat:repeat;

圆角边框 

  border-radius:10px;
  border-style: solid; 
  border-width: 1px;

交流QQ群：【技术斋】646258285
关注微信公众号【技术斋】，阅读更多内容。我会定期对博客内容进行整理，用简单的语言发布到公众号上，适合休闲阅读。

小程序UI_小程序学习_03