项目中常用的css技巧--持续更新

朱雀 2021-09-02 05:33 476阅读 0赞

## 9.27记录 ##

### css单行、多行文本溢出隐藏 ###

div{     /* 单行溢出隐藏 */
                width: 150px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
    }

div{    /* 多行溢出隐藏 */
              width: 150px;            
              display: -webkit-box;
              -webkit-box-orient: vertical;
               -webkit-line-clamp: 3;
               overflow: hidden;
              }

注：  
\-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：  
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。  
\-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

### 父元素是相对定位，子元素是绝对定位。但是子元素的大小超出父元素。 ###

给父元素设置,           overflow: hidden

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center]

### display:flex 左右排列之后，犹豫右侧的数据太多，导致左侧图片被挤压。 ###

给右侧数据，加一个宽度，限制在一个区域

## 9.30记录 ##

### uniapp写的页面，在ios上面，下拉会出现白色屏幕 ###

在pages.json中的添加如下属性

"disableScroll": true,

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center 1]  
但是这样会出现一个问题，只是适合页面占一个屏幕的高度，因为是防止下拉，如果是超出一个页面，设置这个属性，会只显示一个页面。所以超出部分，根本看不见  
解决：  
在页面用scroll-view包裹 设置 scroll-y ，height:100vh

### uniapp 中 顶部的颜色 ###

"globalStyle": { 
    		"navigationBarTextStyle": "black",
    		"navigationBarTitleText": "uni-app",
    		"navigationBarBackgroundColor": "#FFF",
    		"backgroundColor": "#4a34c7"
    	}

还有就是在页面设置 page

page { 
      background: #ecf1f4;
      height: 100%;
    }

### 微信扫描普通二维码链接，直接进详情 ###

1.  首先需要进行一些配置 (配置里包含了进入页面的路径，进入的小程序，以及测试参数)
2.  进入小程序,在onLoad中，通过.q(官方规定) 获取到传来的参数。判断是外部进入，就解码，然后赋值。内部页面进入，就自定义传入参数

if (options.q) { 
          this.qrData = decodeURIComponent(options.q); // 使用decodeURIComponent解析 获取当前二维码的网址
        } else { 
          this.qrData = options.barcode;
        }

### 小程序 顶部胶囊颜色 ###

注意背景颜色和文字颜色

## 10.30更新 ##

### 小程序登录授权的时候，都需要在button里面操作。但是我只想要功能，button的样式不需要，那我就需要去掉button默认的所有样式 ###

button { 
      margin: 0;
      padding: 0;
      outline: none;
      border-radius: 0;
      background-color: transparent;
      line-height: inherit;
      width: max-content;
    }
    button:after { 
      border: none;
    }

# 11.13 vue样式 #

{
       {isDeit ? '编辑' : '新增	'}}

# 持续更新中… #

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center]: /images/20210813/add8e621d5be4b93be08f9fde921c3a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4ODQ1ODU4_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210813/2ca828f3b58e46afa45ef01e375007c9.png