css遗忘的知识2(grid布局，&父类选择器与:has() 讲解)

---grid布局

1. 基础 Grid 布局

定义gird布局和行宽

.container {
  display: grid;
  grid-template-columns: 100px 200px 300px; /* 三列，宽度分别为100px,200px,300px */
  grid-template-rows: 100px 200px; /* 两行，高度分别为100px,200px */
}

常用单位

• fr (fractional unit)：可用空间的比例单位
• auto：根据内容自动调整
• minmax(min, max)：定义大小范围

.container {
  grid-template-columns: 1fr 2fr 1fr; /* 中间列是两侧的两倍宽 */
}

2. 常用布局模式 

等宽多列布局

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3等宽列 */
  gap: 20px; /* 列间距 */
}

响应式网格

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

250px为设置的最小值

3. 网格项定位

.item {
  grid-column: 1 / 3; /* 从第1列线到第3列线 */
  grid-row: 1; /* 第1行 */
}

4. 命名网格区域

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

5. 实用技巧

自动填充与自动适应

/* 自动填充(尽可能多列) */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

/* 自动适应(保持列数但调整大小) */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

网格对齐

.container {
  justify-items: start | end | center | stretch; /* 水平对齐 */
  align-items: start | end | center | stretch; /* 垂直对齐 */
  place-items: align justify; /* 简写 */
}

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}

---&父类选择器

& 符号是一个特殊的 父选择器引用符，它代表 当前规则集的父选择器

意思就是在那里用&，这个&就代表哪个class类

:has() 允许你根据子元素的存在或状态来样式化父元素，这在以前只能用 JavaScript 实现。

/* 选择包含 .active 类子元素的菜单 */
.menu:has(.active) {
  background-color: #f0f0f0;
}