跳至主要內容

CSS

程序猿代码之路约 6274 字大约 21 分钟

CSS

CSS基础概念 🟢

1. CSS选择器

基础选择器

  • 通用选择器：*
  • 标签选择器：div, p, span
  • 类选择器：.class
  • ID选择器：#id
  • 属性选择器：[attr], [attr=value]

组合选择器

  • 后代选择器：div span
  • 子选择器：div > span
  • 相邻兄弟选择器：div + p
  • 通用兄弟选择器：div ~ p

伪类和伪元素

  • 伪类：:hover, :active, :focus, :nth-child()
  • 伪元素：::before, ::after, ::first-line

2. CSS特性

继承性 某些属性会自动继承父元素的值：

  • 字体相关：font-family, font-size, font-weight
  • 文本相关：color, text-align, line-height
  • 可见性：visibility
  • 光标：cursor

层叠性 样式冲突时的解决规则：

  1. 重要性：!important
  2. 优先级：内联 > ID > 类 > 标签
  3. 源次序：后面的覆盖前面的

盒模型详解 🟢

1. 盒模型组成部分

.box {
    /* 内容区域 */
    width: 200px;
    height: 100px;
    
    /* 内边距 */
    padding: 20px;
    padding: 20px 30px;  /* 上下、左右 */
    padding: 10px 20px 30px 40px;  /* 上右下左 */
    
    /* 边框 */
    border: 1px solid #000;
    border-width: 1px;
    border-style: solid;
    border-color: #000;
    
    /* 外边距 */
    margin: 10px;
    margin: auto;  /* 水平居中 */
}

2. 盒模型类型

标准盒模型

.content-box {
    box-sizing: content-box;
    width: 200px;
    padding: 20px;
    border: 1px solid #000;
    /* 实际宽度 = 200 + 40 + 2 = 242px */
}

IE盒模型

.border-box {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    border: 1px solid #000;
    /* 实际宽度 = 200px */
}

3. 外边距合并

相邻元素

/* 相邻元素的外边距会合并 */
.element1 {
    margin-bottom: 20px;
}
.element2 {
    margin-top: 30px;
}
/* 最终间距为30px（取较大值） */

父子元素

/* 防止外边距合并 */
.parent {
    overflow: hidden;  /* 创建BFC */
    /* 或者 */
    padding-top: 1px;
    /* 或者 */
    border-top: 1px solid transparent;
}

布局技术详解 🟡

1. Flexbox布局

容器属性

.flex-container {
    display: flex;
    
    /* 主轴方向 */
    flex-direction: row | row-reverse | column | column-reverse;
    
    /* 是否换行 */
    flex-wrap: nowrap | wrap | wrap-reverse;
    
    /* 主轴对齐 */
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
    
    /* 交叉轴对齐 */
    align-items: stretch | flex-start | flex-end | center | baseline;
    
    /* 多行对齐 */
    align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

项目属性

.flex-item {
    /* 排序 */
    order: 0;
    
    /* 放大比例 */
    flex-grow: 0;
    
    /* 缩小比例 */
    flex-shrink: 1;
    
    /* 基准大小 */
    flex-basis: auto;
    
    /* 简写属性 */
    flex: none | auto | 1;
    
    /* 单独对齐方式 */
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

2. Grid布局

容器属性

.grid-container {
    display: grid;
    
    /* 定义网格 */
    grid-template-columns: 100px 1fr auto;
    grid-template-rows: repeat(3, 100px);
    
    /* 间距 */
    gap: 20px;
    row-gap: 10px;
    column-gap: 15px;
    
    /* 区域命名 */
    grid-template-areas: 
        "header header header"
        "sidebar content content"
        "footer footer footer";
}

项目属性

.grid-item {
    /* 指定位置 */
    grid-column: 1 / 3;
    grid-row: 2 / 4;
    
    /* 区域指定 */
    grid-area: header;
    
    /* 对齐方式 */
    justify-self: start | end | center | stretch;
    align-self: start | end | center | stretch;
}

3. 定位方案

相对定位

.relative {
    position: relative;
    top: 20px;
    left: 30px;
    /* 相对于自身原始位置偏移 */
}

绝对定位

.absolute {
    position: absolute;
    top: 0;
    right: 0;
    /* 相对于最近的定位祖先元素 */
}

固定定位

.fixed {
    position: fixed;
    bottom: 20px;
    right: 20px;
    /* 相对于视口固定 */
}

粘性定位

.sticky {
    position: sticky;
    top: 0;
    /* 在视口中滚动到指定位置时固定 */
}

CSS3新特性 🟡

1. 转换和过渡

Transform

.transform {
    /* 2D转换 */
    transform: translate(50px, 100px);
    transform: rotate(45deg);
    transform: scale(1.5);
    transform: skew(10deg, 20deg);
    
    /* 3D转换 */
    transform: rotateX(45deg);
    transform: rotateY(45deg);
    transform: rotate3d(1, 1, 1, 45deg);
    
    /* 多重转换 */
    transform: translate(50px, 100px) rotate(45deg) scale(1.5);
}

Transition

.transition {
    /* 单个属性过渡 */
    transition: opacity 0.3s ease-in-out;
    
    /* 多个属性过渡 */
    transition: 
        opacity 0.3s ease-in-out,
        transform 0.5s ease-in-out;
    
    /* 所有属性过渡 */
    transition: all 0.3s ease-in-out;
}

2. 动画

关键帧动画

/* 定义动画 */
@keyframes slideIn {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    50% {
        transform: translateX(10%);
        opacity: 0.5;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 使用动画 */
.animated {
    animation: slideIn 1s ease-in-out forwards;
    
    /* 详细属性 */
    animation-name: slideIn;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: forwards;
    animation-play-state: running;
}

3. 渐变

线性渐变

.gradient {
    /* 基础渐变 */
    background: linear-gradient(to right, #ff0000, #00ff00);
    
    /* 多色渐变 */
    background: linear-gradient(45deg, #ff0000, #00ff00, #0000ff);
    
    /* 重复渐变 */
    background: repeating-linear-gradient(
        45deg,
        #ff0000 0px,
        #ff0000 10px,
        #00ff00 10px,
        #00ff00 20px
    );
}

径向渐变

.radial-gradient {
    /* 基础径向渐变 */
    background: radial-gradient(circle, #ff0000, #00ff00);
    
    /* 指定位置和大小 */
    background: radial-gradient(
        circle at top right,
        #ff0000,
        #00ff00
    );
}

响应式设计 🟡

1. 媒体查询

基础语法

/* 基于视口宽度 */
@media screen and (max-width: 768px) {
    .container {
        width: 100%;
    }
}

/* 基于设备方向 */
@media screen and (orientation: landscape) {
    .container {
        flex-direction: row;
    }
}

/* 基于设备类型 */
@media print {
    .no-print {
        display: none;
    }
}

断点设置

/* 移动优先 */
/* 基础样式 - 移动端 */
.element {
    width: 100%;
}

/* 平板 */
@media screen and (min-width: 768px) {
    .element {
        width: 750px;
    }
}

/* 桌面 */
@media screen and (min-width: 1024px) {
    .element {
        width: 970px;
    }
}

/* 大屏幕 */
@media screen and (min-width: 1200px) {
    .element {
        width: 1170px;
    }
}

2. 弹性布局

相对单位

.flexible {
    /* 相对于根元素的字体大小 */
    font-size: 1rem;
    
    /* 相对于父元素的字体大小 */
    font-size: 1.2em;
    
    /* 相对于视口宽度 */
    width: 50vw;
    
    /* 相对于视口高度 */
    height: 50vh;
    
    /* 相对于视口较小的那个维度 */
    padding: 5vmin;
}

弹性图片

.responsive-image {
    max-width: 100%;
    height: auto;
}

/* 使用picture元素 */
<picture>
    <source media="(min-width: 1200px)" srcset="large.jpg">
    <source media="(min-width: 768px)" srcset="medium.jpg">
    <img src="small.jpg" alt="响应式图片">
</picture>

CSS性能优化 🔴

1. 选择器优化

/* 避免深层嵌套 */
/* 不推荐 */
.header .nav .list .item { }

/* 推荐 */
.nav-item { }

/* 避免通配符 */
/* 不推荐 */
* { box-sizing: border-box; }

/* 推荐 */
html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}

2. 渲染性能

/* 触发合成层 */
.composite {
    transform: translateZ(0);
    will-change: transform;
}

/* 避免重排属性 */
.performance {
    /* 使用transform代替top/left */
    transform: translate(10px, 20px);
    
    /* 使用opacity代替visibility */
    opacity: 0;
}

3. 样式组织

/* BEM命名规范 */
.block { }
.block__element { }
.block--modifier { }

/* CSS模块化 */
.componentName { }
.componentName-descendant { }
.componentName--modifier { }

最佳实践与技巧

1. 常用布局技巧

/* 垂直居中 */
.center {
    /* Flexbox方案 */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Grid方案 */
    display: grid;
    place-items: center;
    
    /* 绝对定位方案 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 粘性页脚 */
.sticky-footer {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.content {
    flex: 1;
}

2. 常用动画效果

/* 淡入效果 */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 弹跳效果 */
.bounce {
    animation: bounce 0.5s cubic-bezier(0.36, 0, 0.66, -0.56) infinite alternate;
}
@keyframes bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-20px); }
}

3. 主题切换

/* CSS变量实现主题切换 */
:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --background-color: #ffffff;
}

[data-theme="dark"] {
    --primary-color: #0056b3;
    --secondary-color: #545b62;
    --background-color: #333333;
}

.theme-aware-component {
    color: var(--primary-color);
    background-color: var(--background-color);
}

CSS面试重点 🔴

1. BFC相关问题

Q1: 什么是BFC？如何创建BFC？ A1:

  • BFC(Block Formatting Context)是一个独立的渲染区域
  • 创建方式：
    1. float不为none
    2. position为absolute或fixed
    3. display为inline-block、flex、grid
    4. overflow不为visible

Q2: BFC的应用场景有哪些？ A2:

  1. 清除浮动：
.clearfix {
    overflow: hidden; /* 创建BFC */
}
  1. 防止margin重叠：
.wrapper {
    overflow: hidden;
    /* 子元素的margin不会与外部元素重叠 */
}
  1. 自适应两栏布局：
.aside {
    float: left;
    width: 200px;
}
.main {
    overflow: hidden; /* 创建BFC */
    /* main会自动适应剩余宽度 */
}

2. Flex布局相关

Q1: Flex布局的核心概念是什么？ A1:

  • 主轴（main axis）和交叉轴（cross axis）
  • 容器属性和项目属性
  • flex-grow、flex-shrink和flex-basis的计算规则

Q2: 如何实现常见的Flex布局？ A2:

  1. 居中布局：
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}
  1. 等分布局：
.container {
    display: flex;
}
.item {
    flex: 1;
    /* 或者使用 */
    flex: 1 1 0%;
}
  1. 圣杯布局：
.holy-grail {
    display: flex;
    min-height: 100vh;
}
.left, .right {
    flex: 0 0 200px;
}
.main {
    flex: 1;
}

3. CSS性能优化

Q1: CSS性能优化的方法有哪些？ A1:

  1. 选择器优化：
/* 避免过度嵌套 */
/* 不推荐 */
.header .nav .list .item a { }

/* 推荐 */
.nav-link { }

/* 避免通配符 */
/* 不推荐 */
* { margin: 0; padding: 0; }

/* 推荐 */
.specific-class { margin: 0; padding: 0; }
  1. 渲染性能优化：
/* 使用transform代替位置改变 */
.move {
    transform: translateX(100px);
    /* 替代 left: 100px */
}

/* 使用opacity代替visibility */
.hide {
    opacity: 0;
    /* 替代 visibility: hidden */
}
  1. 减少重排重绘：
/* 使用CSS3硬件加速 */
.accelerated {
    transform: translateZ(0);
    will-change: transform;
}

4. 响应式设计

Q1: 响应式设计的核心原则是什么？ A1:

  1. 流式布局：
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
  1. 弹性图片：
img {
    max-width: 100%;
    height: auto;
}
  1. 媒体查询：
/* 移动优先 */
.element { width: 100%; }

@media screen and (min-width: 768px) {
    .element { width: 750px; }
}

@media screen and (min-width: 1200px) {
    .element { width: 1170px; }
}

5. CSS模块化

Q1: CSS模块化的方案有哪些？ A1:

  1. BEM命名规范：
.block { }
.block__element { }
.block--modifier { }

/* 示例 */
.card { }
.card__title { }
.card--featured { }
  1. CSS Modules：
/* style.module.css */
.title {
    color: blue;
}

/* 使用时会自动生成唯一的类名 */
.title_abc123 {
    color: blue;
}
  1. CSS-in-JS：
const Button = styled.button`
    background: ${props => props.primary ? 'blue' : 'white'};
    color: ${props => props.primary ? 'white' : 'black'};
    padding: 10px 20px;
    border-radius: 4px;
`;

CSS高级技巧

1. 自定义属性（CSS变量）

:root {
    --primary-color: #007bff;
    --spacing-unit: 8px;
    --max-width: 1200px;
}

.element {
    color: var(--primary-color);
    padding: calc(var(--spacing-unit) * 2);
    max-width: var(--max-width);
}

/* 媒体查询中修改变量 */
@media (max-width: 768px) {
    :root {
        --spacing-unit: 4px;
    }
}

2. Grid布局高级技巧

.grid {
    display: grid;
    /* 自动填充列 */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    
    /* 区域命名 */
    grid-template-areas:
        "header header header"
        "sidebar content content"
        "footer footer footer";
    
    /* 自动放置算法 */
    grid-auto-flow: dense;
}

/* 响应式Grid */
@media (max-width: 768px) {
    .grid {
        grid-template-areas:
            "header"
            "content"
            "sidebar"
            "footer";
    }
}

3. CSS动画性能优化

/* 使用transform和opacity进行动画 */
.optimized-animation {
    transform: translateX(0);
    opacity: 1;
    transition: transform 0.3s, opacity 0.3s;
    will-change: transform, opacity;
}

.optimized-animation:hover {
    transform: translateX(100px);
    opacity: 0.8;
}

/* 避免同时动画多个属性 */
.bad-animation {
    width: 100px;
    height: 100px;
    background: red;
    transition: all 0.3s; /* 避免使用all */
}

4. 打印样式优化

@media print {
    /* 隐藏不需要打印的元素 */
    .no-print {
        display: none !important;
    }
    
    /* 确保背景色和图片能够打印 */
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    /* 分页控制 */
    .page-break {
        page-break-before: always;
    }
    
    /* 链接显示URL */
    a[href]:after {
        content: " (" attr(href) ")";
    }
}

5. CSS Houdini API

/* 注册自定义属性 */
CSS.registerProperty({
    name: '--my-color',
    syntax: '<color>',
    inherits: false,
    initialValue: '#c0ffee'
});

/* 使用Paint API */
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.element {
    background: paint(myGradient);
    --angle: 45deg;
}

常见布局实现

1. 瀑布流布局

.masonry {
    column-count: 4;
    column-gap: 1em;
}

.item {
    break-inside: avoid;
    margin-bottom: 1em;
}

/* 响应式调整 */
@media (max-width: 1200px) {
    .masonry {
        column-count: 3;
    }
}

@media (max-width: 768px) {
    .masonry {
        column-count: 2;
    }
}

2. 粘性页脚

.page-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1 0 auto;
}

.footer {
    flex-shrink: 0;
}

3. 多列等高布局

/* Flexbox方案 */
.equal-height {
    display: flex;
    flex-wrap: wrap;
}

.column {
    flex: 1;
    min-width: 300px;
}

/* Grid方案 */
.equal-height-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

CSS3高级特性补充 🔴

1. CSS变量（自定义属性）进阶

/* 全局变量 */
:root {
    --primary-color: #007bff;
    --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
    --spacing-unit: 8px;
    --max-width: 1200px;
    
    /* 计算值 */
    --header-height: calc(var(--spacing-unit) * 8);
    --sidebar-width: min(300px, 30%);
}

/* 组件级变量 */
.component {
    --component-bg: #fff;
    --component-color: var(--primary-color);
    
    background: var(--component-bg);
    color: var(--component-color);
    padding: var(--spacing-unit);
}

/* 媒体查询��修改变量 */
@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: #66b3ff;
        --component-bg: #333;
    }
}

/* JavaScript操作CSS变量 */
element.style.setProperty('--primary-color', '#ff0000');
getComputedStyle(element).getPropertyValue('--primary-color');

2. CSS Houdini高级应用

// 注册自定义属性
CSS.registerProperty({
    name: '--my-color',
    syntax: '<color>',
    inherits: false,
    initialValue: '#c0ffee'
});

// Paint API
registerPaint('myGradient', class {
    static get inputProperties() {
        return ['--gradient-start', '--gradient-end'];
    }
    
    paint(ctx, size, properties) {
        const start = properties.get('--gradient-start');
        const end = properties.get('--gradient-end');
        
        const gradient = ctx.createLinearGradient(0, 0, size.width, 0);
        gradient.addColorStop(0, start);
        gradient.addColorStop(1, end);
        
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, size.width, size.height);
    }
});

3. Grid布局高级技巧

/* 自动布局算法 */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-auto-flow: dense;
    gap: 20px;
}

/* 命名网格线 */
.grid {
    grid-template-columns: [start] 1fr [content-start] 2fr [content-end] 1fr [end];
    grid-template-rows: [header] auto [main] 1fr [footer] auto;
}

/* 子网格 */
.grid-item {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 3;
}

/* 网格区域模板 */
.layout {
    grid-template-areas:
        "header header header"
        "nav    main   aside"
        "footer footer footer";
}

.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

4. 高级动画技巧

/* 关键帧动画组合 */
.element {
    animation: 
        slideIn 0.5s ease-out,
        fadeIn 0.5s ease-out,
        scale 0.3s ease-out 0.5s;
}

/* 路径动画 */
.element {
    offset-path: path('M 0 0 C 50 100, 150 100, 200 0');
    offset-distance: 0%;
    animation: move 2s linear infinite;
}

@keyframes move {
    100% { offset-distance: 100%; }
}

/* 3D变换 */
.container {
    perspective: 1000px;
    perspective-origin: center;
}

.card {
    transform-style: preserve-3d;
    animation: flip 1s ease-in-out;
}

@keyframes flip {
    from { transform: rotateY(0deg); }
    to { transform: rotateY(360deg); }
}

5. 滤镜和混合模式

/* 高级滤镜组合 */
.image {
    filter: 
        contrast(1.2) 
        brightness(1.1) 
        saturate(1.2) 
        blur(2px);
}

/* 混合模式 */
.element {
    background-blend-mode: multiply;
    mix-blend-mode: overlay;
}

/* 动态滤镜 */
.image-hover {
    transition: filter 0.3s;
}

.image-hover:hover {
    filter: 
        brightness(1.2) 
        saturate(1.5) 
        hue-rotate(45deg);
}

CSS架构设计 🔴

1. CSS模块化方案

/* BEM命名规范 */
.block { }
.block__element { }
.block--modifier { }

/* 示例 */
.card { }
.card__title { }
.card__content { }
.card--featured { }

/* CSS Modules */
.title {
    composes: commonTitle from './common.css';
    color: blue;
}

/* CSS-in-JS */
const Button = styled.button`
    background: ${props => props.primary ? 'blue' : 'white'};
    color: ${props => props.primary ? 'white' : 'black'};
    padding: ${props => props.size ``` 'large' ? '16px 32px' : '8px 16px'};
`;

2. CSS预处理器高级用法

// Sass高级混合宏
@mixin flex-center($direction: row) {
    display: flex;
    flex-direction: $direction;
    justify-content: center;
    align-items: center;
}

// 条件语句
@mixin responsive($device) {
    @if $device == tablet {
        @media (min-width: 768px) { @content; }
    } @else if $device == desktop {
        @media (min-width: 1024px) { @content; }
    }
}

// 循环生成样式
@for $i from 1 through 5 {
    .mt-#{$i} {
        margin-top: $i * 0.25rem;
    }
}

// 函数
@function calculate-width($n) {
    @return $n * 100% / 12;
}

3. 响应式设计系统

/* 断点系统 */
:root {
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
}

/* 容器系统 */
.container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 576px) {
    .container { max-width: 540px; }
}

/* 栅格系统 */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: -15px;
}

.col {
    flex: 1 0 0%;
    padding: 15px;
}

/* 响应式工具类 */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
}

高级性能优化 🔴

1. CSS性能优化策略

/* 选择器性能优化 */
/* 避免 */
.header .nav .list .item a { }

/* 推荐 */
.nav-link { }

/* 减少重排重绘 */
.performance {
    /* 使用transform代替位置改变 */
    transform: translate(10px, 20px);
    
    /* 使用opacity代替visibility */
    opacity: 0;
    
    /* 开启GPU加速 */
    transform: translateZ(0);
    will-change: transform;
}

/* 关键CSS内联 */
<style>
    /* 首屏关键样式 */
    .header {
        /* ... */
    }
</style>

2. 渲染性能优化

/* 合成层优化 */
.layer {
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
}

/* 动画性能优化 */
.animate {
    transition: transform 0.3s, opacity 0.3s;
    will-change: transform, opacity;
}

/* 避免大规模重排 */
.container {
    contain: layout;
    contain: paint;
}

3. 打印样式优化

@media print {
    /* 基础打印样式 */
    body {
        width: 100%;
        margin: 0;
        padding: 0;
        background: none;
    }
    
    /* 隐藏不需要打印的元素 */
    .no-print {
        display: none !important;
    }
    
    /* 确保背景打印 */
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    /* 分页控制 */
    .page-break {
        page-break-before: always;
    }
    
    /* 链接处理 */
    a[href]:after {
        content: " (" attr(href) ")";
    }
}

高级布局技巧 🔴

1. 复杂布局实现

/* 瀑布流布局 */
.masonry {
    column-count: 4;
    column-gap: 1em;
}

.item {
    break-inside: avoid;
    margin-bottom: 1em;
}

/* 粘性页脚 */
.page {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

/* 圣杯布局 */
.holy-grail {
    display: grid;
    grid-template: auto 1fr auto / auto 1fr auto;
    min-height: 100vh;
}

2. 自适应布局

/* 自适应卡片网格 */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* 自适应表格 */
.responsive-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 自适应图片 */
.responsive-image {
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

3. 高级居中技巧

/* 完美居中 */
.perfect-center {
    /* Grid方案 */
    display: grid;
    place-items: center;
    
    /* Flex方案 */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 绝对定位方案 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 未知尺寸元素居中 */
.unknown-dimensions {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
}

CSS预处理器和后处理器 🔴

1. Sass/SCSS高级特性

// 混合宏高级用法
@mixin button($color, $size: 'medium') {
    $sizes: (
        'small': 0.75rem,
        'medium': 1rem,
        'large': 1.5rem
    );
    
    padding: map-get($sizes, $size);
    background-color: $color;
    border: none;
    border-radius: 4px;
    
    &:hover {
        background-color: darken($color, 10%);
    }
    
    @content;
}

// 使用混合宏
.primary-button {
    @include button(#007bff) {
        font-weight: bold;
    }
}

// 函数定义
@function calculate-width($columns, $total: 12) {
    @return percentage($columns / $total);
}

// 条件语句
@mixin responsive($device) {
    @if $device == 'tablet' {
        @media (min-width: 768px) { @content; }
    } @else if $device == 'desktop' {
        @media (min-width: 1024px) { @content; }
    }
}

2. PostCSS插件开发

// 自定义PostCSS插件
module.exports = (opts = {}) => {
    return {
        postcssPlugin: 'my-plugin',
        Declaration(decl) {
            // 处理声明
            if (decl.prop ``` 'color') {
                decl.value = transformColor(decl.value);
            }
        },
        Rule(rule) {
            // 处理规则
        },
        AtRule(atRule) {
            // 处理@规则
        }
    };
};

// 常用PostCSS配置
module.exports = {
    plugins: [
        require('autoprefixer'),
        require('postcss-preset-env'),
        require('cssnano'),
        require('postcss-import'),
        require('tailwindcss'),
    ]
};

CSS架构设计进阶 🔴

1. ITCSS架构

/* Settings - 变量、配置 */
:root {
    --primary-color: #007bff;
    --spacing-unit: 8px;
}

/* Tools - 混合宏、函数 */
@mixin center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Generic - 重置、标准化 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Elements - 元素默认样式 */
h1 {
    font-size: 2rem;
    margin-bottom: var(--spacing-unit);
}

/* Objects - 无外观设计的布局模式 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-unit);
}

/* Components - 具体UI组件 */
.button {
    padding: var(--spacing-unit);
    background: var(--primary-color);
}

/* Utilities - 工具类 */
.mt-1 { margin-top: var(--spacing-unit); }
.mb-1 { margin-bottom: var(--spacing-unit); }

2. CSS-in-JS高级模式

// 样式组件高级用法
const Button = styled.button`
    ${props => props.variant ``` 'primary' && css`
        background: ${props.theme.colors.primary};
        color: white;
    `}
    
    ${props => props.size ``` 'large' && css`
        padding: 1rem 2rem;
        font-size: 1.2rem;
    `}
    
    &:hover {
        transform: translateY(-2px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    @media (max-width: 768px) {
        width: 100%;
    }
`;

// 主题系统
const theme = {
    colors: {
        primary: '#007bff',
        secondary: '#6c757d'
    },
    breakpoints: {
        mobile: '320px',
        tablet: '768px',
        desktop: '1024px'
    }
};

CSS动画高级技巧 🔴

1. 性能优化动画

/* 使用transform和opacity */
.optimized-animation {
    transform: translateZ(0);
    will-change: transform;
    
    &:hover {
        transform: scale(1.1);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* 帧动画优化 */
@keyframes slide {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

.slide {
    animation: slide 0.3s ease-out forwards;
    will-change: transform;
}

2. 高级动画效果

/* 3D翻转效果 */
.card-container {
    perspective: 1000px;
}

.card {
    transform-style: preserve-3d;
    transition: transform 0.6s;
    
    &:hover {
        transform: rotateY(180deg);
    }
    
    .front, .back {
        backface-visibility: hidden;
        position: absolute;
        width: 100%;
        height: 100%;
    }
    
    .back {
        transform: rotateY(180deg);
    }
}

/* 视差滚动 */
.parallax {
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    perspective: 1px;
    
    &__layer {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        
        &--back {
            transform: translateZ(-1px) scale(2);
        }
        
        &--base {
            transform: translateZ(0);
        }
    }
}

响应式设计进阶 🔴

1. 容器查询

/* 容器查询 */
.card-container {
    container-type: inline-size;
    container-name: card;
}

@container card (min-width: 400px) {
    .card {
        display: grid;
        grid-template-columns: 200px 1fr;
    }
}

/* 嵌套容器查询 */
.nested-container {
    container-type: inline-size;
    container-name: nested;
}

@container nested (min-width: 300px) {
    .nested-item {
        flex-direction: row;
    }
}

2. 响应式布局模式

/* 响应式网格系统 */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: clamp(1rem, 2vw, 2rem);
}

/* 响应式排版 */
.text {
    font-size: clamp(1rem, 2vw + 0.5rem, 2rem);
    line-height: calc(1.1em + 0.5vw);
    margin-bottom: clamp(1rem, 2vh, 2rem);
}

/* 响应式间距 */
.spacing {
    --space: clamp(1rem, 2vw + 0.5rem, 3rem);
    padding: var(--space);
    gap: var(--space);
}

CSS Houdini API进阶 🔴

1. Paint API高级应用

// 自定义背景图案
registerPaint('checkerboard', class {
    static get inputProperties() {
        return ['--checkerboard-size', '--checkerboard-color'];
    }
    
    paint(ctx, size, properties) {
        const boxSize = parseInt(properties.get('--checkerboard-size'));
        const color = properties.get('--checkerboard-color');
        
        for (let y = 0; y < size.height; y += boxSize) {
            for (let x = 0; x < size.width; x += boxSize) {
                if ((x + y) / boxSize % 2) {
                    ctx.fillStyle = color;
                    ctx.fillRect(x, y, boxSize, boxSize);
                }
            }
        }
    }
});

// 使用自定义图案
.element {
    --checkerboard-size: 20;
    --checkerboard-color: #000;
    background-image: paint(checkerboard);
}

2. Layout API应用

// 自定义布局
registerLayout('masonry', class {
    static get inputProperties() {
        return ['--gap', '--columns'];
    }
    
    async intrinsicSizes() { /* ... */ }
    
    async layout(children, edges, constraints, styleMap) {
        const gap = parseInt(styleMap.get('--gap'));
        const columns = parseInt(styleMap.get('--columns'));
        
        // 实现瀑布流布局逻辑
        // ...
        
        return {autoBlockSize: height};
    }
});

// 使用自定义布局
.masonry {
    display: layout(masonry);
    --gap: 20;
    --columns: 3;
}

高级性能优化技巧 🔴

1. 关键CSS提取

<!-- 内联关键CSS -->
<style>
    /* 首屏关键样式 */
    .header {
        /* ... */
    }
    .hero {
        /* ... */
    }
</style>

<!-- 异步加载非关键CSS -->
<link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'">
<noscript>
    <link rel="stylesheet" href="non-critical.css">
</noscript>

2. CSS计算优化

/* 避免昂贵的属性 */
.expensive {
    /* 避免 */
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    border-radius: 50%;
    
    /* 替代方案 */
    transform: translateZ(0);
    will-change: transform;
}

/* 减少选择器复杂度 */
/* 避免 */
.header .nav .list .item a { }

/* 推荐 */
.nav-link { }

/* 使用CSS containment */
.container {
    contain: layout paint style;
}

3. 打包优化

/* CSS Modules */
.button {
    composes: base from './base.css';
    background: var(--primary-color);
}

/* 按需加载 */
@import './components/button.css' layer(components);
@import './utilities.css' layer(utilities);

/* 原子化CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;

CSS变量和计算 🔴

1. CSS变量高级用法

/* 全局变量定义 */
:root {
    /* 基础颜色 */
    --primary-hue: 220;
    --primary-saturation: 90%;
    --primary-lightness: 50%;
    
    /* 派生变量 */
    --primary-color: hsl(
        var(--primary-hue),
        var(--primary-saturation),
        var(--primary-lightness)
    );
    --primary-light: hsl(
        var(--primary-hue),
        var(--primary-saturation),
        calc(var(--primary-lightness) + 20%)
    );
    --primary-dark: hsl(
        var(--primary-hue),
        var(--primary-saturation),
        calc(var(--primary-lightness) - 20%)
    );
}

/* 组件级变量 */
.card {
    --card-padding: calc(var(--spacing-unit) * 2);
    --card-border-radius: calc(var(--border-radius-base) * 2);
    
    padding: var(--card-padding);
    border-radius: var(--card-border-radius);
}

2. CSS计算函数

/* calc() 高级用法 */
.element {
    /* 基础计算 */
    width: calc(100% - 20px);
    
    /* 混合单位计算 */
    margin: calc(2rem + 5vw);
    
    /* 嵌套计算 */
    padding: calc(var(--spacing-unit) * calc(1 + var(--scale-factor)));
}

/* min(), max(), clamp() */
.responsive-text {
    /* 最小值和最大值 */
    font-size: min(5vw, 3rem);
    width: max(50%, 300px);
    
    /* 响应式范围 */
    padding: clamp(1rem, 5vw, 3rem);
    line-height: clamp(1.1, calc(1em + 0.5vw), 1.5);
}

CSS动画进阶 🔴

1. 高级动画效果

/* 弹性动画 */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}

/* 3D翻转动画 */
.card-3d {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.card-3d:hover {
    animation: flip-3d 1s ease-in-out;
}

@keyframes flip-3d {
    0% {
        transform: rotateY(0);
    }
    100% {
        transform: rotateY(360deg);
    }
}

/* 路径动画 */
.path-animation {
    offset-path: path('M 0,0 C 50,50 100,-50 150,0');
    animation: move-along-path 3s infinite;
}

@keyframes move-along-path {
    0% {
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}

2. 动画性能优化

/* 使用will-change */
.optimized-animation {
    will-change: transform, opacity;
    transform: translateZ(0);
}

/* 使用合成层 */
.composite-layer {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

/* 避免重排属性 */
.performance {
    /* 使用transform代替top/left */
    transform: translate(10px, 20px);
    
    /* 使用opacity代替visibility */
    opacity: 0;
}

CSS绘制技巧 🔴

1. 高级形状绘制

/* 多边形 */
.polygon {
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

/* 圆形和椭圆 */
.circle {
    clip-path: circle(50% at center);
}

.ellipse {
    clip-path: ellipse(25% 40% at 50% 50%);
}

/* 自定义形状 */
.custom-shape {
    clip-path: path('M 0,0 H 100 V 100 H 0 L 25,50 Z');
}

2. 渐变技巧

/* 条纹背景 */
.stripes {
    background: repeating-linear-gradient(
        45deg,
        #606dbc,
        #606dbc 10px,
        #465298 10px,
        #465298 20px
    );
}

/* 网格背景 */
.grid {
    background-image: 
        linear-gradient(to right, #000 1px, transparent 1px),
        linear-gradient(to bottom, #000 1px, transparent 1px);
    background-size: 20px 20px;
}

/* 彩虹渐变 */
.rainbow {
    background: linear-gradient(
        to right,
        red,
        orange,
        yellow,
        green,
        blue,
        indigo,
        violet
    );
}

CSS架构进阶 🔴

1. CSS命名规范

/* BEM命名规范进阶 */
.block {
    /* 块级元素 */
}

.block__element {
    /* 元素 */
}

.block__element--modifier {
    /* 修饰符 */
}

/* 命名空间 */
.l-  /* 布局 */
.c-  /* 组件 */
.u-  /* 工具类 */
.t-  /* 主题 */
.is- /* 状态 */
.has- /* 状态 */

2. CSS模块化最佳实践

/* CSS Modules */
.title {
    composes: base from './base.css';
    color: var(--primary-color);
}

/* 工具类优先级 */
.u-text-center {
    text-align: center !important;
}

/* 主题切换 */
[data-theme="dark"] {
    --text-color: #fff;
    --bg-color: #333;
}

[data-theme="light"] {
    --text-color: #333;
    --bg-color: #fff;
}

3. 响应式设计模式

/* 移动优先设计 */
.container {
    width: 100%;
    padding: 1rem;
    
    @media (min-width: 768px) {
        width: 750px;
        margin: 0 auto;
    }
    
    @media (min-width: 992px) {
        width: 970px;
    }
    
    @media (min-width: 1200px) {
        width: 1170px;
    }
}

/* 容器查询 */
.card-container {
    container-type: inline-size;
}

@container (min-width: 400px) {
    .card {
        display: grid;
        grid-template-columns: 200px 1fr;
    }
}

高级布局技巧补充 🔴

1. Grid布局高级应用

/* 自动填充网格 */
.auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 1rem;
}

/* 网格区域命名 */
.layout {
    display: grid;
    grid-template-areas:
        "header header header"
        "nav    main   aside"
        "footer footer footer";
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
}

/* 子网格 */
.parent {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
}

.child {
    grid-column: 2 / 7;
    display: grid;
    grid-template-columns: subgrid;
}

2. Flexbox高级应用

/* Flex增长和收缩 */
.flex-item {
    flex: 1 1 300px; /* grow shrink basis */
}

/* Flex排序 */
.flex-container {
    display: flex;
    flex-wrap: wrap;
}

.flex-item {
    order: var(--order);
}

/* Flex对齐 */
.flex-advanced {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
}

3. 多列布局

/* 报纸样式列布局 */
.newspaper {
    column-count: 3;
    column-gap: 2rem;
    column-rule: 1px solid #ccc;
}

/* 避免跨列断开 */
.no-break {
    break-inside: avoid;
    page-break-inside: avoid;
}

/* 跨列标题 */
.column-span {
    column-span: all;
}

高级选择器和伪类 🔴

1. 复杂选择器

/* 属性选择器 */
[data-type^="user"] { /* 以user开头 */ }
[data-type$="admin"] { /* 以admin结尾 */ }
[data-type*="manager"] { /* 包含manager */ }
[data-type~="editor"] { /* 包含完整单词editor */ }

/* 组合选择器 */
.sidebar > .widget + .widget { /* 相邻widget */ }
.article ~ .comments { /* 后续所有comments */ }

/* 否定选择器 */
.item:not(:last-child) { /* 除了最后一个 */ }
.nav-item:not(.active):not(:hover) { /* 多重否定 */ }

2. 高级伪类

/* 结构性伪类 */
.list-item:nth-child(3n+1) { /* 每三个的第一个 */ }
.list-item:nth-last-child(-n+3) { /* 最后三个 */ }
.paragraph:only-child { /* 唯一子元素 */ }

/* 状态伪类 */
.form-input:valid { /* 验证通过 */ }
.form-input:invalid { /* 验证失败 */ }
.form-input:required { /* 必填项 */ }
.form-input:optional { /* 选填项 */ }

/* 选择伪类 */
::selection { /* 选中文本 */ }
:target { /* 目标元素 */ }
:lang(zh) { /* 语言选择 */ }

3. 伪元素高级应用

/* 装饰性元素 */
.quote::before {
    content: open-quote;
}
.quote::after {
    content: close-quote;
}

/* 工具提示 */
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    /* ... */
}

/* 计数器 */
.toc {
    counter-reset: section;
}
.toc-item::before {
    counter-increment: section;
    content: counters(section, ".") " ";
}

[未完待续...]