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

CSS #

常用属性 #

不常用属性 #

惯用方案 #

CSS

常用属性

不常用属性

惯用方案