【CSS】CSS3进阶

于 2025-04-02 03:00:00 发布
阅读量732 收藏 17
点赞数 24
CC 4.0 BY-SA版权
分类专栏： HTML CSS JavaScript 文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Go_ahead1025/article/details/146925213

在这里插入图片描述

个人主页：Guiat
归属专栏：HTML CSS JavaScript

在这里插入图片描述

文章目录

正文

1. CSS 基础概念

CSS（层叠样式表）是一种用于描述HTML或XML文档表现形式的样式表语言。它控制网页的视觉展示，包括布局、颜色、字体等。

1.1 CSS 语法结构

CSS 规则集由选择器和声明块组成：

选择器 {
    属性: 值;
    属性: 值;
}

例如：

h1 {
    color: blue;
    font-size: 24px;
}

1.2 CSS 引入方式

1.2.1 内联样式

直接在HTML元素中使用style属性：

<p style="color: red; font-size: 16px;">这是红色文本</p>

1.2.2 内部样式表

在HTML文档的<head>部分使用<style>标签：

<head>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>

1.2.3 外部样式表

创建独立的.css文件，通过<link>标签引入：

<head>
    <link rel="stylesheet" href="styles.css">
</head>

2. CSS 选择器

2.1 基本选择器

选择器类型语法示例描述
元素选择器元素名p { }选择所有<p>元素
类选择器.类名.intro { }选择所有class="intro"的元素
ID选择器#ID名#header { }选择id="header"的元素
通用选择器** { }选择所有元素

2.2 组合选择器

/* 后代选择器 - 选择div内部的所有p元素 */
div p {
    color: red;
}

/* 子选择器 - 只选择div的直接子元素p */
div > p {
    color: blue;
}

/* 相邻兄弟选择器 - 选择紧跟在div后的p元素 */
div + p {
    color: green;
}

/* 通用兄弟选择器 - 选择div后的所有p兄弟元素 */
div ~ p {
    color: orange;
}

3. 盒模型

网页中的每个元素都被看作一个矩形盒子，由内容、内边距、边框和外边距组成。

3.1 标准盒模型与IE盒模型

/* 标准盒模型 */
.box-standard {
    box-sizing: content-box; /* 默认值 */
    width: 300px;
    padding: 20px;
    border: 10px solid black;
    /* 总宽度 = 300px + 20px*2 + 10px*2 = 360px */
}

/* IE盒模型 */
.box-ie {
    box-sizing: border-box;
    width: 300px;
    padding: 20px;
    border: 10px solid black;
    /* 总宽度 = 300px (内容区域会自动缩小) */
}

3.2 margin和padding

/* 四个方向相同 */
.box1 {
    margin: 10px;
    padding: 20px;
}

/* 上下、左右分别设置 */
.box2 {
    margin: 10px 20px; /* 上下10px，左右20px */
    padding: 5px 15px; /* 上下5px，左右15px */
}

/* 分别设置上、右、下、左 (顺时针) */
.box3 {
    margin: 10px 20px 30px 40px;
    padding: 5px 15px 25px 35px;
}

4. 布局技术

4.1 Flexbox布局

Flexbox是一维布局模型，非常适合处理行或列的排列。

.container {
    display: flex;
    flex-direction: row; /* row, column, row-reverse, column-reverse */
    justify-content: space-between; /* flex项目在主轴上的对齐方式 */
    align-items: center; /* flex项目在交叉轴上的对齐方式 */
    flex-wrap: wrap; /* 允许项目换行 */
    gap: 10px; /* 项目间距 */
}

.item {
    flex: 1; /* 弹性增长比例 */
}

4.1.1 Flex属性示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .flex-container {
            display: flex;
            background-color: lightgray;
        }

        .flex-container>div {
            background-color: DodgerBlue;
            color: white;
            width: 100px;
            margin: 10px;
            text-align: center;
            line-height: 75px;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div class="flex-container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>

4.2 Grid布局

Grid是二维布局系统，同时处理行和列。

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列等宽 */
    grid-template-rows: 100px 200px; /* 2行，高度分别为100px和200px */
    grid-gap: 10px; /* 网格间距 */
}

.grid-item {
    grid-column: span 2; /* 横跨2列 */
    grid-row: 1 / 3; /* 从第1行到第3行（不含） */
}

4.2.1 Grid布局示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: auto auto auto;
            gap: 10px;
            background-color: #2196F3;
            padding: 10px;
        }

        .grid-container>div {
            background-color: rgba(255, 255, 255, 0.8);
            text-align: center;
            padding: 20px 0;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div class="grid-container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
</body>

</html>

5. 响应式设计

5.1 媒体查询

媒体查询允许根据设备特性（如屏幕宽度）应用不同的样式：

/* 基础样式 */
body {
    font-size: 16px;
}

/* 在宽度小于768px的设备上应用 */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    .sidebar {
        display: none;
    }
}

/* 在宽度小于480px的设备上应用 */
@media (max-width: 480px) {
    body {
        font-size: 12px;
    }
    .container {
        padding: 5px;
    }
}

5.2 响应式单位

.responsive-element {
    /* 相对于视口宽度的单位 */
    width: 50vw;
    
    /* 相对于父元素字体大小的单位 */
    padding: 1.5em;
    
    /* 相对于根元素(html)字体大小的单位 */
    margin: 2rem;
    
    /* 相对于视口尺寸的单位（取较小的那个） */
    font-size: 5vmin;
}

6. CSS 变换与动画

6.1 变换(Transform)

.transform-example {
    /* 平移 */
    transform: translate(50px, 20px);
    
    /* 旋转 */
    transform: rotate(45deg);
    
    /* 缩放 */
    transform: scale(1.5, 0.8);
    
    /* 倾斜 */
    transform: skew(10deg, 20deg);
    
    /* 组合变换 (从右到左执行) */
    transform: rotate(45deg) scale(1.5) translate(50px, 20px);
}

6.2 过渡(Transition)

过渡允许属性值在指定的持续时间内平滑地变化。

.transition-example {
    width: 100px;
    height: 100px;
    background-color: blue;
    
    /* 指定过渡属性、持续时间、速度曲线和延迟 */
    transition: width 0.5s ease, 
                background-color 1s ease-in-out 0.2s;
}

.transition-example:hover {
    width: 200px;
    background-color: red;
}

6.3 动画(Animation)

使用@keyframes规则定义动画序列，然后通过animation属性应用。

/* 定义名为"slide"的动画 */
@keyframes slide {
    0% {
        transform: translateX(0);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(300px);
        opacity: 0;
    }
}

.animation-example {
    width: 100px;
    height: 100px;
    background-color: green;
    
    /* 应用动画 */
    animation-name: slide;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    
    /* 简写形式 */
    /* animation: slide 3s ease-in-out 1s infinite alternate; */
}

7. CSS 预处理器

CSS预处理器添加了编程特性（变量、嵌套、混合等），使CSS更易于维护。

7.1 Sass/SCSS示例

// 变量
$primary-color: #3498db;
$secondary-color: #2ecc71;
$padding: 15px;

// 嵌套
.container {
    max-width: 1200px;
    padding: $padding;
    
    .header {
        background-color: $primary-color;
        color: white;
        
        h1 {
            font-size: 24px;
        }
    }
    
    .content {
        background-color: lighten($primary-color, 40%);
        
        &:hover {
            background-color: darken($primary-color, 10%);
        }
    }
}

// 混合(Mixin)
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

.button {
    @include border-radius(5px);
    background-color: $secondary-color;
    padding: $padding / 2;
}

8. CSS 新特性

8.1 CSS变量(自定义属性)

:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --font-size-base: 16px;
    --spacing: 20px;
}

.header {
    background-color: var(--primary-color);
    padding: var(--spacing);
    font-size: calc(var(--font-size-base) * 1.5);
}

.button {
    background-color: var(--secondary-color);
    padding: calc(var(--spacing) / 2);
    margin: var(--spacing);
}

8.2 网格与子网格

.grid-container {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 10px;
}

.nested-grid {
    grid-column: span 3;
    
    /* CSS Grid Level 2: 子网格 */
    display: grid;
    grid-template-columns: subgrid; /* 使用父网格的列定义 */
}

8.3 CSS Shapes

.circle-text {
    width: 300px;
    height: 300px;
    shape-outside: circle(50%);
    float: left;
    /* 文本将围绕圆形流动 */
}

.custom-shape {
    width: 300px;
    height: 200px;
    shape-outside: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%);
    float: right;
    /* 文本将围绕多边形流动 */
}

9. CSS 滤镜和混合模式

9.1 CSS 滤镜 (Filter)

滤镜可以对元素应用视觉效果，如模糊、亮度调整等。

.filter-examples img {
    width: 200px;
    margin: 10px;
}

.blur {
    filter: blur(5px);
}

.brightness {
    filter: brightness(150%);
}

.contrast {
    filter: contrast(200%);
}

.grayscale {
    filter: grayscale(100%);
}

.sepia {
    filter: sepia(80%);
}

.hue-rotate {
    filter: hue-rotate(180deg);
}

.invert {
    filter: invert(100%);
}

.combined {
    filter: contrast(150%) brightness(120%) sepia(30%);
}

9.2 混合模式 (Blend Modes)

混合模式决定了元素如何与其背景或重叠元素混合。

.blend-container {
    background-image: url('background.jpg');
    padding: 20px;
}

.multiply {
    background-color: rgba(255, 0, 0, 0.5);
    mix-blend-mode: multiply;
}

.screen {
    background-color: rgba(0, 255, 0, 0.5);
    mix-blend-mode: screen;
}

.overlay {
    background-color: rgba(0, 0, 255, 0.5);
    mix-blend-mode: overlay;
}

/* 背景混合 */
.background-blend {
    width: 300px;
    height: 300px;
    background-image: url('pattern.png'), url('photo.jpg');
    background-blend-mode: overlay;
}

10. CSS 形状与裁剪

10.1 形状路径 (shape-outside)

shape-outside属性定义了一个形状，文本将环绕这个形状流动。

.circle-float {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #3498db;
    float: left;
    shape-outside: circle(50%);
    margin-right: 20px;
}

.ellipse-float {
    width: 300px;
    height: 200px;
    background: #e74c3c;
    border-radius: 50%;
    float: right;
    shape-outside: ellipse(40% 50%);
    margin-left: 20px;
}

.polygon-float {
    width: 200px;
    height: 200px;
    background: #2ecc71;
    float: left;
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 100%, 0% 100%);
    shape-outside: polygon(0% 0%, 100% 0%, 100% 75%, 75% 100%, 0% 100%);
    margin-right: 20px;
}

10.2 裁剪路径 (clip-path)

clip-path属性用于裁剪元素，只显示通过裁剪路径定义的部分。

.clip-circle {
    clip-path: circle(40%);
}

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

.clip-polygon {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    /* 创建一个菱形 */
}

.clip-path-animation {
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg, #3498db, #9b59b6);
    animation: morph 3s infinite alternate;
}

@keyframes morph {
    0% {
        clip-path: circle(40%);
    }
    50% {
        clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    }
    100% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}

11. CSS 性能优化

11.1 选择器性能

选择器从右到左解析，最右边的选择器被称为"关键选择器"（key selector）。

/* 低效选择器 - 浏览器必须检查所有div元素 */
div * {
    color: red;
}

/* 低效选择器 - 浏览器必须检查所有a元素 */
#header .nav li a {
    color: blue;
}

/* 高效选择器 - 直接通过类找到元素 */
.nav-link {
    color: blue;
}

11.1.1 选择器性能优化建议

  1. 避免使用通用选择器（*）
  2. 减少选择器的深度
  3. 使用类选择器代替复杂的后代选择器
  4. 避免过度使用子选择器（>）和相邻选择器（+）

11.2 重排与重绘优化

/* 触发重排的属性变化 */
.reflow-example {
    /* 使用transform代替下面的属性 */
    /* left: 100px; */
    /* top: 50px; */
    /* width: 200px; */
    /* height: 300px; */
    
    /* 使用transform避免重排 */
    transform: translate(100px, 50px);
}

/* 只触发重绘的属性变化 */
.repaint-example {
    /* 这些只触发重绘，性能更好 */
    color: red;
    background-color: blue;
    visibility: hidden;
}

/* 使用will-change提示浏览器 */
.optimized-animation {
    will-change: transform, opacity;
    transition: transform 0.3s, opacity 0.3s;
}

12. CSS 架构与组织

12.1 BEM命名规范

BEM代表块（Block）、元素（Element）和修饰符（Modifier），是一种CSS命名约定。

/* 块 */
.card {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 16px;
}

/* 元素（使用__连接块和元素） */
.card__title {
    font-size: 18px;
    margin-bottom: 8px;
}

.card__image {
    width: 100%;
    height: auto;
}

.card__content {
    color: #333;
}

/* 修饰符（使用--连接元素和修饰符） */
.card--featured {
    border-color: gold;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.card__title--large {
    font-size: 24px;
}

12.2 SMACSS架构

SMACSS（可扩展和模块化CSS架构）将CSS分为5类：

/* 1. 基础规则 */
body, h1, h2, p, ul, li {
    margin: 0;
    padding: 0;
}

/* 2. 布局规则 (前缀l- 或 layout-) */
.l-header {
    height: 80px;
}
.l-sidebar {
    width: 25%;
    float: left;
}
.l-main {
    width: 75%;
    float: right;
}

/* 3. 模块规则 */
.nav {
    list-style: none;
}
.nav-item {
    display: inline-block;
}

/* 4. 状态规则 (前缀is- 或 has-) */
.is-active {
    font-weight: bold;
    color: #333;
}
.is-hidden {
    display: none;
}

/* 5. 主题规则 (前缀theme-) */
.theme-dark {
    background: #333;
    color: white;
}
.theme-light {
    background: white;
    color: #333;
}

13. 现代CSS框架比较

13.1 功能对比表

特性Bootstrap 5Tailwind CSSBulmaMaterial UI
类型组件库原子CSS组件库组件库
文件大小~150KB~10KB (生产优化后)~200KB~100KB
定制化中等高中等中等
学习曲线低中高低中等
JS依赖可选不需要不需要需要React
响应式内置内置内置内置
流行度非常高高中等高

13.2 示例代码比较

13.2.1 Bootstrap 5

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="card">
        <img src="image.jpg" class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">Some quick example text.</p>
          <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>
  </div>
</div>

13.2.2 Tailwind CSS

<div class="container mx-auto px-4">
  <div class="flex flex-wrap -mx-4">
    <div class="w-full md:w-1/2 px-4">
      <div class="bg-white rounded-lg shadow-md overflow-hidden">
        <img class="w-full" src="image.jpg" alt="...">
        <div class="p-4">
          <h5 class="text-xl font-semibold mb-2">Card title</h5>
          <p class="text-gray-700 mb-4">Some quick example text.</p>
          <a href="#" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
            Go somewhere
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

14. CSS 变量的高级应用

14.1 主题切换

使用CSS变量可以轻松实现主题切换：

/* 定义默认（浅色）主题变量 */
:root {
    --bg-color: #ffffff;
    --text-color: #333333;
    --primary-color: #4299e1;
    --secondary-color: #ed8936;
    --border-color: #e2e8f0;
}

/* 定义深色主题变量 */
.dark-theme {
    --bg-color: #1a202c;
    --text-color: #f7fafc;
    --primary-color: #90cdf4;
    --secondary-color: #fbd38d;
    --border-color: #2d3748;
}

/* 使用变量 */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}

.button {
    background-color: var(--primary-color);
    border: 1px solid var(--border-color);
}

/* JavaScript切换主题 */
// document.getElementById('themeToggle').addEventListener('click', function() {
//   document.body.classList.toggle('dark-theme');
// });

14.2 响应式变量

可以在媒体查询中修改CSS变量值：

:root {
    --h1-font-size: 2.5rem;
    --paragraph-margin: 1.5rem;
    --container-width: 1200px;
}

@media (max-width: 768px) {
    :root {
        --h1-font-size: 2rem;
        --paragraph-margin: 1rem;
        --container-width: 100%;
    }
}

@media (max-width: 480px) {
    :root {
        --h1-font-size: 1.5rem;
        --paragraph-margin: 0.75rem;
    }
}

h1 {
    font-size: var(--h1-font-size);
}

p {
    margin-bottom: var(--paragraph-margin);
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
}

15. CSS Grid高级布局技巧

15.1 区域命名与布局

.dashboard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 
        "header header header header"
        "sidebar main main main"
        "footer footer footer footer";
    min-height: 100vh;
    gap: 10px;
}

.header {
    grid-area: header;
    background-color: #3498db;
    padding: 1rem;
}

.sidebar {
    grid-area: sidebar;
    background-color: #2ecc71;
}

.main-content {
    grid-area: main;
    background-color: #ecf0f1;
}

.footer {
    grid-area: footer;
    background-color: #34495e;
    padding: 1rem;
}

/* 响应式布局修改 */
@media (max-width: 768px) {
    .dashboard {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "header"
            "main"
            "sidebar"
            "footer";
    }
}

15.2 auto-fill 与 auto-fit

.gallery {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    /* 或者使用 auto-fit */
    /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
}

/* 
auto-fill: 尽可能多地创建网格轨道，即使有空轨道
auto-fit: 扩展现有项目以填充可用空间
*/

.gallery-item {
    height: 200px;
    background-color: #3498db;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
}

结语
感谢您的阅读！期待您的一键三连！欢迎指正！

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Guiat

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值