CSS知识点总结

盒模型

• 宽度：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