专栏首页极乐技术社区wxss学习系列《一》定位(position),布局(Layout)

wxss学习系列《一》定位(position),布局(Layout)

定位(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。

本文分享自微信公众号 - 极乐技术社区(wxapp-union),作者:微信小程序联盟

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-01-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序 · 一周报

    此前小程序只能与小程序互跳,小游戏无法跳转小程序/小游戏。小游戏设置互跳时,只能让用户在小游戏内,打开另一个小游戏带有菊花码的海报,用户长按识别后才能完成跳转。...

    极乐君
  • 微信小程序之生物识别

    1、如有遇到新问题,可以在下方留言或者加QQ群437729329 进行咨询。 2、版权说明:该文章为小程序社区(www.wxapp-union.com/)版主T...

    极乐君
  • 开发实时联网对战的微信小游戏

    极乐君
  • Android大厂面试题锦集(BAT TMD JD 小米)

    上次写这篇文章的时候也差不多是一年前了,这一年我兜兜转转从android到java又回到android,校招面了很多大厂,阿里、京东、小米、头条、知乎、腾讯、...

    何时夕
  • 《把时间当做朋友》

    何时夕
  • Web开发者安全速查表

    想要开发出一个安全的、健壮的Web应用其实是非常困难的,如果你觉得这实现起来非常简单的话,那么你一定是一个X炸天的程序猿,要么你就是在白日做梦…… 写在前面的话...

    FB客服
  • 经典Bug永流传---每周一“虫”(十八)

    6.整体处理完,量慢慢正常,数据库等相关也恢复,逐步确认功能,以及后续对影响用户交易的进行安抚并补偿;

    厦门-安仔
  • 5分钟面试指南(第十篇 栈)

    本部分我们会为大家提供一些python初级工程师在面试过程中遇到的常见的面试题目,期望达到的效果:

    还是牛6504957
  • Java企业微信开发_07_总结一下企业微信的配置

    shirayner
  • 5分钟面试指南(第十一篇 谈“对象”)

    本部分我们会为大家提供一些python初级工程师在面试过程中遇到的常见的面试题目,期望达到的效果:

    还是牛6504957

扫码关注云+社区

领取腾讯云代金券