pp电子

登录
免费开通

微信小程序定位及微信小程序结构设计内容详细

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的模式。。。。。

微信小程序定位及微信小程序结构设计内容详细

7.initial:将指定的值体现为属性的初始值。。。。。

 

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。。。。。

 

  • 微信小程序定位及微信小程序结构设计内容详细

    微信小程序商城系统开发着实很简朴

    微信小程序商城系统开发着实很简朴,,,,只需要五步就可以完成,,,,整个历程包括开发、上线、宣布都可以轻松搞定...详情



【本站声明】
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿,,,,由于未联系到知识产权人或未发明有关知识产权的挂号,,,,若有知识产权人并不肯意我们使用,,,,若是有侵权请连忙联系。。。。。
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真,,,,仅系客观性形貌,,,,如您需要相识该类商品/服务详细的资讯,,,,请您直接与该类商品/服务的提供者联系。。。。。


KESION pp电子软件

KESION pp电子软件是海内领先的在线教育软件及私域社交电商软件服务提供商,,,,恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。。。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。。。。

KESION 一直通过手艺立异,,,,提供产品和服务,,,,助力企业向数字化转型,,,,通过科技驱动商业刷新,,,,让商业变得更智慧!



▼点击进入pp电子官网相识更多



上/下篇
  • 微信小程序认证用度是几多 ??一个账号能上传几个小程序 ??

  • 微信小程序尺寸及css外边距调解技巧

换一换相关推荐
精选内容
热门精选
pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站
【网站地图】
微信小程序定位及微信小程序结构设计内容详细 - KESION