1、positon:fixed
生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
{
position:fixed;
left:0;
right:0;
botton:0;
}
2、flex:1;
均等分
.tab-bar-item{
flex:1;
}
不均等分
一个大div,display = flex
,里面有2个div,如果大小想1:2就一个flex: 1;
,另一个flex: 2;
如果无效的话
如果无效,试试这种
.cssName{
-webkit-box-flex:2;
-webkit-flex:2;
flex: 2;
}
3、改变不了div大小
试着加 float: left;
4、左边div图片,右边div文字,改变不了文字div大小
试着加 float: left;
,或者把div改成span
5、div内文字上下居中
//首先高度是要设的,然后display:flex,然后再加那3个属性就OK
.companyName {
width: 66px;
height: 57px;
display: flex;
// align-items: center; //这个看情况,是左右居中的
justify-content: center;
flex-direction: column;
}
有时候单单这样就好了
line-height: 100px
6、div内文字左右居中
.classname{
text-align: center;
}
6.5、整个屏幕是一个div,文字在中心
.test{
text-align: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
7、div进行左右或者上下居中
左右居中
.test{
top:0px;
bottom:0px
margin:auto
}
上下居中
.test{
left:0px;
right:0px
margin:auto
}
左右上下居中
.test{
left:0px;
right:0px
top:0px
bottom:0px
margin:auto
}
如果不行加
position: absolute;
外一层加 position: relative;
8、px自动转化为rem
//vue.config.js
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
// 补全css前缀(解决兼容性)
require('autoprefixer')(),
require('postcss-pxtorem')({ // px to rem
rootValue: 37.5, // 换算的基数
selectorBlackList: [], // 忽略转换正则匹配项
propList: ['*']
})
]
}
}
}
}
9、position:sticky
就向下滑动的时候,要求某个div一直固定嘛.但是这个和普通的固定不一样,比如这个可是是在页面下面的一开始不固定的
开始在这里,然后向下滑动的话,这个就会固定在上面,但是向上滑动的话,又不会固定住变成原来的了
就是这个div加个属性
position:sticky;
top:44px;
top的话固定多少就多少
但遗憾的是适应性有点差
具体查看https://www.cnblogs.com/coco1s/p/6402723.html
10、overflow:scroll;
类似,当div里面有文字,要滚动的效果,就加上overflow:scroll;
11、better-scroll 滚动工具
这是一个纯用js和css完成的滚动工具,比较方便使用
https://gitee.com/mirrors/better-scroll/
其可以替代overflow:scroll;
来进行更方便地滚动
还有一个就是点击回到顶部,用这个更方便
12、安装scss/sass
npm install -D sass-loader node-sass style-loader
13、overflow-x、overflow-y
可选值为:
x就是对屏幕左右做东西,y就是对屏幕上下做东西。
比如屏幕只有320 * 568,如果做的div为1000 * 1000,那么会放不下,如果这时候设置了overflow-x:hidden
,那么就只会显示最左边的320,右边就会自动隐藏了。如果设置为auto,则是这种
下面是几个例子
下面4个都一样效果
14、文字等宽 text-align:justify;
左边,div宽度一定,文字等比显示,用
text-align:justify;
<div class="infoText">
姓名:张三
</div>
<div class="infoText">
啊啊啊
</div>
.infoText {
margin-left: 50px;
color: #f7f7f7;
text-align: justify;
width: 100px;
}
.infoText:after {
content: ''; //不知道是什么,但是不加就不行。。。
width: 100px;
display: inline-block;
height: 0;
}
all
<div class="infoCard">
<div class="textItem">
<div class="leftText">
姓名
</div>
:张三
</div>
<div class="textItem">
<div class="leftText">
所属单位
</div>
:某某公司
</div>
<div class="textItem">
<div class="leftText">
手机号
</div>
:1333333333
</div>
</div>
.infoCard {
background-color: #0091fe;
height: 150px;
margin: 20px;
border-radius: 16px;
padding-top: 50px;
font-size: 20px;
color: #f7f7f7;
.textItem {
height: 50px;
.leftText {
margin-left: 50px;
text-align: justify;
width: 150px;
float: left;
}
.leftText:after {
content: ''; //不知道是什么,但是不加就不行。。。
width: 150px;
display: inline-block;
height: 0;
}
}
}
15、DIV内所有东西左右居中。text-align: center;
我以前以为div用这个,只会让div内的文字居中,没想到是所有东西都居中的,这还挺好用的
<div class="paySuccessTip">
<van-image src="https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80"
class="successImg"></van-image>
<div>缴费成功</div>
<hr>
</div>
.paySuccessTip {
font-size: 16px;
text-align: center;
width: 90%;
height: 200px;
background-color: white;
margin: 20px auto;
.successImg {
width: 75px;
height: 75px;
margin-top: 20px;
}
}
16、分割线hr
html自带有的,再也不用border-solider了
17、常用又常忘的
首页格局
像这种,上面是nav,下面是tabbar,上下可用fixed来固定。主要就是中间,每个手机的上下不一致,所以我们要用相对高度
.show {
//绝对定位
position: absolute;
//背景颜色
background-color: #f7f7f7;
//相对于top的nav高度,比如nav的高度是46这里就留空高46
top: 46px;
//左右全部,用0
left: 0px;
right: 0px;
//相对底部的tabbar高度,50
bottom: 50px;
font-size: 14px;
//下面2个不知道...
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
就很完美
什么卡片类的左右居中
这个蓝色的居中嘛,这种酒最好是设定百分比宽度,然后margin左右auto来居中
.infoCard {
background-color: #0091fe;
height: 166px;
//设定宽度
width: 95%;
//左右自动,就能对齐了
margin: 16px auto 2.5% auto;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
border-radius: 6px;
padding-top: 16px;
font-size: 16px;
color: #f7f7f7;
padding-bottom: 17px;
}
18、van-cell左右宽度问题
默认左右各自50
看了下是这样,那就改title宽度,but
.van-cell__title{
width: 130px;
}
不生效,宽度还是不变,然后上网查,发现要改为min-width
才可以
.van-cell__title{
min-width: 70%;
}
19、min-width
有时候宽度死活改不了,用min-width来百分比或者px
20、div内上下居中,图片与文字上下居中
<div class="title">
<img :src="breakfastImg">
早餐
</div>
.title {
margin-left: 153px;
img{
vertical-align: center;
height: 27px;
width: 27px;
}
}
比如这个,那就是这样的了
都要上下居中啊,但是这有图片,我又没怎么认真学过css,百度了一下,可以这样
.title {
margin-left: 153px;
//inline-flex加了后,很多float之类就用不了了,2者配合起来就能用
display: inline-flex;
align-items: center;
img{
vertical-align: center;
height: 27px;
width: 27px;
}
}
23、苹果浏览器safari的安全距离
就做开发嘛,PC的chrome,安卓手机都没事,就苹果的这个safari 这个B有事,主要表现为这样
正常:
safari的不正常:
额忘记叫同事截图了,反正就是,红色框的还是上面的背景色,怎么改都改不了,就尼玛离谱。
然后一看,就是因为苹果特有的安全距离,有按键的苹果手机这个安全距离为0,全面屏的苹果手机,每一代的安全距离都不一样
解决办法
我布局是这样的,
{
position: absolute;
top: 46px;
bottom: 50px;
}
就很正常嘛,因为上下都有东西就要空出来。
直接在底下加个安全距离就行
{
position: absolute;
top: 46px;
bottom: calc(50px + constant(safe-area-inset-bottom));//兼容 IOS<11.2
bottom: calc(50px + env(safe-area-inset-bottom));//兼容 IOS>11.2
}
拓展
除了底部安全距离,还有上下左右的安全距离
safe-area-inset-left:安全区域距离左边边界距离
safe-area-inset-right:安全区域距离右边边界距离
safe-area-inset-top:安全区域距离顶部边界距离
safe-area-inset-bottom:安全区域距离底部边界距离
具体可以看官方
24、添加公共css
先写一个css,然后在main.js中导入
import '@/assets/css/layout.css'
比如css里面写了index的css,那么以后class="index"
用即可
25、导航条返回键的返回方法
我一开始是想着,根据有无历史堆栈去判断,有堆栈就返回上一级,无堆栈就调用APP的方法关闭H5。but,history这玩意只会加不会减
接下来就是一个思路
在页面一开始加载进来的时候,就判断,是否有sessionRouter
,没有的话,就将当前route
放进去。
然后每当点击返回键的时候,都进行判断,判断当前route
是不是和sessionRouter
一样,如果一样,那么就是回到了最初页,就要对其进行关闭页面。如果不是,就返回上一级。
const routerKey = 'router'
export function setRouter(router) {
sessionStorage.setItem(routerKey, JSON.stringify(router))
}
export function getRouter() {
return JSON.parse(sessionStorage.getItem(routerKey))
}
export function removeRouter() {
sessionStorage.removeItem(routerKey)
}
//路由初次加载判断
const routerObj = getRouter()
if (routerObj === null){
setRouter(to)
}
//返回按钮事件
//当点返回的时候和第一次进来的路径相同,退出
//后续可强行加上一定会退出的地方
//在第一次进来页面的时候记录在session,以后每次点返回都判断一次是否第一次进来的,如果是,就close,不是就go(-1)
back () {
const routerObj = getRouter()
//当点返回的时候和第一次进来的路径相同,退出
//后续可强行加上一定会退出的地方
if (this.$route.fullPath === routerObj.fullPath || this.$route.fullPath === '/mine'){
window.DGTBridge.invoke('CloseWebView')
}else{
this.$router.go(-1)
}
},
26、添加暗黑模式
安卓手机开启暗黑模式,浏览器是小米浏览器嘛,然后小米家就做了暗黑适配,但是!苹果没有做暗黑适配(kua!pei),所以我们还得是要做暗黑适配
先把电脑设置为暗黑模式,桌面右键-个性化-颜色-选择颜色,选择深色。进入了暗黑模式,应用也会进入暗黑模式。
浏览器调用媒体,可以检测应用是否开启了暗黑模式,从而在暗黑模式下修改css,不用动js的
//开启暗黑模式适配,没有的话就是普通的模式,一下的都是根据暗黑模式来进行的
@media (prefers-color-scheme: dark) {
.schedule-info {
background: #121212;
.info-item {
color: #a3a3a3;
}
}
.pop {
background: #121212;
.popTitle {
color: #FFFFFF;
}
hr {
margin: 0px;
color: #27282a;
}
.popText {
float: left;
margin: 15px 18px 0 15px;
font-size: 14px;
color: #666666;
line-height: 20px;
}
.popBtn {
margin-left: 5%;
margin-top: 20px;
margin-bottom: 20px;
width: 90%;
background: #4bbcff;
color: #fffdfd;
font-size: 17px;
border-radius: 6px;
}
.van-popup--center.van-popup--round {
border-radius: 6px;
}
}
/deep/ .van-popup__close-icon--top-right {
top: 10px;
right: 16px;
height: 14px;
width: 14px;
}
}
查看应用适配的暗黑模式
苹果没有,其他都有,其他厂商都做了暗黑模式适配,可以看一下
chrome 中输入chrome://flags/
搜索Auto Dark Mode,改成enable就行
27、单scss文件
之前写.css文件,死活写不进scss格式的写法,后来把文件改成.scss就行了
28、暗黑模式的bug
1)cell的白边
就这些白边,转换成暗黑模式后,死活有这个东西,然后发现是这里的
虽然原理不懂,但直接改就行
//cell 的周围白色
.van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after {
border-width: 0;
}
//nav下面的白色
.van-hairline--bottom::after {
border-bottom-width: 0;
}
世界清净
2)弹出层(vant的picker组件)
很可惜,这个也要手写
但是这个就比较难了,因为有遮罩层,我们需要把van-picker__mask的宽度改为0,然后高亮van-hairline-unset–top-bottom van-picker__frame即可
//弹出层
.van-popup {
background-color: #121212;
background-image: none;
.van-picker {
background-color: #121212;
//遮罩层
.van-picker__mask {
width: 0;
}
.van-picker__frame, .van-picker__mask {
background: #2C2C2E99;
}
.van-ellipsis {
color: #FFFFFF;
}
}
}
29、透明度
background: #2C2C2E99;
前6个是颜色,后2个是透明度,最大99,
30、scss中定义变量
// test.scss
$testColor: red;
.tttt{
//使用了css变量
background-color: $testColor;
}
31、好用的display:flex
这个东西真好用啊,流式布局,元素都在同一行,而且还动态,比display:inline好用多了。
在display:flex中实现float:right的效果,还想上下居中靠右
在 Flex 布局中,float: right 不会生效,因为 float 属性主要是用于传统的文档流布局。
如果你想实现 float: right 效果,可以使用 Flex 布局的 margin-left: auto 来实现。这样可以将 .pay-card-right 元素推到右边。
.pay-card {
display: flex;
.pay-card-right {
margin-left: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
在上述代码中,我们修改了 .pay-card-right 的样式,并添加了 margin-left: auto 来将其推到右边。另外,还将 image 选择器修改为 img。
请注意,为了使 margin-left: auto 生效,.pay-card-right 必须是 Flex 容器内最后一个元素。