css现代特性教程

大手子唐可可

于 2024-07-29 13:50:23 发布

阅读量162

点赞数 2

文章标签： css css3 前端

本文链接：https://blog.csdn.net/xiaowei0016/article/details/140769413

版权

1. CSS Grid

CSS Grid 是一种强大的布局系统，允许你创建复杂的二维布局。

基本用法

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid 示例</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 创建 3 列 */
            gap: 10px; /* 列和行之间的间距 */
        }
        .item {
            background-color: #3498db;
            color: white;
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
</body>
</html>

进阶用法

.container {
    display: grid;
    grid-template-columns: 1fr 2fr; /* 第一列 1fr，第二列 2fr */
    grid-template-rows: auto; /* 行高自动 */
    grid-template-areas: 
        "header header"
        "sidebar content"
        "footer footer";
}

.header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

.footer {
    grid-area: footer;
}

2. Flexbox

Flexbox 是一种一维布局模型，适用于简单的布局。

基本用法

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox 示例</title>
    <style>
        .container {
            display: flex;
            justify-content: space-between; /* 主轴对齐方式 */
            align-items: center; /* 交叉轴对齐方式 */
            height: 100px;
            background-color: #f1f1f1;
        }
        .item {
            background-color: #3498db;
            color: white;
            padding: 20px;
            flex: 1; /* 每个项目占据相同的空间 */
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

进阶用法

.container {
    display: flex;
    flex-direction: column; /* 垂直排列 */
    align-items: flex-start; /* 交叉轴起始对齐 */
}

.item {
    flex-grow: 1; /* 项目可以扩展以填充可用空间 */
    flex-basis: 100px; /* 项目的初始大小 */
}

3. CSS 变量

CSS 变量（自定义属性）允许在样式表中定义可重用的值。

基本用法

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 变量 示例</title>
    <style>
        :root {
            --main-color: #3498db; /* 定义 CSS 变量 */
            --padding: 10px;
        }

        body {
            background-color: var(--main-color); /* 使用 CSS 变量 */
            padding: var(--padding);
        }

        .box {
            background-color: white;
            padding: var(--padding);
            border: 1px solid var(--main-color);
        }
    </style>
</head>
<body>
    <div class="box">这是一个盒子</div>
</body>
</html>

4. CSS 动画

CSS 动画允许你创建平滑的过渡效果。

基本用法

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 动画 示例</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: #3498db;
            animation: move 2s infinite; /* 应用动画 */
        }

        @keyframes move {
            0% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(100px);
            }
            100% {
                transform: translateX(0);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

5. CSS 过滤器

CSS 过滤器允许你对元素应用视觉效果。

基本用法

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 过滤器 示例</title>
    <style>
        img {
            width: 300px;
            filter: grayscale(100%); /* 应用灰度过滤器 */
            transition: filter 0.5s; /* 过渡效果 */
        }

        img:hover {
            filter: none; /* 鼠标悬停时取消过滤器 */
        }
    </style>
</head>
<body>
    <img src="https://via.placeholder.com/300" alt="示例图像">
</body>
</html>

大手子唐可可

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css现代特性教程

CSS Grid 是一种强大的布局系统，允许你创建复杂的二维布局。CSS 变量（自定义属性）允许在样式表中定义可重用的值。Flexbox 是一种一维布局模型，适用于简单的布局。CSS 过滤器允许你对元素应用视觉效果。CSS 动画允许你创建平滑的过渡效果。
复制链接

扫一扫