一、CSS选择器

1. 基础选择器
   • 元素选择器： h2 { color: red; } - 选择所有<h2>元素
   • class选择器： .highlight { color: blue; } - 选择class="highlight"的元素
   • id选择器： #mainPoint { color: aqua; } - 选择id="mainPoint"的元素
   • 群组选择器： p, h1 { text-align: center; } - 同时选择<p>和<h1>元素
   • 自定义元素选择器： sjb { color: yellow; } - 选择自定义的<sjb>元素
2. 复合选择器
   • 元素+类选择器： h1.random { color: red; } - 只选择class="random"的<h1>元素
3. 伪类/伪元素选择器
   • 首字母选择器： p::first-letter { font-size: 2em; } - 选择段落的首字母
   • 首行选择器： p::first-line { color: red; } - 选择段落的首行
   • 选中状态选择器： ::selection { background-color: lightgreen; } - 定义文本选中时的样式
   • 特定位置选择器： p:nth-of-type(2)::selection { background-color: lightgreen; } - 选择第二个<p>元素的选中状态

二、HTML元素

1. 结构元素
   • <div> - 块级容器，用于布局和组织内容
   • <span> - 行内容器，用于内联元素的包装
   • <pre> - 预格式化文本，保留空格和换行，常用于显示代码
2. 盒模型属性

   .box {
     width: 500px;          /* 内容宽度 */
     height: 200px;         /* 内容高度 */
     background-color: rgba(203,111,255,0.56);  /* 背景色 */
     padding: 16px 0 0 16px;  /* 内边距：上 右 下 左 */
     margin: 16px 0 0 16px;   /* 外边距：上 右 下 左 */
     border: 1px solid;       /* 边框：宽度 样式 颜色 */
   }

三、Flex 布局

1. 基本概念
   • Flex容器： 通过display: flex创建，控制内部项目的排列方式
   • Flex项目： 容器的直接子元素，自动成为Flex项目

       <div class="flex-container">
           <div class="item">item1</div>
           <div class="item">item2</div>
       </div>

   • 主轴(Main Axis)： 项目的主要排列方向，由flex-direction决定
   • 交叉轴(Cross Axis)： 与主轴垂直的方向，控制项目在垂直方向的对齐
2. 容器属性
   • flex-direction - 定义主轴方向：

         <style>
             .flex-container {
                 flex-direction: row;
             }
         </style>

     • row（默认，水平排列）
     • row-reverse（水平反向排列）
     • column（垂直排列）
     • column-reverse（垂直反向排列）
   • flex-wrap - 是否允许换行：
     • nowrap（默认，不换行）
     • wrap（换行）
     • wrap-reverse（反向换行）
   • justify-content - 主轴对齐方式：
     • flex-start（默认，左对齐）
     • flex-end（右对齐）
     • center（居中）
     • space-between（两端对齐，项目之间的间隔都相等）
     • space-around（均匀分布。每个项目两侧的间隔相等，所以项目之间的间隔比项目与边框的间隔大一倍）
   • align-items - 交叉轴对齐方式：
     • stretch（默认，拉伸）
     • flex-start（顶部对齐）
     • flex-end（底部对齐）
     • center（垂直居中）
3. 项目属性
   • order - 调整项目顺序（数值越小越靠前）

            .item {
                 order: 0;
             }
             .item:nth-child(1){
                 order: 0;
             }
             .item:nth-child(2){
                 order: -1;
             }

     
   • flex-grow - 定义项目放大比例（默认0不放大，即如果存在剩余空间，也不放大）

            .item {
                 flex-grow: 0;
             }
             .item:nth-child(1){
             }
             .item:nth-child(2){
                 flex-grow: 1;
             }
             .item:nth-child(3){
                 flex-grow: 0;
             }

     
   • flex-shrink - 定义项目缩小比例（默认1可缩小。即如果空间不足，该项目将缩小。）
   • align-self - 单独设置项目对齐方式（覆盖align-items）

补充：课中要求的截图