微信原生开发 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. <address>...</adderss>   
2.   <center>...</center>  地址文字
3.   <h1>...</h1>  标题一级
4.   <h2>...</h2>  标题二级
5.   <h3>...</h3>  标题三级
6.   <h4>...</h4>  标题四级
7.   <h5>...</h5>  标题五级
8.   <h6>...</h6>  标题六级
9.   <hr>  水平分割线
10.   <p>...</p>  段落
11.   <pre>...</pre>  预格式化
12.   <blockquote>...</blockquote>  段落缩进   前后5个字符
13.   <marquee>...</marquee>  滚动文本
14.   <ul>...</ul>  无序列表
15.   <ol>...</ol>  有序列表
16.   <dl>...</dl>  定义列表
17.   <table>...</table>  表格
18.   <form>...</form>  表单
19.   <div>...</div>

行内元素：

1.  <span>...</span>
2.   <a>...</a>  链接
3.   <br>  换行
4.   <b>...</b>  加粗
5.   <strong>...</strong>  加粗
6.   <img >  图片
7.   ^...  上标
8.   _...  下标
9.   <i>...</i>  斜体
10.   <em>...</em>  斜体
11.   <del>...</del>  删除线
12.   <u>...</u>  下划线
13.   <input>...</input>  文本框
14.   <textarea>...</textarea>  多行文本
15.   <select>...</select>  下拉列表