微信小程序之wxss布局小知识

一、首先介绍一下HTML中几种类型标签。

（1）行内标签：能够设置多个标签在一行内，不能设置宽高，宽高是内容的大小。
（2）块级标签：一个标签独占一行，能设置宽高。
（3）行内块级标签：可以多个标签共占一行，又能设置宽高。

同理，微信小程序中也存在这种划分情况，微信小程序中，大部分控件是块级标签，行内标签较少，比如form。那么既然块级标签不能多标签共用一行，我们布局的时候不是就很被动吗？？请看第二条。

二、块级标签通过属性设置转为行内块级标签，满足需求。

（一）display属性

display属性可设置值有：block,inline,inline-block,none.

• block:让行内标签变成块级标签。块级标签默认值。

• inline:让块级标签变成行内标签。

• inline-block:可以将任意标签变为行内块级标签。

• none:不设置。

（二）position属性

position属性：可设置为：absolute,fixed,relative,static,inherit。默认值——static,假如设置为fixed,absolute，就会脱离标准流（标准流：布局从上到下，从左到右依次排布），能够达到行内块级标签的效果。 从而达到既能设置宽高，又能多个控件。但是这个属性的设置一般是用于绝对布局。

• absolut——生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
• relative ——生成相对定位的元素，相对于其正常位置进行定位。
  因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
• fixed——生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
• static——默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
• inherit——规定应该从父元素继承 position 属性的值。

这儿要重点解释一下absolute，有一个词是形容绝对布局的，子绝父相——意思是，假如你要在某个父控件中绝对布局一个子控件，那么子控件的position设置为absolute，父控件position属性设置为relative。
假如只是给子控件设置position属性，子控件就会自主从内往外找父控件的position属性，直到发现谁的position属性值为relative，就相对于谁进行绝对布局，假设没找到（即所有子控件的position值都为默认的static）就相对于外层父控件中，最外层的static控件进行绝对布局。

（三）float属性

用于设置控件浮动于界面，也是脱离标准流。将块级标签变为行内块级标签。

• left 元素向左浮动。

• right 元素向右浮动。

• none 默认值。元素不浮动，并会显示在其在文本中出现的位置。

• inherit 规定应该从父元素继承 float 属性的值。

（四）Overflow的用法

• Overflow：visible 默认值超出部分可见

• Overflow：hidden 将超出部分隐藏

• Overflow：scroll 将控件设置为滚动

• Overflow：auto 自动设置滚动

（五）设置控件水平居中和垂直居中

水平居中：
行内标签和行内块级标签：在父控件中设置text-align:center.
块级标签需要多设置一步，在子控件自身设置margin：0 auto。

垂直居中：
行内标签和行内块级标签：只需将line-height 的值设置为父控件的高度。
块级标签：第一种，可将块级标签转为行内块级，然后同上，第二种，用position，然后left=50%，top=50%，然后设置平移属性transform（-50%，-50%）；