css补充知识_van-text-ellipsis-CSDN博客

本文链接：https://blog.csdn.net/yi742891270/article/details/118084401

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;
  }
}