CSS现代布局艺术：2023年最值得掌握的10个核心技术

一、CSS容器查询实战

1. 组件级响应式设计

<div class="card-container">
    <article class="card">
        <h3>卡片标题</h3>
        <p>卡片内容描述...</p>
    </article>
</div>

<style>
.card-container {
    container-type: inline-size;
}

.card {
    padding: 1rem;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

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

@container (min-width: 600px) {
    .card {
        grid-template-columns: 200px 1fr;
    }
}
</style>

二、CSS Grid高级应用

1. 动态网格布局

<div class="gallery">
    <div class="item featured">特色项目</div>
    <div class="item">项目1</div>
    <div class="item">项目2</div>
    <!-- 更多项目... -->
</div>

<style>
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-rows: 200px;
    gap: 1rem;
    grid-auto-flow: dense;
}

.item {
    background: #f0f0f0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.featured {
    grid-column: span 2;
    grid-row: span 2;
    background: #ffeb3b;
}

@media (max-width: 600px) {
    .featured {
        grid-column: span 1;
        grid-row: span 1;
    }
}
</style>

三、CSS Scroll Snap实战

1. 精准滚动定位

<div class="carousel">
    <div class="slide">幻灯片1</div>
    <div class="slide">幻灯片2</div>
    <div class="slide">幻灯片3</div>
</div>

<style>
.carousel {
    width: 100%;
    height: 300px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    display: flex;
    gap: 0;
}

.slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

@media (min-width: 768px) {
    .carousel {
        scroll-snap-type: x proximity;
    }
    
    .slide {
        flex: 0 0 50%;
    }
}
</style>

四、CSS变量高级应用

1. 动态主题切换

<div class="theme-controls">
    <button onclick="setTheme('light')">浅色</button>
    <button onclick="setTheme('dark')">深色</button>
    <button onclick="setTheme('blue')">蓝色</button>
</div>

<div class="themeable-content">
    <h3>主题内容区域</h3>
    <p>这是一个演示CSS变量主题切换的例子</p>
</div>

<style>
:root {
    --primary-color: #6200ea;
    --bg-color: #ffffff;
    --text-color: #212121;
    --border-radius: 8px;
}

[data-theme="dark"] {
    --primary-color: #bb86fc;
    --bg-color: #121212;
    --text-color: #e0e0e0;
}

[data-theme="blue"] {
    --primary-color: #2196f3;
    --bg-color: #e3f2fd;
    --text-color: #0d47a1;
}

.themeable-content {
    padding: 2rem;
    background: var(--bg-color);
    color: var(--text-color);
    border: 2px solid var(--primary-color);
    border-radius: var(--border-radius);
    margin-top: 1rem;
}

.theme-controls button {
    padding: 0.5rem 1rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    margin-right: 0.5rem;
    cursor: pointer;
}

<script>
function setTheme(theme) {
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('theme', theme);
}

// 初始化主题
const savedTheme = localStorage.getItem('theme') || 'light';
setTheme(savedTheme);
</script>

五、CSS混合模式与滤镜

1. 创意视觉效果

<div class="blend-container">
    <div class="blend-image"></div>
    <div class="blend-overlay"></div>
</div>

<style>
.blend-container {
    position: relative;
    width: 100%;
    height: 400px;
}

.blend-image {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('https://example.com/image.jpg');
    background-size: cover;
}

.blend-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #ff00cc, #3333ff);
    mix-blend-mode: multiply;
    opacity: 0.7;
}

.blend-container:hover .blend-overlay {
    mix-blend-mode: screen;
    filter: blur(2px);
    transition: all 0.3s ease;
}
</style>