重拾前端基础知识：CSS3

前言
- 边框
- - 圆角
  - 阴影
  - 图片
- 背景
- 渐变
- 文本
- 字体
- 多列
- 动画与过渡
- - 2D 转换
  - 3D 转换
  - 过渡
  - 动画
- 网格布局
- 弹性盒子（重点）
- - 父元素设置
  - 子元素设置
- 响应式设计
- - 设置 Viewport
  - 构建响应式网格视图
  - 12栅格
  - 媒体查询
- 案例讲解
- - 图片
  - 按钮
  - 分页
- 浏览器支持

前言

CSS3 是 CSS 的第三个主要版本，引入了许多新的特性和功能，用于增强样式设计和布局的能力。

边框

圆角

border-radius 是一个用来设置元素边框圆角的 CSS 属性（如果指定四个值，则分别对应左上角、右上角、右下角和左下角的圆角半径）。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style></style>
</head>
<body><p style="border: 1px solid red;border-radius: 5px;">实线边框。</p>
</body>
</html>

如图所示

在这里插入图片描述

阴影

box-shadow 是 CSS3 中引入的属性。它是在 CSS3 中新增加的用于创建阴影效果的属性，用来提供更丰富的页面样式设计选项。

语法如下：

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow：水平阴影的位置。正值表示阴影位于元素右侧，负值表示阴影位于元素左侧。
v-shadow：垂直阴影的位置。正值表示阴影位于元素下方，负值表示阴影位于元素上方。
blur：模糊半径。该值越大，阴影越模糊、扩散。
spread：扩散半径。该值不设置时，默认为 0，表示阴影形状与元素大小相同。当设置为正值时，阴影会扩大，而当设置为负值时，阴影会缩小。
color：阴影的颜色。可以使用颜色名称或十六进制值。
inset：可选属性，用于指定阴影是否在元素内部。如果设置了该值，阴影将出现在元素内部，而不是外部。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>div{width:300px;height:100px;background-color:yellow;box-shadow: 10px 10px 5px #888888;}</style>
</head>
<body><div></div>
</body>
</html>

如图所示

在这里插入图片描述

图片

border-image 是 CSS3 引入的一项功能，用于设置元素边框的图像样式。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>div{border: 10px solid black;width: 150px;border-image:url(123456.jpg) 30% stretch;}</style>
</head>
<body><div>边框图片</div>
</body>
</html>

如图所示

在这里插入图片描述
stretch属性会平铺，round属性会重复环绕。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>div{border: 10px solid black;width: 150px;border-image:url(123456.jpg) 30% round;}</style>
</head>
<body><div>边框图片</div>
</body>
</html>

如图所示

在这里插入图片描述

border-image 属性允许你通过一个图像来替换元素的普通边框样式。这个图像会被切割成九个区域，分别对应边框的四个角、四个边和中间区域。你可以通过 border-image-source 属性指定使用的图像，通过 border-image-slice 属性调整图像的切割方式，通过 border-image-width 属性设置边框图像的宽度，通过 border-image-repeat 属性控制图像的重复方式，以及通过 border-image-outset 属性设置图像的扩展区域。

背景

background-image 属性可以为一个元素添加多幅背景图像。不同的背景图像用逗号隔开，并且图像会彼此堆叠。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>div{background-image: url(./flower.gif), url(./paper.jpg);background-position: left top, left top;background-repeat: no-repeat, repeat;padding: 15px;}</style>
</head>
<body><div>背景图片</div>
</body>
</html>

如图所示

在这里插入图片描述
你可以使用background 简写属性来指定。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>div{background:url(./flower.gif) left top no-repeat,url(./paper.jpg) left top no-repeat;padding: 15px;}</style>
</head>
<body><div>背景图片</div>
</body>
</html>

background-size 属性允许您指定背景图像的大小。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.a{border: 1px solid black;height: 300px;width: 200px;background: url(./flower.gif) no-repeat;background-size: 150px 150px;}</style>
</head>
<body><div class="a">背景图片</div>
</body>
</html>

如图所示
在这里插入图片描述
你也可以使用使用两个关键字之一来指定背景图像的大小：contain 或 cover。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.a{border: 1px solid black;height: 300px;width: 200px;background: url(./flower.gif) no-repeat;background-size: cover;}.b{border: 1px solid black;height: 300px;width: 200px;background: url(./flower.gif) no-repeat;background-size: contain;}</style>
</head>
<body><div class="a">背景图片</div><div class="b">背景图片</div>
</body>
</html>

如图所示
在这里插入图片描述
background-origin 属性用于指定背景图像的起始位置，即确定背景图像相对于元素框的位置。它有以下几个可能的取值：
（1）padding-box：背景图像的起始位置从元素的内边距区域（padding area）开始。
（2）border-box：背景图像的起始位置从元素的边框区域（border area）开始。
（3）content-box：背景图像的起始位置从元素的内容区域（content area）开始。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.box {width: 300px;height: 200px;padding: 20px;border: 5px dotted #000;background-image: url('./123456.jpg');background-size: cover;background-repeat: no-repeat;}.origin-padding {background-origin: padding-box;}.origin-border {background-origin: border-box;}.origin-content {background-origin: content-box;}</style>
</head>
<body><div class="box origin-padding">Padding Box Origin</div><div class="box origin-border">Border Box Origin</div><div class="box origin-content">Content Box Origin</div>
</body>
</html>

如图所示
在这里插入图片描述

background-clip 属性用于指定背景图像的裁剪区域，即决定元素的哪个部分会显示背景图像。有以下几个取值：

（1）border-box：背景图像将显示在元素的边框区域（border area）内，包括边框和内边距区域。
（2）padding-box：背景图像将显示在元素的内边距区域（padding area）内，不包括边框。
（3）content-box：背景图像将显示在元素的内容区域（content area）内，不包括内边距和边框。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.box {width: 300px;height: 200px;padding: 20px;border: 5px dotted #000;background-image: url('./123456.jpg');background-size: cover;background-repeat: no-repeat;}.clip-padding {background-clip: padding-box;}.clip-border {background-clip: border-box;}.clip-content {background-clip: content-box;}</style>
</head>
<body><div class="box clip-padding">Padding Box Clip</div><div class="box clip-border">Border Box Clip</div><div class="box clip-content">Content Box Clip</div>
</body>
</html>

如图所示
在这里插入图片描述

渐变

CSS 渐变（CSS gradients）是一种用来创建平滑过渡的背景效果的技术。通过 CSS 渐变，您可以在元素的背景中实现从一种颜色到另一种颜色的过渡效果，或者在不同颜色之间创建复杂的过渡效果。

CSS 渐变有两种类型：线性渐变（linear gradient）和径向渐变（radial gradient）。

线性渐变（Linear Gradient）

线性渐变通过定义一个方向，沿着这个方向进行颜色的过渡

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

默认情况下，线性渐变（从上到下）

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>#grad1 {height: 200px;background-color: red; /* 浏览器不支持时显示 */background-image: linear-gradient(#e66465, #9198e5);}</style>
</head>
<body><div id="grad1"></div>
</body>
</html>

如图所示

在这里插入图片描述
从左到右，多一个参数to right。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>#grad1 {height: 200px;background-color: red; /* 浏览器不支持时显示 */background-image: linear-gradient(to right,#e66465, #9198e5);}</style>
</head>
<body><div id="grad1"></div>
</body>
</html>

如图所示

在这里插入图片描述
你可以通过指定水平和垂直的起始位置来制作一个对角渐变。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>#grad1 {height: 200px;background-color: red; /* 浏览器不支持时显示 */background-image: linear-gradient(to bottom right,#e66465, #9198e5);}</style>
</head>
<body><div id="grad1"></div>
</body>
</html>

如图所示

在这里插入图片描述

下面的实例演示了如何设置多个颜色节点：

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>#grad1 {height: 200px;background-color: red; /* 浏览器不支持时显示 */background-image: linear-gradient(#e66465, #9198e5,red,yellow);}</style>
</head>
<body><div id="grad1"></div>
</body>
</html>

如图所示

在这里插入图片描述
如需添加透明度，我们使用 rgba() 函数来定义色标。 rgba() 函数中的最后一个参数可以是 0 到 1 的值，它定义颜色的透明度：0 表示全透明，1 表示全彩色（无透明）。

径向渐变（Radial Gradient）

径向渐变以一个中心点为起点，向外辐射呈放射状进行颜色的过渡。

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

默认情况下颜色节点均匀分布

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>#grad1 {height: 200px;background-color: red; /* 浏览器不支持时显示 */background-image: radial-gradient(red, yellow, green);}</style>
</head>
<body><div id="grad1"></div>
</body>
</html>

如图所示

在这里插入图片描述
你可以设置不同间距的色标

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>#grad1 {height: 200px;background-color: red; /* 浏览器不支持时显示 */background-image: radial-gradient(red 5%, yellow 15%, green 30%);}</style>
</head>
<body><div id="grad1"></div>
</body>
</html>

如图所示

在这里插入图片描述

shape 参数定义形状。它可接受 circle 或 ellipse 值。默认值为 ellipse（椭圆）。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>#grad1 {height: 200px;background-color: red; /* 浏览器不支持时显示 */background-image: radial-gradient(circle,red 5%, yellow 15%, green 30%);}</style>
</head>
<body><div id="grad1"></div>
</body>
</html>

如图所示

在这里插入图片描述

文本

CSS3中包含几个新的文本特征，比如：文字阴影、文本溢出、整字换行、换行规则以及书写模式等。

文字阴影

text-shadow 属性用于在文本周围创建阴影效果。

text-shadow 属性的值由阴影水平偏移量、阴影垂直偏移量、阴影模糊半径、阴影颜色组成。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>#grad1 {text-shadow: 5px 5px 5px red;}</style>
</head>
<body><div id="grad1">文本阴影</div>
</body>
</html>

如图所示

在这里插入图片描述

文本溢出

text-overflow 用于控制当文本溢出容器时的显示方式。以下是 text-overflow 属性的常见取值：

（1）clip：默认值，表示当文本溢出容器时直接裁剪并隐藏溢出部分。
（2）ellipsis：表示当文本溢出容器时显示省略号（…），并通过鼠标悬停来显示完整文本内容。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>div{width: 100px;border: 1px solid black;overflow: hidden;}</style>
</head>
<body><div style="text-overflow: clip;">testtesttesttesttesttesttesttesttesttest</div><div style="text-overflow: ellipsis;">testtesttesttesttesttesttesttesttesttest</div>
</body>
</html>

如图所示

在这里插入图片描述

整字换行

word-wrap属性用于指定文本溢出其容器时的处理方式。这个属性可以控制是否允许长单词或URL地址在没有空格的情况下换行，以确保文本能够适应其容器的宽度。word-wrap属性的可用取值为：

（1）normal：默认值，不允许长单词或URL地址在中间换行，这可能导致内容溢出其容器。
（2）break-word：允许长单词或URL地址在中间换行，以避免内容溢出其容器。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>div{width: 100px;border: 1px solid black;}</style>
</head>
<body><div style="word-wrap: normal;">testtesttesttesttesttesttesttesttesttest</div><div style="word-wrap: break-word;">testtesttesttesttesttesttesttesttesttest</div>
</body>
</html>

如图所示

换行规则

word-break属性用于指定如何处理单词换行。它控制当一个单词太长而无法适应其包含元素的宽度时如何断行和分割这个单词。有以下几个可选值：

（1）normal：默认值，在正常的单词断开规则下换行。
（2）break-all：允许单词在任意字符处断开换行。
（3）keep-all：尽可能地不将单词断开换行。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>div{width: 100px;border: 1px solid black;}</style>
</head>
<body><div style="word-break: normal;">testtesttesttesttesttesttesttesttesttest</div><div style="word-break: break-all;">testtesttesttesttesttesttesttesttesttest</div><div style="word-break: keep-all;">testtesttesttesttesttesttesttesttesttest</div>
</body>
</html>

如图所示

在这里插入图片描述

书写模式

writing-mode属性用于指定文本的书写模式，即文本是从左到右水平书写，还是从上到下垂直书写。这个属性通常用于处理非常规的文本方向，如竖排文字或横排文字。有以下几个常用取值：

（1）horizontal-tb：默认值，文本水平排列（从左到右，从上到下）。
（2）vertical-rl：文本垂直排列，从右到左。
（3）vertical-lr：文本垂直排列，从左到右。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>div{width: 100px;border: 1px solid black;}</style>
</head>
<body><div style="writing-mode: horizontal-tb;">锄禾日当午，汗滴禾下土</div><div style="writing-mode: vertical-rl;">锄禾日当午，汗滴禾下土</div><div style="writing-mode: vertical-lr;">锄禾日当午，汗滴禾下土</div>
</body>
</html>

如图所示

在这里插入图片描述

字体

@font-face 用于加载自定义字体文件，并在网页中应用这些字体。通过 @font-face 规则，您可以在网页中使用非标准字体（如特定的字体文件），而无需依赖用户计算机中已安装的字体。

不同的字体格式：TrueType 字体 (TTF)、OpenType 字体 (OTF)、Web 开放字体格式 (WOFF)、Web 开放字体格式 (WOFF 2.0)、SVG 字体/形状、嵌入式 OpenType 字体 (EOT)

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>@font-face {font-family: myfamily;src: url(./Wood-2-1.ttf);}div{font-family: myfamily;}</style>
</head>
<body><div>hello world</div>
</body>
</html>

如图所示

在这里插入图片描述
使用font-weight属性可以将字体设置粗体。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>@font-face {font-family: myfamily;src: url(./Wood-2-1.ttf);}div{font-family: myfamily;font-weight: bold;}</style>
</head>
<body><div>hello world</div>
</body>
</html>

如图所示

在这里插入图片描述

多列

多列布局（multicolumn layout）允许将文本内容分成多个列显示，这在网页设计中可以用来创建更流畅、更易于阅读的页面布局。

通过使用 column-count、column-width、column-gap 等属性，您可以控制多列布局的列数、列宽、列间距等样式。

创建多列

column-count 属性指定了需要分割的列数。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>div {column-count:3;}</style>
</head>
<body><div>最近一直看小说，...</div>
</body>
</html>

如图所示

在这里插入图片描述

多列中列与列间的间隙

column-gap 属性指定了列与列间的间隙。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>div {column-count:3;column-gap: 10px;}</style>
</head>
<body><div>最近一直看小说，...</div>
</body>
</html>

如图所示

在这里插入图片描述

列边框

column-rule-style 属性指定了列与列间的边框样式，column-rule-width 属性指定了两列的边框厚度，column-rule-color 属性指定了两列的边框颜色

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>div {column-count:3;column-rule-style: solid;column-rule-width: 10px;column-rule-color: red;}</style>
</head>
<body><div>最近一直看小说，...</div>
</body>
</html>

如图所示
在这里插入图片描述
column-span 用来控制多列布局中跨列显示的属性。当设置了 column-span: all; 时，元素可以横跨多列显示，而不受列边界的限制。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.column-span-example{column-count:2;-moz-column-count:2; /* Firefox */-webkit-column-count:2; /* Safari and Chrome */}.column-span-example p {column-span: all; /* 允许段落横跨所有列 */-webkit-column-span:all; /* Safari and Chrome */}</style>
</head>
<body><div class="column-span-example"><p>test</p>content content content content content content content content content content content content content content content content content content content content content</div>
</body>
</html>

如图所示
在这里插入图片描述
column-width 用来控制多列布局中列宽的属性。通过设置 column-width 属性，您可以指定每列的宽度，或者让浏览器自动计算列宽度。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>div{column-width: 100px;}</style>
</head>
<body><div>最近一直看小说，...</div>
</body>
</html>

如图所示

在这里插入图片描述

动画与过渡

CSS 支持创建动画效果和过渡效果，使页面元素可以在不同状态之间平滑地过渡或呈现动画效果。

2D 转换

CSS3 提供了一系列的 2D 转换属性，可以通过这些属性对元素进行平移、缩放、旋转和倾斜等操作，从而实现各种视觉效果。

transform：定义元素的转换效果。可以使用多个转换函数组合使用，例如平移、缩放和旋转。以下是一些常用的 CSS3 2D 转换属性：

translate()：将元素沿 x 和 y 轴平移指定的距离。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>div{width: 300px;height: 100px;background-color: yellow;border: 1px solid black;transform: translate(50px,100px);}</style>
</head>
<body><span>原来的位置</span><div>2d</div>
</body>
</html>

如图所示
在这里插入图片描述

scale()：按照指定的比例对元素进行缩放。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>div{width: 300px;height: 100px;background-color: yellow;border: 1px solid black;transform: scale(0.5,0.5);}</style>
</head>
<body><span>原来的位置</span><div>2d</div>
</body>
</html>

如图所示
在这里插入图片描述
除此之外还有scaleX()和scaleY()方法，增加或减少元素的宽度和增加或减少元素的高度。

rotate()：按照指定角度对元素进行旋转。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>div{width: 300px;height: 100px;background-color: yellow;border: 1px solid black;transform: rotate(20deg);/*顺时针旋转 20 度*/}</style>
</head>
<body><div>2d</div>
</body>
</html>

如图所示

在这里插入图片描述

skew()：按照指定角度对元素进行倾斜。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>div{width: 300px;height: 100px;background-color: yellow;border: 1px solid black;transform: skew(20deg, 10deg);/* 元素沿 X 和 Y 轴倾斜给定角度 */}</style>
</head>
<body><div>2d</div>
</body>
</html>

如图所示
在这里插入图片描述
另外，skewX() 方法和skewY() 方法，使元素沿 X 轴倾斜给定角度和使元素沿 Y 轴倾斜给定角度。

matrix() 方法把所有 2D 变换方法组合为一个。

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>div{width: 300px;height: 100px;background-color: yellow;border: 1px solid black;transform: matrix(1, -0.3, 0, 1, 0, 0);}</style>
</head>
<body><div>2d</div>
</body>
</html>

如图所示
在这里插入图片描述

3D 转换

CSS3 也提供了一系列的 3D 转换属性，可以通过这些属性对元素进行立体化的变换，实现更加逼真的三维效果。

也是使用transform属性，以下是一些常用的 CSS3 3D 转换属性：

translate3d()：将元素沿 x、y 和 z 轴平移指定的距离。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>div{width: 300px;height: 100px;background-color: yellow;border: 1px solid black;transform: translate3d(50px, 50px, 0);}</style>
</head>
<body><div>3d</div>
</body>
</html>

如图所示
在这里插入图片描述

scale3d()：按照指定的比例对元素进行三维缩放。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>div{width: 300px;height: 100px;background-color: yellow;border: 1px solid black;transform: scale3d(0.5, 0.5, 1);}</style>
</head>
<body><div>3d</div>
</body>
</html>

如图所示
在这里插入图片描述

rotateX()、rotateY()、rotateZ()：按照指定角度对元素进行绕 x、y、z 轴的旋转。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>div{width: 300px;height: 100px;background-color: yellow;border: 1px solid black;transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);}</style>
</head>
<body><div>3d</div>
</body>
</html>

如图所示
在这里插入图片描述

perspective：定义元素的透视效果，使元素在 3D 空间中产生远近效果。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>#div1{position: relative;height: 150px;width: 150px;margin: 50px;padding:10px;border: 1px solid black;perspective:150;-webkit-perspective:150; /* Safari and Chrome */}#div2{padding:50px;position: absolute;border: 1px solid black;background-color: yellow;transform: rotateX(45deg);-webkit-transform: rotateX(45deg); /* Safari and Chrome */}</style>
</head>
<body><div id="div1"><div id="div2">HELLO</div></div>
</body>
</html>

如图所示

在这里插入图片描述

过渡

CSS3 过渡（transition）允许你在状态改变时以平滑的方式过渡属性的值。通过使用过渡，你可以在鼠标悬停、焦点变化或任何其他事件发生时，使元素从一个状态平滑地过渡到另一个状态。

要实现这一点，必须规定两项内容：

指定要添加效果的CSS属性
指定效果的持续时间。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>div {width: 100px;height: 100px;background: red;transition: width 2s;}div:hover{width: 200px;}</style>
</head>
<body><div>过渡</div>
</body>
</html>

如图所示
在这里插入图片描述
如果添加多个属性可以逗号（,）隔开；

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>div {width: 100px;height: 100px;background: red;transition: width 2s, height 2s, transform 2s;}div:hover{width: 200px;}</style>
</head>
<body><div>过渡</div>
</body>
</html>

你可以使用 linear 1s表示延迟一秒。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>div {width: 100px;height: 100px;background: red;transition: width 2s linear 1s;}div:hover{width: 200px;}</style>
</head>
<body><div>过渡</div>
</body>
</html>

下表列出了所有的过渡属性

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。
transition-delay	规定过渡效果何时开始。默认是 0。

动画

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

@keyframes 是用于创建动画的关键帧（keyframe）规则的CSS规则。通过 @keyframes 规则，您可以控制动画在不同阶段的样式变化。您可以定义动画从开始到结束的关键帧，并在其中定义不同的样式，然后将该动画应用于元素。

当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>div {width: 100px;height: 100px;background: red;animation-name: myframes;}@keyframes myframes {from {background:red;}to {background:yellow;}}</style>
</head>
<body><div></div>
</body>
</html>

如图所示

在这里插入图片描述

在上面的例子中，通过使用关键字 “from” 和 “to”（代表 0％（开始）和 100％（完成）），我们设置了样式何时改变。通过使用百分比，您可以根据需要添加任意多个样式更改。

animation-duration 属性定义需要多长时间才能完成动画（默认值是 0s）。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>div {width: 100px;height: 100px;background: red;animation-name: myframes;animation-duration: 4s;}@keyframes myframes {0%   {background: red;}25%  {background: yellow;}50%  {background: blue;}100% {background: green;}
}</style>
</head>
<body><div></div>
</body>
</html>

如图所示

在这里插入图片描述

使用animation-delay属性规定动画开始的延迟时间。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>div {width: 100px;height: 100px;background: red;/*简写*/animation: myframes 2s;animation-delay: 2s;}@keyframes myframes {from {background:red;}to {background:yellow;}}</style>
</head>
<body><div></div>
</body>
</html>

如图所示

在这里插入图片描述
animation-iteration-count 属性指定动画应运行的次数。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>div {width: 100px;height: 100px;background: red;animation: myframes 2s;animation-iteration-count: 3;}@keyframes myframes {from {background:red;}to {background:yellow;}}</style>
</head>
<body><div></div>
</body>
</html>

如图所示
在这里插入图片描述

animation-direction 属性指定是向前播放、向后播放还是交替播放动画。可接受以下值：

normal - 动画正常播放（向前）。默认值
reverse - 动画以反方向播放（向后）。
alternate - 动画先向前播放，然后向后。
alternate-reverse - 动画先向后播放，然后向前。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>div {width: 100px;height: 100px;background: red;animation-name: myframes;animation-duration: 4s;animation-direction:reverse;}@keyframes myframes {0%   {background: red;}25%  {background: yellow;}50%  {background: blue;}100% {background: green;}
}</style>
</head>
<body><div></div>
</body>
</html>

如图所示

在这里插入图片描述
你可以通过animation-timing-function 属性规定动画的速度曲线。可接受以下值：

ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
linear - 规定从开始到结束的速度相同的动画
ease-in - 规定慢速开始的动画
ease-out - 规定慢速结束的动画
ease-in-out - 指定开始和结束较慢的动画
cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值

下面介绍简写方法。

animation: name duration timing-function delay iteration-count direction fill-mode;

div {animation: example 5s linear 2s infinite alternate;
}

网格布局

网格布局（Grid Layout）是一种用于网页布局的 CSS 技术，可以将页面分割成行和列，并让元素放置到这些行和列的交叉点上。通过网格布局，你可以更灵活地控制页面布局，实现复杂的多列布局而无需依赖传统的盒模型和浮动布局。

display 属性

将 display 属性设置为 grid 或 inline-grid 后，它就变成了一个网格容器，这个元素的所有直系子元素将成为网格元素。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.grid-container {display: grid;grid-template-columns: 1fr 1fr 1fr; /* 定义三列，每列宽度相等 */grid-template-rows: auto; /* 自动设置行高 */grid-gap: 10px; /* 设置网格间距为 10px */}.grid-item {background-color: #f0f0f0;padding: 20px;text-align: center;}</style>
</head>
<body><div class="grid-container"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div></div>
</body>
</html>

如图所示

在这里插入图片描述
设置display: inline-grid;，示例如下：

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.grid-container {display: inline-grid;grid-template-columns: 1fr 1fr 1fr; /* 定义三列，每列宽度相等 */grid-template-rows: auto; /* 自动设置行高 */grid-gap: 10px; /* 设置网格间距为 10px */}.grid-item {background-color: #f0f0f0;padding: 20px;text-align: center;}</style>
</head>
<body><div class="grid-container"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div></div>
</body>
</html>

如图所示

在这里插入图片描述

网格轨道

通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的列和行。

（1）grid-template-columns 是网格布局中用于定义网格列的属性，它可以指定每一列的大小、数量、比例等信息。通过设置 grid-template-columns，你可以创建灵活的网格布局，实现不同页面设计需求。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.grid-container {display: grid;grid-template-columns: 100px 1fr 1fr; /* 定义三列，第一列宽度为100px，第二列和第三列按比例分配 */}.grid-item {background-color: #f0f0f0;padding: 20px;text-align: center;}</style>
</head>
<body><div class="grid-container"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div></div>
</body>
</html>

如图所示
在这里插入图片描述
（2）grid-template-rows 是网格布局中用于定义网格行的属性，它可以指定每一行的大小、数量、比例等信息。通过设置 grid-template-rows，你可以创建灵活的网格布局，实现不同页面设计需求。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.grid-container {display: grid;grid-template-rows: 100px 200px; /* 定义两行，第一行高度为100px，第二行高度为200px */}.grid-item {background-color: #f0f0f0;padding: 20px;text-align: center;}</style>
</head>
<body><div class="grid-container"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div></div>
</body>
</html>

如图所示
在这里插入图片描述

fr单位

fr 是 CSS Grid 中用于定义网格轨道（grid track）的长度单位，表示可用空间（即剩余空间）的比例。

例如，如果将以下样式应用于一个有 3 列的网格容器：

grid-template-columns: 1fr 2fr 1fr;

那么第一列和第三列都将占据可用空间的 1/4，而第二列将占据可用空间的 1/2。这是因为 1fr 表示可用空间的 1 份，2fr 表示可用空间的 2 份，因此第二列将占据可用空间的 2/4，即 1/2。

网格间距

网格间距（Column Gap）指的是两个网格单元之间的网格横向间距或网格纵向间距。

grid-column-gap 属性是用于在 CSS Grid 布局中设置列之间的间距的属性。这个属性可以帮助您控制网格容器中不同列之间的空白间隔。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.grid-container {display: grid;grid-template-columns: 1fr 1fr 1fr; /* 定义两行，第一行高度为100px，第二行高度为200px */grid-column-gap: 10px;}.grid-item {background-color: #f0f0f0;padding: 20px;text-align: center;}</style>
</head>
<body><div class="grid-container"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div></div>
</body>
</html>

如图所示
在这里插入图片描述

grid-row-gap 是用于在 CSS Grid 布局中设置行之间的间距的属性。这个属性可以帮助您控制网格容器中不同行之间的空白间隔。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.grid-container {display: grid;grid-template-columns: 1fr 1fr 1fr; /* 定义两行，第一行高度为100px，第二行高度为200px */grid-row-gap: 10px;}.grid-item {background-color: #f0f0f0;padding: 20px;text-align: center;}</style>
</head>
<body><div class="grid-container"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div></div>
</body>
</html>

如图所示

在这里插入图片描述
grid-gap 属性是 grid-row-gap 和 grid-column-gap 属性的简写：

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.grid-container {display: grid;grid-template-columns: 1fr 1fr 1fr; /* 定义两行，第一行高度为100px，第二行高度为200px */grid-gap: 10px 10px;}.grid-item {background-color: #f0f0f0;padding: 20px;text-align: center;}</style>
</head>
<body><div class="grid-container"><div class="grid-item">1</div><div class="grid-item">2</div><div class="grid-item">3</div><div class="grid-item">4</div><div class="grid-item">5</div><div class="grid-item">6</div></div>
</body>
</html>

如图所示
在这里插入图片描述

网格行（Grid Lines）

列之间的线称为列线（column lines）。使用grid-column-start属性和grid-column-end属性。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.grid-container {display: grid;grid-template-columns: 1fr 1fr 1fr; /* 定义两行，第一行高度为100px，第二行高度为200px */grid-gap: 10px 10px;}.grid-container div {background-color: #f0f0f0;padding: 20px;text-align: center;}.grid-item1{grid-column-start: 1;grid-column-end: 3;}</style>
</head>
<body><div class="grid-container"><div class="grid-item1">1</div><div class="grid-item2">2</div><div class="grid-item3">3</div><div class="grid-item4">4</div><div class="grid-item5">5</div><div class="grid-item6">6</div></div>
</body>
</html>

如图所示
在这里插入图片描述

行之间的线称为行线（row lines）。使用grid-row-start 属性和 grid-row-end 属性。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.grid-container {display: grid;grid-template-columns: 1fr 1fr 1fr; /* 定义两行，第一行高度为100px，第二行高度为200px */grid-gap: 10px 10px;}.grid-container div {background-color: #f0f0f0;padding: 20px;text-align: center;}.grid-item1{grid-row-start: 1;grid-row-end: 3;}</style>
</head>
<body><div class="grid-container"><div class="grid-item1">1</div><div class="grid-item2">2</div><div class="grid-item3">3</div><div class="grid-item4">4</div><div class="grid-item5">5</div><div class="grid-item6">6</div></div>
</body>
</html>

如图所示

在这里插入图片描述
grid-area 属性是一个用于简洁定义网格项位置的属性，它结合了 grid-row-start, grid-column-start, grid-row-end 和 grid-column-end 这四个属性。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.grid-container {display: grid;grid-template-columns: 1fr 1fr 1fr; /* 定义两行，第一行高度为100px，第二行高度为200px */grid-gap: 10px 10px;}.grid-container div {background-color: #f0f0f0;padding: 20px;text-align: center;}.grid-item1{grid-area: 2 / 1 / 3 / 3;}</style>
</head>
<body><div class="grid-container"><div class="grid-item1">1</div><div class="grid-item2">2</div><div class="grid-item3">3</div><div class="grid-item4">4</div><div class="grid-item5">5</div><div class="grid-item6">6</div></div>
</body>
</html>

如图所示

在这里插入图片描述
grid-template-areas 属性是用于在网格布局中定义网格区域的属性。通过使用 grid-template-areas，你可以使用自定义的区域名称来表示网格项的位置。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.container {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px;gap: 10px;grid-template-areas:"header header sidebar""main main sidebar";}.item {padding: 10px;text-align: center;}.header {grid-area: header;background-color: lightblue;}.sidebar {grid-area: sidebar;background-color: lightcoral;}.main {grid-area: main;background-color: lightgreen;}</style>
</head>
<body><div class="container"><div class="item header">Header</div><div class="item sidebar">Sidebar</div><div class="item main">Main Content</div></div>
</body>
</html>

如图所示
在这里插入图片描述

弹性盒子（重点）

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示

在这里插入图片描述

父元素设置

使用display: flex;属性后，把容器转换为弹性布局上下文（弹性布局中必须有一个 display 属性设置为 flex 的父元素。）

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{display: flex;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示

在这里插入图片描述

flex-direction属性

flex-direction属性用于设置 Flex 容器中主轴的方向。它决定了 Flex 项目是如何排列的。flex-direction 属性有以下几个可能的取值：

（1）row：默认值。主轴为水平方向，起点在左端。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{flex-direction: row;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示

在这里插入图片描述

（2）row-reverse：主轴为水平方向，起点在右端。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{display: flex;flex-direction: row-reverse;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示
在这里插入图片描述

（3）column：主轴为垂直方向，起点在顶部。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{display: flex;flex-direction: column;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示

在这里插入图片描述

（4）column-reverse：主轴为垂直方向，起点在底部。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{display: flex;flex-direction: column-reverse;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示

在这里插入图片描述

flex-wrap属性

flex-wrap属性用于指定 Flex Box 容器中的项目是否换行的 CSS 属性。flex-wrap 属性有以下几个可能的取值：

（1）nowrap：默认值，项目不换行，会尽量在一行内显示，即使溢出容器。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{border: 1px solid red;width: 300px;display: flex;flex-wrap: nowrap;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示

在这里插入图片描述

（2）wrap：项目在需要时换行显示，第一行在上方，第二行在下方。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{border: 1px solid red;width: 300px;display: flex;flex-wrap: wrap;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示

在这里插入图片描述

（3）wrap-reverse：项目在需要时换行显示，但是第一行在下方，第二行在上方。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{border: 1px solid red;width: 300px;display: flex;flex-wrap: wrap-reverse;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示
在这里插入图片描述

flex-flow属性

flex-direction 和 flex-wrap 两个属性的缩写形式，用于同时设置 Flex Box 容器中项目的排列方向和换行方式。通过 flex-flow 属性，您可以简洁地指定这两个属性的取值，从而控制项目在容器中的布局方式。

语法

flex-flow: <flex-direction> <flex-wrap>;

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{border: 1px solid red;width: 300px;display: flex;flex-flow: row wrap;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示
在这里插入图片描述

justify-content属性

justify-content属性用于在 Flex 容器中沿主轴方向对齐 Flex 项目的位置。它决定了 Flex 项目在主轴上的分布方式。justify-content 属性有以下几个可能的取值：

（1）flex-start：默认值。Flex 项目靠主轴起点对齐。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{border: 1px solid red;display: flex;justify-content: flex-start;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示
在这里插入图片描述

（2）flex-end：Flex 项目靠主轴终点对齐。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{border: 1px solid red;display: flex;justify-content: flex-end;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示
在这里插入图片描述

（3）center：Flex 项目在主轴上居中对齐。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{border: 1px solid red;display: flex;justify-content: center;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示
在这里插入图片描述

（4）space-between：Flex 项目平均分布在主轴上，首个项目在起点，最后一个项目在终点，中间的项目之间留有相等的空白间距。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{border: 1px solid red;display: flex;justify-content: space-between;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示

在这里插入图片描述

（5）space-around：Flex 项目平均分布在主轴上，项目之间和两端都留有相等的空白间距。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{border: 1px solid red;display: flex;justify-content: space-around;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示

在这里插入图片描述

（6）space-evenly：Flex 项目平均分布在主轴上，包括两端和项目之间都留有相等的空白间距。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{border: 1px solid red;display: flex;justify-content: space-evenly;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示

在这里插入图片描述

align-items属性

align-items属性用于指定 Flex Box 容器中项目在交叉轴上的对齐方式的 CSS 属性。交叉轴是与主轴垂直的轴，对于默认的水平布局来说，交叉轴就是垂直轴。align-items 属性可以接受以下几种取值：

（1）stretch：默认值，项目被拉伸以适应容器。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{border: 1px solid red;height: 200px;display: flex;align-items: stretch;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示
在这里插入图片描述

（2）flex-start：项目向交叉轴的起始位置对齐。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{border: 1px solid red;height: 200px;display: flex;align-items: flex-start;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示
在这里插入图片描述

（3）flex-end：项目向交叉轴的结束位置对齐。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{border: 1px solid red;height: 200px;display: flex;align-items: flex-end;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示

在这里插入图片描述

（4）center：项目在交叉轴上居中对齐。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{border: 1px solid red;height: 200px;display: flex;align-items: center;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示
在这里插入图片描述

（5）baseline：项目以其基线对齐。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{border: 1px solid red;height: 200px;display: flex;align-items: baseline;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示
在这里插入图片描述

align-content属性

属性是用于指定多行或多列 Flex Box 中项目在交叉轴上的对齐方式的 CSS 属性。与 align-items 属性不同，align-content 属性适用于多行或多列排列的 Flex Box，即当容器中的项目无法全部放在一行或一列中时。

align-content 属性可以接受以下几种取值：

（1）stretch：默认值，项目被拉伸以适应容器。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{border: 1px solid red;width: 300px;height: 300px;display: flex;flex-wrap: wrap;align-content: stretch;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示

在这里插入图片描述

当 flex-wrap 属性的值为 wrap 或 wrap-reverse 时，Flex Box 容器中的项目可能会出现多行或多列的情况，此时 align-content 属性才会生效。

（2）flex-start：项目向交叉轴的起始位置对齐。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{border: 1px solid red;width: 300px;height: 300px;display: flex;flex-wrap: wrap;align-content: flex-start;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示

在这里插入图片描述

（3）flex-end：项目向交叉轴的结束位置对齐。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{border: 1px solid red;width: 300px;height: 300px;display: flex;flex-wrap: wrap;align-content: flex-end;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示
在这里插入图片描述

（4）center：项目在交叉轴上居中对齐。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{border: 1px solid red;width: 300px;height: 300px;display: flex;flex-wrap: wrap;align-content: center;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示

在这里插入图片描述

（5）space-between：项目在交叉轴上平均分布，首个项目对齐容器起始位置，最后一个项目对齐容器结束位置。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{border: 1px solid red;width: 300px;height: 300px;display: flex;flex-wrap: wrap;align-content: space-between;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示

在这里插入图片描述

（6）space-around：项目在交叉轴上分布，各项目周围有相等的空间。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{border: 1px solid red;width: 300px;height: 300px;display: flex;flex-wrap: wrap;align-content: space-around;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}</style>
</head>
<body><div class="flex-container"><div class="flex-item">flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示

在这里插入图片描述

子元素设置

order 属性

order 属性是用于指定 Flex Box 容器中单个项目在主轴上的顺序的 CSS 属性。默认情况下，Flex Box 容器中的项目按照它们在 HTML 中出现的顺序来排列，但是通过设置 order 属性，您可以随意更改项目的顺序。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{border: 1px solid red;width: 300px;height: 300px;display: flex;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}.flex-item:first-child {order: 3;}.flex-item:nth-child(2) {order: 1;}.flex-item:last-child {order: 2;}</style>
</head>
<body><div class="flex-container"><div class="flex-item" >flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示
在这里插入图片描述

flex-grow 属性

flex-grow 属性是 Flex 布局中用来设置 Flex 项目在分配多余空间时的放大比例的属性。它定义了 Flex 项目相对于其它 Flex 项目在扩展空间时的增长比例。默认情况下，所有 Flex 项目的 flex-grow 值为 0，即它们不会扩展以填充剩余空间。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{border: 1px solid red;width: 50%;display: flex;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}.flex-item:nth-child(2) {flex-grow: 1;}</style>
</head>
<body><div class="flex-container"><div class="flex-item" >flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示
在这里插入图片描述

flex-shrink 属性

flex-shrink 属性是 Flex 布局中用来设置 Flex 项目在空间不足时的缩小比例的属性。它定义了 Flex 项目相对于其他 Flex 项目在缩小空间时的收缩比例。默认情况下，所有 Flex 项目的 flex-shrink 值为 1，即它们会等比例缩小以适应容器空间。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{border: 1px solid red;width: 300px;display: flex;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}</style>
</head>
<body><div class="flex-container"><div class="flex-item" >flex item 1</div><div class="flex-item" style="flex-shrink: 0">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示
在这里插入图片描述

flex-basis 属性

flex-basis 属性是用于指定 Flex Box 容器中项目的初始尺寸（主轴上的尺寸）的 CSS 属性。它定义了项目在分配多余空间之前的理想大小，可以帮助控制项目在主轴上的初始大小。

flex-basis 属性可以接受以下几种取值：

（1）<length>：指定一个固定的长度值，比如像素（px）、百分比（%）等。
（2）auto：项目的大小由其内容决定。这是默认值。
（3）content：与 auto 类似，项目的大小也由其内容决定。
（4）initial：设置为项目的初始大小（默认值）。
（5）inherit：继承父元素的 flex-basis 值。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{border: 1px solid red;display: flex;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}</style>
</head>
<body><div class="flex-container"><div class="flex-item" >flex item 1</div><div class="flex-item" style="flex-basis: 200px">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示

在这里插入图片描述

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{border: 1px solid red;display: flex;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;height: 100px;margin: 10px;}</style>
</head>
<body><div class="flex-container"><div class="flex-item" >flex item 1</div><div class="flex-item" style="flex: 0 0 200px">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

align-self 属性

align-self 属性是用于指定单个 Flex Box 项目在交叉轴上的对齐方式的 CSS 属性。与 align-items 属性不同，align-self 属性适用于单个项目，可以覆盖容器级别上的对齐设置。

align-self 属性可以接受以下几种取值：

（1）flex-start：项目向交叉轴的起始位置对齐。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{border: 1px solid red;width: 300px;height: 300px;display: flex;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}.flex-item:nth-child(2) {align-self: flex-start;}</style>
</head>
<body><div class="flex-container"><div class="flex-item" >flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示

在这里插入图片描述

（2）flex-end：项目向交叉轴的结束位置对齐。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{border: 1px solid red;width: 300px;height: 300px;display: flex;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}.flex-item:nth-child(2) {align-self: flex-end;}</style>
</head>
<body><div class="flex-container"><div class="flex-item" >flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示

在这里插入图片描述

（3）center：项目在交叉轴上居中对齐。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{border: 1px solid red;width: 300px;height: 300px;display: flex;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}.flex-item:nth-child(2) {align-self: center;}</style>
</head>
<body><div class="flex-container"><div class="flex-item" >flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示
在这里插入图片描述

（4）baseline：项目在交叉轴上与其它项目的基线对齐。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{border: 1px solid red;width: 300px;height: 300px;display: flex;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}.flex-item:nth-child(2) {align-self: baseline;}</style>
</head>
<body><div class="flex-container"><div class="flex-item" >flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示
在这里插入图片描述

（5）stretch：项目被拉伸以适应容器。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.flex-container{border: 1px solid red;width: 300px;height: 300px;display: flex;}.flex-item{background: rgb(140, 140, 146);border: 1px solid black;width: 100px;margin: 10px;}.flex-item:nth-child(2) {align-self: stretch;}</style>
</head>
<body><div class="flex-container"><div class="flex-item" >flex item 1</div><div class="flex-item">flex item 2</div><div class="flex-item">flex item 3</div>  </div>
</body>
</html>

如图所示

在这里插入图片描述

响应式设计

CSS 可以通过媒体查询和相对单位（如百分比、em、rem）来实现响应式设计，使网页能够适应不同的设备和屏幕尺寸。

设置 Viewport

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

（1）width 属性：用于设置视口的宽度，可以是固定的像素值，也可以是特殊的值，如 device-width（设备的宽度）。
（2）height 属性：用于设置视口的高度，通常不需要设置，因为视口高度会随着设备宽高比的变化而自动调整。
（3）initial-scale 属性：用于设置初始缩放比例，默认值为 1.0。
（4）minimum-scale 和 maximum-scale 属性：用于设置缩放的最小和最大值。
（5）user-scalable 属性：用于控制用户是否可以手动缩放网页，一般建议将其设置为 no，以避免用户对网页进行不必要的缩放操作。

如图所示

在这里插入图片描述

构建响应式网格视图

首先，确保所有 HTML 元素的 box-sizing 属性设置为 border-box。这样可以确保元素的总宽度和高度中包括内边距（填充）和边框。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><meta name="viewport" content="width=device-width, initial-scale=1.0" ><style>* {box-sizing: border-box;}.header {border: 1px solid red;padding: 15px;}.menu {width: 25%;float: left;padding: 15px;border: 1px solid red;}.main {width: 75%;float: left;padding: 15px;border: 1px solid red;}</style>
</head>
<body><div class="header"><h1>header</h1></div><div class="menu"><h1>menu</h1></div><div class="main"><p>main</p></div>
</body>
</html>

如图所示
在这里插入图片描述

12栅格

12栅格系统是一种常见的网页布局系统，通常用于响应式设计。在这种系统中，页面被分成12列，开发者可以根据需要将内容放置在这些列中，从而实现灵活的布局。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><meta name="viewport" content="width=device-width, initial-scale=1.0" ><style>.container {display: grid;grid-template-columns: repeat(12, 1fr);gap: 10px;}.item {padding: 10px;border: 1px solid #ccc;}.full-width {grid-column: span 12;}.half-width {grid-column: span 6;}</style>
</head>
<body><div class="container"><div class="item full-width">Full Width Content</div><div class="item half-width">Half Width Content</div><div class="item half-width">Half Width Content</div></div>
</body>
</html>

如图所示

在这里插入图片描述

媒体查询

@media 是 CSS 中用于媒体查询的规则，它允许你根据设备的不同特性或特定的媒体类型来应用不同的样式。通过 @media 规则，你可以针对不同的屏幕尺寸、设备类型或打印等场景定义不同的样式规则。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>/* 默认样式 */p {font-size: 16px;}/* 在小屏幕下修改样式 */@media screen and (max-width: 600px) {p {font-size: 14px;}}/* 在大屏幕下修改样式 */@media screen and (min-width: 1200px) {p {font-size: 18px;}}</style>
</head>
<body><p>media示例</p>
</body>
</html>

如图所示
在这里插入图片描述

案例讲解

下面介绍css处理的一些案例

图片

使用CSS处理图片，比如：圆角图片、椭圆图片、缩略图图像，等。

圆角图片

使用 border-radius设置图片圆角、椭圆图片

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>img{border-radius: 5px;}</style>
</head>
<body><img src="./123456.jpg" alt="title">
</body>
</html>

如图所示
在这里插入图片描述
创建椭圆图片

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>img{border-radius: 50%;}</style>
</head>
<body><img src="./123456.jpg" alt="title">
</body>
</html>

如图所示
在这里插入图片描述

缩略图图像

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>img{border: 1px solid #ddd;padding: 5px;}</style>
</head>
<body><img src="./123456.jpg" alt="title">
</body>
</html>

如图所示

在这里插入图片描述

响应式图像

响应式图片会自动适配各种尺寸的屏幕。

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>img{border: 1px solid #ddd;width: 100%;height: auto;}</style>
</head>
<body><img src="./123456.jpg" alt="title">
</body>
</html>

如图所示

在这里插入图片描述

图片居中

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>img{display: block;margin: auto;width: 50%;}</style>
</head>
<body><img src="./123456.jpg" alt="title">
</body>
</html>

如图所示

在这里插入图片描述

图片滤镜

filter 属性用为元素添加可视效果 (例如：模糊与饱和度) 。

以下是一些常见的 filter 属性值及其效果：

模糊（blur）：

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>img{filter: blur(5px);}</style>
</head>
<body><img src="./123456.jpg" alt="title">
</body>
</html>

如图所示

在这里插入图片描述

对比度（contrast）：

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>img{filter: contrast(10%);}</style>
</head>
<body><img src="./123456.jpg" alt="title">
</body>
</html>

如图所示

在这里插入图片描述

亮度（brightness）：

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>img{filter: brightness(50%);}</style>
</head>
<body><img src="./123456.jpg" alt="title">
</body>
</html>

如图所示
在这里插入图片描述

饱和度（saturate）：

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>img{filter: saturate(60%);}</style>
</head>
<body><img src="./123456.jpg" alt="title">
</body>
</html>

如图所示

在这里插入图片描述

反色（invert）：

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>img{filter: invert(100%);}</style>
</head>
<body><img src="./123456.jpg" alt="title">
</body>
</html>

如图所示

在这里插入图片描述

灰度（grayscale）：

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>img{filter: grayscale(100%);}</style>
</head>
<body><img src="./123456.jpg" alt="title">
</body>
</html>

如图所示

在这里插入图片描述

色调旋转（hue-rotate）：

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>img{filter: hue-rotate(90deg);}</style>
</head>
<body><img src="./123456.jpg" alt="title">
</body>
</html>

如图所示
在这里插入图片描述

透明度（opacity）：

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>img{filter: opacity(40%);}</style>
</head>
<body><img src="./123456.jpg" alt="title">
</body>
</html>

如图所示

在这里插入图片描述
你可以使用opacity属性单独设置。

按钮

你可以通过css设置按钮样式

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>.btn{border: none;background-color: rgb(6, 79, 236);border-radius: 10px;width: 100px;height: 50px;color: white;cursor: pointer;}.btn2{border: none;background-color: rgb(6, 79, 236);border-radius: 50px;width: 100px;height: 50px;color: white;cursor: pointer;}.btn3{border: 1px solid rgb(148, 61, 235);background-color: white;width: 100px;height: 50px;cursor: pointer;}.btn4{border: 1px solid rgb(148, 61, 235);background-color: white;width: 100px;height: 50px;cursor: pointer;}.btn4:hover{background-color: rgb(148, 61, 235);color: white;}</style>
</head>
<body><button>普通按钮</button><!-- 圆角按钮 --><button class="btn">圆角按钮</button><!-- 药丸按钮 --><button class="btn2">药丸按钮</button><!-- 边框按钮 --><button class="btn3">边框按钮</button><!-- 边框悬停按钮 --><button class="btn4">边框悬停按钮</button>
</body>
</html>

如图所示

在这里插入图片描述

分页

如果查询的数据太多，可以使用分页来缓解数据压力。下面介绍使用css创建分页：

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>li {display: inline;}li a{text-decoration: none;}</style>
</head>
<body><ul class="pagination"><li><a href="#">«</a></li><li><a href="#">1</a></li><li><a class="active" href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li><li><a href="#">7</a></li><li><a href="#">»</a></li></ul>
</body>
</html>

如图所示
在这里插入图片描述
将li标签由垂直方向改为水平方向后，再来美化分页

<!DOCTYPE html>
<html>
<head><title>网页标题</title><style>li {display: inline;}li a{/*隐藏下划线*/text-decoration: none;padding: 8px 16px;}/*未选中悬浮的背景色*/li a:hover:not(.active) {background-color: #ddd;}li a.active {background-color: #4CAF50;color: white;
}</style>
</head>
<body><ul class="pagination"><li><a href="#">«</a></li><li><a href="#">1</a></li><li><a class="active" href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">6</a></li><li><a href="#">7</a></li><li><a href="#">»</a></li></ul>
</body>
</html>

如图所示
在这里插入图片描述

浏览器支持

为了适应不同浏览器支持，可以在属性前面加上浏览器内核识别码。比如：-webkit-（Safari 与 Chrome）, -ms-（IE）或 -moz-（Firefox）。

div{border-image:url(border.png) 30 30 round;-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and Chrome*/-moz-border-image:url(border.png) 30 30 round; /* Firefox*/
}