CSS 完整知识点笔记一、CSS 基础- CSS层叠样式表负责网页样式、布局、外观。- 作用控制颜色、大小、位置、字体、间距、背景、动画等。- 语法 选择器 { 属性: 值; }二、CSS 引入方式1. 行内样式写在标签 style 属性里。2. 内部样式表写在 style 标签内。3. 外部样式表写在 .css 文件中用 link 引入。4. 导入样式使用 import 导入。三、基础选择器- 通用选择器 * 选中所有元素- 标签选择器直接写标签名- 类选择器 .类名- ID 选择器 #id名- 属性选择器 [属性] 、 [属性值]四、复合选择器- 后代选择器空格隔开- 子元素选择器 - 相邻兄弟选择器 - 并集选择器 , 隔开- 伪类选择器- :hover 鼠标悬浮- :active 点击时- :focus 聚焦- :first-child 第一个子元素- :last-child 最后一个子元素- :nth-child(n) 第n个子元素五、CSS 三大特性1. 层叠性样式冲突时后面覆盖前面。2. 继承性部分样式会被子元素继承。3. 优先级!important 行内 ID 类/属性/伪类 标签 继承六、文字与字体样式- color 文字颜色- font-size 文字大小- font-weight 粗细- font-family 字体- font-style 斜体- line-height 行高- text-align 水平对齐- text-decoration 下划线、删除线- text-indent 首行缩进- letter-spacing 字间距- white-space 换行规则- text-overflow 文字溢出处理七、背景样式- background-color 背景色- background-image 背景图- background-repeat 平铺方式- background-position 位置- background-size 背景尺寸- background-attachment 固定背景- 复合写法 background: 颜色 图片 平铺 位置八、盒子模型核心所有元素都是盒子。- width 宽度- height 高度- padding 内边距- border 边框- margin 外边距- box-sizing 盒子模式- content-box 默认- border-box 包含边框内边距九、元素显示模式1. 块级元素独占一行可设宽高。2. 行内元素一行多个不可设宽高。3. 行内块元素一行多个可设宽高。4. 转换- display: block- display: inline- display: inline-block- display: none 隐藏十、浮动 float- float: left 左浮动- float: right 右浮动- 特点脱离标准流一行排列。- 必须清除浮动防止父元素塌陷。- 清除 clear: both- 常用伪元素清除法十一、定位 position- static 默认无定位- relative 相对定位不脱标- absolute 绝对定位脱标- fixed 固定定位脱标- sticky 粘性定位- 配合 top / right / bottom / left- z-index 层级控制十二、布局常用- overflow 溢出处理- opacity 透明度- visibility 显示隐藏- vertical-align 垂直对齐- cursor 鼠标样式十三、CSS3 新增重点- 圆角 border-radius- 阴影 box-shadow 、 text-shadow- 渐变线性渐变、径向渐变- 2D 转换- transform: translate 位移- rotate 旋转- scale 缩放- skew 斜切- 3D 转换- perspective 透视- rotateX/Y/Z- 过渡 transition- 动画 keyframes animation- 弹性布局 display: flex 重点- 网格布局 display: grid十四、Flex 布局必背- 开启 display: flex- 父项属性- flex-direction 主轴方向- justify-content 主轴对齐- align-items 侧轴对齐- flex-wrap 是否换行- 子项属性- flex 占份数- align-self 单独对齐十五、媒体查询响应式- media 根据屏幕宽度设置不同样式- 用于手机、平板、电脑适配。