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
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

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

@media screen and (max-width:1200px) {
  :root {
    --safe_area: 100%;
  }
}
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

Released under the MIT License.