CSS基础知识整理

"掌握CSS，轻松玩转网页设计！这篇笔记系统整理了CSS核心知识：从基础语法、选择器（类/ID/属性/组合选择器）到布局关键概念（盒模型、定位机制），详解单位体系（px/em/rem/视口单位）和样式规则优先级（继承/层叠/重要性）。特别解析伪类伪元素妙用，对比绝对/相对定位差异，并揭示CSS与HTML的结构样式分离哲学。无论你是想精准控制边距边框，还是实现响应式布局，这里都有最实用的代码示例和原理剖析。

CSS基础知识整理

• CSS定义
  • 层叠样式表
    • 用于描述网页的呈现方式
    • 控制网页的布局、颜色、字体等
  • 与HTML的关系
    • HTML负责结构
    • CSS负责样式
• CSS语法
  • 选择器
    • 元素选择器
      • 直接指定HTML元素
      • 如：
        • p { color: red}
    • 类选择器
      • 指定特定类的元素
      • 如：
        • .myClass { color: blue}
    • ID选择器
      • 指定特定ID的元素
      • 如：
        • #myId { background: yellow}
    • 属性选择器
      • 基于元素属性和属性值选择元素
      • 如：
        • type="text" { border: 1px solid black}
  • 声明块
    • 用大括号包围的样式声明
    • 如：
      • { color: redbackground: blue}
  • 属性和值
    • 属性
      • CSS属性名称
      • 如：
        • color
        • ,
        • background
        • ,
        • font-size
    • 值
      • 属性对应的值
      • 如：
        • red
        • ,
        • blue
        • ,
        • 14px
• CSS规则
  • 层叠
    • 多个样式规则可能应用于同一元素
    • 优先级决定最终样式
  • 继承
    • 某些CSS属性可以被子元素继承
    • 如：
      • font-family
      • ,
      • color
  • 重要性
    • 使用
      • !important
      • 声明可以覆盖其他规则
    • 如：
      • color: red !important
• CSS单位
  • 绝对单位
    • 像素(px
      • 屏幕上的固定点
    • 点(pt
      • 印刷行业常用单位
  • 相对单位
    • 百分比(%
      • 相对于父元素的大小
    • em
      • 相对于当前字体大小
    • rem
      • 相对于根元素的字体大小
    • 视口单位
      • vw, vh, vmin, vmax
      • 相对于视口的宽度、高度
• CSS选择器高级用法
  • 组合选择器
    • 后代选择器
      • 空格分隔，选择所有后代元素
      • 如：
        • ul li { }
    • 子选择器
      • >
        • 符号，只选择直接子元素
      • 如：
        • ul > li { }
    • 相邻兄弟选择器
      • +
        • 符号，选择紧接在另一个元素后的元素
      • 如：
        • h1 + p { }
    • 通用兄弟选择器
      • 符号，选择所有后续兄弟元素
      • 如：
        • h1 ~ p { }
  • 伪类和伪元素
    • 伪类
      • 表示元素的特定状态
      • 如：
        • :hover
        • ,
        • :active
        • ,
        • :visited
    • 伪元素
      • 表示元素的特定部分
      • 如：
        • before
        • ,
        • ::after
        • ,
        • ::first-line
• CSS布局
  • 盒模型
    • 内容(content
      • 元素的实际内容
    • 内边距(padding
      • 内容与边框之间的空间
    • 边框(border
      • 围绕元素的线框
    • 外边距(margin
      • 边框外的空间，用于元素之间的间隔
  • 定位
    • 静态定位
      • 默认定位方式
      • 元素按照文档流正常布局
    • 相对定位
      • 相对于元素正常位置进行偏移
    • 绝对定位