微信小程序 WXML调用WXSS 错误！

香喷喷的咸鱼

WXML的代码

1. <!--index.wxml-->
   
2. 
   
3. <view class="container">
   
4.     <text class="text_style">树莓派客户端</text>
   
5. <button  class="con_style" type="primary" bindtap="connectPi">连接</button>
   
6. <!-- {{}}是微信小程序的一种语法，里面可以引用变量，因此把原来写死的文字做成变量方便后面改动，因为后面有可能需要点击了开灯按钮，文字信息会变成”关红灯” -->
   
7.     <button  class="red_style"  bindtap="redControl">{{redLed}}</button>
   
8.     <button  class="green_style"  bindtap="greenControl">{{greenLed}}</button>
   
9.     <button  class="blue_style"  bindtap="blueControl">{{blueLed}}</button>
   
10.     <button  class="beep_style"  bindtap="beepControl">{{beep}}</button>
    
11. </view>
    

复制代码

WXSS的代码

1. /**index.wxss**/
   
2. /*pages/index/index.wxss */
   
3. .text_style{
   
4.   color:green;
   
5.   font-size:100rpx
   
6. }
   
7. 
   
8. .con_style{
   
9.   width: 210rpx;
   
10.   height: 210rpx;
    
11.   line-height:210rpx;
    
12.   opacity:unset;
    
13.   text-align:center;/*为了文字左对齐*/
    
14.   padding: 0rpx;/*为了文字左对齐*/
    
15.   border-radius: 50%;
    
16.   margin-top: 100rpx;
    
17.   font-size:60rpx
    
18. }
    
19. 
    
20. 
    
21. .red_style{
    
22.   width:160rpx;  /*宽高一样，因为要做成圆形 */
    
23.   height:160rpx;
    
24.   margin-left: 60rpx;
    
25.   margin-top: -100rpx;
    
26.   border-radius: 50%;/*弧度,50%就是圆形了，50~100%之间观察不出来*/
    
27.   background-color: red;
    
28.   opacity: 1;/*透明度，打开后为1，关闭时0.3,一定要设置，背景色才可以露出来*/
    
29.   line-height:160rpx;/*字体行高与按钮相等，目的是让字体居中*/
    
30.   padding: 0rpx;/*为了让字体居中*/
    
31.   color:white;/*字体颜色*/
    
32. }
    
33. .green_style{
    
34.   width:160rpx;
    
35.   height:160rpx;
    
36.   margin-left: 200rpx;
    
37.   margin-top: -20rpx;
    
38.   border-radius: 50%;
    
39.   background-color: green;
    
40.   opacity: 1;
    
41.   line-height:160rpx;
    
42.   padding: 0rpx;
    
43.   color:white;
    
44. }
    
45. .blue_style{
    
46.   width:160rpx;
    
47.   height:160rpx;
    
48.   margin-left: 400rpx;
    
49.   margin-top: -150rpx;
    
50.   border-radius: 50%;
    
51.   background-color: blue;
    
52.   opacity: 1;
    
53.   line-height:160rpx;
    
54.   padding: 0rpx;
    
55.   color:white;
    
56. }
    
57. .beep_style{
    
58.   width:160rpx;
    
59.   height:160rpx;
    
60.   margin-left: 530rpx;
    
61.   margin-top: -330rpx;
    
62.   border-radius: 50%;
    
63.   background-color: black;
    
64.   opacity: 1;
    
65.   line-height:160rpx;
    
66.   padding: 0rpx;
    
67.   color:white;
    
68. }
    

复制代码

不知道为什么  我的盒子模型的margin显示错误 ，但是其它的倒是正确。
我不知道是软件的BUG还是  其它地方没有设计好。
希望万能的鱼油 帮我看看！
感激不尽

genius_7321

container 没有定义样式？是不是得来个flex