2017年，，微信小程序定位已经是当下微信小程序设计最热门的话题，，下面将从多方面来谈谈微信小程序定位及微信小程序结构相关的内容。。

一：定位(position)

2017的微信果真课pro准期举行了，，小程序将于2017年1月9日对个人开放，，公司项目的demo版做了个或许，，历程中花的时间最多的照旧页面结构，，以是后面将花一段时间将css的属性在小程序里过一篇，，虽然小程序内里关于css支持，，但没有说明支持到什么田地。。今天就先来说说定位。。

一.定位：position属性允许你对元素举行定位。。

二.定位机制：有三种：通俗流，，浮动流，，绝对定位。。

三.定位属性值：static，，relative，，absolute，，fixed，，inherit，，-ms-page，，initial，，unset(后面3个属性是小程序中有的，，没看懂是什么样子)

1.static：元素框正常天生，，块级元素天生一个矩形框，，作为文档流的一部分，，行内元素则会建设一个或者多个行框，，置于其父元素中。。

2.relative：元素框偏移某个距离。。元素扔坚持其未定位前的形状，，它原来所占的空间扔保存。。

3.absolute：元素框从文档流中删除，，并相关于其包括块定位，，包括快可能是文档中的另一个元素或者初始包括块。。元素原先在正常文档流中所占的空间会关闭，，就似乎元素原来不保存一样。。元素定位后天生一个块级框，，而岂论原来它在正常流中天生何种类型的框。。

4.fixed：元素框的体现类似于将position 设置为absolute，，不过其包括块是视窗自己。。

5.inherit：继承父元素的position位置。。----任何版本的IE都不支持属性值：inherit

6.-ms-page:位置取决于absolute的模式。。

8.unset：设置了“inherit”和“initial”，，凭证属性是否被继承。。

四.top，，right，，bottom，，left：定位元素，，界说position不为static的元素。。

1.取值：auto/直接数值/百分比

五.z-index 界说position不为static的元素。。设置元素在目今上下文中的层叠级别。。数值越大显示在上面，，数值越小，，则显示在下面。。

六.clip：剪裁绝对元素定位。。界说一个剪裁矩形，，内容多出来的工具将凭证overflow的值来处理。。注重点：必需将position设置为absolute或者fixed的时间此属性才会生效

1.取值。。shape/auto/inherit。。

2.clip这个属性即将废弃，，推荐使用 clip-path

二：结构(Layout)

说到结构，，脑子里第一反映出来的就是LinearLayout,RelativeLayout等等,不过现在既然是小程序，，那虽然得换换思绪了，，来看看css中有哪些结构方式。。

一：结构有以下几种：display，，float，，clear，，visibility，，overflow，，overflow-x，，overflow-y。。

1.display：设置工具是否显示。。

2.float：指出工具是否及怎样浮动。。

3.clear：指出了不允许有浮动工具的边。。

4.visibility：是否隐藏，，与display隐藏差别，，visibility隐藏的时间保存元素占有的位置。。

5.overflow：设置工具处理溢出内容的方式。。

6.overflow-x：设置在横向溢出内容的方式。。

7.overflow-y：设置在纵向溢出内容的方式。。

二：display：凭证“float”和“position” 决议盒子或者箱子的类型天生一个元素。。

以上是小程序中display的取值,常用的如下：

1.block：指定工具为块元素。。

2.flex：将工具作为弹性伸缩盒显示。。(小程序推荐使用伸缩盒子)

3.inline：指定工具为内联元素。。

4.inline-block：指定工具为内联块元素。。

5.inline-flex：将工具作为内联块级弹性伸缩盒显示。。

6.inline-table：指定工具作为内联元素级的表格。。

7.list-item：指定工具为列表项目。。

8.none：隐藏工具。。不占物理位置。。

9.table：指定工具最为块元素级的表格。。

三：float：界说了元素在谁人偏向浮动，，浮动元素会天生一个块级框，，而岂论它自己是何种元素。。

1.取值：left，，right，，none，，inherit。。

2.float 在绝对定位中不起作用。。大大都企业网站结构都是以float来定位。。

四.clear：该属性指出不允许有浮动工具的边。。

1.取值：left，，right，，both，，none.

2.none:允许双方可以浮动。。 left：不允许左边有浮动工具。。 right：不允许右边有浮动对像。。both：双方都不允许浮动。。

五.visibility：是否显示工具;

1.取值：visible，，hidden，，collapse。。

2.visible：设置可见。。hidden：设置隐藏(隐藏了也占位置)。。collapse：隐藏表格的行或者列。。

六.overflow：处理溢出内容的方式。。

1.取值：visible，，hidden，，scroll，，auto。。

2.visible:对溢出内容不做处理，，内容可能会凌驾容器。。

hidden：隐藏溢出容器的内容且不会泛起转动条。。

scroll:隐藏溢出容器的内容，，溢出的内容将以卷动转动条的方式泛起。。

auto:当内容没有溢出容器的时间不泛起转动条，，当内容溢出容器的时间泛起转动条。。按需泛起。。

七：overflow-x：横向处理溢出内容的方式;

1.取值：visible，，hidden，，scroll，，auto。。

2.同overflow。。

八：overflow-y：纵向处理溢出内容的方式;

1.取值：visible，，hidden，，scroll，，auto。。

2.同overflow。。