微信小程序css篇----定位(position)

2023-11-18

昨天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







本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

微信小程序css篇----定位(position) 的相关文章

  • 在“onClick”上切换 DIV 高度

    我想切换分区的高度 我尝试过将 animate 与 if else 语句一起使用 但它只会反弹 我现在使用的代码将隐藏我的分区而不是切换高度 点击时会触发 document ready function content1 toggle fu
  • 深层嵌套 Flexbox 布局是否会导致性能问题?

    我一直在开发一个 ReactJS 项目 其中我使用 Flexbox 布局创建了大部分组件 由于使用 React 我们可以拥有深度嵌套的组件 因此我的布局具有嵌套的 Flexbox 布局 现在我的问题是 这对性能有任何问题吗 在一个页面上 有
  • 禁用 WebView 中 div 上的橙色突出显示

    我正在制作 PhoneGap Android 应用程序 无法关闭橙色突出显示可点击元素 我已经尝试了 CSS 的所有组合 webkit tap highlight color webkit focus ring color 和 webkit
  • RefineryCMS 2.1.0 和 Zurb 4 带有下拉导航的顶部菜单

    我正在尝试使用 Zurb Foundation 来设计使用最新版本的 Refinery 构建的应用程序 我开始遵循本指南 http blog flatironschool com post 54511602806 build a blog
  • 将变量从 JSON 文件加载到 LESS CSS 预处理器中

    是否可以像使用 Stylus 一样将变量从 JSON 文件加载到 LESS CSS 预处理器中 与文件内容myvars json color1 112345 color2 667890 在 Stylus 中我 json myvars jso
  • 仅适用于 Firefox 的不同字体大小

    我只是为我的网站添加一个帐户标题 仅显示玩家的用户名 我正在使用自定义字体 它在 Chrome 和 IE 上运行良好 但是对于 Firefox 它不显示自定义字体 只显示下一个可用字体 即 Verdana 我不介意 但我的问题是 Verda
  • 如何使CSS图像溢出其所在的div

    我在 css 中输入了一个图像 代码如下 imgtemp float right top 0px left 0px overflow visible width 100 我还在页面中添加了 div 标签 以便其显示 但由于设计原因 图像比
  • 带有图像的 Svg 在 Safari 中不显示

    在我的网站中 我嵌入了一些 svgs 它们在 Chrome Firefox IE 9 和 Safari 中似乎都工作得很好 然而 一旦 svg 中包含图像 safari 就不会渲染该图像 基于之前的类似主题 我尝试了以下内容 SVG 元素在
  • 如何根据子宽度设置 div 的宽度?

    我想使用 HTML 和 CSS 创建一个类似于 UI 的线程视图 聊天收件箱 http jsfiddle net 7mbaksvj http jsfiddle net 7mbaksvj 我的问题是 div 的宽度 它以固定宽度的形式出现 但
  • 使用 javascript 将 CSS 类添加到具有另一个类名的所有元素

    我正在尝试使用 javascript 将类添加到具有不同类的所有元素 我知道你可能认为这是多余的 但对于我所处的情况来说这是必要的 我需要一种方法来查看具有该类名称的所有元素并添加该类 但我不明白如何获取计数 我正在使用一个 cms 但我无
  • 如何在 html 中设置 alt 工具提示的样式? [复制]

    这个问题在这里已经有答案了 是否可以为 alt 属性设置工具提示的样式 我希望为 html 设置背景 字体颜色等样式alt属性 有人可以帮我解决这个问题吗 您无法设计默认的工具提示 即设置样式alt属性 但你可以使用 Javascript
  • Bootstrap 4 列和行产生不需要的填充[重复]

    这个问题在这里已经有答案了 我正在尝试使用 bootstrap 创建列和行来放置我的图像 但是在图像周围添加了太多的填充 这导致我的图像看起来不像设计 这就是我构建 HTML 的方式
  • 背景大小:封面在 Google Chrome 中突然停止工作?

    还有其他人有这个问题吗 我以创建网站为生 有些网站使用了 css 属性background size cover 大约 1 周前突然间 所有具有此属性的网站都不再在 Google Chrome 中正确显示 所有其他浏览器都工作正常 还有其他
  • CSS 中“body > *”是什么意思?

    我试图了解 jQTouch 实现的 CSS 效果 http www jqtouch com http www jqtouch com 它有一些 CSS 定义 其中包含如下语法body gt body gt webkit backface v
  • CSS问题-水平滚动条隐藏内容

    我对此有一个问题 因为它给了我滚动条 但高度保持不变 因此文本被滚动条覆盖 td class messages div style border 0px padding 0px width 100 background color 66C2
  • 如何在块元素之间添加垂直间距,但不添加顶部和底部

    假设我有一堆 P LI 或 DIV 元素 它们之间没有任何内容 我想控制它们之间的垂直间距 这样它们就不会贴得那么紧 但我不想添加任何顶部和底部空间 因为这是由父元素处理的 我不需要更多 有没有一种适用于所有块元素的简单方法 假设我有这样的
  • 如何在CSS网格系统中偏移div列

    有谁知道抵消前两个div位于侧行且具有类的 scol 3 12偏移量为offset 6 12 and offset 9 12位于我的网格系统的右侧jsFiddle http jsfiddle net c6R6t CSS body font
  • CSS:100% 宽度和背景?

    在我的页面中 有 2 3 个部分的宽度和背景为 100 当我全屏打开它时 一切正常 但当屏幕小于 960px 本节内容的宽度 时 背景图像不是整个页面 右侧的瞬间隐藏在没有背景的地方 它是白色的 你可以在这里明白我的意思 http mico
  • CSS word-wrap:break-word不会包装标签,除非你将它包装在div中并在那里添加规则

    为什么CSS统治 a word wrap break word with div a href verylongurlherewithnospaces a div 不换行并导致窗口显示滚动条 而 div word wrap break wo
  • 在 Safari for Lion (OS X 10.7) 中设置滚动条颜色

    Lion 中的新滚动条似乎会根据 body 元素的背景颜色调整 Safari 中的颜色 有没有办法手动设置滚动条是深色还是浅色 我知道有 webkit CSS 选项来设置滚动条的样式 这实际上早于新的 Lion 滚动条 我使用该方法的唯一问

随机推荐

  • 在 Flutter 中实现一个浮动导航栏

    此图与正文无关 只是为了好看 写在前面 这段时间一直在学习 Flutter 在 dribble 上看到一张导航栏设计图 就是下面这张 感觉很是喜欢 于是思考着如何在 Flutter 中实现这个效果 设计图作者 Luk Stra k 经过一番
  • Apollo平台计算框架CyberRT

    Cyber RT 框架 Cyber RT Robotic Technology 是一种基于ROS Robot Operating System 的开发框架 专门设计用于构建高性能 实时性要求较高的机器人应用程序 旨在提供一套可靠 高效 灵活
  • Java并发编程必备:分布式锁的选型和性能对比

    当涉及到分布式系统中的并发控制和数据一致性时 分布式锁是一种常见的解决方案 下面我将对几种常见的分布式锁实现原理 实现示例 应用场景以及优缺点进行详细分析 1 基于数据库的分布式锁 实现原理 基于数据库的分布式锁使用数据库的事务机制和唯一索
  • Vue实现点击复制文本功能

    1 功能 在页面中实现点击复制内容到粘贴板的功能 2 安装clipboard npm install clipboard 3 封装工具类 新建clipboard js 内容如下 import Vue from vue import Clip
  • 嵌入式(标准IO)

    嵌入式自学第十三天 1 Linux IO进程课程目的 学习编写linux应用程序 APP 2 Linux文件的种类 常规文件 目录文件 字符文件 块文件 链接文件 相当于windows快捷方式 3 IO的概念 I input 输入设备 比如
  • 关于Python模块shelve存储的对象,改变字典的值时必须将获取的副本赋给一个临时变量的更好解决方法

    文章的关键点 将函数open的参数writeback设置为True就不需要引用一个临时变量 开始文章的叙述 如何将数据存储到文件中 如果需要的是简单的存储方案 模块shelve可替你完成大部分工作 你只需提供一个文件名即可 对于模块shel
  • Vector非线程安全

    Vector的方法加了同步锁 但对于复合操作未加锁 是非线程安全的 如经典的put if absent 线程的安全性包括线程的可见性 有序性 原子性 if vector contains element vector add element
  • Modbus 485继电器开、关、读 串口指令

    以下均为地址01时的命令 开继电器1 01 06 00 00 00 01 48 0A 关继电器1 01 06 00 00 00 00 89 CA 开继电器2 01 06 00 01 00 01 19 CA 关继电器2 01 06 00 01
  • Java NIO 的前生今世 之二 NIO Channel 小结

    Java NIO Channel 通常来说 所有的 NIO 的 I O 操作都是从 Channel 开始的 一个 channel 类似于一个 stream java Stream 和 NIO Channel 对比 我们可以在同一个 Chan
  • 高淇Struts2.0教程之视频笔记(4)

    4 struts2配置文件 struts xml 详解 4 1指定web应用默认字符集
  • java几位_JAVA 获得数字第几位的几种方法总结(转)

    JAVA获得某个数字的最后第几位是什么的方法 比如 1234567890 则获得最后第三位 则返回8 public class Test 字典 里面保存的是1 10 100 1000 直到long的最大允许位数 private static
  • Latex插入图片并引用

    插入图片主要为viso文件和excel图表 两种图片如果直接转pdf的话会有大片空白区域 不利于排版 解决办法 excel图表粘贴到viso中 后面两中图片处理方法相同 点击另存 保存格式为可移植网络图形 即png格式 保存路径为latex
  • 2023华为od机试统一考试B卷【阿里巴巴找黄金宝箱(III)】

    题目描述 贫如洗的樵夫阿里巴巴在去砍柴的路上 无意中发现了强盗集团的藏宝地 藏宝地有编号从0 N的箱子 每个箱子上面贴有一个数字 阿里巴巴念出一个咒语数字 查看宝箱是否存在两个不同箱子 这两个箱子上贴的数字相同 同时这两个箱子的编号之差的绝
  • 2022蓝桥杯学习——1.递归和递推

    递归 关于递归 所有的递归都可以转换成一棵递归搜索树 我们需要考虑的是枚举的顺序 例题 1 递归实现指数型枚举 题目描述 从 1 n 这 n 个整数中随机选取任意多个 输出所有可能的选择方案 输入格式 输入一个整数 n 输出格式 每行输出一
  • vue实现鼠标放上去就有提示_Vue实现鼠标经过文字显示悬浮框效果的示例代码

    需求 在所做的Vue项目中 需要在鼠标移动文字框的时候显示一些详细信息 最终实现的效果如下 鼠标经过button的时候 可以在光标附近显示出一个悬浮框 显示框里面显示时间和值的信息 鼠标移出button元素的时候 这个显示框会消失 分析 涉
  • C++编写优先队列打印任务

    打印机的打印队列中 每一个打印任务都有一个优先级 为1 9的一个整数 9的优先级最高 1的优先级最低 打印按如下方法进行 1 取出打印队列中队首的打印任务J 2 如果打印队列中存在优先级高于J的打印任务 则将J移动到打印队列的队尾 否则 打
  • 微软鼠标测试软件,第一款win8鼠标:微软Sculpt全球首测

    1Sculpt触控鼠标 带来全新感受 中关村在线键鼠频道原创 微软硬件在外设产品研发上 一直致力于以领先的科技带给用户超凡的体验 从早期的IE3 0 到越野蓝影 再到Arc Touch Touch Mouse等等 微软硬件在的每一次技术革命
  • 企业怎么选择固定资产管理系统

    资产管理 无论在企业还是在事业单位 都是管理人员重要的工作 随着计算机技术的普及 资产管理系统 已经有了相对清晰的管理流程及其配套的管理软件 资产管理系统是面向资产密集型企业的企业信息化解决方案的总称 它以提高资产管理效率 降低企业管理成本
  • VS2019 preview 卡在正在加载解决方案

    VS2019 解决方案 或者项目 卡 正在加载 的解决办法 1 关闭VS 2 去C Users
  • 微信小程序css篇----定位(position)

    昨天2017的微信公开课pro如期进行了 小程序将于2017年1月9日对个人开放 公司项目的demo版做了个大概 过程中花的时间最多的还是页面布局 所以后面将花一段时间将css的属性在小程序里过一篇 虽然小程序里面对于css支持 但没有说明