To write beautiful CSS works, imagination is of course very important, but the foundation cannot be ignored. I believe that most people are afraid of writing CSS because they are scared by its huge basic knowledge system. Here I recommend a website called freecodecamp to learn the front-end Three Musketeers by breaking through the barriers. Using it to get started with CSS is the best choice. !
Once you have successfully entered the door, you can begin to explore the full picture of CSS. This article is a quick reference sheet for CSS properties, which can be used in conjunction with online API documentation
Property Cheat Sheet
The attribute knowledge points listed below are all used by the author
Don't be scared by the number. In fact, these are the most commonly used ones: selection-positioning-layout-box model-font-background-animation-other
Selector
element
Element itself, p
class
Class, p.class
id
id，p#id
child
Child element, ul li
attribute
属性，input[type="checkbox"]
sibling
Adjacent element, input ~ label
pseudo class
Pseudo class, button:hover
Commonly used pseudo-classes:
- hover: mouse hover
- focus: Get the focus itself
- focus-within: itself and its child elements get the focus
- nth-child: the nth child element
- not: not an element
- target: the anchor of the URL
Form pseudo-class:
- checked: the state of single/check box switch on
- disabled: disabled element
- valid: the situation when the form is validated
- invalid: the situation when the form verification fails
- placeholder-shown: the situation when there is a placeholder (that is, the situation when the user has not entered)
pseudo element
Pseudo element, button::before
Common pseudo-elements:
- before
- after
*
select all
Positioning
position
- relative: Relative positioning, the element occupies the document position, can have an offset
- absolute: Absolute positioning, the element does not occupy a position, and is positioned relative to the parent element
- fixed: fixed at a certain position of the window
- sticky: "sticky" in a certain position of the window
top | left | bottom | right
Offset distance of up, down, left and right
z-index
Cascading relationship
layout
display
- block: block-level element
- inline: inline element
- flex：弹性盒子布局
- grid：网格布局
盒模型
width | height
宽高
padding | margin
内外边距
overflow
- visible：超出部分可见
- hidden：超出部分不可见
字体
font-weight
字体粗细
font-size
字体大小
font-family
字体种类
line-height
字体行高
文本
text-align
文本对齐
text-shadow
文本阴影
text-transform
文本大小写
text-decoration
文本装饰样式
-webkit-text-stroke
文本描边
color
文本颜色
opacity
颜色透明度
white-space
空格处理
背景
background-color
背景颜色
background-image
背景图片
background-size
背景大小
background-position
背景定位
background-repeat
背景是否重复
background-clip
背景裁剪
边框
border-width
边框宽度
border-style
边框样式
border-color
边框颜色
border-radius
边框圆角
box-shadow
阴影
滤镜
filter
作用于元素本身的滤镜
常用滤镜：
- blur：高斯模糊
- contrast：对比度
- drop-shadow：投影
- greyscale：灰度
- hue-rotate：色调变换
backdrop-filter
作用于元素背景的滤镜
混合模式
mix-blend-mode
常用混合模式
- multiply：正片叠底
- screen：滤色
- difference：插值
图片
object-fit
处理替换元素（如img）的变形问题
svg
clip-path
裁剪路径，用来裁剪出各种形状
letter-spacing
字母间距
pointer-events
鼠标事件
列表
list-style-type
列表的marker样式（通常都设为none）
UI
appearance
元素的默认样式（通常都设为none）
box-sizing
盒模型类型
- content-box：默认，标准盒模型
- border-box：IE盒模型（将border和·padding一并算作长宽）
cursor
光标类型，最常用的是pointer，也就是一只手
outline
轮廓
user-select
用户是否能选择文本（通常都设为none）
滚动行为
scroll-behavior
- auto：默认滚动行为
- smooth：丝滑滚动行为
scroll-snap-type
定义在滚动容器中的一个临时点（snap point）如何被严格的执行
scroll-snap-align
控制将要聚焦的当前滚动子元素在滚动方向上相对于父容器的对齐方式
变换
transform
常见的几何变换：
- translate：平移
- scale：缩放
- rotate：旋转
- skew：斜切
transform-origin
变换中心
transform-style
- flat：默认
- preserve-3d：3d场景
perspective
透视距离
backface-visibility
物体后方是否可视
过渡和动画
transition
过渡
transition-property
过渡属性名
transition-duration
过渡时间
transition-delay
过渡延迟
transition-timing-function
过渡时间函数
animation
动画
animation-name
动画名称
animation-duration
动画时间
animation-delay
动画延迟
animation-timing-function
动画时间函数
animation-iteration-count
动画播放次数
animation-fill-mode
动画填充模式
@keyframes
关键帧
其他
var()
CSS自定义变量
calc()
计算值
@media
媒体查询，用于适配不同设备
-webkit-box-reflect
投影