微信小程序css篇----定位(position)
来源:互联网 发布:淘宝差评可以修改吗 编辑:程序博客网 时间:2024/06/04 18:52
昨天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
- 微信小程序css篇----定位(position)
- CSS定位(position)
- css定位(position)
- CSS中的定位(position)
- css中的定位(position)
- css 中的元素定位 (position 元素)
- CSS 定位(position 与 z-index)
- css中定位的问题(position)
- css布局定位(position + display)
- CSS学习笔记-position定位(九)
- CSS布局之定位详解(position)
- CSS中的position属性(定位)
- CSS定位属性Position
- Css 之 position 定位
- css: position定位问题
- css定位中的position
- CSS定位position
- css-position定位
- linux环境下Tomcat环境搭建
- 微信小程序之初体验
- Inlist的绑定优化(书摘备查)
- 编译时 报错处理(一)结构体问题
- 超简单的 Python 根据用户ip查询位置
- 微信小程序css篇----定位(position)
- Web 大作业之《驴友足迹》
- 使用root用户登录ubuntu14.04时报错
- 雷军以为会当一辈子码农,不料后来成了小米董事长
- 常用数据库 tomcat 配置jdni
- Android Studio Preview滑来滑去、消失固定解决方案。
- 蓝桥杯ALGO_01(区间k大数)
- php SAPI
- linux chkconfig命令 运行级别 service