问题描述:
给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
块级元素:
- <address>...</adderss>
- <center>...</center> 地址文字
- <h1>...</h1> 标题一级
- <h2>...</h2> 标题二级
- <h3>...</h3> 标题三级
- <h4>...</h4> 标题四级
- <h5>...</h5> 标题五级
- <h6>...</h6> 标题六级
- <hr> 水平分割线
- <p>...</p> 段落
- <pre>...</pre> 预格式化
- <blockquote>...</blockquote> 段落缩进 前后5个字符
- <marquee>...</marquee> 滚动文本
- <ul>...</ul> 无序列表
- <ol>...</ol> 有序列表
- <dl>...</dl> 定义列表
- <table>...</table> 表格
- <form>...</form> 表单
- <div>...</div>
行内元素:
- <span>...</span>
- <a>...</a> 链接
- <br> 换行
- <b>...</b> 加粗
- <strong>...</strong> 加粗
- <img > 图片
- <sup>...</sup> 上标
- <sub>...</sub> 下标
- <i>...</i> 斜体
- <em>...</em> 斜体
- <del>...</del> 删除线
- <u>...</u> 下划线
- <input>...</input> 文本框
- <textarea>...</textarea> 多行文本
- <select>...</select> 下拉列表