CSS学习04 - CSS3新特性

已于 2025-04-01 09:19:41 修改
阅读量1.1k 收藏 14
点赞数 19
CC 4.0 BY-SA版权
分类专栏： # CSS3 文章标签： css3 前端
于 2025-03-26 14:09:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43350524/article/details/146528166

CSS3学习

文章目录

一：CSS3概述

CSS3在CSS2的基础上增加了很多强大的新功能，并采用了模块化开发，使得不同模块可以独立更新和发布，从而提高了开发效率和灵活性

CSS3的主要特点和新特性：

在这里插入图片描述

二：私有前缀

CSS3私有前缀是浏览器厂商为了提前支持新的CSS属性而引入的一种特殊前缀。

这些前缀用于标识尚未成为W3C标准的一部分的CSS属性或规则。

通过添加这些前缀，浏览器可以识别并应用这些新属性，即使它们还未正式成为标准的一部分

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;

主流浏览器的私有前缀

  • -webkit-：适用于Chrome浏览器、Edge浏览器和Safari浏览器，这些浏览器使用WebKit引擎
  • -moz-：适用于Firefox浏览器，使用Gecko引擎
  • -ms-：适用于Internet Explorer浏览器，使用Trident引擎
  • -o-：早期适用于Opera浏览器，使用Presto引擎，但现在Opera也改为使用WebKit引擎

🎉 随着浏览器的更新，大多数新版本浏览器已经支持不带前缀的写法。

🎉 为了简化开发过程，可以使用Autoprefixer这样的工具来自动添加和管理浏览器私有前缀，从而实现跨浏览器的CSS3特性兼容

三：新增内容

1：新增长度单位

这是之前涉及到的单位：

单位说明
像素px基于屏幕分辨率的固定单位，通常用于网页设计
百分比%相对于父元素的百分比，常用于响应式设计
em相对于当前元素的字体大小。如果当前元素的字体大小是16px，那么1em等于16px

CSS3新增了许多长度单位，这些单位提供了更多的灵活性和精确性，适用于不同的布局需求

单位说明
rem(root em)rem是相对于根元素（通常是<html>）的字体大小。假设根元素的字体大小为16px，则1rem等于16px
vw (viewport width)vw是视口宽度的百分比。1vw等于视口宽度的1%
vh (viewport height)vh是视口高度的百分比。1vh等于视口高度的1%
vmin (viewport minimum)vmin是视口宽度和高度中较小值的百分比。1vmin等于视口较小尺寸的1%
vmax (viewport maximum)vmax是视口宽度和高度中较大值的百分比。1vmax等于视口较大尺寸的1%
html {
    font-size: 16px;
}
h1 {
    font-size: 2rem; /* 32px */
}

.container {
    width: 50vw; /* 视口宽度的50% */
}

.full-height {
    height: 100vh; /* 视口高度的100% */
}

.min-size {
    width: 50vmin; /* 视口较小尺寸的50% */
}

.max-size {
    width: 50vmax; /* 视口较大尺寸的50% */
}

2：新增盒子属性

CSS3在盒子模型方面新增了一些属性，这些属性极大地丰富了网页的样式设计，提供了更多的灵活性和控制能力

属性名说明
box-sizing控制盒模型的大小计算方式
box-shadow为元素添加阴影效果
resize控制元素的大小调整
opacity设置元素的透明度

box-sizing -> 控制盒模型的大小计算方式

属性值说明
content-box(默认)盒子的宽度和高度只包括内容区（content），不包括内边距（padding）和边框（border）
border-box盒子的宽度和高度包括内容区、内边距和边框。这意味着设置了padding和border后，盒子不会变大
.box1 {
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 5px solid red;
    box-sizing: content-box; /* 默认值，盒子会变大 */
}
.box2 {
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 5px solid red;
    box-sizing: border-box; /* 盒子不会变大 */
}

🎉 border-box特别适用于响应式设计，可以避免因padding和border而导致的布局问题

box-shadow -> 为元素添加阴影效果。可以设置水平阴影、垂直阴影、模糊距离、阴影大小和阴影颜色

box-shadow: h-offset v-offset blur spread color inset;
参数名称说明
水平阴影（h-offset）定义阴影的水平偏移量。正值向右偏移，负值向左偏移
垂直阴影（v-offset）定义阴影的垂直偏移量。正值向下偏移，负值向上偏移
模糊距离（blur）定义阴影的模糊程度。值越大，阴影越模糊
阴影大小（spread）定义阴影的扩展大小。正值使阴影扩大，负值使阴影缩小
阴影颜色（color）定义阴影的颜色。可以使用任何有效的CSS颜色值
内阴影(inset)可选关键字，用于将阴影改为内阴影。默认为外阴影，使用inset时为内阴影
.shadow-box {
    width: 100px;
    height: 100px;
    background-color: #f0f0f0;
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.5);
}

resize -> 控制元素的大小调整。可以设置为none、both、horizontal、vertical等值

属性值介绍
none元素不能被用户调整大小
both元素能沿水平方向和垂直方向被用户调整大小
horizontal元素只能沿水平方向被用户调整大小
vertical元素只能沿垂直方向被用户调整大小

opacity -> 设置元素的透明度。值范围从0（完全透明）到1（完全不透明）

.transparent-box {
    width: 100px;
    height: 100px;
    background-color: rgba(0,0,255,0.5);
    opacity: 0.5;
}

3：新增背景属性

CSS3为网页设计和布局带来了许多新的背景属性，这些属性提供了更多的灵活性和控制能力

属性名说明
background-image允许你为元素添加一个或多个背景图像
background-size指定背景图像的大小
background-repeat控制背景图像的重复方式
background-origin定义了背景图像的定位区域
background-clip用于确定背景图像的裁剪区域
background-attachment控制背景图像是否随页面滚动
background-position设置背景图像的位置
background简写属性，允许一次性设置所有背景相关的属性
.multiple-backgrounds {
    background-image: url('image1.jpg'), url('image2.jpg'); /* 添加多个背景图像 */
}


.cover {
    background-size: cover; /* 覆盖整个元素，保持图像的宽高比 */
}
.contain {
    background-size: contain; /* 包含整个图像，保持图像的宽高比 */
}
.fixed-size {
    background-size: 100px 150px; /* 设置背景图像的具体宽度和高度 */
}


.round {
    background-repeat: round; /* 背景图像自动缩放以适应空间，不会裁剪图像 */
}
.space {
    background-repeat: space; /* 背景图像平铺时保持相同的间距 */
}
.no-repeat {
    background-repeat: no-repeat; /* 不重复背景图像 */
}


.padding-box {
    background-origin: padding-box; /* 背景图像相对于内边距框来定位 */
}
.border-box {
    background-origin: border-box; /* 背景图像相对于边框盒来定位 */
}
.content-box {
    background-origin: content-box; /* 背景图像相对于内容框来定位 */
}


.border-clip {
    background-clip: border-box; /* 背景被裁剪到边框盒 */
}
.padding-clip {
    background-clip: padding-box; /* 背景被裁剪到内边距框 */
}
.content-clip {
    background-clip: content-box; /* 背景被裁剪到内容框 */
}
.text-clip {
    background-clip: text; /* 背景被裁剪成文字的前景色 */
}


.fixed-background {
    background-attachment: fixed; /* 当页面滚动时，背景图像不会移动 */
}


.multiple-positions {
    background-position: right top, left bottom; /* 为多个背景图像设置位置 */
}

.complex-background {
    background: url('image.jpg') no-repeat center center fixed; /* 简写属性 */
}

4：新增边框属性

CSS3引入了一些新的边框属性，提供了更丰富的边框样式和效果

属性说明
border-radius用于创建圆角边框。它可以应用于一个或多个角，并且可以接受一个或两个值
.rounded-corners {
    border-radius: 10px; /* 所有角 */
}
.rounded-top-left {
    border-radius: 10px 0 0 0; /* 左上角 */
}
.rounded-corners-elliptical {
    border-radius: 10px / 5px; /* 椭圆形角 */
}

5：新增文本属性

属性说明
text-shadow设置文本阴影
text-overflow设置文本覆盖溢出
word-break设置断行规则
text-decoration设置文本装饰
white-space设置空白符和换行符号

text-shadow

.text-shadow {
    /* 四个属性值分别是：h_offset, v_offset, blur-radius, color */
    text-shadow: 2px 2px 4px #000000;
}
  • h_offset -> 水平阴影的位置，可以是正数或负数 -> 必须
  • v_offset -> 垂直阴影的位置，可以是正数或负数 -> 必须
  • blur_radius -> 阴影的模糊半径，值越大，阴影越模糊 -> 可选
  • color -> 阴影的颜色，如果没有指定，将会使用文本的颜色

text-overflow

⚠️ 要使 text-overflow 属性生效，块容器必须显式定义 overflow 为非 visible 值，white-space 为 nowrap 值

.text-overflow {
    text-overflow: clip; /* 直接裁剪文本 */
    text-overflow: ellipsis; /* 显示省略符号来代表被裁剪的文本 */
}

word-break

属性值说明
normal保持默认的断行行为
break-all允许在单词内部进行换行
keep-all防止在中文、日文和韩文文本中的单词断开
.word-break {
    word-break: normal; /* 默认值，使用默认的断行规则 */
    word-break: break-all; /* 允许在单词内换行 */
    word-break: keep-all; /* 只能在半角空格或连字符处换行 */
}

text-decoration

属性名可选值说明
text-decoration-line文本装饰的线条位置如 underline, overline, line-through, 或 blink
text-decoration-style文本装饰的线条样式如 solid, double, dotted, dashed, 或 wavy
text-decoration-color文本装饰的线条颜色
.text-decoration {
    text-decoration-line: underline; /* 下划线 */
    text-decoration-style: solid; /* 实线 */
    text-decoration-color: blue; /* 颜色 */
}

white-space

white-space属性对于控制文本格式非常有用，特别是在处理诗歌、代码块或任何需要精确控制空白的文本时

  • 如果你不希望合并多个空格或忽略换行，可以使用 pre 或 pre-wrap 值。
  • 如果你希望文本始终在一行显示，可以使用 nowrap
属性值说明
normal连续的空白符会被合并，换行符也会被当作空白符来处理。文本会在需要时换行
nowrap防止文本换行，直到遇到 <br> 标签为止
pre保留空白符和换行符，文本的行为类似于 <pre> 标签
pre-warp保留空白符序列，但是允许文本正常换行
pre-line合并空白符序列，但保留换行符

6：新增渐变属性

CSS3引入了两种类型的渐变：线性渐变（linear-gradient）和径向渐变（radial-gradient）。

这些渐变可以用于背景图像，为网页元素提供平滑的颜色过渡效果

属性说明
linear-gradient线性渐变是指沿着一条直线逐渐过渡两个或多个颜色
radial-gradient径向渐变是指从中心点向外（或向内）逐渐过渡两个或多个颜色
repeating-linear-gradient创建了重复的线性渐变和径向渐变，颜色在指定的长度内重复
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .linear-gradient1 {
            background-image: linear-gradient(to right, red, yellow);
        }

        /* 创建一个从左到右的渐变，从红色过渡到黄色，还可以指定角度 */
        .linear-gradient2 {
            background-image: linear-gradient(45deg, red, yellow);
        }

        /* 添加多个颜色停止点 */
        /* 这里，颜色会在指定的百分比位置开始过渡 */
        .linear-gradient3 {
            background-image: linear-gradient(to right, red, orange 20%, yellow 40%, green 60%, blue 80%);
        }

        /* 径向渐变 */
        /* 这会创建一个从中心点开始，颜色从红色过渡到黄色，再到绿色的圆形渐变 */
        .radial-gradient1 {
            background-image: radial-gradient(circle, red, yellow, green);
        }

        /* 重复渐变 */
        /* 创建了重复的线性渐变和径向渐变，颜色在指定的长度内重复 */
        .repeating-linear-gradient1 {
            background-image: repeating-linear-gradient(45deg, red, red 10px, yellow 10px, yellow 20px);
        }
        .repeating-radial-gradient1 {
            background-image: repeating-radial-gradient(circle, red, red 10px, yellow 10px, yellow 20px);
        }
    </style>
</head>
<body>
    <div class="linear-gradient1">
        <p>哈哈哈</p>
    </div>
    <div class="linear-gradient2">
        <p>哈哈哈</p>
    </div>
    <div class="linear-gradient3">
        <p>哈哈哈</p>
    </div>
    <div class="radial-gradient1">
        <p>哈哈哈</p>
    </div>
    <div class="repeating-linear-gradient1">
        <p>哈哈哈</p>
    </div>
    <div class="repeating-radial-gradient1">
        <p>哈哈哈</p>
    </div>
</body>
</html>

在这里插入图片描述

四：web字体和字体图标

1：web字体

CSS3引入了@font-face规则，它允许网页设计师使用在线字体，而不仅仅限于用户计算机上已经安装的字体。

这意味着设计师可以使用更多样化的字体，而不必担心它们是否在用户的系统中可用

  1. 选择字体文件 -> 通常，你会需要不同格式的字体文件来确保跨浏览器的兼容性。
  2. 在服务器上托管字体文件 -> 将字体文件上传到你的服务器，或者使用CDN服务
  3. 定义@font-face规则 -> 在CSS中，使用@font-face规则来定义字体名称和来源
  4. 使用定义的字体 -> 在CSS的其他部分，你可以像使用常规字体一样使用@font-face中定义的字体
@font-face {
    /* 定义了一个字体名称，你可以随意命名 */
    font-family: 'MyCustomFont';
    /* 指定了字体文件的路径和格式。列出多个格式是为了兼容不同的浏览器 */
    /* format指示了字体的格式，这对于浏览器来说是很重要的，因为它需要知道如何解析字体文件 */
    src: url('path/to/font.woff2') format('woff2'),
        url('path/to/font.woff') format('woff'),
        url('path/to/font.ttf') format('truetype');
    /* 定义了字体的粗细和样式。你可以根据实际的字体文件提供不同的变体 */
    font-weight: normal;
    font-style: normal;
}

/* 使用自定义字体 */
body {
    font-family: 'MyCustomFont', Fallback, sans-serif;
}

注意事项

  • 版权问题：在使用任何字体之前，请确保你有权利将其用于网页上。许多字体是受版权保护的，可能需要购买许可

  • 性能考虑：字体文件可能很大，过多的使用或不当的使用可能会影响页面的加载时间。确保只加载需要的字体样式和权重

  • 兼容性：虽然大多数现代浏览器都支持@font-face，但为了更好的兼容性，列出多个字体格式仍然是一个好习惯

2：字体图标

CSS3中的字体图标是通过使用@font-face规则和特定的图标字体库来实现的。

字体图标是一种将图标作为字体来使用的技术

这样就可以像操作文字一样操作图标，包括改变颜色、大小、阴影等效果，而不需要使用图片

优点

  • 可缩放性：字体图标可以无损地放大或缩小，不会失真
  • 灵活性：可以像文本一样通过CSS进行样式定制
  • 兼容性：支持所有现代浏览器，并且可以很好地与响应式设计配合
  • 减少HTTP请求：使用字体图标可以减少页面的HTTP请求，因为多个图标可以包含在一个字体文件中

缺点

  • 渲染问题：在某些浏览器或操作系统上，字体图标的渲染可能会有轻微的不同
  • 字体加载：如果字体文件很大，可能会影响页面的加载速度

五：2D变换和3D变换

1：2D变换

1.1：位移变换(translate)

CSS3的2D变换中的位移功能允许元素在二维平面上移动，而不会影响到文档流中的其他元素。

位移可以通过transform属性中的translate函数实现

函数说明
translateX(tx)仅沿X轴移动元素，tx可以是像素值或百分比
translateY(ty)仅沿Y轴移动元素，ty可以是像素值或百分比
translate(tx, ty)同时沿X轴和Y轴移动元素，tx和ty可以是像素值或百分比

当使用百分比作为参数时，translateX的百分比是相对于元素自身的宽度计算的；translateY的百分比是相对于元素自身的高度计算的

/* 沿X轴移动元素自身宽度的50% */
.translate-x-percentage {
    transform: translateX(50%);
}
/* 沿Y轴移动元素自身高度的25% */
.translate-y-percentage {
    transform: translateY(25%);
}
/* 沿X轴移动元素自身宽度的25%，沿Y轴移动元素自身高度的50% */
.translate-xy-percentage {
    transform: translate(25%, 50%);
}

注意事项

  • 位移与相对定位很相似，不会脱离文档流，不会改变元素的布局位置，即不会影响其他元素的位置
  • 使用百分比进行位移时，元素必须具有明确的宽度和高度
1.2：缩放变换(scale)

CSS3的2D变换中的缩放功能允许您改变元素的尺寸，即放大或缩小元素。

缩放是通过transform属性中的scale函数实现的，它可以改变元素的宽度和高度。

函数说明
scaleX(sx)仅沿X轴缩放元素，sx是一个数值，表示缩放的比例
scaleY(sy)仅沿Y轴缩放元素，sy是一个数值，表示缩放的比例
scale(sx, sy)同时沿X轴和Y轴缩放元素，sx和sy是数值，分别表示X轴和Y轴的缩放比例
/* X轴放大2倍 */
.scale-x {
    transform: scaleX(2);
}
/* Y轴缩小到原来的一半 */
.scale-y {
    transform: scaleY(0.5);
}
/* 同时在X轴和Y轴放大1.5倍 */
.scale-xy {
    transform: scale(1.5);
}

注意事项

  • 缩放对行内元素（Inline elements）无效
  • scale(sx, sy)中如果只提供一个值，则表示X轴和Y轴的缩放比例相同
  • 缩放变换不会影响元素的布局位置，即不会改变元素在文档流中的位置
  • 缩放变换会影响元素的视觉效果，包括字体大小、边框宽度等
1.3：旋转变换(rotate)

在CSS3的2D变换中，rotate 和 rotateZ 函数都可以用来实现元素的旋转效果。

虽然它们在技术上用于3D变换，但在2D上下文中，它们的作用是相同的，因为旋转是围绕垂直于视口的Z轴进行的

rotate

围绕元素的中心点旋转元素 -> 它接受一个角度值作为参数，该角度可以是正数（顺时针旋转）或负数（逆时针旋转）

/* 旋转元素45度 */
.element {
    transform: rotate(45deg);
}

rotateZ

rotateZ 函数实际上是3D变换的一部分，但在2D上下文中，它等同于rotate函数，因为旋转是围绕Z轴（垂直于屏幕的轴）进行的。

在2D变换中，使用rotateZ和使用rotate得到的效果是一样的

/* 使用rotateZ旋转元素90度 */
.element {
    transform: rotateZ(90deg);
}

在2D变换中，rotate 和 rotateZ 的区别实际上并不大，因为它们都实现了相同的旋转效果

然而，在3D变换的上下文中，rotateZ 明确指出了旋转是围绕Z轴进行的，而 rotate 可能会被误解为可以是X轴或Y轴的旋转

1.4：多重变换
/* 元素首先会沿X轴移动50像素，沿Y轴移动100像素，然后围绕其中心旋转45度 */
.element {
    transform: translate(50px, 100px) rotate(45deg);
}

/* 元素首先被放大到原来的1.5倍，然后沿X轴平移50像素 */
.element {
    transform: scale(1.5) translate(50px, 0);
}

/* 元素首先缩小到原来的0.8倍，然后旋转45度，最后平移 */
.element {
    transform: scale(0.8) rotate(45deg) translate(100px, 50px);
}

⚠️ 变换函数的顺序很重要。例如，旋转和平移的组合会根据旋转的顺序产生不同的结果。如果你先平移再旋转，元素会围绕其原始位置旋转；如果你先旋转再平移，元素会围绕其旋转后的位置平移

1.5：变换原点(transform-origin)

在CSS3的2D变换中，变换原点（transform origin）是指应用变换（如旋转、缩放、倾斜等）时的固定点。

默认情况下，变换原点是元素的中心点

可以使用 transform-origin 属性来改变原点

如果你旋转一个元素，它将围绕变换原点旋转。如果你缩放一个元素，它将沿着变换原点进行缩放

.element {
    transform-origin: top left; /* 变换原点位于元素的左上角 */
}

.element {
    transform-origin: 50% 50%; /* 变换原点位于元素的中心（默认值） */
}

.element {
    transform-origin: 20px 30px; /* 变换原点位于元素左上角向右20px，向下30px的位置 */
}

.element {
    transform: rotate(45deg);
    transform-origin: bottom right; /* 元素将围绕其右下角旋转 */
}

2：3D变换

在CSS3中，3D变换允许你在一个三维空间内操作元素。

为了启用3D变换并创建一个三维空间，你需要设置元素的 transform-style 属性为 preserve-3d。

2.1：景深和透视点

景深

此外，为了增加三维效果的真实感，可以使用 perspective 属性来设置景深

景深（perspective）属性定义了观察者与z=0平面的距离，这会影响3D变换元素的透视效果。

景深值越大，3D效果越不明显；景深值越小，3D效果越明显

在这里插入图片描述

.parent-element {
    transform-style: preserve-3d;
}

.parent-element {
  perspective: 1000px; /* 观察者距离z=0平面的距离为1000px */
}

透视点的位置

在CSS3的3D变换中，透视点（Perspective）是观察者眼睛的位置，它决定了元素在3D空间中的视觉表现

perspective-origin 属性可以用来改变透视点的位置。

默认情况下，透视点位于元素的中心的正前方，可以通过 perspective-origin 来改变它的水平（x轴）和垂直（y轴）位置

.parent-element {
    perspective: 1000px;
    perspective-origin: 50% 50%; /* 默认值，透视点位于中心 */
}
/* 或者你可以改变透视点的位置 */
.parent-element {
    perspective: 1000px;
    perspective-origin: left top; /* 透视点位于左上角 */
}
2.2：位移变换(translate)

在CSS3中，3D变换的位移可以通过 translate3d() 函数或其分解的函数 translateX(), translateY(), 和 translateZ() 来实现。

这些函数允许沿X轴、Y轴和Z轴移动元素

函数说明
translateX(tx)仅沿X轴移动元素，tx可以是像素值或百分比
translateY(ty)仅沿Y轴移动元素，ty可以是像素值或百分比
translateZ(tz)仅沿Z轴移动元素，tz可以是像素值或百分比
translate3D(tx, ty, tz)接受三个参数，分别对应X轴、Y轴和Z轴的位移量
.transformed-element {
  transform: translateX(100px);
}

.transformed-element {
  transform: translateZ(100px);
}

.transformed-element {
    transform: translate3d(100px, 50px, 100px);
}
2.3：旋转变换(rotate)

在CSS3中，3D变换的旋转可以通过以下函数实现：rotateX(), rotateY(), 和 rotateZ()（或简写为 rotate3d()）。

这些函数允许你沿不同的轴旋转元素

函数说明
rotateX(deg)接受一个角度值作为参数，用于沿X轴旋转元素
rotateY(deg)接受一个角度值作为参数，用于沿Y轴旋转元素
rotateZ(deg)接受一个角度值作为参数，用于沿Z轴旋转元素
rotateZ() 函数与2D变换中的 rotate() 函数相同，因为Z轴旋转在2D空间中与平面旋转相同
rotate3D(x, y, z, deg)允许你沿着一个自定义的轴(前三个属性确定一个向量)进行旋转
.transformed-element {
    transform: rotateZ(45deg); /* 平面绕中心旋转45度，因为和2D中的rotate函数一样 */
}

.transformed-element {
    transform: rotate3d(1, 1, 1, 45deg); /* 元素将沿着向量 (1, 1, 1) 指定的轴旋转45度 */
}
2.4：缩放变换(scale)
函数说明
scaleX(倍数)用于沿X轴缩放元素。如果数值大于1，元素会在X轴方向上放大；如果数值小于1，元素会在X轴方向上缩小
scaleY(倍数)用于沿Y轴缩放元素。如果数值大于1，元素会在Y轴方向上放大；如果数值小于1，元素会在Y轴方向上缩小
scaleZ(倍数)用于沿Z轴缩放元素。在3D空间中，这会影响元素的深度
scale3d(x, y, z)分别对应X轴、Y轴和Z轴的缩放比例
.transformed-element {
    transform: scale3d(2, 1.5, 1); /* X轴放大2倍，Y轴放大1.5倍，Z轴不变 */
}
2.5：多重变换

在CSS3中，3D变换可以通过组合多个变换函数来实现多重变换。

这些变换函数可以包括旋转（rotateX, rotateY, rotateZ）、缩放（scaleX, scaleY, scaleZ）、位移（translateX, translateY, translateZ）等

多重变换的顺序会影响最终的结果，因为每个变换都是相对于前一个变换的状态来应用的

多重变换时，建议将旋转放到最后

/* 元素首先沿X轴旋转30度，然后在X轴和Y轴上放大1.5倍，最后沿着Z轴移动50px */
.transformed-element {
    transform: rotateX(30deg) scale3d(1.5, 1.5, 1) translateZ(50px);
}


/* 元素首先沿X轴移动50px，然后沿Y轴移动30px，接着绕Z轴旋转90度，最后在Z轴上放大2倍 */
.transformed-element {
    transform: translateX(50px) translateY(30px) rotateZ(90deg) scaleZ(2);
}
2.6：背面可见性(backface-visibility)

在CSS3的3D变换中，backface-visibility 属性用于控制元素的背面在旋转到不可见时是否可见。

这个属性对于创建3D效果非常有用，尤其是当你想要元素在旋转时只显示其正面，而不显示背面时

属性值说明
visible背面是可见的（默认值）
hidden背面是不可见的

六：过渡和动画

1：过渡(transition)

1.1：决定过渡的属性

CSS3中的过渡（Transition）是一种可以实现平滑属性值变化的特效

它允许你在指定的时间内平滑地改变元素的CSS属性值，而不需要使用JavaScript或其他动画技术

过渡效果由以下四个属性控制：

属性说明
transition-property指定应用过渡效果的CSS属性名称
transition-duration过渡效果持续的时间
transition-timing-function过渡效果的时间曲线
transition-delay过渡效果开始前的延迟时间
transition复合属性

transition-property

指定哪个或哪些CSS属性将会有过渡效果。可以是以下值：

  • none: 没有属性会获得过渡效果
  • all: 所有可动画属性都将获得过渡效果
  • 属性名称: 指定一个或多个以逗号分隔的属性名称，如 width, height

transition-duration

定义过渡效果持续的时间，单位为秒（s）或毫秒（ms）

  • 0.5s: 过渡效果持续0.5秒
  • 200ms: 过渡效果持续200毫秒

transition-timing-function

定义过渡效果的速度曲线。常见的值有：

  • linear: 匀速
  • ease: 默认值，慢速开始，然后变快，最后慢速结束
  • ease-in: 慢速开始
  • ease-out: 慢速结束
  • ease-in-out: 慢速开始和结束
  • cubic-bezier(n, n, n, n): 自定义时间曲线，n为0到1之间的数值 -> https://cubic-bezier.com

在这里插入图片描述

transition-delay

定义过渡效果开始前的延迟时间，单位为秒（s）或毫秒（ms）

  • 1s: 过渡效果延迟1秒后开始
  • 500ms: 过渡效果延迟500毫秒后开始

transition

可以将上述四个属性合并为一个简写属性 transition，格式如下：

transition: transition-property transition-duration transition-timing-function transition-delay;

/* 例如 */
transition: width 2s ease 0.5s;
  • 如果只设置了一个时间，该时间表示 transition-duration，其他值没有顺序要求
  • 如果设置了两个时间，第一个时间表示 transition-duration，第二个时间表示 transition-delay，其他值没有顺序要求
1.2：哪些CSS属性可以发生过渡

对于判断哪些css属性是可以发生过渡的，哪些不能 -> 可动画性 & 连续性 & 规范定义

  • 可动画性：属性是否能够在不同的值之间平滑过渡，而不是突然跳变
  • 连续性：属性的值是否可以连续变化，而不是离散的几个固定值
  • 规范定义：CSS动画规范（如CSS Transitions或CSS Animations）是否将属性定义为可动画的

颜色属性：

标准：能够平滑地从一种颜色渐变到另一种颜色
示例：color, background-color, border-color, opacity（虽然不是颜色，但可以渐变）

数值属性：

  • 标准：能够接受数值，并且这些数值可以逐渐变化
  • 示例：width, height, margin, padding, border-width, font-size, line-height

百分比属性：

  • 标准：基于百分比的属性，其值可以逐渐变化
  • 示例：width, height, top, right, bottom, left（当使用百分比时）

长度属性：

  • 标准：基于长度单位（如px, em, rem）的属性，其值可以逐渐变化
  • 示例：margin, padding, border-width, font-size

变换属性（Transform properties）：

  • 标准：用于2D或3D变换的属性，可以平滑地从一个状态变换到另一个状态
  • 示例：transform（包括translate, rotate, scale等）

阴影属性：

  • 标准：可以平滑地改变阴影效果
  • 示例：text-shadow, box-shadow

其他可动画属性：

  • 标准：规范中明确指出可以动画化的其他属性
  • 示例：background-position, opacity, visibility（从visible到hidden或相反）
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>过渡</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                font-family: 'Segoe UI', system-ui, sans-serif;
            }

            body {
                background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
                min-height: 100vh;
                padding: 40px;
            }

            .product-grid {
                display: grid;
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
                gap: 30px;
                max-width: 1200px;
                margin: 0 auto;
            }

            .product-card {
                background: white;
                border-radius: 15px;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
                overflow: hidden;
                position: relative;
                transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    box-shadow 0.4s ease;
                min-height: 580px;
            }

            .product-card:hover {
                transform: translateY(-10px);
                box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
            }

            .product-image {
                height: 240px;
                overflow: hidden;
                position: relative;
            }

            .product-image img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.4s ease;
            }

            .product-card:hover .product-image img {
                transform: scale(1.05);
            }

            .product-tag {
                position: absolute;
                top: 15px;
                right: 15px;
                background: #ff4757;
                color: white;
                padding: 6px 15px;
                border-radius: 20px;
                font-size: 14px;
                transition: all 0.3s ease;
            }

            .product-card:hover .product-tag {
                background: #ff6b81;
                transform: scale(1.05);
            }

            .product-content {
                padding: 25px;
                position: relative;
            }

            .product-title {
                font-size: 1.4em;
                color: #2d3436;
                margin-bottom: 12px;
                transition: color 0.3s ease;
            }

            .product-description {
                color: #636e72;
                line-height: 1.6;
                margin-bottom: 20px;
                height: 80px;
                overflow: hidden;
            }

            .product-price {
                font-size: 1.8em;
                color: #2ecc71;
                font-weight: bold;
                margin-bottom: 20px;
                position: relative;
                transition: all 0.4s ease;
            }

            .product-card:hover .product-price {
                transform: translateX(10px);
                color: #27ae60;
            }

            .cta-button {
                display: inline-block;
                padding: 12px 30px;
                background: linear-gradient(135deg, #6c5ce7, #a8a4e6);
                color: white;
                border-radius: 25px;
                text-decoration: none;
                font-weight: 500;
                opacity: 0;
                transform: translateY(10px);
                transition: all 0.4s ease 0.1s;
                position: absolute;
                bottom: -30px;
                right: 25px;
            }

            .product-card:hover .cta-button {
                opacity: 1;
                transform: translateY(0);
            }

            .rating {
                display: flex;
                gap: 3px;
                margin-bottom: 15px;
            }

        </style>
    </head>
    <body>
        <div class="product-grid">
            <div class="product-card">
                <div class="product-image">
                    <span class="product-tag">限时优惠</span>
                    <img src="https://img0.baidu.com/it/u=3855146400,3736016131&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
                         alt="智能手表">
                </div>
                <div class="product-content">
                    <h3 class="product-title">ProX 智能手表4代</h3>
                    <div class="rating">
                        ★★★★★
                    </div>
                    <p class="product-description">
                        全新AMOLED显示屏，支持血氧检测和睡眠监测，50米防水设计，长达14天续航时间，支持NFC移动支付。
                    </p>
                    <div class="product-price">¥1,299</div>
                    <a href="#" class="cta-button">立即购买</a>
                </div>
            </div>

            <div class="product-card">
                <div class="product-image">
                    <span class="product-tag">新品上市</span>
                    <img src="https://img2.baidu.com/it/u=4080671067,902558169&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"
                         alt="无线耳机">
                </div>
                <div class="product-content">
                    <h3 class="product-title">SoundMax 降噪耳机Pro</h3>
                    <div class="rating">
                        ★★★★☆
                    </div>
                    <p class="product-description">
                        主动降噪技术，通透模式自由切换，24小时总续航，IPX5防水等级，支持无线充电和快速配对。
                    </p>
                    <div class="product-price">¥899</div>
                    <a href="#" class="cta-button">立即购买</a>
                </div>
            </div>

            <div class="product-card">
                <div class="product-image">
                    <span class="product-tag">限量版</span>
                    <img src="https://img0.baidu.com/it/u=2950622251,808370824&fm=253&fmt=auto&app=138&f=JPEG?w=666&h=666" alt="相机">
                </div>
                <div class="product-content">
                    <h3 class="product-title">Z-Cam 全画幅微单</h3>
                    <div class="rating">
                        ★★★★★
                    </div>
                    <p class="product-description">
                        2400万像素全画幅传感器，4K 60帧视频拍摄，五轴防抖系统，双卡槽设计，专业级log模式。
                    </p>
                    <div class="product-price">¥12,999</div>
                    <a href="#" class="cta-button">立即购买</a>
                </div>
            </div>
        </div>
    </body>
</html>

在这里插入图片描述

2：动画

2.1：帧和关键帧

帧

帧是动画的基本单元，它代表动画在某一特定时刻的静态图像。

在传统的动画制作中，帧是由动画师手绘的一系列连续的画面，每一帧都是动画序列中的一个步骤。

在数字动画中，帧通常是指数字图像或图形，它们按照一定的顺序快速连续显示，以产生运动的错觉

帧的主要特点：

  • 静态图像：每一帧都是一个完整的图像，显示动画在特定时间点的状态
  • 连续性：帧按顺序排列，连续播放时形成动画
  • 时间间隔：帧与帧之间的时间间隔决定了动画的流畅度，通常以帧率（如每秒24帧）来衡量

关键帧

关键帧是在动画中定义的特定帧，它们标记了动画中重要的变化点。

在这些帧上，动画的某些属性（如位置、大小、颜色等）会发生显著的变化。

关键帧之间的动画过渡是由动画软件或渲染引擎自动生成的，从而形成平滑的动画效果

关键帧的主要特点：

  • 变化点：关键帧定义了动画中属性值发生变化的时刻
  • 过渡生成：关键帧之间的动画是由系统自动计算生成的，减少了手动创建每一帧的工作量
  • 控制性：通过调整关键帧的位置和属性，可以精确控制动画的整体效果和节奏
2.2：@keyframes

CSS3的动画功能允许开发者创建复杂且流畅的动画效果，而不需要依赖于JavaScript。

CSS3动画是通过@keyframes规则和动画属性来实现的

@keyframes规则用于创建动画。

它定义了动画在不同阶段的状态，这些状态被称为关键帧（keyframes）。

每个关键帧都包含一个百分比值，对应动画过程中的一个特定时间点

@keyframes example {
    0% { /* 初始状态样式 */ }
    50% { /* 中间状态样式 */ }
    100% { /* 结束状态样式 */ }
}

在@keyframes中，你可以定义多个关键帧，并且可以使用关键字from和to来代替0%和100%

2.3：动画属性

animation-name -> 指定应用动画的@keyframes的名称

  • <identifier>：由@keyframes定义的动画名称
  • none：不应用任何动画

animation-duration -> 设置动画完成一个周期所花费的时间

  • <time>：时间值，表示动画持续的时间，单位为秒(s)或毫秒(ms)，默认值为0s，即没有动画

animation-timing-function -> 定义动画的速度曲线

  • linear：动画从头到尾的速度是恒定的
  • ease：默认值，动画以慢速开始，然后加快，最后慢速结束
  • ease-in：动画以慢速开始
  • ease-out：动画以慢速结束
  • ease-in-out：动画以慢速开始和结束
  • cubic-bezier(<number>, <number>, <number>, <number>)：允许自定义时间曲线，四个数值分别代表两个控制点的坐标

animation-delay -> 设置动画在开始前的延迟时间

  • <time>：时间值，表示动画开始前等待的时间，默认值为0s，即无延迟

animation-iteration-count -> 设置动画应该播放的次数

  • <number>：数字值，表示动画应该播放的次数
  • infinite：无限循环播放动画

animation-direction -> 指定动画是否应该轮流反向播放

  • normal：动画正常播放
  • reverse：动画反向播放
  • alternate：动画在奇数次正向播放，在偶数次反向播放
  • alternate-reverse：动画在奇数次反向播放，在偶数次正向播放

animation-fill-mode -> 设置动画在执行前后如何为目标元素应用样式

  • none：动画不会影响动画之外的状态
  • forwards：动画完成后保持最后一个关键帧的样式
  • backwards：在动画延迟期间，目标元素将立即应用第一个关键帧的样式
  • both：动画遵循forwards和backwards的规则

animation-play-state -> 暂停和播放动画

  • paused：动画暂停
  • running：播放动画

要将动画应用到元素上，你需要将animation简写属性或单独的动画属性应用到选择器上

.element {
    animation-name: example;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: forwards;
    animation-play-state: running;
}

/* 简写形式 */
.element {
    animation: example 2s ease-in-out 1s infinite alternate forwards running;
}

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>动画</title>
        <style>
            body {
                font-family: 'Arial', sans-serif;
                background-color: #f4f4f4;
                margin: 0;
                padding: 20px;
            }

            .container {
                max-width: 800px;
                margin: auto;
                background: white;
                padding: 20px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            }

            .header {
                text-align: center;
                padding: 20px 0;
            }

            .earth {
                width: 200px;
                height: 200px;
                background: url('https://img2.baidu.com/it/u=4138229010,2946765856&fm=253&fmt=auto&app=138&f=GIF?w=152&h=114') no-repeat center center;
                background-size: cover;
                margin: auto;
                border-radius: 50%;
                box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
                animation: rotate 20s linear infinite;
            }

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

            .content {
                margin-top: 40px;
            }

            .content h2 {
                color: #333;
            }

            .content p {
                color: #666;
                line-height: 1.6;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="header">
                <h1>保护地球，从我做起</h1>
                <div class="earth"></div>
            </div>
            <div class="content">
                <h2>我们的使命</h2>
                <p>
                    地球是我们共同的家园，保护环境就是保护我们自己。我们的使命是通过教育和实际行动，提高公众对环境保护的意识，共同守护这个蓝色星球。</p>

                <h2>环保行动</h2>
                <p>
                    我们倡导低碳生活，减少一次性用品的使用，鼓励垃圾分类，支持可再生能源的开发和利用。每个人的一小步，都是地球的一大步。</p>

                <h2>加入我们</h2>
                <p>如果你也关心地球的未来，欢迎加入我们的行列。无论是参与线上活动，还是线下实践，你的每一份努力都将为地球带来改变。</p>
            </div>
        </div>
    </body>
</html>

在这里插入图片描述

3：过渡和动画的区别

过渡动画
触发方式通常是由一个状态变化触发的，比如用户悬停（hover）、点击或者类名的添加和移除
过渡需要有一个状态变化作为触发点		是通过@keyframes规则定义的一系列关键帧，可以在不需要任何触发事件的情况下自动运行
当然，也可以通过JavaScript或者CSS类来控制动画的开始和结束
控制程度只能控制开始状态和结束状态之间的变化，以及变化的时间和曲线可以控制整个动画过程中的每一个步骤，包括开始、中间和结束状态。
你可以定义多个关键帧，每个关键帧都可以有不同的样式
重复性通常是不可重复的，它们在状态变化时触发，然后结束可以无限次重复，可以通过animation-iteration-count属性来控制重复次数
方向通常是单向的，从初始状态到最终状态可以通过animation-direction属性设置为正向、反向、交替等
复杂度通常用于简单的效果，比如颜色变化、尺寸变化等可以创建更复杂的效果，比如路径运动、多个属性的同时变化等
性能考虑通常性能开销较小，因为它们只处理两个状态之间的变化可能需要更多的计算资源，尤其是当动画复杂或者关键帧很多时

七：多列布局

CSS3的多列布局（Multi-column Layout）允许我们将内容分布在多个列中，类似于报纸或杂志的布局。

这种布局方式使得长篇文章的阅读更加方便，同时也为网页设计提供了更多的灵活性

多列布局的基本属性如下：

属性说明
column-count设置列的数量
column-width设置列的理想宽度。浏览器会根据可用空间和这个值来决定实际的列数
columns这是一个简写属性，可以同时设置column-width和column-count[不推荐使用]
.column-layout {
    column-count: 3; /* 内容将被分为3列 */
}

.column-layout {
    column-width: 200px; /* 列的理想宽度是200px */
}

.column-layout {
    columns: 200px 3; /* 列的理想宽度是200px，至少3列 */
}

其他布局的基本属性如下：

属性说明
column-gap设置列与列之间的间隙
column-rule在列之间设置一条规则（类似于边框），可以设置宽度、样式和颜色
column-span设置元素是否应该跨越所有列
.column-layout {
    column-gap: 20px; /* 列间隙为20px */
    column-rule: 1px solid #ccc; /* 列之间的规则为1px的灰色实线 */
}

.header {
    column-span: all; /* 头部元素跨越所有列 */
}

🎉 如果要插入图片，注意设置图片的宽度是width: 100%，这个是设置当前列的宽度的100%

在这里插入图片描述

八：伸缩盒模型

1：伸缩盒模型概述

伸缩盒模型在移动端使用十分广泛

伸缩盒模型（Flexbox）是CSS3中的一种新的布局模式，旨在提供一种更高效的方式来布局、对齐和分配容器中的空间

即使容器的大小是未知或动态的。

Flexbox主要适用于一维布局，即它可以在一个方向上（水平或垂直）对齐和分布空间

伸缩盒模型有如下的特点：

  1. 灵活性：Flexbox允许容器内的项目灵活地改变大小，以适应不同屏幕尺寸和设备
  2. 对齐方式：提供了强大的对齐能力，可以轻松地实现居中、对齐和分布空间
  3. 方向控制：可以轻松地改变项目的排列方向，从水平变为垂直，或反之
  4. 空间分配：可以自动分配容器内的剩余空间，使布局更加均匀和美观

伸缩盒模型有如下的核心概念

  • Flex容器（Flex Container）：通过设置display: flex;或display: inline-flex;将一个元素变为Flex容器
  • Flex项目（Flex Item）：Flex容器内的直接子元素称为Flex项目
  • 主轴（Main Axis）：Flex项目默认沿水平方向排列，这个方向称为主轴
  • 交叉轴（Cross Axis）：与主轴垂直的方向称为交叉轴

2：容器和项目

伸缩容器

通过设置display: flex;或display: inline-flex;将一个元素变为Flex容器

display: inline-flex;很少使用，因为可以将多个伸缩容器的父容器也设置为伸缩容器

  • 默认情况下，Flex容器的主轴是水平方向，交叉轴是垂直方向
  • Flex容器内的直接子元素自动成为Flex项目
  • Flex容器可以控制其内部Flex项目的布局、对齐和空间分配

伸缩项目

仅伸缩容器的子元素成为了伸缩项目，孙子元素、重孙子元素等后代，不是伸缩项目

无论原来是哪种元素(块、行内块、行内)，一旦成为了伸缩项目，全都会块状化

  • Flex项目可以灵活地改变大小，以适应不同屏幕尺寸和设备
  • Flex项目可以独立地设置对齐方式、顺序和空间分配

3：主轴

在CSS3的伸缩盒模型（Flexbox）中，主轴是Flex容器中Flex项目主要排列的方向。

主轴方向可以通过flex-direction属性来定义

属性值说明
row(默认值)主轴为水平方向，从左到右排列
row-reverse主轴为水平方向，但排列顺序与row相反，从右到左排列
column主轴为垂直方向，从上到下排列
column-reverse主轴为垂直方向，但排列顺序与column相反，从下到上排列

在这里插入图片描述

当Flex容器中的项目超出主轴的可用空间时，可以通过设置换行方式来决定如何处理这些溢出的项目。

设置换行方式主要通过flex-wrap属性来实现，该属性有以下几个可选值：

属性值说明
normal(默认值)不换行。
所有Flex项目都会尝试适应主轴上的单行。
如果空间不足，项目会根据flex-shrink属性进行收缩
wrap换行。
允许Flex项目在主轴上多行排列。
如果当前行空间不足，项目会自动移到下一行
wrap-reverse反向换行。
与wrap类似，也是多行排列，但行的顺序是反向的
即新行会出现在上一行的上方（对于水平主轴）或左侧（对于垂直主轴）

在这里插入图片描述

4：侧轴对齐(align-items)

在CSS3的伸缩盒模型（Flexbox）中，侧轴的对齐方式可以根据容器的单行和多行布局进行不同的设置

单行情况下的侧轴对齐方式

在单行Flex容器中，我们使用align-items属性来控制项目在侧轴上的对齐方式。

以下是align-items属性的常用值及其效果：

属性值说明
stretch(默认值)如果项目未设置高度或设置为auto，将占满整个容器的高度
flex-start项目靠侧轴的起始边对齐
flex-end项目靠侧轴的结束边对齐
center项目在侧轴上居中对齐
baseline项目根据它们的基线对齐

多行情况下的侧轴对齐方式

在多行Flex容器中，我们使用align-content属性来控制行与行之间的对齐方式。

以下是align-content属性的常用值及其效果：

属性值说明
stretch(默认值)各行将占满整个容器的高度
flex-start项目靠侧轴的起始边对齐
flex-end项目靠侧轴的结束边对齐
center项目在侧轴上居中对齐
space-between各行之间留有相等的空间，首行和末行紧贴容器的边缘
space-around各行周围留有相等的空间，包括首行和末行

在这里插入图片描述

5：伸缩盒下的水平垂直居中

方式一：使用justify-content和align-items

通过设置父容器的 justify-content 和 align-items 属性为 center，可以同时实现子元素在水平方向和垂直方向上的居中

.flex-container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

方式二：使用Flexbox的flex和margin属性

当子元素是块级元素时，可以只设置margin: auto;来自动居中

.container {
    display: flex;
}

.child {
    flex: 0 0 auto; /* 不放大也不缩小，保持原始尺寸 */
    margin: auto;   /* 水平和垂直居中 */
}

在Flexbox布局中，flex 是一个复合属性，它可以同时设置 flex-grow、flex-shrink 和 flex-basis 三个子属性

子属性说明
flex-grow定义项目的放大比例，即如果存在剩余空间，项目应该放大的比例。默认值为 0，即如果有剩余空间，也不放大
flex-shrink定义项目的缩小比例，即如果空间不足，项目应该缩小的比例。默认值为 1，即空间不足时，项目将等比例缩小
flex-basis定义了在分配多余空间之前，项目占据的主轴空间（main size）。
它可以设为跟 width 或 height 属性一样的值（如 350px），默认值为 auto，即项目的本来大小

常见简写形式：

  • flex: auto：等同于 flex: 1 1 auto，表示伸缩项目可以自由增长和收缩，flex-basis 为自动大小
  • flex: 1：等同于 flex: 1 1 0，表示伸缩项目可以等比例增长和收缩，flex-basis 为0
  • flex: none：等同于 flex: 0 0 auto，表示伸缩项目既不增长也不收缩，flex-basis 为自动大小
  • flex: 0 auto：等同于 flex: 0 1 auto，表示伸缩项目不增长但可以收缩，flex-basis 为自动大小。这也是 flex 的初始值

6：伸缩项目在主轴上的基准长度

在CSS3的伸缩盒模型（Flexbox）中，伸缩项目（flex item）在主轴上的基准长度是由flex-basis属性控制的。

flex-basis属性定义了伸缩项目在主轴上的初始主尺寸，即在分配剩余空间之前伸缩项目的大小

flex-basis可以接受长度值和关键字：

.flex-item {
    flex-basis: 200px; /* 固定长度 */
}

.flex-item {
    flex-basis: 50%; /* 相对于伸缩容器的百分比 */
}

.flex-item {
    flex-basis: auto; /* 默认值，根据内容大小 */
}

7：伸缩性

伸 -> flow-grow

在CSS3的伸缩盒模型中，"伸"指的是伸缩项目在伸缩容器中有剩余空间时如何扩展以填充这些空间

flex-grow定义了伸缩项目在伸缩容器中分配剩余空间时的增长能力，它接受一个无单位数值，表示扩展的比例。例如，如果所有伸缩项目的flex-grow都设置为1，剩余空间将平均分配给所有项目。如果某个项目的flex-grow值较大，它将获得更多的剩余空间

.flex-item {
    flex-grow: 1; /* 默认值为1 */
}
  • 当伸缩容器的大小超过其内所有伸缩项目的基准长度总和时，剩余空间会被按照各项目的flex-grow值进行分配
  • 这使得伸缩项目能够根据需要扩展，以填满可用空间，从而实现灵活的布局设计

缩 -> flow-shrink

"缩"指的是当伸缩容器空间不足时，伸缩项目如何收缩以适应容器的大小

flex-shrink定义了伸缩项目在伸缩容器空间不足时收缩的能力，它接受一个无单位数值，表示收缩的比例。如果所有伸缩项目的flex-shrink都设置为1，空间不足时它们将平均收缩。如果某个项目的flex-shrink值较小，它将收缩得较少

.flex-item {
    flex-shrink: 1; /* 默认值为1，即可以收缩 */
}
  • 当伸缩容器的大小小于其内所有伸缩项目的基准长度总和时，空间不足的情况发生，伸缩项目将根据各自的flex-shrink值进行收缩
  • 这确保了在空间有限的情况下，伸缩项目能够适应容器的大小，避免溢出或布局破坏

8：项目排序和单独对齐

在Flexbox中，可以使用 order 属性来改变Flex项目的显示顺序。

order 属性接受一个整数作为值，数值越小，项目的位置越靠前，默认值为 0

.flex-item:first-child {
    order: 2; /* 将第一个项目排序为第二个显示 */
}
.flex-item:last-child {
    order: -1; /* 将最后一个项目排序为第一个显示 */
}

单独对齐允许您对Flex容器中的个别项目进行对齐，而不是影响所有项目。

这可以通过 align-self 属性实现，它允许单个项目有与其他项目不同的对齐方式

.flex-item {
    align-self: auto; /* 默认值，继承父容器的 align-items 属性 */
}
.item-align-end {
    align-self: flex-end; /* 单独将项目对齐到侧轴的末端 */
}
.item-align-center {
    align-self: center; /* 单独将项目在侧轴上居中对齐 */
}

9：calc()方法

9.1：语法和使用说明

CSS中的calc()函数是一个非常强大且灵活的工具，它允许在声明CSS属性值时执行计算

使用calc()时，运算符前后必须保留空格，例如calc(100% - 20px)是正确的，而calc(100%-20px)则是错误的

calc()函数允许在指定CSS属性值时使用数学表达式进行计算。

可以用于任何需要<length>, <frequency>, <angle>, <time>, <percentage>, <number>, 或 <integer>值的场景。

基本语法如下：

property: calc(expression);
9.2：使用场景

动态调整宽度

在响应式布局中，calc()可以灵活地处理固定值和百分比的组合，使元素在不同屏幕尺寸下保持合适的宽度。例如：

.container {
    width: calc(100% - 40px); /* 减去左右各20px的内边距 */
    padding: 20px;
}

创建自适应的内边距和外边距

calc()可以让你基于容器的宽度或高度动态计算内边距或外边距。例如：

.element {
    /* 上内边距为10%，右内边距为20px，下内边距为10%，左内边距为20px */
    padding: calc(10%) 20px calc(10%) 20px;
}
9.3：注意事项
  • calc()中的运算符前后必须保留空格，否则会导致计算失败
  • calc()可以嵌套使用，例如calc(calc(100% - 20px) / 2)
  • 在使用calc()时，应确保表达式中的单位是兼容的，例如不能直接将长度单位与时间单位相加

九：响应式布局和BFC

1：响应式布局

响应式布局是现代网页设计中的一个重要概念，它允许网页根据不同设备和屏幕尺寸自动调整其布局和样式。

1.1：媒体查询@media

媒体查询（Media Queries）是实现响应式设计的关键技术之一

在响应式布局中，媒体查询（Media Queries）允许开发者根据不同的媒体类型和特性来应用CSS样式

all -> 所有媒体类型

@media all and (max-width: 600px) {
    /* 样式规则 */
}

print -> 打印文档和打印预览模式

@media print {
    /* 打印样式规则 */
}

screen -> 彩色电脑屏幕、平板电脑、智能手机等

@media screen and (max-width: 768px) {
    /* 屏幕小于768px时的样式规则 */
}
1.2：媒体特性

媒体特性（Media Features）用于检测设备的各种特性并根据这些特性应用不同的CSS样式

媒体特性描述示例
width设备视口的宽度@media (width: 600px)
height设备视口的高度@media (height: 400px)
min-width设备视口的最小宽度@media (min-width: 600px)
max-width设备视口的最大宽度@media (max-width: 600px)
min-height设备视口的最小高度@media (min-height: 400px)
max-height设备视口的最大高度@media (max-height：400px)
device-width设备屏幕的宽度@media (device-width: 800px)
device-height设备屏幕的高度@media (device-height: 600px)
orientation设备是横屏还是竖屏@media (orientation: landscape)
scan电视扫描方式@media (scan: progressive)
grid设备是否使用栅格或点阵屏幕@media (grid)
color设备是否有彩色显示@media (color)
color-index设备颜色索引表中的颜色数@media (color-index: 256)
monochrome设备是否使用单色显示media (monochrome)
prefers-reduced-motion用户是否请求减少动画或运动的效果@media (prefers-reduced-motion: reduce)
prefers-color-scheme用户是否选择了浅色或深色主题@media (prefers-color-scheme: dark)
1.3：媒体运算符

🎉 可以使用and连接符或者or连接符进行条件的整合

/* 横屏且宽度大于等于600px的设备样式 */
@media (min-width: 600px) and (orientation: landscape) {
    /* 样式设置 */
}


/* 宽度大于等于600px或横屏设备的样式 */
@media (min-width: 600px), (orientation: landscape) {
    /* 样式设置 */
}


/* 宽度大于等于600px或横屏设备的样式 */
@media (min-width: 600px) or (orientation: landscape) {
    /* 样式设置 */
}

🎉 not 运算符用于否定整个媒体查询，只有当条件不满足时，样式才会被应用

/* 非打印媒体的样式 */
@media not print {
    /* 样式设置 */
}

🎉 only 运算符用于指定某些样式只应用于符合查询条件的设备，而不包括那些不识别媒体查询的老旧浏览器，这个运算符主要用于兼容性

/* 此媒体查询专门应用于宽度大于等于600像素的屏幕设备，同时避免了在不支持媒体查询的浏览器上应用这些样式 */
@media only screen and (min-width: 600px) {
    /* 样式设置 */
}
1.4：媒体查询常用阈值

响应式布局通常使用媒体查询（Media Queries）来根据不同的屏幕尺寸或设备特性应用不同的样式。

以下是一些常用的屏幕尺寸阈值，它们通常用于设置断点（breakpoints）以实现响应式设计：

设备阈值说明
超小屏幕（手机）< 576px通常用于小屏幕手机
小屏幕（平板手机）>= 576px小屏幕设备，如竖直方向的平板
中等屏幕（平板）>= 768px中等屏幕设备，如横屏方向的平板
大屏幕（桌面显示器）>= 992px大屏幕设备，如标准桌面显示器
超大屏幕（大桌面显示器）>= 1200px超大屏幕设备，如大桌面显示器
/* 超小屏幕手机 (< 576px) */
@media (max-width: 575.98px) {
    /* 样式 */
}
/* 小屏幕平板手机 (≥ 576px) */
@media (min-width: 576px) and (max-width: 767.98px) {
    /* 样式 */
}
/* 中等屏幕平板 (≥ 768px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* 样式 */
}
/* 大屏幕桌面显示器 (≥ 992px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* 样式 */
}
/* 超大屏幕大桌面显示器 (≥ 1200px) */
@media (min-width: 1200px) {
    /* 样式 */
}

这些阈值通常与Bootstrap等前端框架中定义的断点相匹配，但它们可以根据具体项目的需求和设计目标进行调整。

设计师和开发者可能会根据目标用户群体的设备使用情况来设定不同的断点

2：BFC

BFC（Block Formatting Context，块级格式化上下文）是Web页面中块级盒子布局发生的区域

这些盒子按照一定的规则进行排布和定位。

BFC是CSS布局的一部分，它对元素的定位、浮动和清除浮动等行为有着重要的影响

2.1：BFC的创建

以下是一些可以创建BFC的情况：

  • 根元素（<html>）
  • 浮动元素（float 属性不为 none）
  • 绝对定位元素（position 为 absolute 或 fixed）
  • overflow 属性不为 visible 的元素（例如 overflow: hidden、overflow: scroll、overflow: auto）
  • display值为以下之一的元素：
    • inline-block
    • table-cell
    • table-caption
    • flex
    • inline-flex
    • grid
    • inline-grid
  • 多列容器（column-count）
  • display: flow-root; 的元素
2.2：BFC的特性和应用
  • BFC是一个独立的布局单元，内部的元素不会影响外部元素
  • BFC可以包含浮动的元素（清除浮动），防止浮动元素影响外部元素
  • BFC可以阻止垂直外边距折叠。在BFC中，两个相邻的块级元素的垂直外边距不会折叠
  • BFC中的浮动元素不会影响外部元素的布局
  • BFC可以确保元素左边界与其包含块的左边界对齐，即使存在浮动元素也是如此

应用如下

  • 防止浮动元素导致的高度塌陷：通过触发父元素生成BFC，可以包含浮动子元素，从而避免高度塌陷
  • 避免外边距折叠：将元素放在不同的BFC中，可以避免它们之间的垂直外边距折叠
  • 实现两列布局：通过浮动一列元素并触发另一列生成BFC，可以创建两列布局，其中一列自适应内容高度
《web开发： CSS3新特性》
yexiang优快云的专栏
01-21 238
一、CSS3新特性  新增的CSS3特性有兼容性问题，ie9+才支持  移动端支持优于 PC 端  不断改进中  应用相对广泛  现阶段主要学习：新增选择器和盒子模型以及其他特性 2.1 CSS3 的现状 CSS3 给我们新增了选择器，可以更加便捷，更加自由的选择目标元素 1. 属性选择器 2. 结构伪类选择器 3. 伪元素选择器 2.2 属性选择器 属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器。 注意：类选择器、属...
CSS-in-JS：样式管理的新范式与优缺点
天涯学馆
06-22 1196
CSS-in-JS 是一种将CSS样式直接写入JavaScript文件中的技术，打破了传统上样式与结构分离的做法。这种风格在React等现代前端框架中变得流行，提供了动态样式、更好的组件化支持、以及更易于维护的代码结构。
day46-CSS3新增功能
weixin_34081595的博客
08-05 244
CSS3新增功能 1 CSS3选择器详解 1.1 基础选择器 通配选择器* 元素选择器E ID选择器#id CLASS选择器.class 群组选择器select1,selectN 1.2 层次选择器 后代选择器E F 子选择器E>F 相邻兄弟选择器E+F 通用兄弟选择器E~F 1.3 属性选择器 E[attr]选择具有att属性的E元...
《前端面试题：CSS3新特性》
最新发布
前端码农的博客
06-05 1182
本文详细解析了10大核心特性，包含代码示例和常见面试题解答，是掌握现代CSS开发的实用指南。重点推荐Flexbox/Grid布局组合，可解决90%的传统布局难题。
CSS3的新特性
weixin_45086164的博客
03-23 2854
CSS3的新特性
CSS3新增的所有功能
lixiuxiu2017的博客
03-22 2433
对于CSS3新增的所有功能及详细使用方法在我的GitHub上有详细的讲解，详见链接https://github.com/lixiuxiu2017/CSS3这里只是列出CSS3新增的功能概括：1、CSS3介绍2、CSS3新增的超级选择器：属性选择器、结构性伪类选择器、UI元素状态伪类选择器、通用兄弟元素选择器3、使用选择器在页面中插入文字、图片、项目编号等内容4、文字阴影与自动换行5、各种盒模型：总...
CSS3新特性——概述、私有前缀、盒子模型、背景、边框、渐变色
Hdhhdhbsjxbdhvyg的博客
11-13 1322
在C2的基础上，增加了许多强大的新功能，从而解决一些实际面临的问题；C3未来会按照模块化的方式去发展（分为文本、盒子、2D、3D、、）。
CSS3-Click-Chart:新CSS功能的示例代码和支持表
05-26
**正文** ... 随着Web技术的不断发展，CSS3作为层叠样式表的最新版本，不断引入了许多创新和增强的功能，为网页设计提供了更为丰富和灵活的表现力。...持续关注和学习CSS3的新特性，将有助于提升网页设计的质量和效率。
前端学习代码之-css3
04-12
本资源包“前端学习代码之-css3”旨在帮助初学者和进阶者通过实践来掌握CSS3的各种特性。 一、选择器的扩展 CSS3引入了许多新的选择器，如类选择器（.class）、ID选择器（#id）、伪类（:hover, :active, :focus）...
css-refresher-notes：CSS刷新器！
02-05
### CSS3新特性 1. **Flexbox（弹性盒布局）**: Flexbox为创建响应式、动态和灵活的布局提供了一种新的方式。主要属性包括`display: flex`、`flex-direction`、`justify-content`、`align-items`等。 2. **Grid...
css-effects:css特效
03-05
9. CSS3边框和背景：CSS3引入了更多边框样式，如圆角、渐变边框，以及背景图片的平铺、拉伸和定位等新特性。 10. 响应式设计：利用媒体查询（Media Queries），我们可以根据设备特性如屏幕尺寸来应用不同的CSS样式...
CSS3 新增功能
VFrank
09-23 519
# CSS3基础 CSS3是css的升级版本 css是从css1.0、css2.0、css2.1和css3.0这几个版本一直升级而来，其中css2.1是css2.0的修订版，css3。0是最新版 + 我们平常所说的css其实是指css2.1，而css特指相对陈述事实2.1“新增加的属性” + css3.0相对css2.1来说，增加了很多属性和方法，最典型的就是圆角，变形和动画 + 在cs
CSS3新特性汇总
qq_44741577的博客
02-24 1614
CSS3 是 CSS2 的升级版本，它在 CSS2 的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题。
前端开发面试题—CSS3新增特性
黛琳ghz的博客，期待你的关注。
09-01 1769
CSS3是CSS（层叠样式表）技术的升级版本，在CSS2.1的基础上增加了很多强大的新功能，以帮助开发人员解决一些实际面临的问题。使用CSS3不仅可以设计炫酷美观的网页，还能提高网页性能。CSS3的新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等。...............
CSS3新增特性
ee22ee的博客
01-29 833
CSS3新增特性
CSS3 新特性
I'm兰陵王的博客
11-13 1140
CSS3 中的一些重要新特性，它们极大地丰富了 web 开发中的样式设计能力，提供了更多的灵活性和表现力，使得开发者能够更容易地创建美观和响应式的用户界面。
CSS3新特性
太阳与星辰的博客
03-23 1105
CSS3新特性
html5css3新增功能,css3的新增功能
weixin_35844772的博客
06-28 276
css@font-face{font-family: "Raphaelicons";src:url('fonts/Raphaelicons-webfont.eot') format('eot'),url('fonts/Raphaelicons-webfont.ttf') format('truetype'),url('fonts/Raphaelicons-webfont.woff') format...
Css3的新特性和Css3的动画
q880717的博客
02-25 1843
css3比css2多了一些新特性,比如：.nth-child,nth-of-type，first-child,last-child等一些伪类选择器还有圆角：border-radius,盒阴影：box-shadow,渐变:linear gradiendt还有动画：transition(过渡),transform（实现位移(translate)，倾斜(skew)，旋转(rotate)，缩放(scale)）,animation（关键帧动画）配合@keyframes等 以及@media 和flex弹性盒子；
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值