微信原生开发 text标签 添加宽高无效问题

问题描述：

给text标签添加宽高，结果宽高属性没有起作用。

---

原因分析：

针对这个问题，首先是对css基础掌握的不牢固才会犯的错。在微信小程序原生开发里，text标签相当于H5里面的span标签，text和span都是行内元素，内联样式（这里就不细说行内元素和块级元素的区别了）。

行内元素的宽高是不可改变的，所以话不多说直接上干货解决问题。

---

解决方案：

最简单的方法就是 加一个display:block属性，将该行内元素转化成块级元素。   顺手总结一下行内元素和块级元素有哪些吧。。。。。。

·块级元素

  1.总是从新的一行开始

  2.高度、宽度都是可控的

  3.宽度没有设置时，默认为100%

  4.块级元素中可以包含块级元素和行内元素

  5.都有align属性

  6.dispay都是block

·行内元素

  1.和其他元素都在一行

  2.高度、宽度以及内边距都是不可控的

  3.宽高就是内容的高度，不可以改变

  4.行内元素只能行内元素，不能包含块级元素

  5.没有align属性

  6.display都是inline

块级元素：

1. ...   
2.   ...  地址文字
3.  

   ...

     标题一级
4.  

   ...

     标题二级
5.  

   ...

     标题三级
6.  

   ...

     标题四级
7.  

   ...

     标题五级
8.  

   ...

     标题六级
9.   

   ---

     水平分割线
10.  

    ...

      段落
11.  

    ...

      预格式化
12.  

    ...

      段落缩进   前后5个字符
13.   ...  滚动文本
14.  
    ...
      无序列表
15.  
    ...
      有序列表
16.  

    ...

      定义列表
17.   ...  表格
18.  
    ...
      表单
19.  
    ...

行内元素：

1.  ...
2.   ...  链接
3.  
     换行
4.   ...  加粗
5.   ...  加粗
6.     图片
7.   ^...  上标
8.   _...  下标
9.   ...  斜体
10.   ...  斜体
11.   ...  删除线
12.   ...  下划线
13.   ...  文本框
14.   ...  多行文本
15.   ...  下拉列表