i-view组件库css知识点记录

Posted on

前言

在学习小程序自定义组件的过程中，对一些自己薄弱的知识的一个记录。方便回顾。

清除浮动

当使用float属性时，浮动元素所在行空间任有剩余，会对其他元素的布局造成影响。

常用的清除浮动的方法：
设置浮动元素的父组件的样式

1
2
3
.float_container::after{
    clear: both;
}

img简单使用

img组件使用，外部包裹一个div或span组件，方便设置布局样式。

一般图片大小有父容器决定

1
2
3
4
5
6
7
8
9
.img_container{
    width: 20px;
    height: 20px;
    // ...其他布局定位样式
}
.img_contaner img{
    width: 100%;
    height: 100%;
}

分割线的实现

有时候，想添加一个分割线，总是会使用border-bottom，但是，这样使用有个缺点，他的长度总是和分割的元素盒子大小相同的。今天学习过程中，学到了一个很好的方法。如下。

HTML

1
2
3
<div class="container">
    Hello World!
</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.container {
    position: relative;
    padding: 4px 15px;
    overflow: hidden
}
.container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    /* 设置长度 */
    width: 200%;
    height: 200%;
    transform: scale(.5);
    transform-origin: 0 0;  /* 设置x轴，y轴的位置 */
    pointer-events: none;   /* 作用是让元素实体 “虚化”,即不能成为鼠标事件的 */
    box-sizing: border-box;
    border: 0 solid #ff0000;
    border-bottom-width: 1px;
    /* 控制分割线左边距,右边设为0还没弄明白什么意思😥 */
    left: 15px;
    right: 0
}

transform高阶————matrix() 矩阵变换

button样式优化

  • 添加内阴影来优化

  • 添加hover或其他选择器，设置样式

    • 如opacity

  • 加载按钮的实现

    • 3/4圆效果

      1
      border-color: #fff #fff #fff transparent;

    • 设置动画

  • 在按钮上添加图标

    • 直接和按钮文字放在一起，使用inline-block

背景模糊的实现方法

直接在container元素中设置背景图片和filter会导致整个内容都被模糊化，解决方法就是添加一个伪类

1
2
3
4
5
6
7
8
.container::after{
    content: '';
    width: 100%;
    height: 100%;
    background-image: url('image.png');
    filter: blur(5px);
    z-index: -1;
}

零碎知识

  • !important,提高样式优先级
    • 当不希望一些样式被外部的操作替代时，可以使用
  • 内阴影的使用————（输入框，button…)
  • button不仅可以通过，还可以