[分享]css元素周期表代码

CSS元素周期表代码是为了帮助Web开发人员更好地了解和使用CSS的元素而设计的。这个代码包含了一系列CSS元素的名称、属性、取值和描述。通过阅读这个元素周期表，Web开发人员可以更快地定位和解决问题...

CSS元素周期表代码是为了帮助Web开发人员更好地了解和使用CSS的元素而设计的。这个代码包含了一系列CSS元素的名称、属性、取值和描述。通过阅读这个元素周期表，Web开发人员可以更快地定位和解决问题，并提升自己的CSS编程能力。

/**
 * CSS元素周期表
 * From https://mastery.games/flexboxzombies/
 */

/* 布局 */
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <‘flex-direction’> || <‘flex-wrap’>;
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

/* 容器 */
flex-grow: <number>; /* default 0 */
flex-shrink: <number>; /* default 1 */
flex-basis: <length> | auto; /* default auto */
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];
align-self: auto | flex-start | flex-end | center | baseline | stretch;

/* 项目 */
order: <integer>; /* default 0 */
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];
align-self: auto | flex-start | flex-end | center | baseline | stretch;

/* 文本 */
white-space: normal | nowrap;

/* 颜色 */
color: <color>;
background-color: <color>;

/* 尺寸 */
width: <length> | <percentage> | auto;
min-width: <length> | <percentage>;
max-width: <length> | <percentage>;
height: <length> | <percentage> | auto;
min-height: <length> | <percentage>;
max-height: <length> | <percentage>;

/* 边框 */
border: <'border-width'> || <'border-style'> || <'border-color'>;
border-radius: <length> | <percentage> | [ <length> | <percentage> ]{1,4} [/ <length> | <percentage> ]?;
border-color: <color> | transparent;
border-width: <length> | thin | medium | thick;
border-top: <'border-width'> || <'border-style'> || <'border-color'>;
border-right: <'border-width'> || <'border-style'> || <'border-color'>;
border-bottom: <'border-width'> || <'border-style'> || <'border-color'>;
border-left: <'border-width'> || <'border-style'> || <'border-color'>;

/* 位置 */
position: static | relative | absolute | sticky | fixed;
top: <length> | <percentage> | auto;
right: <length> | <percentage> | auto;
bottom: <length> | <percentage> | auto;
left: <length> | <percentage> | auto;
z-index: auto | <integer>;

/* 文本装饰 */
text-decoration: none | underline | overline | line-through | blink;

/* 字体 */
font-family: <family-name>;
font-size: <absolute-size> | <relative-size> | <length> | <percentage>;
font-weight: normal | bold | bolder | lighter | <integer>;
font-style: normal | italic | oblique;

/* 背景 */
background-image: <image> | none;
background-repeat: repeat-x | repeat-y | repeat | no-repeat;
background-position: <position> | [ left | center | right ] || [ top | center | bottom ];
background-size: <size> | auto;

/* 其他 */
opacity: <alpha-value>;
visibility: visible | hidden;
box-shadow: none | <shadow>;