盒模型
-
宽度:width
-
高度:height
-
边框:border
-
圆角:border-radius
-
外边距:margin
-
内边距:padding
-
阴影效果:box-shadow
-
背景:background
-
背景颜色:background-color
-
背景图片:background-image
-
背景位置:background-position
-
背景大小:background-size
-
背景(图片)是否重复直到铺满:background-repeat
-
过渡效果:transition
-
字体
- 字体大小:font-size
- 字体颜色:color
- 字体粗细:font-weight
- 字体(备选)族:font-family
- 文字间距:letter-spacing
- 文字对齐方式:text-align
- 文字超出范围的显示处理:text-overflow
图片
- object-fit:contain/cover
flex布局
-
使用
display: flex;
-
align-items:垂直于主轴方向上的排列方式
-
justify-content:主轴方向上的排列方式
-
flex-grow:容器空间有剩余时的扩大策略
-
flex-shrink:容器空间不够时的缩小策略
-
flex-wrap:是否自动换行
-
flex-direction:排布方向
伪元素
::before
:在DOM元素的前方添加内容::after
:在DOM元素的后方添加内容::empty
:在DOM元素内容为空时添加内容,可以用于提示用户"...没有内容"之类的情景
伪类
:hover
:鼠标覆盖时触发:focus
:鼠标点击或者通过tab按键聚焦时触发,常用于输入框:blur
:失去焦点时,常用于输入框
transform
- scale:放缩大小
- translate:平移
- rotate:旋转
动画
-
animation:使用动画
-
keyframes&#x