公关公司服务内容_房产中介网站源码_seo自然优化排名技巧_网络软文发布

---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;
}