css样式笔记

1.一、Grid布局的核心概念（像“画表格”）

1. ​网格容器（Container）​
   设置 display: grid; 的元素，相当于画布。

   .container { display: grid; } /* 创建网格容器 */

2. ​网格项目（Item）​
   容器的直接子元素自动成为项目，相当于表格中的单元格。

   <div class="container"> <!-- 容器 -->
     <div class="item">A</div> <!-- 项目 -->
     <div class="item">B</div>
   </div>

3. ​网格轨道（Track）​

   • ​列轨道（Column Track）​：垂直方向的空间（列宽），通过 grid-template-columns 定义。
   • ​行轨道（Row Track）​：水平方向的空间（行高），通过 grid-template-rows 定义。

   .container {
     grid-template-columns: 100px 1fr 2fr; /* 3列：固定100px + 1份剩余空间 + 2份剩余空间 */
     grid-template-rows: 80px auto; /* 2行：固定80px + 自适应高度 */
   }

4. ​网格线（Grid Line）​
   划分行和列的线（编号从1开始）。项目可通过网格线编号定位位置。

   .item {
     grid-column: 1 / 3; /* 从第1列线到第3列线（跨2列） */
     grid-row: 1;        /* 位于第1行 */
   }

5. ​网格区域（Area）​
   用命名区域直观布局（类似画地图）：

   .container {
     grid-template-areas:
       "header header"
       "sidebar main"
       "footer footer";
   }
   .header { grid-area: header; } /* 项目分配到header区域 */

2.:before 和 :after 是 CSS 中的两个伪元素，它们能在不修改 HTML 结构的前提下，为元素添加装饰性或功能性的内容。

🌟 ​核心概念：像“贴纸”一样的存在

• ​**:before：在元素内部开头**插入内容（像在书本第一页贴标签）。
• ​**:after：在元素内部结尾**插入内容（像在书本最后一页盖印章）。
• ​必须搭配 content 属性：这是它们的“激活开关”，没有 content 就不会显示

🛠️ ​什么时候用？——4 个典型场景

1️⃣ ​添加装饰性内容​（最常见）

• ​**:before 示例**：给标题加小图标

  h2::before {
    content: "🔍 "; /* 插入放大镜图标 */
    color: orange;
  }

  效果：🔍 用户须知（标题前多了图标）

  1

  3

• ​**:after 示例**：链接后加外部链接符号

  a::after {
    content: " ↗";
    color: blue;
  }

  效果：点击查看 ↗（链接后出现箭头）

2️⃣ ​创建纯 CSS 图形​（无需图片）

用边框画一个三角形箭头（聊天框小尾巴）：

.bubble::after {
  content: ""; /* 空内容但必须写 */
  position: absolute;
  right: -10px;
  top: 50%;
  /* 用边框拼三角形 */
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid skyblue;
}

原理：通过透明边框拼接图形（常用于提示框、箭头）

3️⃣ ​辅助布局功能

• ​清除浮动​（经典用法）：

  .container::after {
    content: "";
    display: block;
    clear: both; /* 让父容器能包裹浮动子元素 */
  }

• ​添加遮罩层：

  .image-box::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3); /* 半透明黑色遮罩 */
  }

  效果：鼠标悬停时图片变暗

4️⃣ ​动态生成内容

• ​显示自定义属性：在按钮后显示 data-tooltip 的值

  <button data-tooltip="删除后无法恢复">删除</button>

  button:hover::after {
    content: attr(data-tooltip); /* 读取HTML属性值 */
    background: #333;
    color: white;
    padding: 5px;
  }

  效果：鼠标悬停时显示提示文字