Skip to content
目录

CSS

常用属性

  • display

TIP

//父元素
display:flex;
flex-direction;
flex-wrap;
justify-content;
align-items;
align-content;
//子元素
flex-grow;
flex-shrink;
flex-basis;
flex:1;

  • float

  • height

  • width

  • margin

  • padding

  • position

  • z-index

  • top/bottom

  • left/right

  • font-style

  • font-weight

  • font-size

  • line-height

  • text-align

  • text-decoration

  • transform:scale() rotate() translate() skew()

  • border

  • border-radius

  • box-shadow

  • transiton: property 过渡时间 timing-function delay

  • cursor:pointer

  • background:repeat position size origin color

不常用属性

  • 媒体查询

    @media screen and (max-width: -- px){}

  • css变量

    :root{--[]:--}; 使用: var(--[])

  • 字体

TIP

@font-face {
font-family: 'Han Sans';
src: url('/SourceHanSansSC-VF.otf.woff2');
}

  • background-clip 背景与边框的关系

  • filter:opacity() blur() contrast();

    父元素设置背景色和contrast,子元素设置blur,子元素互动时有融合效果

  • visibility(处理display转换时的过渡,不用display:none改用visibility:hidden)

TIP

animation: name duration timing-function delay iteration-count(num/infinite) direction(normal reverse alternate alternate-reverse);

@keyframes name{ 0%{} 100%{} }

惯用方案

css
:root {
  /*页面安全区*/
  --safe_area: 1200px;
}

@media screen and (max-width:1200px) {
  :root {
    --safe_area: 100%;
  }
}

/* css reset elad-version */
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
  all: unset;
  display: revert;
}

/* Preferred box-sizing value */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}

/* Reapply the pointer cursor for anchor tags */
a,
button {
  cursor: revert;
}

/* Remove list styles (bullets/numbers) */
ol,
ul,
menu {
  list-style: none;
}

/* For images to not be able to exceed their container */
img {
  max-width: 100%;
}

/* removes spacing between cells in tables */
table {
  border-collapse: collapse;
}

/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
input,
textarea {
  -webkit-user-select: auto;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
  white-space: revert;
}

/* minimum style to allow to style meter element */
meter {
  -webkit-appearance: revert;
  appearance: revert;
}

/* reset default text opacity of input placeholder */
::placeholder {
  color: unset;
}

/* fix the feature of 'hidden' attribute.
   display:revert; revert to element instead of attribute */
:where([hidden]) {
  display: none;
}

/* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly.
   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable="false"])) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
  -webkit-user-select: auto;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable="true"]) {
  -webkit-user-drag: element;
}



::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background-color: rgba(255, 255, 255, 0);
}

::-webkit-scrollbar-corner {
  background-color: rgba(255, 255, 255, 0);
}

::-webkit-scrollbar-thumb {
  background-clip: padding-box;
  border: 3px solid rgba(255, 255, 255, 0);
  border-radius: 5px;
  background-color: rgba(30, 111, 255, 1);
}
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

Released under the MIT License.