一些常用的css属性

CSS清除图片下几像素空白间隙的方法

  1. 在img标签上面定义一个类或者直接写在上面
1
2
3
4
5
6
7
8
9
/* 第一种方法 */
display: block;

/* 第二种方法 */
vertical-aligin: top;

/* 第三种方法 */
font-size: 0;
line-height: 0;

vh的注意事项

  • vh固定高度使用时,注意它会把键盘输入的高度计算进去

css 按钮放大缩小

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
animation-direction:alternate;/*轮流反向播放动画。*/
animation-timing-function: ease-in-out; /*动画的速度曲线*/
/* Safari 和 Chrome */
-webkit-animation:mymove 5s infinite;
-webkit-animation-direction:alternate;/*轮流反向播放动画。*/
-webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/

@keyframes mymove
    {
      from {background-color:#56ccf2;}
      to {background-color: #74f9ff;}	
      0%{
      transform: scale(1);  /*开始为原始大小*/
      }
      25%{
        transform: scale(1.1); /*放大1.1倍*/
      }
      50%{
        transform: scale(1);
      }
      75%{
        transform: scale(1.1);
      }
      
      

    }
    
    @-webkit-keyframes mymove /*Safari and Chrome*/
    {
      0%{
      transform: scale(1);  /*开始为原始大小*/
      }
      25%{
        transform: scale(1.1); /*放大1.1倍*/
      }
      50%{
        transform: scale(1);
      }
      75%{
        transform: scale(1.1);
      }·
    }

css 选择器

  1. css 选择父级元素
1
2
3
4
5
6
7
8
9
10

/* 选择子元素中包含 p 元素的 span */
span:has(p){ border: none; }

/* 选择子元素中包含 .child 元素的 .parent */
.parent:has(.child){ border: none; }

/* 选择直接子元素中包含 .child 元素的 .parent */
.parent:has(> .child){ border: none; }

css 让文本不能显示

1
2
user-select: none;

控制 video 标签的控制栏组件（隐藏、显示进度条、播放按钮、全屏按钮等）

1
2
3
4

//html
<video controls></video>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//全屏按钮
video::-webkit-media-controls-fullscreen-button {
    display: none;
}
//播放按钮
video::-webkit-media-controls-play-button {
    display: none;
}
//进度条
video::-webkit-media-controls-timeline {
    display: none;
}
//观看的当前时间
video::-webkit-media-controls-current-time-display{
    display: none;            
}
//剩余时间
video::-webkit-media-controls-time-remaining-display {
    display: none;            
}
//音量按钮
video::-webkit-media-controls-mute-button {
    display: none;            
}
video::-webkit-media-controls-toggle-closed-captions-button {
    display: none;            
}
//音量的控制条
video::-webkit-media-controls-volume-slider {
    display: none;            
}
//所有控件
video::-webkit-media-controls-enclosure{ 
    display: none;
}

参考链接: https://blog.csdn.net/Mrs_Yu/article/details/105882116

css
#css属性
一些常用的css属性
http://example.com/2023/05/07/css/index/
作者
李仁珍
发布于
2023年5月8日
许可协议