CSS input 设置宽高margin及padding对齐

Zero零分 笔记 1,149 0 4年前

input经常无法与其他元素对齐,通常用外层来包裹input,设置外层样式CSS,如依旧无法达到理想的效果,只能将input块级元素化

1、给input添加CSS属性:display:block

添加display将元素显示为块级元素,前后会带有换行符,用float来排列input

2、给input添加CSS属性:display:inline-block

将元素显示为行内块元素,上下对齐用CSS:vertical-align: bottom; 底部对齐

END

css宽高运算函数calc()

calc() 函数执行用作属性值的计算。可使用如下运算符:+ – * / 一般都是配合百分百 如: width: calc(100% - 100px); calc() 函数执行用作属性值的计算。
笔记 ·

CSS中Position:fixed偏移解决方案

Position:fixed,生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 Position:fixed,在实际使用过程中多少都会遇到偏移的问题。虽然说 Position:fixed是相对于浏览器进行定位的,有时候也会受到外层DIV的影响,在非IE下, Position:fixed,浮动时是水平位置是相对于外层的。如果需要水平居中,可以设置left:50%,margin-left:- Position:fixed /2,即本身宽度的一半。其实,CSS位置的设置逻辑还和数学真有点关系!当然,可以设置一个居中层,margin:0 auto;外层,内层进行 Position:fixed,也会水平居中。同样也实用于IE浏览器。 不过,对于非水平居中的,比如侧栏浮动,可以加个同样大小的DIV外层,一来可以在外层添加一个ID,以便JS scrollTop 来识别。二来,可以在position:fixed后保留位置,以便在高度不够特别是临界的情况下还能保持原来的高度。 Position:fixed,虽然是相对于浏览器定位的,但是,在判断滚动条而进行是否需要 Position:fixed的,可以添加一个外层给一个水平位置的定位,防止因添加了 Position:fixed后,IE下,层进行了左右的偏移
随笔 ·

微信小程序scroll-view下拉刷新,出现一直刷新

用scroll-view,主要原因是,可以在顶部固定一个模块,虽然position:fixed可以实现,但发现在真机上总会出现一条小白条,看着不是很舒服 scroll-view下拉刷新,需要用到几个属性:scroll-view官方说明 refresher-enabled:开启自定义下拉刷新 refresher-threshold:设置自定义下拉刷新阈值 refresher-default-style:设置自定义下拉刷新默认样式,支持设置 black | white | none, none 表示不使用默认样式 refresher-background:设置自定义下拉刷新区域背景颜色 refresher-triggered:设置当前下拉刷新状态,true 表示下拉刷新已经被触发,false 表示下拉刷新未被触发 主要是:refresher-triggered,当值为FALSE时,关闭刷新,默认值是FALSE,原先一直在设置复位:TRUE,所以一直刷新,改FALSE后,才解决 下拉刷新: bindrefresherrefresh: function (e) { let that = this; wx.showLoading({ title: '正在刷新...', mask: true, }) that.setData({ page: 1 }) that.GetData() }, 下拉刷新复位 bindrefresherrestore: function (e) { let that = this; that.setData({ refresher: false, }) }, 而开始一直设置refresher值为true!
笔记 ·

微信小程序scroll-view禁止滚动条

微信小程序禁用scroll-view滚动条 ::-webkit-scrollbar { display: none; } 其实也简单,就是这样一个CSS样式,关键是这个样式要放在哪里! 在写的时候,一直无法生效,翻看之前写的,也是一样的,但之前的可以生效! 认真翻看才发现,这个要在在app.wxss里,并不是写在页面上!如果怕兼容,可以全部都写上 ::-webkit-scrollbar { display:none; width: 0 !important; height: 0 !important; -webkit-appearance: none; background: transparent; color: transparent; } 以前就是因为全部都写上,在翻看时,一直都没有去翻app.wxss!
笔记 ·

微信小程序开发新版本检测、网络请求、json格式判断封装

微信小程序开发新版本检测、网络请求、json格式判断封装,放在APP.JS App({}) 里,方便各个页面调用 1、小程序新版本检测 if (wx.canIUse('getUpdateManager')) { const updateManager = wx.getUpdateManager() updateManager.onCheckForUpdate(function (res) { // 请求完新版本信息的回调 if (res.hasUpdate) { updateManager.onUpdateReady(function () { wx.showModal({ title: '更新提示', content: '新版本已经准备好,是否重启应用?', success: function (res) { if (res.confirm) { updateManager.applyUpdate() } } }) }) updateManager.onUpdateFailed(function () { // 新的版本下载失败 wx.showModal({ title: '已经有新版本了哟~', content: '新版本已经上线啦~,请您删除当前小程序,重新搜索打开哟~' }) }) } }) } 2、网络数据请求 request: function (url, data = false, callback) { wx.request({ url: url, data: data, method: 'POST', header: { "Content-Type": "application/x-www-form-urlencoded" }, success: function (res) { if (res.statusCode != 200) { return callback && callback(false); } else { return callback && callback(res.data); } }, fail: function (res) { return callback && callback(false); } }) } 页面调用: app.request(url, false, (res) => {}) 3、JSON格式检测 isJson: function (string) { try { if (typeof JSON.parse(string) == 'object') { return true; }else{ return false; } } catch (e) { // console.log(e); return false; } }
笔记 ·
Zero零分
站龄15年资深站长
一个喜欢折腾,却又折腾不出像样东西的,不会PHP的PHP程序员!
476
文章
26
评论
27
分类
839
标签
7
友链
onlinelovesky 317355746 122551965@qq.com

百度广告