1 css
1.1 css背景
00.属性
background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。
01.属性选项
a.background
背景简写属性，用于将多个背景属性设置在一个声明中。其语法为：
background: [background-color] [background-image] [background-position] / [background-size] [background-repeat] [background-attachment] [background-origin] [background-clip];
-----------------------------------------------------------------------------------------------------
background: #87CEEB url('background.jpg') center/cover no-repeat fixed border-box content-box;
b.background-attachment
背景图像是否固定或者随着页面的其余部分滚动，可能的值有：
scroll: 默认值。背景图像随页面滚动。
fixed: 背景图像固定，不随页面滚动。
local: 背景图像随元素的内容滚动。
c.background-color
设置元素的背景颜色，可以使用任何有效的颜色值，如：
颜色名称：red, blue, green 等。
十六进制颜色代码：#ff0000, #00ff00 等。
RGB值：rgb(255, 0, 0), rgb(0, 255, 0) 等。
RGBA值（带透明度）：rgba(255, 0, 0, 0.5) 等。
HSL值：hsl(0, 100%, 50%) 等。
HSLA值（带透明度）：hsla(0, 100%, 50%, 0.5) 等。
d.background-image
把图像设置为背景，可以使用：
URL：url('path/to/image.jpg')
渐变：linear-gradient(), radial-gradient()
-----------------------------------------------------------------------------------------------------
background-image: url('background.jpg');
background-image: linear-gradient(to right, red, yellow);
e.background-position
设置背景图像的起始位置，可能的值有：
关键字：top, bottom, left, right, center 以及它们的组合（例如 top left）。
百分比：50% 50% 表示居中。
长度值：10px 20px 表示从左边10px，从上边20px的位置开始。
-----------------------------------------------------------------------------------------------------
background-position: center;
background-position: top left;
background-position: 50% 50%;
background-position: 10px 20px;
f.background-repeat
设置背景图像是否及如何重复，可能的值有：
repeat: 默认值。背景图像在水平和垂直方向重复。
repeat-x: 背景图像仅在水平方向重复。
repeat-y: 背景图像仅在垂直方向重复。
no-repeat: 背景图像不重复。
space: 背景图像在不拉伸的情况下平铺，剩余的空间平均分布在图像之间。
round: 背景图像缩放以适应容器的大小。
02.样式
<!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>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.background-example {
width: 100%;
height: 100vh;
background-color: #87CEEB; /* 设置背景颜色 */
background-image: url('https://via.placeholder.com/150'); /* 设置背景图像 */
background-position: center; /* 设置背景图像的起始位置 */
background-repeat: no-repeat; /* 设置背景图像是否及如何重复 */
background-attachment: fixed; /* 设置背景图像是否固定或者随着页面的其余部分滚动 */
display: flex;
align-items: center;
justify-content: center;
color: #83a53b;
font-size: 2rem;
}
</style>
</head>
<body>
<div class="background-example">
这是一个示例背景效果。
</div>
</body>
</html>
1.2 css字体
00.属性
font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size 指定文本的字体大小
font-style 指定文本的字体样式
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 指定字体的粗细。
01.属性选项
a.font
简写属性，用于在一个声明中设置所有字体属性。其语法为：
font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];
-----------------------------------------------------------------------------------------------------
font: italic small-caps bold 16px/1.5 'Times New Roman', serif;
b.font-family
指定文本的字体系列，可能的值有：
字体名称：Arial, Times New Roman, Courier New 等。
通用字体系列：serif, sans-serif, monospace, cursive, fantasy, system-ui。
-----------------------------------------------------------------------------------------------------
font-family: 'Times New Roman', Times, serif;
c.font-size
指定文本的字体大小，可能的值有：
长度值：例如 16px, 1em, 1rem。
百分比：例如 100%。
绝对大小：xx-small, x-small, small, medium, large, x-large, xx-large。
相对大小：larger, smaller。
-----------------------------------------------------------------------------------------------------
font-size: 16px;
font-size: 1em;
font-size: larger;
d.font-style
指定文本的字体样式，可能的值有：
normal: 默认值。标准字体样式。
italic: 斜体。
oblique: 斜体，但由浏览器模拟（有时与italic相同）。
-----------------------------------------------------------------------------------------------------
font-style: normal;
font-style: italic;
font-style: oblique;
e.font-variant
以小型大写字体或者正常字体显示文本，可能的值有：
normal: 默认值。标准字体。
small-caps: 小型大写字母。
-----------------------------------------------------------------------------------------------------
font-variant: normal;
font-variant: small-caps;
f.font-weight
指定字体的粗细，可能的值有：
数字值：100, 200, 300, 400（正常），500, 600, 700（粗体），800, 900。
关键字：normal, bold, bolder, lighter。
-----------------------------------------------------------------------------------------------------
font-weight: normal;
font-weight: bold;
font-weight: 700;
02.样式
<!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>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.font-example {
font-family: 'Times New Roman', Times, serif; /* 指定文本的字体系列 */
font-size: 24px; /* 指定文本的字体大小 */
font-style: italic; /* 指定文本的字体样式 */
font-variant: small-caps; /* 以小型大写字体或者正常字体显示文本 */
font-weight: bold; /* 指定字体的粗细 */
}
</style>
</head>
<body>
<div class="font-example">
这是一个示例字体效果。
</div>
</body>
</html>
1.3 css文本
00.属性
color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本 水平
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写
vertical-align 设置元素的垂直对齐 垂直
white-space 设置元素中空白的处理方式
word-spacing 设置字间距
01.属性选项
a.color
设置文本颜色，可以使用以下格式：
颜色名称：red, blue, green 等。
十六进制颜色代码：#ff0000, #00ff00 等。
RGB值：rgb(255, 0, 0), rgb(0, 255, 0) 等。
RGBA值（带透明度）：rgba(255, 0, 0, 0.5) 等。
HSL值：hsl(0, 100%, 50%) 等。
HSLA值（带透明度）：hsla(0, 100%, 50%, 0.5) 等。
b.direction
设置文本方向，可能的值有：
ltr: 从左到右（默认值）。
rtl: 从右到左。
c.letter-spacing
设置字符间距，可能的值有：
normal: 默认值。正常字符间距。
长度值：例如 2px, 0.1em。
d.line-height
设置行高，可能的值有：
数值：例如 1.5（行高是字体大小的1.5倍）。
百分比：例如 150%。
长度值：例如 20px。
关键字：normal（默认值）。
e.text-align
对齐元素中的文本，可能的值有：
left: 左对齐（默认值）。
right: 右对齐。
center: 居中对齐。
justify: 两端对齐。
f.text-decoration
向文本添加修饰，可能的值有：
none: 无装饰（默认值）。
underline: 下划线。
overline: 上划线。
line-through: 删除线。
blink: 闪烁（在大多数浏览器中已不再支持）
g.text-indent
缩进元素中文本的首行，可能的值有：
长度值：例如 50px, 2em。
百分比：例如 10%。
h.text-shadow
设置文本阴影，可能的值有：
阴影的X轴偏移：例如 2px。
阴影的Y轴偏移：例如 2px。
阴影的模糊半径（可选）：例如 5px。
阴影的颜色：例如 rgba(0,0,0,0.3)。
text-shadow: 2px 2px 5px rgba(0,0,0,0.3);
i.text-transform
控制元素中的字母，可能的值有：
none: 默认值。无变化。
capitalize: 首字母大写。
uppercase: 全部大写。
lowercase: 全部小写。
j.unicode-bidi
设置或返回文本是否被重写，通常与direction属性结合使用，可能的值有：
normal: 默认值。使用正常的嵌入次序。
embed: 嵌入文本。
bidi-override: 重写文本的方向。
k.vertical-align
设置元素的垂直对齐，可能的值有：
关键字：baseline（默认值）, sub, super, top, text-top, middle, bottom, text-bottom。
百分比：例如 50%。
长度值：例如 10px。
l.white-space
设置元素中空白的处理方式，可能的值有：
normal: 默认值。合并空白并换行。
nowrap: 合并空白但不换行。
pre: 保留空白符并不换行（类似于<pre>）。
pre-wrap: 保留空白符并换行。
pre-line: 合并空白并换行。
m.word-spacing
设置字间距，可能的值有：
normal: 默认值。正常字间距。
长度值：例如 2px, 0.1em。
02.样式
<!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>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.text-example {
color: #333; /* 设置文本颜色 */
direction: ltr; /* 设置文本方向 */
letter-spacing: 2px; /* 设置字符间距 */
line-height: 1.6; /* 设置行高 */
text-align: center; /* 对齐元素中的文本 */
text-decoration: underline; /* 向文本添加修饰 */
text-indent: 50px; /* 缩进元素中文本的首行 */
text-shadow: 2px 2px 5px rgba(0,0,0,0.3); /* 设置文本阴影 */
text-transform: uppercase; /* 控制元素中的字母 */
unicode-bidi: bidi-override; /* 设置或返回文本是否被重写 */
vertical-align: middle; /* 设置元素的垂直对齐 */
white-space: nowrap; /* 设置元素中空白的处理方式 */
word-spacing: 4px; /* 设置字间距 */
}
</style>
</head>
<body>
<div class="text-example">
这是一个示例文本效果。
</div>
</body>
</html>
1.4 css链接
00.属性
链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。
特别的链接，可以有不同的样式，这取决于他们是什么状态。
这四个链接状态是：
a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
01.属性选项
a.a:link
正常，未访问过的链接。可以应用任何CSS属性。常用属性包括：
color：设置链接的文本颜色。例如 color: blue;。
text-decoration：设置文本装饰。例如 none, underline, overline, line-through。
font-size：设置字体大小。例如 font-size: 16px;。
background-color：设置背景颜色。例如 background-color: yellow;。
-----------------------------------------------------------------------------------------------------
a:link {
color: blue;
text-decoration: none;
font-size: 16px;
}
b.a:visited
用户已访问过的链接。可以应用任何CSS属性。常用属性包括：
color：设置已访问链接的文本颜色。例如 color: purple;。
text-decoration：设置文本装饰。例如 none, underline, overline, line-through。
font-size：设置字体大小。例如 font-size: 16px;。
background-color：设置背景颜色。例如 background-color: lightgray;。
-----------------------------------------------------------------------------------------------------
a:visited {
color: purple;
text-decoration: line-through;
font-size: 16px;
}
c.a:hover
当用户鼠标放在链接上时。可以应用任何CSS属性。常用属性包括：
color：设置鼠标悬停时链接的文本颜色。例如 color: red;。
text-decoration：设置文本装饰。例如 none, underline, overline, line-through。
font-size：设置字体大小。例如 font-size: 16px;。
background-color：设置背景颜色。例如 background-color: yellow;。
cursor：设置鼠标指针的样式。例如 cursor: pointer;。
-----------------------------------------------------------------------------------------------------
a:hover {
color: red;
text-decoration: underline;
font-size: 16px;
background-color: yellow;
}
d.a:active
链接被点击的那一刻。可以应用任何CSS属性。常用属性包括：
color：设置点击时链接的文本颜色。例如 color: green;。
text-decoration：设置文本装饰。例如 none, underline, overline, line-through。
font-size：设置字体大小。例如 font-size: 16px;。
background-color：设置背景颜色。例如 background-color: lightgray;。
-----------------------------------------------------------------------------------------------------
a:active {
color: green;
text-decoration: none;
font-size: 16px;
background-color: lightgray;
}
02.样式
<!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>
/* 未访问过的链接 */
a:link {
color: blue; /* 设置文本颜色 */
text-decoration: none; /* 去掉下划线 */
font-size: 16px; /* 设置字体大小 */
}
/* 已访问过的链接 */
a:visited {
color: purple; /* 设置文本颜色 */
text-decoration: line-through; /* 添加删除线 */
font-size: 16px; /* 设置字体大小 */
}
/* 鼠标放在链接上时 */
a:hover {
color: red; /* 设置文本颜色 */
text-decoration: underline; /* 添加下划线 */
font-size: 16px; /* 设置字体大小 */
background-color: yellow; /* 设置背景颜色 */
}
/* 链接被点击的那一刻 */
a:active {
color: green; /* 设置文本颜色 */
text-decoration: none; /* 去掉下划线 */
font-size: 16px; /* 设置字体大小 */
background-color: lightgray; /* 设置背景颜色 */
}
</style>
</head>
<body>
<h1>链接样式示例</h1>
<p>请点击以下链接以查看不同的链接状态效果：</p>
<a href="https://www.example.com" target="_blank">访问Example.com</a>
<br>
<a href="https://www.example.com" target="_blank">访问Example.com（已访问）</a>
</body>
</html>
1.5 css列表：li属性
00.属性
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图像设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
01.属性选项
a.list-style
简写属性，用于在一个声明中设置所有列表属性。语法为：
list-style: [list-style-type] [list-style-position] [list-style-image];
-----------------------------------------------------------------------------------------------------
list-style: square inside url('https://www.example.com/path/to/image.png');
b.list-style-image
将图像设置为列表项标志。可能的值有：
none：无图像标志。
url('path/to/image.png')：指定图像路径。
-----------------------------------------------------------------------------------------------------
list-style-image: url('https://www.example.com/path/to/image.png');
list-style-image: none;
c.list-style-position
设置列表中列表项标志的位置。可能的值有：
inside：列表项标志在文本内，文本会环绕标志。
outside：列表项标志在文本外，文本不会环绕标志（默认值）。
-----------------------------------------------------------------------------------------------------
list-style-position: inside;
list-style-position: outside;
d.list-style-type
设置列表项标志的类型。可能的值有：
disc：实心圆（默认值）。
circle：空心圆。
square：实心方块。
decimal：十进制数（1, 2, 3, 4, ...）。
decimal-leading-zero：带前导零的十进制数（01, 02, 03, 04, ...）。
lower-roman：小写罗马数字（i, ii, iii, iv, ...）。
upper-roman：大写罗马数字（I, II, III, IV, ...）。
lower-alpha：小写字母（a, b, c, d, ...）。
upper-alpha：大写字母（A, B, C, D, ...）。
none：无标志。
02.样式
<!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>
/* 设置列表项标志的类型 */
.list-style-type {
list-style-type: square; /* 可以是 disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha 等 */
}
/* 将图像设置为列表项标志 */
.list-style-image {
list-style-image: url('https://www.example.com/path/to/image.png'); /* 替换为实际的图像URL */
}
/* 设置列表中列表项标志的位置 */
.list-style-position {
list-style-position: inside; /* 可以是 inside 或 outside */
}
/* 设置所有用于列表的属性 */
.list-style {
list-style-type: decimal; /* 列表项标志的类型 */
list-style-image: none; /* 列表项标志的图像 */
list-style-position: outside; /* 列表项标志的位置 */
}
</style>
</head>
<body>
<h1>列表属性示例</h1>
<h2>list-style-type 示例</h2>
<ul class="list-style-type">
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
<h2>list-style-image 示例</h2>
<ul class="list-style-image">
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
<h2>list-style-position 示例</h2>
<ul class="list-style-position">
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
<h2>list-style 示例</h2>
<ul class="list-style">
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
</body>
</html>
1.6 css表格：常见属性
00.属性
表格边框 指定CSS表格边框，使用border属性。
折叠边框 border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：
表格宽度和高度 Width和height属性定义表格的宽度和高度。
表格文字对齐 表格中的文本对齐和垂直对齐属性。 text-align属性设置水平对齐方式，向左，右，或中心：
表格填充 如需控制边框和表格内容之间的间距，应使用td和th元素的填充属性：
表格颜色 指定边框的颜色，和th元素的文本和背景颜色：
01.属性选项
a.表格边框
用于设置表格的边框。可以定义边框的宽度、样式和颜色。
选项：
宽度（border-width）：例如 1px, 2px, medium, thick。
样式（border-style）：例如 none, solid, dotted, dashed, double, groove, ridge, inset, outset。
颜色（border-color）：可以是颜色名称（例如 red）、十六进制颜色（例如 #ff0000）、RGB（例如 rgb(255,0,0)）或RGBA（例如 rgba(255,0,0,0.5)）。
-----------------------------------------------------------------------------------------------------
table {
border: 2px solid black; /* 2px宽度的实线黑色边框 */
}
b.折叠边框
设置表格的边框是否折叠为一个单一的边框或保持分隔状态。
选项：
collapse：相邻的单元格边框合并为一个单一的边框。
separate：相邻的单元格边框保持分隔。
-----------------------------------------------------------------------------------------------------
table {
border-collapse: collapse; /* 折叠边框 */
}
c.表格宽度和高度
定义表格的宽度和高度。
选项：
宽度 (width)：可以是具体的像素值（例如 100px）、百分比（例如 100%）等。
高度 (height)：可以是具体的像素值（例如 200px）、百分比（例如 50%）等。
-----------------------------------------------------------------------------------------------------
table {
width: 80%; /* 表格宽度占容器的80% */
height: 200px; /* 表格高度为200像素 */
}
d.表格文字对齐
控制表格中的文本对齐方式和垂直对齐方式。
选项：
水平对齐 (text-align)：
left：左对齐。
center：居中对齐。
right：右对齐。
垂直对齐 (vertical-align)：
top：顶部对齐。
middle：中部对齐。
bottom：底部对齐。
-----------------------------------------------------------------------------------------------------
th, td {
text-align: center; /* 水平居中对齐 */
vertical-align: middle; /* 垂直居中对齐 */
}
e.表格填充
控制边框和表格内容之间的间距。
选项：
具体的像素值（例如 10px, 5px 10px）。
百分比（相对于单元格的宽度和高度）。
-----------------------------------------------------------------------------------------------------
th, td {
padding: 10px; /* 单元格内容与边框之间的间距为10像素 */
}
f.表格颜色
指定边框的颜色、th元素的文本和背景颜色。
选项：
边框颜色 (border-color)：可以是颜色名称、十六进制颜色、RGB或RGBA。
背景颜色 (background-color)：可以是颜色名称、十六进制颜色、RGB或RGBA。
文本颜色 (color)：可以是颜色名称、十六进制颜色、RGB或RGBA。
-----------------------------------------------------------------------------------------------------
th {
background-color: #f2f2f2; /* 表头背景颜色 */
color: black; /* 表头文本颜色 */
}
td {
border: 1px solid black; /* 单元格边框颜色 */
}
02.样式
<!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>
/* 表格边框 */
table {
border: 2px solid black; /* 设置表格边框颜色和宽度 */
border-collapse: collapse; /* 折叠边框（将相邻的表格单元格边框合并为一个单一的边框） */
width: 100%; /* 设置表格宽度为100% */
height: auto; /* 设置表格高度为自动 */
}
/* 折叠边框 */
table {
border-collapse: collapse; /* 折叠边框 */
}
/* 表格宽度和高度 */
table {
width: 80%; /* 设置表格宽度 */
height: 200px; /* 设置表格高度 */
}
/* 表格文字对齐 */
th, td {
text-align: center; /* 设置水平对齐方式（可以是 left, center, right） */
vertical-align: middle; /* 设置垂直对齐方式（可以是 top, middle, bottom） */
}
/* 表格填充 */
th, td {
padding: 10px; /* 设置单元格的内边距 */
}
/* 表格颜色 */
th {
background-color: #f2f2f2; /* 设置th元素的背景颜色 */
color: black; /* 设置th元素的文本颜色 */
}
td {
border: 1px solid black; /* 设置单元格边框的颜色和宽度 */
}
</style>
</head>
<body>
<h1>表格属性示例</h1>
<table>
<thead>
<tr>
<th>表头 1</th>
<th>表头 2</th>
<th>表头 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据 1</td>
<td>数据 2</td>
<td>数据 3</td>
</tr>
<tr>
<td>数据 4</td>
<td>数据 5</td>
<td>数据 6</td>
</tr>
</tbody>
</table>
</body>
</html>
1.7 css表单：常见属性
00.属性
输入框样式 使用 width 属性来设置输入框的宽度：
输入框填充 使用 padding 属性可以在输入框中添加内边距。
输入框边框 使用 border 属性可以修改 input 边框的大小或颜色，使用 border-radius 属性可以给 input 添加圆角
输入框颜色 可以使用 background-color 属性来设置输入框的背景颜色，color 属性用于修改文本颜色
输入框聚焦 默认情况下，一些浏览器在输入框获取焦点时（点击输入框）会有一个蓝色轮廓。我们可以设置 input 样式为 outline: none; 来忽略该效果。 使用 :focus 选择器可以设置输入框在获取焦点时的样式
输入框图标 如果你想在输入框中添加图标，可以使用 background-image 属性和用于定位的background-position 属性。注意设置图标的左边距，让图标有一定的空间：
带动画的搜索框 以下实例使用了 CSS transition 属性，该属性设置了输入框在获取焦点时会向右延展。
文本框样式(textarea) 使用 resize 属性来禁用文本框可以重置大小的功能（一般拖动右下角可以重置大小）
下拉菜单样式(select)
按钮样式(button)
01.属性选项
a.输入框样式
宽度 (width)：
可以是具体的像素值（如 300px）。
也可以是百分比（如 100%），相对于其父元素的宽度。
-----------------------------------------------------------------------------------------------------
input {
width: 300px; /* 设置输入框宽度 */
}
b.输入框填充
内边距 (padding)：
可以是具体的像素值（如 10px）。
也可以是百分比（相对于元素的宽度）。
-----------------------------------------------------------------------------------------------------
input {
padding: 10px; /* 添加内边距 */
}
c.输入框边框
边框 (border)：
宽度（border-width）：例如 1px, 2px, medium, thick。
样式（border-style）：例如 none, solid, dotted, dashed, double, groove, ridge, inset, outset。
颜色（border-color）：可以是颜色名称、十六进制颜色、RGB 或 RGBA 值。
-----------------------------------------------------------------------------------------------------
圆角 (border-radius)：
可以是具体的像素值（如 5px）。
也可以是百分比（如 50%），用于圆形元素。
-----------------------------------------------------------------------------------------------------
input {
border: 2px solid #ccc; /* 设置边框宽度、样式和颜色 */
border-radius: 5px; /* 设置圆角 */
}
d.输入框颜色
背景颜色 (background-color)：
可以是颜色名称、十六进制颜色、RGB 或 RGBA 值。
-----------------------------------------------------------------------------------------------------
文本颜色 (color)：
可以是颜色名称、十六进制颜色、RGB 或 RGBA 值。
-----------------------------------------------------------------------------------------------------
input {
background-color: #f9f9f9; /* 设置背景颜色 */
color: #333; /* 设置文本颜色 */
}
e.输入框聚焦
去除轮廓 (outline)：
使用 outline: none; 移除默认的焦点轮廓。
-----------------------------------------------------------------------------------------------------
聚焦样式 (:focus)：
可以设置 border-color, background-color, box-shadow 等属性。
-----------------------------------------------------------------------------------------------------
input:focus {
outline: none; /* 移除焦点轮廓 */
border-color: #007bff; /* 设置焦点时边框颜色 */
background-color: #e0f7fa; /* 设置焦点时背景颜色 */
}
f.输入框图标
背景图像 (background-image)：
使用 url('path/to/icon.png') 指定图像路径。
-----------------------------------------------------------------------------------------------------
背景定位 (background-position)：
可以是具体的像素值（如 10px 50%），也可以是关键词（如 left center）。
-----------------------------------------------------------------------------------------------------
背景重复 (background-repeat)：
可以是 no-repeat, repeat, repeat-x, repeat-y。
-----------------------------------------------------------------------------------------------------
内边距 (padding-left)：
留出空间以容纳图标。
-----------------------------------------------------------------------------------------------------
input {
background-image: url('https://www.example.com/path/to/icon.png'); /* 设置图标 */
background-repeat: no-repeat; /* 不重复图标 */
background-position: 10px center; /* 图标位置 */
padding-left: 40px; /* 为图标留出空间 */
}
g.带动画的搜索框
过渡 (transition)：
使用 transition 属性定义动画效果的持续时间和类型（如 width 0.4s ease）。
-----------------------------------------------------------------------------------------------------
input[type="search"].animated {
transition: width 0.4s ease; /* 设置过渡动画 */
}
input[type="search"].animated:focus {
width: 400px; /* 焦点时输入框宽度 */
}
h.文本框样式
大小 (width 和 height)：
可以是具体的像素值（如 300px, 150px）。
-----------------------------------------------------------------------------------------------------
内边距 (padding)：
添加内边距。
-----------------------------------------------------------------------------------------------------
禁用大小调整 (resize)：
none：禁用大小调整功能。
both：允许水平和垂直调整。
horizontal：只允许水平调整。
vertical：只允许垂直调整。
-----------------------------------------------------------------------------------------------------
textarea {
width: 300px; /* 设置宽度 */
height: 150px; /* 设置高度 */
padding: 10px; /* 添加内边距 */
border: 2px solid #ccc; /* 设置边框 */
border-radius: 5px; /* 添加圆角 */
resize: none; /* 禁用大小调整功能 */
}
i.下拉菜单样式
宽度 (width)：
可以是具体的像素值（如 320px）。
-----------------------------------------------------------------------------------------------------
内边距 (padding)：
添加内边距。
-----------------------------------------------------------------------------------------------------
边框 (border)：
设置边框的宽度、样式和颜色。
-----------------------------------------------------------------------------------------------------
背景颜色 (background-color)：
设置背景颜色。
-----------------------------------------------------------------------------------------------------
文本颜色 (color)：
设置文本颜色。
-----------------------------------------------------------------------------------------------------
select {
width: 320px; /* 设置宽度 */
padding: 10px; /* 添加内边距 */
border: 2px solid #ccc; /* 设置边框 */
border-radius: 5px; /* 添加圆角 */
background-color: #f9f9f9; /* 设置背景颜色 */
color: #333; /* 设置文本颜色 */
}
j.按钮样式 (button)
背景颜色 (background-color)：
设置按钮背景颜色。
-----------------------------------------------------------------------------------------------------
文本颜色 (color)：
设置按钮文本颜色。
-----------------------------------------------------------------------------------------------------
边框 (border)：
设置边框的宽度、样式和颜色。
-----------------------------------------------------------------------------------------------------
内边距 (padding)：
添加内边距。
-----------------------------------------------------------------------------------------------------
圆角 (border-radius)：
设置圆角。
-----------------------------------------------------------------------------------------------------
鼠标指针 (cursor)：
设置鼠标指针样式（例如 pointer）。
-----------------------------------------------------------------------------------------------------
字体大小 (font-size)：
设置按钮文本的字体大小。
-----------------------------------------------------------------------------------------------------
过渡 (transition)：
设置悬停和点击时的动画效果。
-----------------------------------------------------------------------------------------------------
button {
background-color: #007bff; /* 设置背景颜色 */
color: white; /* 设置文本颜色 */
border: none; /* 移除边框 */
padding: 10px 20px; /* 添加内边距 */
border-radius: 5px; /* 添加圆角 */
cursor: pointer; /* 设置鼠标指针为手形 */
font-size: 16px; /* 设置字体大小 */
transition: background-color 0.3s ease; /* 设置过渡动画 */
}
button:hover {
background-color: #0056b3; /* 鼠标悬停时背景颜色 */
}
button:active {
background-color: #003d7a; /* 点击时背景颜色 */
}
02.样式
<!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>
/* 输入框样式 */
input[type="text"], input[type="email"], input[type="password"] {
width: 300px; /* 设置输入框宽度 */
padding: 10px; /* 添加内边距 */
border: 2px solid #ccc; /* 设置边框大小和颜色 */
border-radius: 5px; /* 添加圆角 */
background-color: #f9f9f9; /* 设置背景颜色 */
color: #333; /* 设置文本颜色 */
}
/* 输入框聚焦样式 */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
outline: none; /* 移除默认焦点轮廓 */
border-color: #007bff; /* 设置焦点时边框颜色 */
background-color: #e0f7fa; /* 设置焦点时背景颜色 */
}
/* 输入框图标 */
input[type="search"] {
background-image: url('https://www.example.com/path/to/search-icon.png'); /* 设置图标 */
background-repeat: no-repeat; /* 不重复图标 */
background-position: 10px center; /* 设置图标位置 */
padding-left: 40px; /* 给图标留出空间 */
}
/* 带动画的搜索框 */
input[type="search"].animated {
transition: width 0.4s ease; /* 设置过渡动画 */
}
input[type="search"].animated:focus {
width: 400px; /* 焦点时输入框宽度 */
}
/* 文本框样式 */
textarea {
width: 300px; /* 设置宽度 */
height: 150px; /* 设置高度 */
padding: 10px; /* 添加内边距 */
border: 2px solid #ccc; /* 设置边框 */
border-radius: 5px; /* 添加圆角 */
resize: none; /* 禁用大小调整功能 */
}
/* 下拉菜单样式 */
select {
width: 320px; /* 设置宽度 */
padding: 10px; /* 添加内边距 */
border: 2px solid #ccc; /* 设置边框 */
border-radius: 5px; /* 添加圆角 */
background-color: #f9f9f9; /* 设置背景颜色 */
color: #333; /* 设置文本颜色 */
}
/* 按钮样式 */
button {
background-color: #007bff; /* 设置背景颜色 */
color: white; /* 设置文本颜色 */
border: none; /* 移除边框 */
padding: 10px 20px; /* 添加内边距 */
border-radius: 5px; /* 添加圆角 */
cursor: pointer; /* 设置鼠标指针为手形 */
font-size: 16px; /* 设置字体大小 */
transition: background-color 0.3s ease; /* 设置过渡动画 */
}
/* 按钮悬停样式 */
button:hover {
background-color: #0056b3; /* 鼠标悬停时背景颜色 */
}
/* 按钮点击样式 */
button:active {
background-color: #003d7a; /* 点击时背景颜色 */
}
</style>
</head>
<body>
<h1>表单样式示例</h1>
<form>
<!-- 输入框 -->
<label for="text-input">文本输入框：</label>
<input type="text" id="text-input" name="text-input" placeholder="输入文本"><br><br>
<label for="email-input">电子邮件输入框：</label>
<input type="email" id="email-input" name="email-input" placeholder="输入电子邮件"><br><br>
<label for="password-input">密码输入框：</label>
<input type="password" id="password-input" name="password-input" placeholder="输入密码"><br><br>
<label for="search-input">搜索框：</label>
<input type="search" id="search-input" name="search-input" class="animated" placeholder="搜索"><br><br>
<!-- 文本框 -->
<label for="textarea">文本区域：</label>
<textarea id="textarea" name="textarea" placeholder="输入文本"></textarea><br><br>
<!-- 下拉菜单 -->
<label for="dropdown">选择菜单：</label>
<select id="dropdown" name="dropdown">
<option value="option1">选项 1</option>
<option value="option2">选项 2</option>
<option value="option3">选项 3</option>
</select><br><br>
<!-- 按钮 -->
<button type="submit">提交</button>
</form>
</body>
</html>
1.8 css盒子继承
01.只定义每层盒子特性，垂直瀑布
a.区别
IE盒模型和标准盒模型的区别：两者的区别在于content的不同，IE盒模型的content包括border、padding
当使用content-box时：页面将采用标准模式来解析计算，content-box也是默认模式；
当使用border-box时，页面将采用怪异模式解析计算，怪异模式也称为IE模式；
当使用inherit时：页面将从父元素继承box-sizing的值；
b.计算公式
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
c.下面的例子中的元素的总宽度为 450px：
div {
width: 300px; content
border: 25px solid green; border
padding: 25px; padding
margin: 25px; margin
}
---------------------------------------------------------------------------------------------------------
300px (宽)
+ 50px (左 + 右填充)
+ 50px (左 + 右边框)
+ 50px (左 + 右边距)
= 450px
02.属性继承
a.可继承属性
a.字体属性
font-family: 字体系列
font-size: 字体大小
font-style: 字体样式（正常、斜体等）
font-weight: 字体粗细
font-variant: 字体变体（小型大写等）
line-height: 行高
b.文本属性
text-align: 文本对齐方式
text-indent: 首行缩进
text-transform: 文本转换（大写、小写等）
white-space: 空格处理
word-spacing: 单词间距
c.颜色和背景
color: 文本颜色
visibility: 可见性
list-style: 列表样式
quotes: 引用样式（引号）
d.表格属性
border-collapse: 边框合并
border-spacing: 边框间距
caption-side: 表格标题位置
empty-cells: 空单元格的显示
table-layout: 表格布局
e.其他属性
inherit: 强制继承父元素的属性值
direction: 文本方向（从左到右或从右到左）
text-decoration: 文本装饰（下划线等）
text-shadow: 文本阴影
02.不可继承的属性：
a.盒子模型属性
margin: 外边距
padding: 内边距
border: 边框
width: 宽度
height: 高度
max-width: 最大宽度
max-height: 最大高度
min-width: 最小宽度
min-height: 最小高度
b.背景属性
background: 背景（简写属性）
background-color: 背景颜色
background-image: 背景图像
background-repeat: 背景图像重复
background-position: 背景图像位置
background-size: 背景图像大小
c.布局属性
display: 显示类型（块、行内、行内块等）
position: 定位类型（静态、相对、绝对、固定）
top, right, bottom, left: 定位偏移量
float: 浮动
clear: 清除浮动
overflow: 溢出处理
flex, grid: 布局模型
d.视觉效果属性
opacity: 不透明度
visibility: 可见性
z-index: 层叠顺序
box-shadow: 盒子阴影
text-shadow: 文本阴影
e.列表属性
list-style: 列表样式（简写属性）
list-style-type: 列表项标记类型
list-style-position: 列表项标记位置
list-style-image: 列表项标记图像
f.其他属性
cursor: 鼠标指针样式
float: 浮动
clip: 裁剪区域
resize: 调整大小
transition: 过渡效果
transform: 变形
03.优先级算法
a.总结1
1.优先级就近原则，同权重情况下样式定义最近者为准
2.载入样式以最后载入的定位为准
3.!important > id > class > tag
4.!important > style行内样式 > 内联样式 > 外联样式【根据css放置位置计算权重】
b.总结2
a.优先级规则
!important：最高优先级，不管其他规则的优先级如何，只要声明了!important，该规则都会被应用。
内联样式（元素的style属性）：权重为1000。
ID选择器：权重为100。
类选择器、属性选择器和伪类：权重为10。
元素选择器和伪元素：权重为1。
通配符选择器（*）、子选择器（>）、相邻兄弟选择器（+）、一般兄弟选择器（~）：权重为0。
b.CSS优先级的计算
权重的计算方式是基于选择器的各个部分来进行的。例如，选择器#id .class的权重为100（ID选择器） + 10（类选择器） = 110。
当两个选择器的优先级相同时，后定义的规则会覆盖先定义的规则。
04.说明
.box 类：
宽度和高度：width 和 height 设置了盒子的宽度和高度。
背景色：background-color 设置了盒子的背景颜色。
文本颜色：color 设置了文本的颜色。
文本对齐：text-align 将文本水平居中，line-height 用于使文本垂直居中。
外边距：margin 设置了盒子与其他元素的距离。
内边距：padding 设置了内容与边框之间的空间。
边框：border 设置了盒子的边框。
盒子模型：box-sizing: border-box 确保元素的宽度和高度包括边框和内边距。
.box-outer 和 .box-inner 类：
.box-outer：包裹 box-inner 的外部容器，具有背景色和边框。
.box-inner：包裹实际内容的内部盒子，具有背景色、边框和内边距，使用 box-sizing: border-box 确保内边距和边框不会超出其指定宽度。
05.样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 盒子模型示例</title>
<style>
/* 全局样式 */
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 0;
background-color: #f4f4f4;
}
/* 盒子模型容器 */
.box {
width: 300px;
height: 150px;
background-color: #4CAF50;
color: white;
text-align: center;
line-height: 150px; /* 使文本垂直居中 */
margin: 20px; /* 外边距 */
padding: 20px; /* 内边距 */
border: 5px solid #333; /* 边框 */
box-sizing: border-box; /* 包括边框和内边距在内的宽度和高度 */
}
.box-outer {
background-color: #f9f9f9;
border: 2px solid #ccc;
padding: 10px;
}
.box-inner {
background-color: #ddd;
border: 2px solid #999;
padding: 20px;
box-sizing: border-box; /* 适用于内边距和边框 */
}
</style>
</head>
<body>
<h2>CSS 盒子模型示例</h2>
<div class="box">
盒子模型
</div>
<h3>盒子模型详细示例</h3>
<div class="box-outer">
<div class="box-inner">
内部盒子
</div>
</div>
</body>
</html>
1.9 css行块元素
01.汇总1
a.行内元素
css的display属性是inline，
不会独占一行，相邻行内元素会排列在同一行里，直到一行排不下，才会换行，
其宽度随元素的内容而变化，
设置高度和宽度的话会不起作用，
水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果，
但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom却不会产生边距效果。
b.块级元素
css的display属性是block，会独占一行。
默认情况下，其宽度自动填满其父元素宽度，宽高可以设置，但设置了宽度还是独占一行。
---------------------------------------------------------------------------------------------------------
修改display为block，可以把行内元素变成块级元素，
修改display为inline，可以把块级元素变成行内元素。
修改display为inline-block时，可以使行内元素保持在一行内，但具有块级元素的特点。
c.行内块元素的兼容性使用
div {
display:inline-block;
*display:inline;
*zoom:1;
}
02.汇总2
a.行内元素
行内元素不会在其前后生成换行符，它们通常只占据它们对应标签的内容所需的宽度
b.块级元素
块级元素在其前后会生成换行符，并占据其父元素（容器）的全部宽度。
c.空元素
空元素（或自闭合元素）是没有内容的元素，即它们没有闭合标签
03.汇总3
a.行内元素
a、b、span、img、input、strong、select、label、em、button、textarea
b.块级元素
div、ul、li、dl、dt、dd、p、h1-h6、blockquote、table
c.空元素：即系没有内容的HTML元素
br、meta、hr、link、input、img
04.汇总4
a.行内元素
<a>：锚标签，用于定义超链接。
<abbr>：缩写标签，用于定义缩写。
<b>：加粗文本。
<bdo>：文本方向控制。
<br>：换行符。
<cite>：引用。
<code>：代码片段。
<em>：强调文本。
<i>：斜体文本。
<img>：图像。
<input>：输入控件。
<label>：表单标签。
<q>：短引用。
<small>：小号文本。
<span>：通用行内容器。
<strong>：强调的重要文本。
<sub>：下标文本。
<sup>：上标文本。
<time>：时间。
<u>：下划线文本。
b.块级元素
<address>：地址。
<article>：文章。
<aside>：侧边内容。
<blockquote>：长引用。
<canvas>：绘图区域。
<dd>：定义列表中的定义描述。
<div>：通用块级容器。
<dl>：定义列表。
<dt>：定义列表中的定义项。
<fieldset>：表单控制组。
<figcaption>：图注。
<figure>：图示。
<footer>：页脚。
<form>：表单。
<h1>到<h6>：标题。
<header>：页眉。
<hr>：水平线。
<li>：列表项。
<main>：页面主内容。
<nav>：导航链接。
<ol>：有序列表。
<p>：段落。
<pre>：预格式化文本。
<section>：节。
<table>：表格。
<ul>：无序列表。
c.空元素：即系没有内容的HTML元素
<area>：图像映射中的区域。
<base>：为所有页面上的链接规定默认地址或默认目标。
<br>：换行符。
<col>：表格中一列。
<embed>：嵌入外部内容。
<hr>：水平线。
<img>：图像。
<input>：输入控件。
<link>：链接到外部资源。
<meta>：元数据。
<param>：对象的参数。
<source>：媒体元素的媒体资源。
<track>：视频文本轨道。
<wbr>：建议的换行点。
1.10 css3框大小
00.说明
CSS3 box-sizing 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。
a.box-sizing属性
属性: box-sizing
属性值: content-box（默认值）
计算方式：width 和 height 仅指内容区域的宽度和高度，内边距（padding）和边框（border）会在这些尺寸之外额外加上，从而使实际的盒子大小变得更大。
div {
width: 200px;
height: 100px;
padding: 10px;
border: 5px solid black;
box-sizing: content-box;
}
实际计算方式：实际宽度 = width + padding-left + padding-right + border-left + border-right
属性值: border-box
计算方式：width 和 height 包括内边距和边框，所以设置的宽度和高度包括所有的内边距和边框，从而使盒子在页面上显示的大小更为精确。
div {
width: 200px;
height: 100px;
padding: 10px;
border: 5px solid black;
box-sizing: border-box;
}
实际计算方式：实际宽度 = width（包括 padding 和 border）
属性值: inherit
inherit: 当 box-sizing 设置为 inherit 时，当前元素的 box-sizing 属性值将继承自其父元素。
如果父元素的 box-sizing 值是 border-box，则当前元素也会是 border-box。
如果父元素的 box-sizing 值是 content-box，则当前元素也会是 content-box
b.其他相关属性
width
定义元素的宽度。
常见值：auto, px, %, em, rem, vw, vh 等。
height
定义元素的高度。
常见值：auto, px, %, em, rem, vh 等。
padding
定义内容区域与边框之间的内边距。
常见值：px, %, em, rem 等。
可设置单独的 padding-top, padding-right, padding-bottom, padding-left。
border
定义边框的宽度、样式和颜色。
常见值：px, solid, dashed, dotted, rgba 等。
可设置单独的 border-top, border-right, border-bottom, border-left。
margin
定义元素与其他元素之间的外边距。
常见值：px, %, em, rem 等。
可设置单独的 margin-top, margin-right, margin-bottom, margin-left。
overflow
控制内容溢出元素盒子时的显示方式。
常见值：visible, hidden, scroll, auto。
max-width / max-height
限制元素的最大宽度或高度。
常见值：px, %, em, rem 等。
min-width / min-height
限制元素的最小宽度或高度。
常见值：px, %, em, rem 等。
02.样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Box-Sizing 示例</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 0;
background-color: #f4f4f4;
}
h2, h3 {
color: #333;
}
.box {
margin-bottom: 20px;
}
/* 不使用 box-sizing 属性 */
.div1, .div2 {
width: 300px;
height: 100px;
border: 1px solid #ddd;
}
.div1 {
border-color: blue;
}
.div2 {
border-color: red;
padding: 50px;
}
/* 使用 box-sizing: border-box 属性 */
.box-border-box .div1, .box-border-box .div2 {
width: 300px;
height: 100px;
border: 1px solid #ddd;
box-sizing: border-box;
}
.box-border-box .div1 {
border-color: blue;
}
.box-border-box .div2 {
border-color: red;
padding: 50px;
}
/* 全局应用 box-sizing 属性 */
* {
box-sizing: border-box;
}
/* 自定义样式 */
.full-width-box {
width: 100%;
padding: 20px;
border: 1px solid #333;
margin-top: 20px;
}
</style>
</head>
<body>
<h2>不使用 CSS3 box-sizing 属性</h2>
<div class="box">
<div class="div1">这是一个较小的框</div>
<div class="div2">这是一个较大的框</div>
</div>
<h2>使用 CSS3 box-sizing 属性</h2>
<div class="box-border-box">
<div class="div1">盒子模型 - 边框框大小相同</div>
<div class="div2">盒子模型 - 边框框大小相同</div>
</div>
<h2>全局应用 box-sizing 属性</h2>
<div class="full-width-box">
这是一个全宽的盒子，包含内边距和边框
</div>
</body>
</html>
1.11 css3弹性盒子
00.汇总
a.定义（少用浮动、相对位置、绝对位置）
flexbox（弹性盒布局）可以简便、完整、响应式地实现各种页面布局，主要思想是给予容器控制内部元素高度和宽度的能力
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”
它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”
b.使用
Webkit 内核的浏览器，必须加上-webkit前缀
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效
flex容器属性：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content
试用场景：弹性布局适合于移动前端开发，在Android和ios上也完美支持
01.flex-direction 规定元素排列方向
row：从左往右排列（默认值）
row-reverse：从右往左排列
column：从上往下排列
column-reverse：从下往上排列
02.flex-wrap 规定元素是否换
nowrap：不换行（默认值）
wrap：换行，第一行在上面
wrap-reverse：反向换行，第一行在下面
03.flex-flow（flex-direction + flex-wrap）
默认row + nowrap
04.justify-content 横向排列
flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
05.align-items 纵向排列
flex-start：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline: 项目的第一行文字的基线对齐
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
06.align-content 行与行之间的排列分布
flex-start：与交叉轴的起点对齐
flex-end：与交叉轴的终点对齐
center：与交叉轴的中点对齐
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
stretch（默认值）：轴线占满整个交叉轴
07.单独设置子民
a.order子民单独排序
order:8; order:1; order:-2;
b.flex-grow 子民分配剩余空间比例
flex-grow:2; flex-grow:1
c.flex-shrink 子民如何收缩空间
flex-shrink:2; felx-shrink:1;
d.align-self 单独设置子民的位置
auto
flex-start
flex-end
center
baseline
strech
99.样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Flexbox 示例</title>
<style>
/* Flex Container */
.flex-container {
display: flex; /* 定义为弹性容器 */
width: 400px;
height: 250px;
background-color: lightgrey;
margin-bottom: 20px;
}
/* Flex Item */
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
/* flex-direction 示例 */
.flex-direction-row {
flex-direction: row; /* 横向排列（默认） */
}
.flex-direction-row-reverse {
flex-direction: row-reverse; /* 横向反转排列 */
}
.flex-direction-column {
flex-direction: column; /* 纵向排列 */
}
.flex-direction-column-reverse {
flex-direction: column-reverse; /* 纵向反转排列 */
}
/* justify-content 示例 */
.justify-content-flex-start {
justify-content: flex-start; /* 起始对齐（默认） */
}
.justify-content-flex-end {
justify-content: flex-end; /* 结束对齐 */
}
.justify-content-center {
justify-content: center; /* 居中对齐 */
}
.justify-content-space-between {
justify-content: space-between; /* 项目间距均匀分布 */
}
.justify-content-space-around {
justify-content: space-around; /* 项目间距均匀分布，两边留有间距 */
}
/* align-items 示例 */
.align-items-flex-start {
align-items: flex-start; /* 侧轴起始对齐 */
}
.align-items-flex-end {
align-items: flex-end; /* 侧轴结束对齐 */
}
.align-items-center {
align-items: center; /* 侧轴居中对齐 */
}
.align-items-baseline {
align-items: baseline; /* 基线对齐 */
}
.align-items-stretch {
align-items: stretch; /* 拉伸对齐（默认） */
}
/* flex-wrap 示例 */
.flex-wrap-nowrap {
flex-wrap: nowrap; /* 不换行（默认） */
}
.flex-wrap-wrap {
flex-wrap: wrap; /* 换行 */
}
.flex-wrap-wrap-reverse {
flex-wrap: wrap-reverse; /* 反向换行 */
}
/* align-content 示例 */
.align-content-flex-start {
align-content: flex-start; /* 行起始对齐 */
}
.align-content-flex-end {
align-content: flex-end; /* 行结束对齐 */
}
.align-content-center {
align-content: center; /* 行居中对齐 */
}
.align-content-space-between {
align-content: space-between; /* 行均匀分布 */
}
.align-content-space-around {
align-content: space-around; /* 行均匀分布，两边留有间距 */
}
.align-content-stretch {
align-content: stretch; /* 行拉伸对齐（默认） */
}
/* order 示例 */
.order-1 {
order: 1; /* 排在后面 */
}
.order-2 {
order: 2; /* 排在更后面 */
}
.order-negative {
order: -1; /* 排在前面 */
}
/* align-self 示例 */
.align-self-flex-start {
align-self: flex-start; /* 侧轴起始对齐 */
}
.align-self-flex-end {
align-self: flex-end; /* 侧轴结束对齐 */
}
.align-self-center {
align-self: center; /* 侧轴居中对齐 */
}
.align-self-baseline {
align-self: baseline; /* 基线对齐 */
}
.align-self-stretch {
align-self: stretch; /* 拉伸对齐（默认） */
}
/* flex 示例 */
.flex-1 {
flex: 1; /* 子元素占据容器剩余空间 */
}
.flex-2 {
flex: 2; /* 子元素占据更多空间 */
}
.flex-auto {
flex: auto; /* 计算为 1 1 auto */
}
.flex-none {
flex: none; /* 计算为 0 0 auto */
}
</style>
</head>
<body>
<!-- Flex Direction Row -->
<div class="flex-container flex-direction-row">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<!-- Flex Direction Row Reverse -->
<div class="flex-container flex-direction-row-reverse">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<!-- Flex Direction Column -->
<div class="flex-container flex-direction-column">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<!-- Flex Direction Column Reverse -->
<div class="flex-container flex-direction-column-reverse">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<!-- Justify Content Flex Start -->
<div class="flex-container justify-content-flex-start">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<!-- Justify Content Flex End -->
<div class="flex-container justify-content-flex-end">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<!-- Justify Content Center -->
<div class="flex-container justify-content-center">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<!-- Justify Content Space Between -->
<div class="flex-container justify-content-space-between">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<!-- Justify Content Space Around -->
<div class="flex-container justify-content-space-around">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<!-- Align Items Flex Start -->
<div class="flex-container align-items-flex-start">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<!-- Align Items Flex End -->
<div class="flex-container align-items-flex-end">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<!-- Align Items Center -->
<div class="flex-container align-items-center">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<!-- Align Items Baseline -->
<div class="flex-container align-items-baseline">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<!-- Align Items Stretch -->
<div class="flex-container align-items-stretch">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
</div>
<!-- Flex Wrap No Wrap -->
<div class="flex-container flex-wrap-nowrap">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
</div>
<!-- Flex Wrap Wrap -->
<div class="flex-container flex-wrap-wrap">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
</div>
<!-- Flex Wrap Wrap Reverse -->
<div class="flex-container flex-wrap-wrap-reverse">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
</div>
<!-- Align Content Flex Start -->
<div class="flex-container flex-wrap-wrap align-content-flex-start">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
</div>
<!-- Align Content Flex End -->
<div class="flex-container flex-wrap-wrap align-content-flex-end">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
</div>
<!-- Align Content Center -->
<div class="flex-container flex-wrap-wrap align-content-center">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
</div>
<!-- Align Content Space Between -->
<div class="flex-container flex-wrap-wrap align-content-space-between">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
</div>
<!-- Align Content Space Around -->
<div class="flex-container flex-wrap-wrap align-content-space-around">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
</div>
<!-- Align Content Stretch -->
<div class="flex-container flex-wrap-wrap align-content-stretch">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
</div>
<!-- Order -->
<div class="flex-container flex-wrap-wrap">
<div class="flex-item order-1">1</div>
<div class="flex-item order-negative">2</div>
<div class="flex-item order-2">3</div>
</div>
<!-- Align Self -->
<div class="flex-container flex-direction-column">
<div class="flex-item align-self-flex-start">1</div>
<div class="flex-item align-self-flex-end">2</div>
<div class="flex-item align-self-center">3</div>
<div class="flex-item align-self-baseline">4</div>
<div class="flex-item align-self-stretch">5</div>
</div>
<!-- Flex -->
<div class="flex-container">
<div class="flex-item flex-1">1</div>
<div class="flex-item flex-2">2</div>
<div class="flex-item flex-auto">3</div>
<div class="flex-item flex-none">4</div>
</div>
</body>
</html>
1.12 css3显示方式
01.display 属性用于控制元素的显示方式。以下是一些常见的 display 属性值及其示例：
block：块级元素，会占据一整行。
inline：行内元素，不会占据整行。
inline-block：行内块元素，既具有块级元素的特性，又具有行内元素的特性。
flex：弹性盒子布局。
grid：块级网格容器。
inline-grid：行内网格容器。
none：隐藏元素，元素不占据空间。
---------------------------------------------------------------------------------------------------------
none: 元素不显示，且不占据任何空间。
block: 元素作为块级元素显示，占据父元素的全部宽度，并在前后添加换行符。
inline: 元素作为内联元素显示，只占据其内容所需的宽度，不会在前后添加换行符。
inline-block: 元素以内联形式显示，但可以设置宽度和高度，同时保持内联元素的特性。
flex: 元素作为弹性盒子容器显示，启用弹性布局模型。
inline-flex: 元素以内联形式显示，作为弹性盒子容器。
grid: 元素作为网格容器显示，启用网格布局模型。
inline-grid: 元素以内联形式显示，作为网格容器。
table: 元素以表格形式显示。
table-row: 元素以表格行形式显示。
table-cell: 元素以表格单元格形式显示。
list-item: 元素作为列表项显示。
contents: 元素的子元素作为它们的父元素显示，元素本身消失但子元素仍然保留。
run-in: 元素根据上下文显示为块级或内联级（较少使用）。
initial: 将 display 属性重置为其初始值。
inherit: 继承父元素的 display 属性值。
revert: 将 display 属性重置为用户代理样式表中的值。
unset: 移除当前元素上的 display 属性，行为类似于 initial 和 inherit 的组合。
---------------------------------------------------------------------------------------------------------
隐藏元素：display:none 或 visibility:hidden
02.说明
none: 元素不显示，且不占据任何空间。
block: 元素作为块级元素显示，占据父元素的全部宽度，并在前后添加换行符。
inline: 元素作为内联元素显示，只占据其内容所需的宽度，不会在前后添加换行符。
inline-block: 元素以内联形式显示，但可以设置宽度和高度，同时保持内联元素的特性。
flex: 元素作为弹性盒子容器显示，启用弹性布局模型。
inline-flex: 元素以内联形式显示，作为弹性盒子容器。
grid: 元素作为网格容器显示，启用网格布局模型。
inline-grid: 元素以内联形式显示，作为网格容器。
table: 元素以表格形式显示。
table-row: 元素以表格行形式显示。
table-cell: 元素以表格单元格形式显示。
list-item: 元素作为列表项显示。
contents: 元素的子元素作为它们的父元素显示，元素本身消失但子元素仍然保留。
run-in: 元素根据上下文显示为块级或内联级（较少使用）。
initial: 将 display 属性重置为其初始值。
inherit: 继承父元素的 display 属性值。
revert: 将 display 属性重置为用户代理样式表中的值。
unset: 移除当前元素上的 display 属性，行为类似于 initial 和 inherit 的组合。
02.样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Display 属性示例</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
/* Block Example */
.block-example {
display: block;
background-color: lightcoral;
padding: 10px;
margin-bottom: 10px;
}
/* Inline Example */
.inline-example {
display: inline;
background-color: lightgreen;
padding: 10px;
margin-right: 10px;
}
/* Inline-Block Example */
.inline-block-example {
display: inline-block;
background-color: lightblue;
padding: 10px;
margin-right: 10px;
}
/* Flex Example */
.flex-container {
display: flex;
background-color: lightgrey;
padding: 10px;
margin-bottom: 10px;
}
.flex-item {
background-color: cornflowerblue;
color: white;
padding: 10px;
margin-right: 10px;
}
/* Grid Example */
.grid-container {
display: grid;
grid-template-columns: repeat(3, 100px);
background-color: lightyellow;
padding: 10px;
margin-bottom: 10px;
}
.grid-item {
background-color: orange;
color: white;
padding: 10px;
text-align: center;
}
/* None Example */
.none-example {
display: none;
}
</style>
</head>
<body>
<!-- Block Example -->
<div class="block-example">Block Element</div>
<!-- Inline Example -->
<span class="inline-example">Inline Element 1</span>
<span class="inline-example">Inline Element 2</span>
<!-- Inline-Block Example -->
<div class="inline-block-example">Inline-Block Element 1</div>
<div class="inline-block-example">Inline-Block Element 2</div>
<!-- Flex Example -->
<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>
<!-- Grid Example -->
<div class="grid-container">
<div class="grid-item">Grid Item 1</div>
<div class="grid-item">Grid Item 2</div>
<div class="grid-item">Grid Item 3</div>
<div class="grid-item">Grid Item 4</div>
<div class="grid-item">Grid Item 5</div>
<div class="grid-item">Grid Item 6</div>
</div>
<!-- None Example -->
<div class="none-example">This element is hidden.</div>
</body>
</html>
1.13 css选择器
01.总结
通配符选择器 *
id选择器 #id
类选择器 .class 类.
标签选择器 div、h1-h6、p、span
---------------------------------------------------------------------------------------------------------
后代选择器 li a 子代、孙子代、... 样式会继承，选择<ul>，会给<ul>下面的<li>起作用
交集选择器 h1.hidden-display 样式不会继承，ul.mystyle{...}无法定位样式，会失效
并集选择器 h1,h2,p h1，h2会一起使这两个标签拥有一样的样式
---------------------------------------------------------------------------------------------------------
相邻兄弟选择器 h1 + p 只对后面的元素有效，无法选中前面的元素
普通兄弟选择器 e1 ~ e2 只对后面的元素有效，无法选中前面的元素
子元素选择器 ul > li 子代
---------------------------------------------------------------------------------------------------------
属性选择器 a[rel = "external"]
伪类选择器 a: hover、li:nth-child、li:nth-of-type
02.并集选择器
h1 {
color:green;
}
h2 {
color:green;
}
p {
color:green;
}
每个选择器用逗号分隔，对以上代码使用分组选择器
h1,h2,p
{
color:green;
}
03.嵌套选择器：
p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class="marked" 的元素指定一个样式。
.marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class="marked" 的 p 元素指定一个样式。
04.属性选择器
选择具有指定属性的元素 选择所有具有 href 属性的 <a> 元素 a[href] {color: blue;}
选择具有指定属性且其值完全匹配的元素 选择所有 type 属性值为 text 的 <input> 元素 input[type="text"] {border: 1px solid gray;}
选择具有指定属性且其值以指定的值开头的元素 选择所有 id 属性值以 btn- 开头的元素 [id^="btn-"] {background-color: lightblue;}
择具有指定属性且其值以指定的值结尾的元素 选择所有 href 属性值以 .jpg 结尾的链接 a[href$=".jpg"] { border: 2px solid red;}
选择具有指定属性且其值包含指定的值(用空格分隔)的元素 选择所有 class 属性值包含 highlight 的元素 [class~="highlight"] {background-color: yellow;}
选择具有指定属性且其值包含指定的值(以分隔符分隔)的元素 选择所有 lang 属性值以 en 开头的元素 [lang|="en"] {color: green;}
05.CSS伪类选择器
:after 在每个 <p> 元素之后插入内容。 p:after {content: " - Suffix";color: orange;}
:before 在每个 <p> 元素之前插入内容。 p:before {content: "Prefix: ";color: orange;}
:hover 选择鼠标悬停在元素上时的状态。 a:hover { color: red; }
:active 选择被用户点击的元素状态。 a:active { color: green; }
:focus 选择具有输入焦点的元素（如被选中的文本框）。 input:focus { border-color: blue; }
:visited 选择用户访问过的链接。 a:visited { color: purple; }
:link 选择尚未访问的链接。 a:link { color: blue; }
:first-child 选择父元素中的第一个子元素。 p:first-child { color: orange; }
:last-child 选择父元素中的最后一个子元素。 p:last-child { color: orange; }
:nth-child(n) 选择父元素中的第 n 个子元素（n 可以是数字、公式或关键词） li:nth-child(2) { color: red; }
:nth-of-type(n) 选择父元素中指定类型的第 n 个子元素（与 :nth-child 类似，但只计算特定类型的元素） p:nth-of-type(2) { color: red; }
:not(selector) 选择不匹配指定选择器的元素。 p:not(.special) { color: gray; }
:first-letter 选择每个 <p> 元素的第一个字母 p:first-letter {font-size: 2em;color: red;}
:first-line 选择每个 <p> 元素的第一行。 p:first-line {font-weight: bold;color: blue;}
:first-child 选择父元素中的第一个子元素为 <p> 元素的情况下的 <p> 元素。 p:first-child {color: green;}
06.CSS3伪类选择器
:nth-last-child(n) 选择从父元素末尾开始的第 n 个子元素。 li:nth-last-child(2) { color: red; }
:nth-last-of-type(n) 选择父元素中从末尾开始的第 n 个指定类型的子元素。 p:nth-last-of-type(2) { color: red; }
:first-of-type 选择父元素中第一个指定类型的子元素。 p:first-of-type { color: red; }
:last-of-type 选择父元素中最后一个指定类型的子元素。 p:last-of-type { color: red; }
:checked 选择已选中的 <input> 或 <option> 元素。 input:checked { background-color: yellow; }
:enabled 选择启用的表单元素。 input:enabled { border-color: blue; }
:disabled 选择禁用的表单元素。 input:disabled { background-color: gray; }
:required 选择必填表单元素。 input:required { border: 2px solid red; }
:optional 选择非必填表单元素。 input:optional { border: 2px solid green; }
:valid 选择验证通过的表单元素。 input:valid { border-color: green; }
:invalid 选择验证失败的表单元素。 input:invalid { border-color: red; }
:target 选择当前URL中的目标元素（即URL中包含的片段标识符对应的元素）。 #section:target { background-color: lightblue; }
:lang(language) 选择使用特定语言的元素。 p:lang(en) { color: blue; }
07.解释
a.tr:nth-child 属于伪类选择器
具体来说，nth-child 是一种结构性伪类选择器，用于选取某个元素的特定子元素。
例如，tr:nth-child(2) 会选择父元素中的第二个 <tr> 元素。
b.input[type="text"]:focus 是一个复合选择器
属性选择器：input[type="text"]
选择具有特定属性值的元素。在这个例子中，input[type="text"] 选择所有 type 属性为 text 的 input 元素。
-----------------------------------------------------------------------------------------------------
伪类选择器：:focus
选择当前获得焦点的元素。在这个例子中，:focus 选择当 input[type="text"] 元素获得焦点时应用的样式。
c.h1.hidden-display实际上是 标签选择器 与 类选择器 的组合：
h1 是标签选择器，选择所有 <h1> 元素。
.hidden-display 是类选择器，选择所有具有 hidden-display 类的元素。
此，h1.hidden-display 选择所有同时具有 h1 标签和 hidden-display 类的元素。在这个例子中，它将作用于所有 <h1> 标签且具有 hidden-display 类的元素。
2 css
2.1 css尺寸
00.属性
width 设置元素的宽度。
height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
01.属性选项
a.width
auto: 默认值。浏览器计算元素的宽度。
<length>: 如 px, em, rem, vw 等。具体的长度值。
<percentage>: 父元素宽度的百分比。
inherit: 从父元素继承宽度值。
initial: 设置为默认值。
unset: 移除对当前元素的影响。
fit-content: 根据内容自适应宽度。
b.height
auto: 默认值。浏览器计算元素的高度。
<length>: 如 px, em, rem, vh 等。具体的长度值。
<percentage>: 父元素高度的百分比。
inherit: 从父元素继承高度值。
initial: 设置为默认值。
unset: 移除对当前元素的影响。
fit-content: 根据内容自适应高度。
c.line-height
normal: 默认值。根据元素的字体大小计算行高。
<number>: 一个数值，行高是字体大小的倍数。
<length>: 如 px, em, rem 等。具体的长度值。
<percentage>: 元素字体大小的百分比。
inherit: 从父元素继承行高。
initial: 设置为默认值。
unset: 移除对当前元素的影响。
d.max-height
none: 默认值。没有最大高度限制。
<length>: 如 px, em, rem, vh 等。具体的长度值。
<percentage>: 父元素高度的百分比。
inherit: 从父元素继承最大高度值。
initial: 设置为默认值。
unset: 移除对当前元素的影响。
fit-content: 根据内容自适应最大高度。
e.max-width
none: 默认值。没有最大宽度限制。
<length>: 如 px, em, rem, vw 等。具体的长度值。
<percentage>: 父元素宽度的百分比。
inherit: 从父元素继承最大宽度值。
initial: 设置为默认值。
unset: 移除对当前元素的影响。
fit-content: 根据内容自适应最大宽度。
f.min-height
auto: 默认值。没有最小高度限制。
<length>: 如 px, em, rem, vh 等。具体的长度值。
<percentage>: 父元素高度的百分比。
inherit: 从父元素继承最小高度值。
initial: 设置为默认值。
unset: 移除对当前元素的影响。
fit-content: 根据内容自适应最小高度。
g.min-width
auto: 默认值。没有最小宽度限制。
<length>: 如 px, em, rem, vw 等。具体的长度值。
<percentage>: 父元素宽度的百分比。
inherit: 从父元素继承最小宽度值。
initial: 设置为默认值。
unset: 移除对当前元素的影响。
fit-content: 根据内容自适应最小宽度。
02.样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS 尺寸 (Dimension) 属性示例</title>
<style>
.example {
border: 1px solid black;
background-color: lightgray;
margin: 10px;
padding: 10px;
}
/* 设置元素的高度 */
.height-example {
height: 150px;
}
/* 使用百分比设置图像的高度 */
.height-percent-example img {
height: 50%;
}
/* 使用像素值来设置元素的宽度 */
.width-example {
width: 300px;
}
/* 设置元素的最大高度 */
.max-height-example {
max-height: 100px;
overflow: auto;
}
/* 使用百分比来设置元素的最大宽度 */
.max-width-example {
max-width: 50%;
}
/* 设置元素的最低高度 */
.min-height-example {
min-height: 100px;
}
/* 使用像素值设置元素的最小宽度 */
.min-width-example {
min-width: 200px;
}
</style>
</head>
<body>
<h1>CSS 尺寸 (Dimension) 属性示例</h1>
<h2>设置元素的高度</h2>
<div class="example height-example">height: 150px;</div>
<h2>使用百分比设置图像的高度</h2>
<div class="example height-percent-example">
<img src="https://www.example.com/image.jpg" alt="示例图像" style="width: 100%;">
height: 50%;
</div>
<h2>使用像素值来设置元素的宽度</h2>
<div class="example width-example">width: 300px;</div>
<h2>设置元素的最大高度</h2>
<div class="example max-height-example">
max-height: 100px; (有溢出滚动条)
<p>这是一个很长的段落，用于测试最大高度属性。这个段落应该会被截断，并显示滚动条。</p>
</div>
<h2>使用百分比来设置元素的最大宽度</h2>
<div class="example max-width-example" style="width: 80%;">
max-width: 50%;
</div>
<h2>设置元素的最低高度</h2>
<div class="example min-height-example">min-height: 100px;</div>
<h2>使用像素值设置元素的最小宽度</h2>
<div class="example min-width-example">min-width: 200px;</div>
</body>
</html>
2.2 css边框
00.属性
border 简写属性，用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width 简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color 简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom 简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。
border-radius 设置圆角的边框。
01.属性选项
a.border
border 属性是一个简写属性，可以在一个声明中设置所有边框的宽度、样式和颜色。格式为：border: width style color;
示例：
/* 设置所有边的边框宽度为2px，样式为solid，颜色为red */
border: 2px solid red;
b.border-style
border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
可选值：
none: 默认无边框
dotted: 点线边框
dashed: 虚线边框
solid: 实线边框
double: 双实线边框
groove: 3D沟槽边框
ridge: 3D脊边框
inset: 3D嵌入边框
outset: 3D突出边框
示例：
/* 设置所有边的边框样式为dotted */
border-style: dotted;
/* 分别设置四个边的边框样式 */
border-style: dotted solid double dashed;
c.border-width
border-width 属性是一个简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。可以指定长度值或使用关键字。
可选值：
长度值：如 2px, 0.1em
关键字：thin, medium, thick
示例：
/* 设置所有边的边框宽度为5px */
border-width: 5px;
/* 分别设置四个边的边框宽度 */
border-width: 2px 4px 6px 8px;
d.border-color
border-color 属性是一个简写属性，设置元素的所有边框中可见部分的颜色，或为四个边分别设置颜色。
可选值：
颜色名称：如 red
RGB 值：如 rgb(255,0,0)
十六进制值：如 #ff0000
transparent: 透明
示例：
/* 设置所有边的边框颜色为red */
border-color: red;
/* 分别设置四个边的边框颜色 */
border-color: red green blue yellow;
e.border-bottom
border-bottom 属性是一个简写属性，用于把下边框的所有属性设置到一个声明中。
示例：
/* 设置下边框的宽度为2px，样式为solid，颜色为red */
border-bottom: 2px solid red;
f.border-bottom-color
border-bottom-color 属性设置元素的下边框的颜色。
示例：
/* 设置下边框的颜色为blue */
border-bottom-color: blue;
g.border-bottom-style
border-bottom-style 属性设置元素的下边框的样式。
示例：
/* 设置下边框的样式为dotted */
border-bottom-style: dotted;
h.border-bottom-width
border-bottom-width 属性设置元素的下边框的宽度。
示例：
/* 设置下边框的宽度为5px */
border-bottom-width: 5px;
i.border-left
border-left 属性是一个简写属性，用于把左边框的所有属性设置到一个声明中。
示例：
/* 设置左边框的宽度为3px，样式为solid，颜色为green */
border-left: 3px solid green;
j.border-left-color
border-left-color 属性设置元素的左边框的颜色。
示例：
/* 设置左边框的颜色为green */
border-left-color: green;
k.border-left-style
border-left-style 属性设置元素的左边框的样式。
示例：
/* 设置左边框的样式为dashed */
border-left-style: dashed;
l.border-left-width
border-left-width 属性设置元素的左边框的宽度。
示例：
/* 设置左边框的宽度为4px */
border-left-width: 4px;
m.border-right
border-right 属性是一个简写属性，用于把右边框的所有属性设置到一个声明中。
示例：
/* 设置右边框的宽度为2px，样式为solid，颜色为blue */
border-right: 2px solid blue;
n.border-right-color
border-right-color 属性设置元素的右边框的颜色。
示例：
/* 设置右边框的颜色为purple */
border-right-color: purple;
o.border-right-style
border-right-style 属性设置元素的右边框的样式。
示例：
/* 设置右边框的样式为groove */
border-right-style: groove;
p.border-right-width
border-right-width 属性设置元素的右边框的宽度。
示例：
/* 设置右边框的宽度为5px */
border-right-width: 5px;
q.border-top
border-top 属性是一个简写属性，用于把上边框的所有属性设置到一个声明中。
示例：
/* 设置上边框的宽度为3px，样式为solid，颜色为red */
border-top: 3px solid red;
r.border-top-color
border-top-color 属性设置元素的上边框的颜色。
示例：
/* 设置上边框的颜色为red */
border-top-color: red;
s.border-top-style
border-top-style 属性设置元素的上边框的样式。
示例：
/* 设置上边框的样式为ridge */
border-top-style: ridge;
t.border-top-width
border-top-width 属性设置元素的上边框的宽度。
示例：
/* 设置上边框的宽度为4px */
border-top-width: 4px;
u.border-radius
border-radius 属性设置圆角的边框。
可选值：
长度值：如 10px, 1em
百分比：如 50%
示例：
/* 设置圆角边框的半径为15px */
border-radius: 15px;
/* 设置每个角的圆角半径 */
border-radius: 10px 20px 30px 40px;
/* 设置水平和垂直半径 */
border-radius: 10px 20px / 30px 40px;
02.样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS边框属性示例</title>
<style>
/* 通用样式 */
.container {
margin: 20px;
}
.example {
margin: 20px 0;
padding: 10px;
border: 1px solid #ccc;
}
/* 边框样式 */
.border-style-example {
border-style: dotted solid double dashed;
}
/* 边框宽度 */
.border-width-example {
border-width: 2px 4px 6px 8px;
border-style: solid;
}
/* 边框颜色 */
.border-color-example {
border-color: red green blue yellow;
border-style: solid;
}
/* 单独设置各边的边框 */
.individual-borders-example {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: double;
border-left-style: dashed;
}
/* 简写属性 */
.shorthand-example {
border: 5px solid red;
}
/* 下边框样式 */
.border-bottom-style-example {
border-bottom-style: solid;
border-bottom-width: 5px;
border-bottom-color: blue;
}
/* 左边框宽度 */
.border-left-width-example {
border-left-width: 10px;
border-left-style: solid;
border-left-color: green;
}
/* 四个边框颜色 */
.four-border-color-example {
border-style: solid;
border-width: 5px;
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;
}
/* 右边框颜色 */
.border-right-color-example {
border-right-color: purple;
border-right-style: solid;
border-right-width: 5px;
}
/* 圆角边框 */
.border-radius-example {
border: 2px solid black;
border-radius: 15px;
}
</style>
</head>
<body>
<div class="container">
<!-- 边框样式示例 -->
<div class="example border-style-example">
<p>这是一个边框样式示例，包括：dotted、solid、double、dashed</p>
</div>
<!-- 边框宽度示例 -->
<div class="example border-width-example">
<p>这是一个边框宽度示例，不同的边框有不同的宽度：2px、4px、6px、8px</p>
</div>
<!-- 边框颜色示例 -->
<div class="example border-color-example">
<p>这是一个边框颜色示例，不同的边框有不同的颜色：red、green、blue、yellow</p>
</div>
<!-- 单独设置各边的边框 -->
<div class="example individual-borders-example">
<p>这是一个单独设置各边的边框示例：上 dotted，右 solid，底 double，左 dashed</p>
</div>
<!-- 简写属性示例 -->
<div class="example shorthand-example">
<p>这是一个简写属性示例：border: 5px solid red</p>
</div>
<!-- 下边框样式示例 -->
<div class="example border-bottom-style-example">
<p>这是一个下边框样式示例：border-bottom: 5px solid blue</p>
</div>
<!-- 左边框宽度示例 -->
<div class="example border-left-width-example">
<p>这是一个左边框宽度示例：border-left: 10px solid green</p>
</div>
<!-- 四个边框颜色示例 -->
<div class="example four-border-color-example">
<p>这是一个四个边框颜色示例：上 red，右 green，底 blue，左 yellow</p>
</div>
<!-- 右边框颜色示例 -->
<div class="example border-right-color-example">
<p>这是一个右边框颜色示例：border-right: 5px solid purple</p>
</div>
<!-- 圆角边框示例 -->
<div class="example border-radius-example">
<p>这是一个圆角边框示例：border-radius: 15px</p>
</div>
</div>
</body>
</html>
2.3 css轮廓
00.属性
outline 一个简写属性，用于在一个声明中设置所有的轮廓属性。
outline-color 用于设置轮廓的颜色
outline-style 用于设置轮廓的样式
outline-width 用于设置轮廓的宽度
01.属性选项
a.outline
outline 属性是一个简写属性，用于在一个声明中设置所有的轮廓属性。其值可以包括以下属性：
outline-color
outline-style
outline-width
-----------------------------------------------------------------------------------------------------
/* 在一个声明中设置轮廓颜色、样式和宽度 */
.element {
outline: 2px solid red;
}
b.outline-color
utline-color 属性用于设置轮廓的颜色。其值可以是：
color-name: 颜色名称（例如 red, blue, green）
hex-number: 十六进制颜色值（例如 #ff0000, #00ff00, #0000ff）
rgb-number: RGB颜色值（例如 rgb(255,0,0), rgb(0,255,0), rgb(0,0,255)）
invert: 将颜色反转以确保轮廓的对比度
inherit: 继承父元素的轮廓颜色
-----------------------------------------------------------------------------------------------------
/* 使用颜色名称 */
.element {
outline-color: red;
}
/* 使用十六进制颜色值 */
.element {
outline-color: #00ff00;
}
/* 使用RGB颜色值 */
.element {
outline-color: rgb(0, 0, 255);
}
/* 使用反转颜色 */
.element {
outline-color: invert;
}
c.outline-style
outline-style 属性用于设置轮廓的样式。其值可以是：
none: 无轮廓
dotted: 点状线
dashed: 虚线
solid: 实线
double: 双线
groove: 沟槽线
ridge: 垄状线
inset: 内嵌线
outset: 外嵌线
inherit: 继承父元素的轮廓样式
-----------------------------------------------------------------------------------------------------
/* 设置点状线 */
.element {
outline-style: dotted;
}
/* 设置虚线 */
.element {
outline-style: dashed;
}
/* 设置实线 */
.element {
outline-style: solid;
}
/* 设置双线 */
.element {
outline-style: double;
}
d.outline-width
outline-width 属性用于设置轮廓的宽度。其值可以是：
thin: 细线
medium: 中等宽度的线
thick: 粗线
length: 具体的长度值（例如 px, em, rem）
inherit: 继承父元素的轮廓宽度
-----------------------------------------------------------------------------------------------------
/* 设置细线 */
.element {
outline-width: thin;
}
/* 设置中等宽度的线 */
.element {
outline-width: medium;
}
/* 设置粗线 */
.element {
outline-width: thick;
}
/* 设置具体的长度值 */
.element {
outline-width: 3px;
}
02.样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Outline Properties</title>
<style>
/* 基本样式 */
.example {
margin: 20px;
padding: 10px;
width: 200px;
text-align: center;
}
/* 设置轮廓颜色 */
.outline-color-name {
outline: 2px solid;
outline-color: red;
}
.outline-color-hex {
outline: 2px solid;
outline-color: #00ff00;
}
.outline-color-rgb {
outline: 2px solid;
outline-color: rgb(0, 0, 255);
}
.outline-color-invert {
outline: 2px solid;
outline-color: invert;
}
/* 设置轮廓宽度 */
.outline-width-thin {
outline: thin solid black;
}
.outline-width-medium {
outline: medium solid black;
}
.outline-width-thick {
outline: thick solid black;
}
.outline-width-length {
outline: 5px solid black;
}
</style>
</head>
<body>
<h1>CSS Outline Properties Examples</h1>
<h2>Outline Color</h2>
<p class="example outline-color-name">Outline Color: 红色轮廓</p>
<p class="example outline-color-hex">Outline Color: 十六进制颜色轮廓</p>
<p class="example outline-color-rgb">Outline Color: RGB颜色轮廓</p>
<p class="example outline-color-invert">Outline Color: 反转颜色轮廓</p>
<h2>Outline Width</h2>
<p class="example outline-width-thin">Outline Width: 细线轮廓</p>
<p class="example outline-width-medium">Outline Width: 中等宽度轮廓</p>
<p class="example outline-width-thick">Outline Width: 粗线轮廓</p>
<p class="example outline-width-length">Outline Width: 5px 轮廓</p>
</body>
</html>
2.4 css外边距
00.属性
margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。
01.属性选项
a.margin
margin 是一个简写属性，可以在一个声明中设置所有四个外边距。它可以接受一个到四个值
-----------------------------------------------------------------------------------------------------
一个值： 四个方向的边距相同。
margin: 20px;
-----------------------------------------------------------------------------------------------------
两个值： 第一个值设置上下边距，第二个值设置左右边距。
margin: 20px 10px;
-----------------------------------------------------------------------------------------------------
三个值： 第一个值设置上边距，第二个值设置左右边距，第三个值设置下边距。
margin: 20px 10px 30px;
-----------------------------------------------------------------------------------------------------
四个值： 顺时针方向依次为上、右、下、左边距。（顺时针）
margin: 20px 10px 30px 40px;
b.margin-top、margin-bottom、margin-left、margin-right 单边属性
auto： 浏览器会根据需要自动计算边距。
margin-top: auto;
-----------------------------------------------------------------------------------------------------
长度值（length）： 可以是 px, pt, cm, em 等单位。
margin-top: 20px;
margin-bottom: 1em;
-----------------------------------------------------------------------------------------------------
百分比值（%）： 相对于包含元素的宽度。
margin-left: 10%;
-----------------------------------------------------------------------------------------------------
负值： 可以使用负值使内容重叠。
margin-right: -10px;
02.样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS Margin 属性示例</title>
<style>
/* 设置边框以便可视化外边距效果 */
.example {
border: 1px solid black;
}
/* margin 简写属性 */
.margin-example-1 {
margin: 100px 50px;
}
.margin-example-2 {
margin: 25px 50px 75px 100px;
}
.margin-example-3 {
margin: 25px 50px;
}
.margin-example-4 {
margin: 25px;
}
/* margin 单边属性 */
.margin-top-example {
margin-top: 100px;
}
.margin-bottom-example {
margin-bottom: 100px;
}
.margin-right-example {
margin-right: 50px;
}
.margin-left-example {
margin-left: 50px;
}
/* 使用不同单位设置 margin */
.margin-cm-example {
margin-top: 2cm;
}
.margin-percent-example {
margin-bottom: 10%;
}
</style>
</head>
<body>
<h1>CSS Margin 属性示例</h1>
<h2>margin 简写属性</h2>
<div class="example margin-example-1">
margin: 100px 50px;
</div>
<div class="example margin-example-2">
margin: 25px 50px 75px 100px;
</div>
<div class="example margin-example-3">
margin: 25px 50px;
</div>
<div class="example margin-example-4">
margin: 25px;
</div>
<h2>margin 单边属性</h2>
<div class="example margin-top-example">
margin-top: 100px;
</div>
<div class="example margin-bottom-example">
margin-bottom: 100px;
</div>
<div class="example margin-right-example">
margin-right: 50px;
</div>
<div class="example margin-left-example">
margin-left: 50px;
</div>
<h2>使用不同单位设置 margin</h2>
<div class="example margin-cm-example">
margin-top: 2cm;
</div>
<div class="example margin-percent-example">
margin-bottom: 10%;
</div>
</body>
</html>
2.5 css内边距
00.属性
padding 使用简写属性设置在一个声明中的所有填充属性
padding-bottom 设置元素的底部填充
padding-left 设置元素的左部填充
padding-right 设置元素的右部填充
padding-top 设置元素的顶部填充
01.属性选项
a.padding
padding 简写属性可以在一个声明中设置元素的所有内边距。它有以下几种选项：
一个值：例如 padding: 20px;，表示所有四个方向的内边距都是 20px。
两个值：例如 padding: 10px 20px;，第一个值表示上和下的内边距，第二个值表示左和右的内边距。
三个值：例如 padding: 10px 20px 30px;，第一个值表示上内边距，第二个值表示左右内边距，第三个值表示下内边距。
四个值：例如 padding: 10px 20px 30px 40px;，按顺时针顺序分别表示上、右、下、左的内边距。
b.padding-bottom
padding-bottom 属性专门设置元素底部的内边距。可接受的选项有：
长度值：例如 padding-bottom: 20px;，可以是 px、em、rem 等单位。
百分比：例如 padding-bottom: 10%;，相对于父元素的宽度计算百分比。
继承值：例如 padding-bottom: inherit;，从父元素继承内边距值。
c.padding-left
padding-left 属性专门设置元素左边的内边距。可接受的选项同 padding-bottom：
长度值：例如 padding-left: 20px;。
百分比：例如 padding-left: 10%;。
继承值：例如 padding-left: inherit;。
d.padding-right
padding-right 属性专门设置元素右边的内边距。可接受的选项同 padding-bottom：
长度值：例如 padding-right: 20px;。
百分比：例如 padding-right: 10%;。
继承值：例如 padding-right: inherit;。
e.padding-top
padding-top 属性专门设置元素顶部的内边距。可接受的选项同 padding-bottom：
长度值：例如 padding-top: 20px;。
百分比：例如 padding-top: 10%;。
继承值：例如 padding-top: inherit;。
02.样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Padding Examples</title>
<style>
/* 基本样式 */
.example {
margin: 20px;
padding: 10px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
/* 单边内边距属性 */
.padding-top {
padding-top: 25px;
}
.padding-bottom {
padding-bottom: 25px;
}
.padding-right {
padding-right: 50px;
}
.padding-left {
padding-left: 50px;
}
/* 简写属性 */
.padding-short-1 {
padding: 25px 50px 75px 100px;
}
.padding-short-2 {
padding: 25px 50px 75px;
}
.padding-short-3 {
padding: 25px 50px;
}
.padding-short-4 {
padding: 25px;
}
</style>
</head>
<body>
<h1>CSS Padding Examples</h1>
<h2>Padding - 单边内边距属性</h2>
<p class="example padding-top">上内边距是 25px</p>
<p class="example padding-bottom">下内边距是 25px</p>
<p class="example padding-right">右内边距是 50px</p>
<p class="example padding-left">左内边距是 50px</p>
<h2>Padding - 简写属性</h2>
<p class="example padding-short-1">上填充为 25px，右填充为 50px，下填充为 75px，左填充为 100px</p>
<p class="example padding-short-2">上填充为 25px，左右填充为 50px，下填充为 75px</p>
<p class="example padding-short-3">上下填充为 25px，左右填充为 50px</p>
<p class="example padding-short-4">所有填充都是 25px</p>
</body>
</html>
2.6 css定位
00.属性（相对位置，父div移动，子div也会移动）
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移
clip 用于裁剪一个绝对定位的元素（已被 clip-path 取代，clip 已过时）
cursor 定义当鼠标悬停在元素上时显示的光标样式
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移
overflow 定义当元素的内容溢出其区域时的处理方式
overflow-y 指定如何处理顶部/底部边缘的内容溢出元素的内容区域
overflow-x 指定如何处理右边/左边边缘的内容溢出元素的内容区域
position 指定元素的定位类型
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移
top 定义了定位元素的上外边距边界与其包含块上边界之间的偏移
z-index 设置元素的堆叠顺序，控制元素在 Z 轴上的层次关系
01.属性选项
a.bottom
定义了定位元素下外边距边界与其包含块下边界之间的偏移。
auto：默认值，表示浏览器自动计算。
length：使用具体的长度单位，如 px, em, rem。
%：使用百分比，相对于包含块的高度。
b.clip
用于裁剪一个绝对定位的元素（已被 clip-path 取代，clip 已过时）。
auto：默认值，裁剪区域由内容决定。
rect(top, right, bottom, left)：裁剪区域的矩形定义（旧用法）。
c.cursor
定义当鼠标悬停在元素上时显示的光标样式。
auto：默认光标。
default：标准箭头光标。
pointer：手形光标（常用于链接）。
move：移动光标。
text：文本光标（I-beam）。
wait：等待光标（沙漏或转轮）。
help：帮助光标。
crosshair：十字光标。
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize：各种方向的调整光标。
url()：指定自定义光标。
d.left
定义了定位元素左外边距边界与其包含块左边界之间的偏移。
auto：默认值，表示浏览器自动计算。
length：使用具体的长度单位，如 px, em, rem。
%：使用百分比，相对于包含块的宽度。
e.overflow
定义当元素的内容溢出其区域时的处理方式。
visible：内容溢出时仍可见，默认值。
hidden：内容溢出时被裁剪，不显示溢出的内容。
scroll：内容溢出时显示滚动条，内容可以滚动查看。
auto：内容溢出时自动显示滚动条（视情况而定）。
f.overflow-y
指定如何处理顶部/底部边缘的内容溢出元素的内容区域。
visible：内容溢出时仍可见。
hidden：内容溢出时被裁剪。
scroll：内容溢出时显示垂直滚动条。
auto：内容溢出时自动显示垂直滚动条
g.overflow-x
指定如何处理右边/左边边缘的内容溢出元素的内容区域。
visible：内容溢出时仍可见。
hidden：内容溢出时被裁剪。
scroll：内容溢出时显示水平滚动条。
auto：内容溢出时自动显示水平滚动条。
h.position
指定元素的定位类型。
static：默认定位，元素按照正常文档流排列。
relative：相对定位，相对于元素正常位置偏移。
absolute：绝对定位，相对于最近的已定位父元素定位。
fixed：固定定位，相对于浏览器窗口固定位置。
sticky：粘性定位，根据用户的滚动位置在 relative 和 fixed 之间切换。
i.right
定义了定位元素右外边距边界与其包含块右边界之间的偏移。
auto：默认值，表示浏览器自动计算。
length：使用具体的长度单位，如 px, em, rem。
%：使用百分比，相对于包含块的宽度。
j.top
定义了定位元素的上外边距边界与其包含块上边界之间的偏移。
auto：默认值，表示浏览器自动计算。
length：使用具体的长度单位，如 px, em, rem。
%：使用百分比，相对于包含块的高度。
k.z-index
设置元素的堆叠顺序，控制元素在 Z 轴上的层次关系。
auto：默认值，元素的堆叠顺序由文档流决定。
number：一个整数，定义元素的堆叠顺序，值越大，元素越靠前（覆盖其他元素）。
02.样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 属性示例</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.container {
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
position: relative; /* 使容器具有相对定位，方便绝对定位的子元素 */
}
.example {
margin: 10px 0;
padding: 10px;
border: 1px solid #ddd;
}
.static {
position: static;
border: 3px solid #73AD21;
background-color: #f0f8ff;
}
.fixed {
position: fixed;
top: 30px;
right: 5px;
background-color: #ffebcd;
padding: 10px;
border: 3px solid #ff6347;
}
.relative {
position: relative;
left: 20px;
top: 10px;
background-color: #e0ffff;
padding: 10px;
border: 3px solid #20b2aa;
}
.absolute {
position: absolute;
left: 100px;
top: 150px;
background-color: #f5deb3;
padding: 10px;
border: 3px solid #8b4513;
}
.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: #d3d3d3;
padding: 10px;
border: 3px solid #a52a2a;
}
.clip-example {
position: absolute;
width: 150px;
height: 150px;
background-color: #ffcccb;
clip: rect(20px, 100px, 100px, 20px); /* 旧用法 */
}
.cursor-example {
cursor: pointer;
padding: 10px;
border: 1px solid #aaa;
background-color: #f5f5f5;
}
.overflow-example {
width: 200px;
height: 100px;
overflow: auto;
background-color: #f0f8ff;
border: 1px solid #aaa;
}
.overflow-x-example {
width: 200px;
height: 100px;
overflow-x: scroll;
background-color: #f0f8ff;
border: 1px solid #aaa;
}
.overflow-y-example {
width: 100px;
height: 100px;
overflow-y: scroll;
background-color: #f0f8ff;
border: 1px solid #aaa;
}
.zindex-example {
position: absolute;
left: 50px;
top: 50px;
z-index: 1;
background-color: #ffcccb;
padding: 10px;
border: 1px solid #ff4500;
}
.zindex-overlay {
position: absolute;
left: 70px;
top: 70px;
z-index: 0;
background-color: #add8e6;
padding: 10px;
border: 1px solid #4682b4;
}
</style>
</head>
<body>
<h1>CSS 属性示例</h1>
<div class="container">
<h2>position: static</h2>
<div class="example static">这是使用静态定位的元素。遵循正常文档流。</div>
</div>
<div class="container">
<h2>position: fixed</h2>
<div class="example fixed">这是使用固定定位的元素。相对于浏览器窗口固定位置，即使滚动页面也不会移动。</div>
</div>
<div class="container">
<h2>position: relative</h2>
<div class="example relative">这是使用相对定位的元素。相对于其正常位置偏移。</div>
</div>
<div class="container">
<h2>position: absolute</h2>
<div class="example absolute">这是使用绝对定位的元素。相对于最近的已定位父元素定位。</div>
</div>
<div class="container">
<h2>position: sticky</h2>
<div class="example sticky">这是使用粘性定位的元素。当滚动到一定位置时，元素变为固定定位。</div>
</div>
<div class="container">
<h2>clip 属性示例</h2>
<div class="clip-example">裁剪区域示例（旧用法，clip-path 更现代）。</div>
</div>
<div class="container">
<h2>cursor 属性示例</h2>
<div class="cursor-example">鼠标悬停时显示手形光标（pointer）。</div>
</div>
<div class="container">
<h2>overflow 属性示例</h2>
<div class="overflow-example">内容溢出时显示滚动条。<br>这是一个很长的文本示例，用于展示滚动条效果。内容溢出时会显示滚动条。</div>
</div>
<div class="container">
<h2>overflow-x 属性示例</h2>
<div class="overflow-x-example">内容水平溢出时显示水平滚动条。</div>
</div>
<div class="container">
<h2>overflow-y 属性示例</h2>
<div class="overflow-y-example">内容垂直溢出时显示垂直滚动条。</div>
</div>
<div class="container">
<h2>z-index 属性示例</h2>
<div class="zindex-overlay">底层元素（z-index: 0）</div>
<div class="zindex-example">上层元素（z-index: 1）</div>
</div>
</body>
</html>
2.7 css溢出
01.Overflow属性
visible 默认值。内容不会被修剪，会呈现在元素框之外
hidden 内容会被修剪，并且其余内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
inherit 规定应该从父元素继承 overflow 属性的值
02.样式
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Overflow 示例</title>
<style>
div {
width: 200px;
height: 50px;
background-color: #eee;
margin: 10px;
}
.visible {
overflow: visible;
}
.hidden {
overflow: hidden;
}
.scroll {
overflow: scroll;
}
.auto {
overflow: auto;
}
.inherit {
overflow: inherit;
}
</style>
</head>
<body>
<h2>CSS Overflow 示例</h2>
<div class="visible">这里的文本内容会溢出元素框。</div>
<div class="hidden">这里的文本内容会被修剪。</div>
<div class="scroll">这里的文本内容会被修剪，但会显示滚动条以查看其余内容。</div>
<div class="auto">这里的文本内容会被修剪，浏览器会自动显示滚动条。</div>
<div class="inherit">这里的文本内容会继承父元素的 overflow 属性。</div>
</body>
</html>
2.8 css浮动
00.属性
float 指定一个元素是否允许浮动，以及浮动的方向
clear 属性控制一个元素的浮动行为，指定元素周围不允许出现浮动元素
01.属性选项
a.float属性
float 属性指定一个元素是否允许浮动，以及浮动的方向。
float: left：将元素浮动到其包含块的左侧，其他内容会环绕在其右侧。
float: right：将元素浮动到其包含块的右侧，其他内容会环绕在其左侧。
float: none：默认值，元素不浮动，正常按照文档流布局。
float: inherit：从父元素继承浮动属性。
示例：
.float-left {
float: left;
}
.float-right {
float: right;
}
.float-none {
float: none;
}
b.clear属性
clear 属性控制一个元素的浮动行为，指定元素周围不允许出现浮动元素。
clear: left：清除左侧的浮动元素，元素将位于其左侧所有浮动元素的下方。
clear: right：清除右侧的浮动元素，元素将位于其右侧所有浮动元素的下方。
clear: both：清除左右两侧的浮动元素，元素将位于所有浮动元素的下方。
clear: none：默认值，元素不清除任何浮动，浮动元素可能会出现在其周围。
clear: inherit：从父元素继承清除浮动的行为。
示例：
.clear-left {
clear: left;
}
.clear-right {
clear: right;
}
.clear-both {
clear: both;
}
.clear-none {
clear: none;
}
02.样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Float 和 Clear 属性示例</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.container {
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
position: relative;
}
.example {
margin: 10px 0;
padding: 10px;
border: 1px solid #ddd;
}
.float-left {
float: left;
width: 150px;
height: 100px;
margin: 5px;
background-color: #ffebcd;
border: 2px solid #ff6347;
}
.float-right {
float: right;
width: 150px;
height: 100px;
margin: 5px;
background-color: #e0ffff;
border: 2px solid #20b2aa;
}
.clear-both {
clear: both;
background-color: #f5f5f5;
padding: 10px;
border: 2px solid #aaa;
}
.thumbnail {
float: left;
width: 110px;
height: 90px;
margin: 5px;
background-color: #f0f8ff;
border: 2px solid #4682b4;
}
.text-line {
clear: both;
background-color: #ffcccb;
padding: 10px;
border: 2px solid #ff4500;
}
</style>
</head>
<body>
<h1>CSS Float 和 Clear 属性示例</h1>
<div class="container">
<h2>float: left</h2>
<div class="example float-left">这是一个向左浮动的元素。</div>
<div class="example float-left">另一个向左浮动的元素。它会在第一个浮动元素的旁边显示。</div>
</div>
<div class="container">
<h2>float: right</h2>
<div class="example float-right">这是一个向右浮动的元素。</div>
<div class="example float-right">另一个向右浮动的元素。它会在第一个浮动元素的旁边显示。</div>
</div>
<div class="container">
<h2>使用 float 属性的图片廊</h2>
<div class="thumbnail">图片1</div>
<div class="thumbnail">图片2</div>
<div class="thumbnail">图片3</div>
</div>
<div class="container">
<h2>使用 clear 属性</h2>
<div class="example float-left">向左浮动的元素。</div>
<div class="example float-right">向右浮动的元素。</div>
<div class="clear-both">使用 clear: both; 清除浮动。</div>
<p>这个段落文本会在清除浮动元素之后显示。</p>
</div>
<div class="container">
<h2>浮动图像与文本环绕</h2>
<img src="https://via.placeholder.com/150" alt="示例图片" style="float: right; margin: 0 0 10px 10px;">
<p>这是一个示例段落，文本会环绕在图片的左侧。使用 float 属性可以让图片与文本一起显示，图片在右侧，文本在左侧环绕。</p>
</div>
<div class="container">
<h2>清除浮动示例</h2>
<div class="thumbnail">图片1</div>
<div class="thumbnail">图片2</div>
<div class="text-line">使用 clear: both; 清除浮动后的区域。</div>
<p>这个段落会在清除浮动元素之后显示，避免浮动影响。</p>
</div>
</body>
</html>
2.9 网格布局
00.属性
column-gap 指定列之间的间隙
gap row-gap 和 column-gap 的简写属性
grid grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 以及 grid-auto-flow 的简写属性
grid-area 指定网格元素的名称，或者也可以是 grid-row-start, grid-column-start, grid-row-end, 和 grid-column-end 的简写属性
grid-auto-columns 指的默认的列尺寸
grid-auto-flow 指定自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。
grid-auto-rows 指的默认的行尺寸
grid-column grid-column-start 和 grid-column-end 的简写属性
grid-column-end 指定网格元素列的结束位置
grid-column-gap 指定网格元素的间距大小
grid-column-start 指定网格元素列的开始位置
grid-gap grid-row-gap 和 grid-column-gap 的简写属性
grid-row grid-row-start 和 grid-row-end 的简写属性
grid-row-end 指定网格元素行的结束位置
grid-row-gap 指定网格元素的行间距
grid-row-start 指定网格元素行的开始位置
grid-template grid-template-rows, grid-template-columns 和 grid-areas 的简写属性
grid-template-areas 指定如何显示行和列，使用命名的网格元素
grid-template-columns 指定列的大小，以及网格布局中设置列的数量
grid-template-rows 指定网格布局中行的大小
row-gap 指定两个行之间的间距
01.属性选项
a.column-gap
描述：指定列之间的间隙。
选项：
长度单位（如 px、em、rem）：例如 10px、2em。
百分比：例如 5%。
.grid-container {
column-gap: 20px; /* 列间距 20 像素 */
}
b.gap
描述：row-gap 和 column-gap 的简写属性。
选项：
row-gap：行间距。
column-gap：列间距。
示例：
.grid-container {
gap: 10px 20px; /* 行间距 10 像素，列间距 20 像素 */
}
c.grid
描述：grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns 以及 grid-auto-flow 的简写属性。
选项：
grid-template-rows：定义行轨道。
grid-template-columns：定义列轨道。
grid-template-areas：定义区域。
grid-auto-rows：默认行尺寸。
grid-auto-columns：默认列尺寸。
grid-auto-flow：自动布局算法。
示例：
.grid-container {
grid:
"header header" 100px
"main sidebar" 1fr
"footer footer" 50px
/ 1fr 2fr;
}
d.grid-area
描述：指定网格元素的名称，或 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 的简写属性。
选项：
name：网格区域名称。
grid-row-start、grid-column-start、grid-row-end、grid-column-end：指定网格线的位置。
.item1 {
grid-area: header;
}
e.grid-auto-columns
描述：指定默认的列尺寸。
选项：
长度单位（如 px、em、fr）：例如 100px、1fr。
示例：
.grid-container {
grid-auto-columns: 200px; /* 默认列宽 200 像素 */
}
f.grid-auto-flow
描述：指定自动布局算法如何运作，精确指定在网格中被自动布局的元素如何排列。
选项：
row：按行自动布局。
column：按列自动布局。
dense：紧凑布局，填补网格中的空隙。
row dense、column dense：结合行或列的密集布局。
.grid-container {
grid-auto-flow: dense; /* 紧凑布局 */
}
g.grid-auto-rows
描述：指定默认的行尺寸。
选项：
长度单位（如 px、em、fr）：例如 100px、1fr。
示例：
.grid-container {
grid-auto-rows: 150px; /* 默认行高 150 像素 */
}
h.grid-column
描述：grid-column-start 和 grid-column-end 的简写属性。
选项：
grid-column-start：列的起始位置。
grid-column-end：列的结束位置。
.item1 {
grid-column: 1 / 3; /* 从第 1 列开始，到第 3 列结束 */
}
i.grid-column-end
描述：指定网格元素列的结束位置。
选项：
网格线编号（如 1、2）。
span：跨越的列数（如 span 2）。
示例：
.item1 {
grid-column-end: 4; /* 到第 4 列结束 */
}
j.grid-column-gap
描述：指定网格元素的列间距。
选项：
长度单位（如 px、em、rem）：例如 10px。
示例：
.grid-container {
grid-column-gap: 15px; /* 列间距 15 像素 */
}
k.grid-column-start
描述：指定网格元素列的开始位置。
选项：
网格线编号（如 1、2）。
span：跨越的列数（如 span 2）
示例：
.item1 {
grid-column-start: 2; /* 从第 2 列开始 */
}
l.grid-gap
描述：grid-row-gap 和 grid-column-gap 的简写属性。
选项：
row-gap：行间距。
column-gap：列间距。
示例：
.grid-container {
grid-gap: 20px; /* 行间距和列间距都为 20 像素 */
}
m.grid-row
描述：grid-row-start 和 grid-row-end 的简写属性。
选项：
grid-row-start：行的起始位置。
grid-row-end：行的结束位置。
示例：
.item1 {
grid-row: 1 / 3; /* 从第 1 行开始，到第 3 行结束 */
}
n.grid-row-end
描述：指定网格元素行的结束位置。
选项：
网格线编号（如 1、2）。
span：跨越的行数（如 span 2）。
示例：
.item1 {
grid-row-end: 4; /* 到第 4 行结束 */
}
o.grid-row-gap
描述：指定网格元素的行间距。
选项：
长度单位（如 px、em、rem）：例如 10px。
示例：
.grid-container {
grid-row-gap: 25px; /* 行间距 25 像素 */
}
p.grid-row-start
描述：指定网格元素行的开始位置。
选项：
网格线编号（如 1、2）。
span：跨越的行数（如 span 2）。
示例：
.item1 {
grid-row-start: 2; /* 从第 2 行开始 */
}
q.grid-template
描述：grid-template-rows、grid-template-columns 和 grid-template-areas 的简写属性。
选项：
grid-template-rows：行轨道。
grid-template-columns：列轨道。
grid-template-areas：区域名称。
示例：
.grid-container {
grid-template:
"header header header" 100px
"main sidebar sidebar" 1fr
"footer footer footer" 50px
/ 1fr 2fr 1fr; /* 列轨道定义 */
}
r.grid-template-areas
描述：指定如何显示行和列，使用命名的网格元素。
选项：
区域名称：例如 "header header header" "main sidebar sidebar" "footer footer footer"。
示例：
.grid-container {
grid-template-areas:
"header header header"
"main sidebar sidebar"
"footer footer footer";
}
s.grid-template-columns
描述：指定列的大小，以及网格布局中设置列的数量。
选项：
长度单位（如 px、em、fr）：例如 100px、1fr。
关键字（如 auto）：自动调整列宽。
示例：
.grid-container {
grid-template-columns: 100px 200px 1fr; /* 列宽分别为 100px、200px 和 1fr */
}
t.grid-template-rows
描述：指定网格布局中行的大小。
选项：
长度单位（如 px、em、fr）：例如 100px、1fr。
关键字（如 auto）：自动调整行高。
示例：
.grid-container {
grid-template-rows: 100px 200px 1fr; /* 行高分别为 100px、200px 和 1fr */
}
u.row-gap
描述：指定两个行之间的间距。
选项：
长度单位（如 px、em、rem）：例如 10px、2em。
示例：
.grid-container {
row-gap: 15px; /* 行间距 15 像素 */
}
02.样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Layout Examples</title>
<style>
/* 网格容器基本样式 */
.grid-container {
display: grid;
gap: 10px; /* 统一间隙 */
}
/* 网格项目基本样式 */
.grid-item {
background-color: #4CAF50;
color: white;
border: 1px solid #333;
padding: 20px;
text-align: center;
}
/* 网格轨道示例 */
.grid-4-columns {
grid-template-columns: auto auto auto auto;
}
.grid-2-rows {
grid-template-rows: 100px 300px;
}
/* fr 单位示例 */
.grid-3-fr {
grid-template-columns: 1fr 1fr 1fr;
}
/* 网格间距示例 */
.grid-column-gap {
grid-column-gap: 50px;
}
.grid-row-gap {
grid-row-gap: 50px;
}
.grid-gap {
grid-gap: 50px 100px; /* 行间距50px，列间距100px */
}
/* 网格线示例 */
.grid-lines {
grid-template-columns: 100px 200px 300px 400px;
grid-template-rows: 100px 200px 300px;
}
.item1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
background-color: #FF5722;
}
/* 其他网格属性示例 */
.grid-area-example {
grid-template-areas:
"header header header"
"main main sidebar"
"footer footer footer";
}
.header { grid-area: header; background-color: #03A9F4; }
.main { grid-area: main; background-color: #FFC107; }
.sidebar { grid-area: sidebar; background-color: #4CAF50; }
.footer { grid-area: footer; background-color: #E91E63; }
/* 网格示例布局 */
.example-grid {
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 100px);
gap: 10px;
}
</style>
</head>
<body>
<h1>CSS Grid Layout Examples</h1>
<h2>Basic Grid Container</h2>
<div class="grid-container grid-4-columns">
<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>
<h2>Grid with 2 Rows</h2>
<div class="grid-container grid-2-rows">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
</div>
<h2>Using `fr` Units</h2>
<div class="grid-container grid-3-fr">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
<h2>Column and Row Gaps</h2>
<div class="grid-container grid-gap">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
<h2>Grid Lines Example</h2>
<div class="grid-container grid-lines">
<div class="grid-item item1">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
<h2>Grid Area Example</h2>
<div class="grid-container grid-area-example">
<div class="header">Header</div>
<div class="main">Main Content</div>
<div class="sidebar">Sidebar</div>
<div class="footer">Footer</div>
</div>
<h2>Example Grid Layout</h2>
<div class="example-grid">
<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.10 网格容器
00.属性
display 用于定义元素是否为网格容器
grid-template-columns 定义网格中的列数量和宽度
grid-template-rows 定义网格中的行数量和高度
grid-template-areas 定义网格区域的布局
grid-column-gap 和 grid-row-gap 定义网格列和行之间的间隔
gap 同时定义列间隔和行间隔
justify-items 定义网格单元在每个单元格内的水平对齐方式
align-items 定义网格单元在每个单元格内的垂直对齐方式
justify-content 定义整个网格在容器内的水平对齐方式
align-content 定义整个网格在容器内的垂直对齐方式
grid-auto-columns 定义自动生成的列的宽度
grid-auto-rows 定义自动生成的行的高度
grid-auto-flow 定义自动放置网格项目的方式
grid-column 和 grid-row 用于设置网格项目的起始和结束位置
01.属性选项
a.display
用于定义元素是否为网格容器。
选项：
grid：将元素定义为块级网格容器。
inline-grid：将元素定义为行内网格容器。
b.grid-template-columns
定义网格中的列数量和宽度。
选项：
长度单位：如 px, em, rem, %。
auto：自动宽度。
fr：可用空间的分数单位。
min-content、max-content：内容的最小或最大宽度。
minmax(min, max)：设置列的最小和最大宽度。
c.grid-template-rows
定义网格中的行数量和高度。
选项：
长度单位：如 px, em, rem, %。
auto：自动高度。
fr：可用空间的分数单位。
min-content、max-content：内容的最小或最大高度。
minmax(min, max)：设置行的最小和最大高度。
d.grid-template-areas
定义网格区域的布局。
选项：
区域名称：通过字符串定义每个区域的名称。例如：
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
e.grid-column-gap 和 grid-row-gap
定义网格列和行之间的间隔。
选项：
长度单位：如 px, em, rem, %。
f.gap (或 grid-gap)
同时定义列间隔和行间隔。
选项：
长度单位：如 px, em, rem。
两个值：第一个值为行间隔，第二个值为列间隔。例如：gap: 10px 20px;
g.justify-items
定义网格单元在每个单元格内的水平对齐方式。
选项：
start：靠左对齐。
end：靠右对齐。
center：居中对齐。
stretch：拉伸以填充单元格（默认）。
h.align-items
定义网格单元在每个单元格内的垂直对齐方式。
选项：
start：靠上对齐。
end：靠下对齐。
center：居中对齐。
stretch：拉伸以填充单元格（默认）。
i.justify-content
定义整个网格在容器内的水平对齐方式。
选项：
start：靠左对齐。
end：靠右对齐。
center：居中对齐。
space-between：项目间距均匀。
space-around：项目间距均匀，包括边缘。
space-evenly：项目之间的间隔均匀。
j.align-content
定义整个网格在容器内的垂直对齐方式。
选项：
start：靠上对齐。
end：靠下对齐。
center：居中对齐。
space-between：项目间距均匀。
space-around：项目间距均匀，包括边缘。
space-evenly：项目之间的间隔均匀。
k.grid-auto-columns
定义自动生成的列的宽度。
选项：
长度单位：如 px, auto。
l.grid-auto-rows
定义自动生成的行的高度。
选项：
长度单位：如 px, auto。
m.grid-auto-flow
定义自动放置网格项目的方式。
选项：
row：默认，从左到右填充每一行。
column：从上到下填充每一列。
dense：密集填充，尽量填补空缺。
n.grid-column 和 grid-row
用于设置网格项目的起始和结束位置。
选项：
起始线和结束线：如 grid-column: 1 / 3;，表示从第 1 列开始到第 3 列结束。
02.样式
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 网格容器示例</title>
<style>
/* 网格容器基础样式 */
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.grid-container {
display: grid;
gap: 10px; /* 网格元素间隔 */
}
/* grid-template-columns 示例 */
.grid-template-columns {
grid-template-columns: auto auto auto auto; /* 4 列网格布局 */
}
.grid-template-columns-2 {
grid-template-columns: 80px 200px auto 40px; /* 指定列宽 */
}
/* grid-template-rows 示例 */
.grid-template-rows {
grid-template-rows: 80px 200px; /* 指定行高 */
}
/* justify-content 示例 */
.justify-content {
justify-content: space-evenly; /* 水平对齐 */
}
/* align-content 示例 */
.align-content {
height: 400px; /* 设置容器高度 */
align-content: center; /* 垂直对齐 */
}
/* 网格元素样式 */
.grid-item {
background-color: #007bff;
color: white;
padding: 20px;
text-align: center;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>CSS 网格容器示例</h1>
<!-- grid-template-columns 属性示例 -->
<h2>1. grid-template-columns 属性</h2>
<div class="grid-container grid-template-columns">
<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>
<h3>指定列宽示例</h3>
<div class="grid-container grid-template-columns-2">
<div class="grid-item">80px</div>
<div class="grid-item">200px</div>
<div class="grid-item">自动</div>
<div class="grid-item">40px</div>
</div>
<!-- grid-template-rows 属性示例 -->
<h2>2. grid-template-rows 属性</h2>
<div class="grid-container grid-template-rows">
<div class="grid-item">80px 高</div>
<div class="grid-item">200px 高</div>
</div>
<!-- justify-content 属性示例 -->
<h2>3. justify-content 属性</h2>
<div class="grid-container justify-content">
<div class="grid-item">项目 1</div>
<div class="grid-item">项目 2</div>
<div class="grid-item">项目 3</div>
</div>
<h3>其他对齐示例</h3>
<div class="grid-container justify-content" style="justify-content: space-around;">
<div class="grid-item">项目 A</div>
<div class="grid-item">项目 B</div>
<div class="grid-item">项目 C</div>
</div>
<div class="grid-container justify-content" style="justify-content: space-between;">
<div class="grid-item">项目 X</div>
<div class="grid-item">项目 Y</div>
<div class="grid-item">项目 Z</div>
</div>
<div class="grid-container justify-content" style="justify-content: center;">
<div class="grid-item">中心对齐</div>
</div>
<!-- align-content 属性示例 -->
<h2>4. align-content 属性</h2>
<div class="grid-container align-content">
<div class="grid-item">项目 1</div>
<div class="grid-item">项目 2</div>
</div>
<h3>其他垂直对齐示例</h3>
<div class="grid-container align-content" style="align-content: space-evenly;">
<div class="grid-item">项目 A</div>
<div class="grid-item">项目 B</div>
</div>
<div class="grid-container align-content" style="align-content: space-around;">
<div class="grid-item">项目 C</div>
<div class="grid-item">项目 D</div>
</div>
<div class="grid-container align-content" style="align-content: space-between;">
<div class="grid-item">项目 E</div>
<div class="grid-item">项目 F</div>
</div>
<div class="grid-container align-content" style="align-content: start;">
<div class="grid-item">开始对齐</div>
</div>
<div class="grid-container align-content" style="align-content: end;">
<div class="grid-item">结束对齐</div>
</div>
</body>
</html>
2.11 网格元素
00.属性
grid-area 指定网格元素的名称，或者也可以是 grid-row-start, grid-column-start, grid-row-end, 和 grid-column-end 的简写属性
grid-column grid-column-start 和 grid-column-end 的简写属性
grid-row grid-row-start 和 grid-row-end 的简写属性
01.属性选项
a.grid-area
grid-area 属性是 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写形式，用于定义网格项目在网格中的位置。
1.<grid-line> / <grid-line> / <grid-line> / <grid-line>：
第一个值：行开始位置 (grid-row-start)。
第二个值：列开始位置 (grid-column-start)。
第三个值：行结束位置 (grid-row-end)。
第四个值：列结束位置 (grid-column-end)。
.item {
grid-area: 1 / 2 / 4 / 5;
}
2.<grid-area-name>：
网格区域的名称，与 grid-template-areas 属性一起使用
.item {
grid-area: myArea;
}
b.grid-column
grid-column 属性是 grid-column-start 和 grid-column-end 属性的简写形式，用于定义网格项目的列开始和结束位置。
1.<grid-line> / <grid-line>：
第一个值：列开始位置 (grid-column-start)。
第二个值：列结束位置 (grid-column-end)。
.item {
grid-column: 1 / 4;
}
2.<grid-line> / span <number>：
第一个值：列开始位置 (grid-column-start)。
第二个值：跨越的列数。
.item {
grid-column: 1 / span 3;
}
c.grid-row
grid-row 属性是 grid-row-start 和 grid-row-end 属性的简写形式，用于定义网格项目的行开始和结束位置。
1.<grid-line> / <grid-line>：
第一个值：行开始位置 (grid-row-start)。
第二个值：行结束位置 (grid-row-end)。
.item {
grid-row: 1 / 3;
}
2.<grid-line> / span <number>：
第一个值：行开始位置 (grid-row-start)。
第二个值：跨越的行数。
.item {
grid-row: 2 / span 2;
}
02.样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid 示例</title>
<style>
/* 通用样式 */
.grid-container {
display: grid;
gap: 10px;
border: 2px solid #000;
padding: 10px;
margin-bottom: 30px;
}
.grid-item {
background-color: #8d8;
border: 1px solid #444;
padding: 20px;
font-size: 20px;
text-align: center;
}
/* grid-column 属性示例 */
#grid-column-container {
grid-template-columns: repeat(4, 1fr);
}
.item1-col { grid-column: 1 / 5; }
.item2-col { grid-column: 2 / span 3; }
.item3-col { grid-column: 1 / span 2; }
/* grid-row 属性示例 */
#grid-row-container {
grid-template-rows: repeat(4, 1fr);
}
.item1-row { grid-row: 1 / 4; }
.item2-row { grid-row: 2 / span 3; }
.item3-row { grid-row: 1 / span 2; }
/* grid-area 属性示例 */
#grid-area-container {
grid-template-areas:
"header header header header"
"menu main main right"
"footer footer footer footer";
}
.header { grid-area: header; }
.menu { grid-area: menu; }
.main { grid-area: main; }
.right { grid-area: right; }
.footer { grid-area: footer; }
</style>
</head>
<body>
<h1>CSS Grid 示例</h1>
<!-- grid-column 属性示例 -->
<section>
<h2>grid-column 属性示例</h2>
<div id="grid-column-container" class="grid-container">
<div class="grid-item item1-col">item1</div>
<div class="grid-item item2-col">item2</div>
<div class="grid-item item3-col">item3</div>
</div>
<pre>
.item1 { grid-column: 1 / 5; } /* 在第 1 列开始，在第 5 列前结束 */
.item2 { grid-column: 2 / span 3; } /* 在第 2 列开始，跨越 3 列 */
.item3 { grid-column: 1 / span 2; } /* 在第 1 列开始，跨越 2 列 */
</pre>
</section>
<!-- grid-row 属性示例 -->
<section>
<h2>grid-row 属性示例</h2>
<div id="grid-row-container" class="grid-container">
<div class="grid-item item1-row">item1</div>
<div class="grid-item item2-row">item2</div>
<div class="grid-item item3-row">item3</div>
</div>
<pre>
.item1 { grid-row: 1 / 4; } /* 在第 1 行开始，在第 4 行前结束 */
.item2 { grid-row: 2 / span 3; } /* 在第 2 行开始，跨越 3 行 */
.item3 { grid-row: 1 / span 2; } /* 在第 1 行开始，跨越 2 行 */
</pre>
</section>
<!-- grid-area 属性示例 -->
<section>
<h2>grid-area 属性示例</h2>
<div id="grid-area-container" class="grid-container">
<div class="grid-item header">header</div>
<div class="grid-item menu">menu</div>
<div class="grid-item main">main</div>
<div class="grid-item right">right</div>
<div class="grid-item footer">footer</div>
</div>
<pre>
.header { grid-area: header; }
.menu { grid-area: menu; }
.main { grid-area: main; }
.right { grid-area: right; }
.footer { grid-area: footer; }
.grid-container {
grid-template-areas:
'header header header header'
'menu main main right'
'footer footer footer footer';
}
</pre>
</section>
</body>
</html>
3 css3
3.1 css3边框
00.属性
border-image 设置所有边框图像的速记属性
border-radius 一个用于设置所有四个边框- *-半径属性的速记属性
box-shadow 附加一个或多个下拉框的阴影
01.属性选项
a.border-image
border-image 是一个速记属性，用于设置所有边框图像的相关属性。它包括以下选项：
source: 图片的路径。
slice: 定义图片的切割方式，值可以是一个、两个、三个或四个数值，分别表示上、右、下、左的切割位置。
width: 定义边框的宽度。
outset: 定义边框区域扩展的范围。
repeat: 定义边框图像如何重复，值可以是 stretch、repeat、round 或 space。
-----------------------------------------------------------------------------------------------------
border-image: url(border.png) 30 30 round;
b.border-radius
border-radius 是一个速记属性，用于设置元素的四个角的圆角半径。它包括以下选项：
一个值: 应用于所有四个角。
两个值: 第一个值应用于顶部左和底部右，第二个值应用于顶部右和底部左。
三个值: 第一个值应用于顶部左，第二个值应用于顶部右和底部左，第三个值应用于底部右。
四个值: 分别应用于顶部左、顶部右、底部右和底部左。
-----------------------------------------------------------------------------------------------------
border-radius: 25px;
border-radius: 20px 40px;
border-radius: 20px 40px 60px;
border-radius: 20px 40px 60px 80px;
c.box-shadow
box-shadow 用于给元素添加阴影。它包括以下选项：
horizontal-offset: 阴影的水平偏移量。
vertical-offset: 阴影的垂直偏移量。
blur-radius: 阴影的模糊半径（可选）。
spread-radius: 阴影的扩展半径（可选）。
color: 阴影的颜色（可选）。
inset: 将阴影设置为内阴影（可选）。
-----------------------------------------------------------------------------------------------------
box-shadow: 10px 10px 5px #888888;
box-shadow: 5px 5px 10px 2px rgba(0,0,0,0.5);
box-shadow: inset 5px 5px 10px 2px rgba(0,0,0,0.5);
02.样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 边框示例</title>
<style>
/* 圆角边框 */
.rounded-border {
border: 2px solid;
border-radius: 25px;
padding: 10px;
margin-bottom: 20px;
}
/* 盒阴影 */
.box-shadow {
box-shadow: 10px 10px 5px #888888;
padding: 10px;
margin-bottom: 20px;
}
/* 边界图片 */
.border-image {
border: 10px solid transparent;
border-image: url('border.png') 30 30 round;
-webkit-border-image: url('border.png') 30 30 round; /* Safari 5 and older */
-o-border-image: url('border.png') 30 30 round; /* Opera */
padding: 10px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>CSS3 边框示例</h1>
<section>
<h2>圆角边框</h2>
<div class="rounded-border">这是一个圆角边框的例子。</div>
</section>
<section>
<h2>盒阴影</h2>
<div class="box-shadow">这是一个盒阴影的例子。</div>
</section>
<section>
<h2>边界图片</h2>
<div class="border-image">这是一个边界图片的例子。</div>
</section>
<p>以上示例展示了 CSS3 中的一些新边框属性。你可以修改这些样式来查看更多效果。</p>
</body>
</html>
3.2 css3圆角
00.属性
border-radius 所有四个边角 border-*-*-radius 属性的缩写
border-top-left-radius 定义了左上角的弧度
border-top-right-radius 定义了右上角的弧度
border-bottom-right-radius 定义了右下角的弧度
border-bottom-left-radius 定义了左下角的弧度
01.属性选项
a.border-radius
单一值:
border-radius: 10px;
定义所有四个角的弧度相同。
-----------------------------------------------------------------------------------------------------
两个值:
border-radius: 10px 20px;
第一个值定义左上角和右下角的弧度，第二个值定义右上角和左下角的弧度。
-----------------------------------------------------------------------------------------------------
三个值:
border-radius: 10px 20px 30px;
第一个值定义左上角的弧度，第二个值定义右上角和左下角的弧度，第三个值定义右下角的弧度。
-----------------------------------------------------------------------------------------------------
四个值:
border-radius: 10px 20px 30px 40px;
四个值分别定义左上角、右上角、右下角和左下角的弧度。
-----------------------------------------------------------------------------------------------------
椭圆形圆角:
border-radius: 10px/20px;
第一个值是水平半径，第二个值是垂直半径。
b.border-top-left-radius
定义左上角的弧度。
可以接受单个值或者两个值（水平半径和垂直半径）。
示例:
border-top-left-radius: 10px;
border-top-left-radius: 10px 20px;
c.border-top-right-radius
定义右上角的弧度。
可以接受单个值或者两个值（水平半径和垂直半径）。
示例:
border-top-right-radius: 10px;
border-top-right-radius: 10px 20px;
d.border-bottom-right-radius
定义右下角的弧度。
可以接受单个值或者两个值（水平半径和垂直半径）。
示例:
border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px 20px;
e.border-bottom-left-radius
定义左下角的弧度。
可以接受单个值或者两个值（水平半径和垂直半径）。
示例:
border-bottom-left-radius: 10px;
border-bottom-left-radius: 10px 20px;
02.样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 圆角示例</title>
<style>
/* 基本圆角示例 */
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
/* 指定每个圆角的值 */
#rcorners4 {
border-radius: 15px 50px 30px 5px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners5 {
border-radius: 15px 50px 30px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners6 {
border-radius: 15px 50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
/* 椭圆边角 */
#rcorners7 {
border-radius: 50px/15px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners8 {
border-radius: 15px/50px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners9 {
border-radius: 50%;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>
<h2>CSS3 圆角示例</h2>
<h3>基本圆角示例</h3>
<div id="rcorners1">指定背景颜色的元素圆角</div>
<br>
<div id="rcorners2">指定边框的元素圆角</div>
<br>
<div id="rcorners3">指定背景图片的元素圆角</div>
<h3>指定每个圆角的值</h3>
<div id="rcorners4">四个值 - border-radius: 15px 50px 30px 5px</div>
<br>
<div id="rcorners5">三个值 - border-radius: 15px 50px 30px</div>
<br>
<div id="rcorners6">两个值 - border-radius: 15px 50px</div>
<h3>椭圆边角</h3>
<div id="rcorners7">border-radius: 50px/15px</div>
<br>
<div id="rcorners8">border-radius: 15px/50px</div>
<br>
<div id="rcorners9">border-radius: 50%</div>
</body>
</html>
3.3 css3背景
00.属性
background-clip 规定背景的绘制区域
background-origin 规定背景图片的定位区域
background-size 规定背景图片的尺寸
01.属性选项
a.background-clip
background-clip 属性规定背景的绘制区域。它有以下选项：
border-box: 背景被裁剪到边框盒子 (默认值)。
padding-box: 背景被裁剪到内边距盒子。
content-box: 背景被裁剪到内容盒子。
b.background-origin
background-origin 属性规定背景图片的定位区域。它有以下选项：
border-box: 背景图片相对于边框盒子定位。
padding-box: 背景图片相对于内边距盒子定位。
content-box: 背景图片相对于内容盒子定位。
c.background-size
background-size 属性规定背景图片的尺寸。它有以下选项：
auto: 默认值。保持背景图片的原始尺寸。
cover: 调整背景图片的大小，以覆盖整个容器。可能会裁剪背景图片。
contain: 调整背景图片的大小，以适应容器。保持图片的纵横比，不会裁剪背景图片。
<length>: 指定固定尺寸，如 100px 50px。
<percentage>: 以父元素的宽度和高度的百分比指定，如 50% 50%。
02.样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 背景示例</title>
<style>
/* background-image 属性 */
.background-image {
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 20px;
margin-bottom: 20px;
height: 200px;
border: 1px solid #ccc;
}
/* background-size 属性 */
.background-size-1 {
background: url('https://via.placeholder.com/150');
background-size: 80px 60px;
background-repeat: no-repeat;
padding: 20px;
margin-bottom: 20px;
height: 200px;
border: 1px solid #ccc;
}
.background-size-2 {
background: url('https://via.placeholder.com/150');
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 20px;
margin-bottom: 20px;
height: 200px;
border: 1px solid #ccc;
}
/* background-origin 属性 */
.background-origin {
background: url('https://via.placeholder.com/150');
background-repeat: no-repeat;
background-size: 100% 100%;
background-origin: content-box;
padding: 20px;
margin-bottom: 20px;
height: 200px;
border: 1px solid #ccc;
}
/* 多重背景图像 */
.multiple-backgrounds {
background-image: url('https://via.placeholder.com/150'), url('https://via.placeholder.com/100');
padding: 20px;
margin-bottom: 20px;
height: 200px;
border: 1px solid #ccc;
}
/* background-clip 属性 */
.background-clip {
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
margin-bottom: 20px;
height: 200px;
}
</style>
</head>
<body>
<h1>CSS3 背景示例</h1>
<section>
<h2>背景图片（background-image）</h2>
<div class="background-image">这是一个使用 background-image 属性的例子。</div>
</section>
<section>
<h2>背景大小（background-size）</h2>
<div class="background-size-1">这是一个使用 background-size 属性设置为特定尺寸的例子。</div>
<div class="background-size-2">这是一个使用 background-size 属性设置为100%填充的例子。</div>
</section>
<section>
<h2>背景定位区域（background-origin）</h2>
<div class="background-origin">这是一个使用 background-origin 属性的例子。</div>
</section>
<section>
<h2>多重背景图像</h2>
<div class="multiple-backgrounds">这是一个使用多重背景图像的例子。</div>
</section>
<section>
<h2>背景剪裁（background-clip）</h2>
<div class="background-clip">这是一个使用 background-clip 属性的例子。</div>
</section>
<p>以上示例展示了 CSS3 中的一些新背景属性。你可以修改这些样式来查看更多效果。</p>
</body>
</html>
3.4 css3渐变
01.属性选项
a.CSS3线性渐变
线性渐变 - 从上到下（默认情况下）
属性：background-image: linear-gradient(color-stop1, color-stop2, ...);
示例：background-image: linear-gradient(#e66465, #9198e5);
-----------------------------------------------------------------------------------------------------
线性渐变 - 从左到右
属性：background-image: linear-gradient(to direction, color-stop1, color-stop2, ...);
示例：background-image: linear-gradient(to right, red, yellow);
-----------------------------------------------------------------------------------------------------
线性渐变 - 对角
属性：background-image: linear-gradient(to direction, color-stop1, color-stop2, ...);
示例：background-image: linear-gradient(to bottom right, red, yellow);
-----------------------------------------------------------------------------------------------------
使用角度
属性：background-image: linear-gradient(angle, color-stop1, color-stop2);
示例：background-image: linear-gradient(-90deg, red, yellow);
-----------------------------------------------------------------------------------------------------
使用多个颜色节点
属性：background-image: linear-gradient(color-stop1, color-stop2, color-stop3, ...);
示例：background-image: linear-gradient(red, yellow, green);
-----------------------------------------------------------------------------------------------------
使用透明度（transparent）
属性：background-image: linear-gradient(to direction, rgba(color, transparency), rgba(color, transparency));
示例：background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
-----------------------------------------------------------------------------------------------------
重复的线性渐变
属性：background-image: repeating-linear-gradient(color-stop1, color-stop2, ...);
示例：background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
b.CSS3 径向渐变
设置形状
属性：background-image: radial-gradient(shape, color-stop1, color-stop2, ...);
选项：
circle: 圆形
ellipse: 椭圆形
示例：background-image: radial-gradient(circle, red, yellow, green);
-----------------------------------------------------------------------------------------------------
不同尺寸大小关键字的使用
属性：background-image: radial-gradient(size at position, color-stop1, color-stop2, ...);
选项：
closest-side: 渐变区域到最近的边
farthest-side: 渐变区域到最远的边
closest-corner: 渐变区域到最近的角落
farthest-corner: 渐变区域到最远的角落
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
-----------------------------------------------------------------------------------------------------
重复的径向渐变
属性：background-image: repeating-radial-gradient(shape size at position, color-stop1, color-stop2, ...);
示例：background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
02.样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 渐变示例</title>
<style>
.box {
width: 200px;
height: 150px;
margin: 20px;
padding: 20px;
border: 2px solid #333;
}
/* 线性渐变示例 */
.linear-top-bottom {
background-image: linear-gradient(#e66465, #9198e5);
}
.linear-left-right {
background-image: linear-gradient(to right, red, yellow);
}
.linear-diagonal {
background-image: linear-gradient(to bottom right, red, yellow);
}
.linear-angle {
background-image: linear-gradient(-90deg, red, yellow);
}
.linear-multiple-colors {
background-image: linear-gradient(red, yellow, green);
}
.linear-rainbow {
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
.linear-transparent {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
.repeating-linear {
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
/* 径向渐变示例 */
.radial-default {
background-image: radial-gradient(red, yellow, green);
}
.radial-uneven {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
.radial-circle {
background-image: radial-gradient(circle, red, yellow, green);
}
.radial-closest-side {
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}
.radial-farthest-side {
background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}
.repeating-radial {
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
</style>
</head>
<body>
<h2>CSS3 渐变示例</h2>
<h3>线性渐变示例</h3>
<div class="box linear-top-bottom">从上到下的线性渐变</div>
<div class="box linear-left-right">从左到右的线性渐变</div>
<div class="box linear-diagonal">从左上角到右下角的线性渐变</div>
<div class="box linear-angle">带有指定角度的线性渐变</div>
<div class="box linear-multiple-colors">带有多个颜色节点的线性渐变</div>
<div class="box linear-rainbow">彩虹颜色的线性渐变</div>
<div class="box linear-transparent">带有透明度的线性渐变</div>
<div class="box repeating-linear">重复的线性渐变</div>
<h3>径向渐变示例</h3>
<div class="box radial-default">颜色节点均匀分布的径向渐变</div>
<div class="box radial-uneven">颜色节点不均匀分布的径向渐变</div>
<div class="box radial-circle">形状为圆形的径向渐变</div>
<div class="box radial-closest-side">带有 closest-side 尺寸的径向渐变</div>
<div class="box radial-farthest-side">带有 farthest-side 尺寸的径向渐变</div>
<div class="box repeating-radial">重复的径向渐变</div>
</body>
</html>
3.5 css3文本效果
00.属性
hanging-punctuation 规定标点字符是否位于线框之外
punctuation-trim 规定是否对标点字符进行修剪
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色
text-justify 规定当 text-align 设置为 "justify" 时所使用的对齐方法
text-outline 规定文本的轮廓
text-overflow 规定当文本溢出包含元素时发生的事情
text-shadow 向文本添加阴影
text-wrap 规定文本的换行规则
word-break 规定非中日韩文本的换行规则
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行
01.属性选项
a.hanging-punctuation
hanging-punctuation 属性规定标点字符是否位于线框之外。可选值包括：
none: 标点不悬挂。
first: 悬挂行首标点。
last: 悬挂行尾标点。
force-end: 强制悬挂行尾标点。
allow-end: 允许悬挂行尾标点。
b.punctuation-trim
punctuation-trim 属性规定是否对标点字符进行修剪。可选值包括：
none: 不修剪标点。
start: 修剪行首标点。
end: 修剪行尾标点。
allow-end: 允许修剪行尾标点。
c.text-align-last
text-align-last 属性设置如何对齐最后一行或紧挨着强制换行符之前的行。可选值包括：
auto: 默认对齐方式。
left: 左对齐。
right: 右对齐。
center: 居中对齐。
justify: 两端对齐。
d.text-emphasis
text-emphasis 属性向元素的文本应用重点标记以及重点标记的前景色。可选值包括：
text-emphasis-style: none, accent, dot, circle, disc，也可以使用自定义符号。
text-emphasis-color: 任何有效的颜色值。
e.text-justify
text-justify 属性规定当 text-align 设置为 justify 时所使用的对齐方法。可选值包括：
auto: 浏览器自动决定对齐方式。
inter-word: 通过增加单词间的空白来对齐。
inter-character: 通过增加字符间的空白来对齐。
f.text-outline
text-outline 属性规定文本的轮廓。可选值包括：
none: 没有轮廓。
<length> <color>: 轮廓的宽度和颜色。
g.text-overflow
text-overflow 属性规定当文本溢出包含元素时发生的事情。可选值包括：
clip: 剪切文本。
ellipsis: 使用省略号表示被修剪的文本。
h.text-shadow
text-shadow 属性向文本添加阴影。可选值包括：
<x-offset> <y-offset> <blur-radius> <color>: 水平阴影偏移、垂直阴影偏移、模糊半径和阴影颜色。
i.text-wrap
text-wrap 属性规定文本的换行规则。可选值包括：
normal: 正常换行。
none: 不换行。
unrestricted: 无限制换行。
suppress: 抑制换行。
balance: 平衡换行。
j.word-break
word-break 属性规定非中日韩文本的换行规则。可选值包括：
normal: 使用浏览器默认的换行规则。
break-all: 允许在单词内换行。
keep-all: 不允许在单词内换行。
k.word-wrap
word-wrap 属性允许对长的不可分割的单词进行分割并换行到下一行。可选值包括：
normal: 默认换行规则。
break-word: 允许长单词换行。
02.样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 文本效果示例</title>
<style>
/* text-shadow 属性 */
.text-shadow {
text-shadow: 5px 5px 5px #FF0000;
}
/* box-shadow 属性 */
.box-shadow {
box-shadow: 10px 10px 5px #888888;
}
.box-shadow-color {
box-shadow: 10px 10px grey;
}
.box-shadow-blur {
box-shadow: 10px 10px 5px grey;
}
/* text-overflow 属性 */
.text-overflow-clip {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
.text-overflow-ellipsis {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
/* word-wrap 属性 */
.word-wrap {
word-wrap: break-word;
}
/* word-break 属性 */
.word-break-keep-all {
word-break: keep-all;
}
.word-break-break-all {
word-break: break-all;
}
</style>
</head>
<body>
<h1>CSS3 文本效果示例</h1>
<section>
<h2>文本阴影（text-shadow）</h2>
<p class="text-shadow">这是一个带有阴影效果的文本。</p>
</section>
<section>
<h2>盒子阴影（box-shadow）</h2>
<div class="box-shadow">这是一个带有盒子阴影的盒子。</div>
<div class="box-shadow-color">这是一个带有灰色阴影的盒子。</div>
<div class="box-shadow-blur">这是一个带有模糊阴影的盒子。</div>
</section>
<section>
<h2>文本溢出（text-overflow）</h2>
<p class="text-overflow-clip">这是一个很长的文本，它将被剪切。</p>
<p class="text-overflow-ellipsis">这是一个很长的文本，它将被省略号替代。</p>
</section>
<section>
<h2>换行（word-wrap）</h2>
<p class="word-wrap">这是一个非常长的单词，它将被换行：supercalifragilisticexpialidocious</p>
</section>
<section>
<h2>单词拆分换行（word-break）</h2>
<p class="word-break-keep-all">这是一个带有 keep-all 属性的文本，长单词不会被拆分。</p>
<p class="word-break-break-all">这是一个带有 break-all 属性的文本，长单词会被拆分。</p>
</section>
<p>以上示例展示了 CSS3 中的 text-shadow, box-shadow, text-overflow, word-wrap 和 word-break 属性的不同选项。</p>
</body>
</html>
3.6 css3字体
00.属性
font-family 指定字体名称
src 定义字体文件的 URL
font-stretch 定义字体的拉伸方式
font-style 定义字体的样式
font-weight 定义字体的粗细
unicode-range 定义字体支持的 Unicode 字符范围
01.属性选项
a.font-family
描述：指定字体名称。
选项：任意定义的字体名称或通用字体族（如 serif、sans-serif、monospace 等）。
示例：
font-family: 'myFirstFont', sans-serif;
b.src
描述：定义字体文件的 URL。
选项：字体文件的 URL（如 .woff、.ttf、.otf、.svg、.eot 等）。
示例：
src: url('sansation_light.woff');
c.font-stretch
描述：定义字体的拉伸方式。
选项：normal（默认）、condensed、ultra-condensed、extra-condensed、semi-condensed、expanded、semi-expanded、extra-expanded、ultra-expanded
示例：
font-stretch: expanded;
d.font-style
描述：定义字体的样式。
选项：normal、italic、oblique
示例：
font-style: italic;
e.font-weight
描述：定义字体的粗细。
选项：
normal
bold
数字值：100, 200, 300, 400, 500, 600, 700, 800, 900
示例：
font-weight: 700;
f.unicode-range
描述：定义字体支持的 Unicode 字符范围。
选项：Unicode 范围（如 U+0025-00FF）。
示例：
unicode-range: U+0025-00FF;
02.样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 字体示例</title>
<style>
/* 定义字体 */
@font-face {
font-family: 'myFirstFont';
src: url('sansation_light.woff');
}
@font-face {
font-family: 'myFirstFontBold';
src: url('sansation_bold.woff');
font-weight: bold;
}
@font-face {
font-family: 'myStretchedFont';
src: url('sansation_light.woff');
font-stretch: expanded;
}
@font-face {
font-family: 'myItalicFont';
src: url('sansation_light.woff');
font-style: italic;
}
@font-face {
font-family: 'myWeightFont';
src: url('sansation_light.woff');
font-weight: 700;
}
@font-face {
font-family: 'myUnicodeFont';
src: url('sansation_light.woff');
unicode-range: U+0025-00FF; /* 支持拉丁字母和基本标点符号 */
}
/* 使用自定义字体 */
.custom-font {
font-family: 'myFirstFont';
}
.custom-font-bold {
font-family: 'myFirstFontBold';
font-weight: bold;
}
.custom-font-stretched {
font-family: 'myStretchedFont';
}
.custom-font-italic {
font-family: 'myItalicFont';
}
.custom-font-weight {
font-family: 'myWeightFont';
font-weight: 700;
}
.custom-font-unicode {
font-family: 'myUnicodeFont';
}
</style>
</head>
<body>
<h2>CSS3 字体示例</h2>
<h3>自定义字体示例</h3>
<div class="custom-font">这是使用自定义字体的文本。</div>
<h3>使用粗体文本示例</h3>
<div class="custom-font-bold">这是使用自定义粗体字体的文本。</div>
<h3>字体拉伸示例</h3>
<div class="custom-font-stretched">这是使用自定义拉伸字体的文本。</div>
<h3>字体样式示例</h3>
<div class="custom-font-italic">这是使用自定义斜体字体的文本。</div>
<h3>字体粗细示例</h3>
<div class="custom-font-weight">这是使用自定义粗细字体的文本。</div>
<h3>UNICODE 字符范围示例</h3>
<div class="custom-font-unicode">这是使用自定义 Unicode 字符范围的文本。ABC abc 123</div>
</body>
</html>
3.7 css3转换2D
01.属性选项
a.新转换属性
transform 适用于2D或3D转换的元素 用于将元素进行各种转换（如移动、旋转、缩放和倾斜）。
transform-origin 允许您更改转化元素位置 用于设置转换的原点，默认值为元素的中心，可以使用 px 或 % 来设置。
b.2D转换方法
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。 n1 到 n6 为数值，表示转换的参数。
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。 x: 水平移动的距离，y: 垂直移动的距离。
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。 n: 水平移动的距离
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。 n: 垂直移动的距离。
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。 x: 水平缩放因子，y: 垂直缩放因子。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。 n: 水平缩放因子。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。 n: 垂直缩放因子。
rotate(angle) 定义 2D 旋转，在参数中规定角度。 angle: 旋转角度，可以是负值或正值。
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。 x-angle: X 轴的倾斜角度，y-angle: Y 轴的倾斜角度。
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。 angle: X 轴的倾斜角度。
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。 angle: Y 轴的倾斜角度。
02.样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 2D 转换示例</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.transform-example {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 20px;
transition: transform 0.5s;
display: inline-block;
}
.transform-example:hover {
transform: rotate(30deg); /* 示例：旋转 */
}
.translate {
transform: translate(50px, 50px); /* 示例：平移 */
}
.rotate {
transform: rotate(30deg); /* 示例：旋转 */
}
.scale {
transform: scale(1.5, 1.5); /* 示例：缩放 */
}
.skew {
transform: skew(20deg, 10deg); /* 示例：倾斜 */
}
.matrix {
transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0); /* 示例：矩阵转换 */
}
</style>
</head>
<body>
<h1>CSS3 2D 转换示例</h1>
<section>
<h2>1. transform 属性</h2>
<p>transform 属性用于应用 2D 或 3D 转换。</p>
<div class="transform-example">鼠标移动我</div>
</section>
<section>
<h2>2. translate() 方法</h2>
<p>translate() 方法根据 X 轴和 Y 轴的位置移动元素。</p>
<div class="transform-example translate">平移</div>
</section>
<section>
<h2>3. rotate() 方法</h2>
<p>rotate() 方法使元素按指定角度旋转。</p>
<div class="transform-example rotate">旋转</div>
</section>
<section>
<h2>4. scale() 方法</h2>
<p>scale() 方法用于增加或减少元素的大小。</p>
<div class="transform-example scale">缩放</div>
</section>
<section>
<h2>5. skew() 方法</h2>
<p>skew() 方法根据 X 轴和 Y 轴的角度倾斜元素。</p>
<div class="transform-example skew">倾斜</div>
</section>
<section>
<h2>6. matrix() 方法</h2>
<p>matrix() 方法结合了旋转、缩放、平移和倾斜的功能。</p>
<div class="transform-example matrix">矩阵</div>
</section>
<h2>浏览器支持</h2>
<table border="1">
<tr>
<th>属性</th>
<th>Chrome</th>
<th>Safari</th>
<th>Firefox</th>
<th>Internet Explorer</th>
</tr>
<tr>
<td>transform</td>
<td>36.0</td>
<td>4.0 -webkit-</td>
<td>9.0 -ms-</td>
<td>3.5 -moz-</td>
</tr>
<tr>
<td>transform-origin</td>
<td>36.0</td>
<td>4.0 -webkit-</td>
<td>9.0 -ms-</td>
<td>3.5 -moz-</td>
</tr>
</table>
<p>以上示例展示了 CSS3 中 2D 转换属性及其用法。</p>
</body>
</html>
3.8 css3转换3D
00.属性
a.转换属性
transform 向元素应用 2D 或 3D 转换
transform-origin 允许你改变被转换元素的位置
transform-style 规定被嵌套元素如何在 3D 空间中显示
perspective 规定 3D 元素的透视效果
perspective-origin 规定 3D 元素的底部位置
backface-visibility 定义元素在不面对屏幕时是否可见
b.3D转换方法
matrix3d(n,n,n,n,n,n,,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。
01.属性选项
a.转换属性
a.transition
描述：向元素应用 2D 或 3D 转换。
选项：
rotateX(angle)
rotateY(angle)
rotateZ(angle)
translateX(x)
translateY(y)
translateZ(z)
scaleX(x)
scaleY(y)
scaleZ(z)
translate3d(x, y, z)
scale3d(x, y, z)
rotate3d(x, y, z, angle)
matrix3d(n1, n2, n3, n4, n5, n6, n7, n8, n9, n10, n11, n12, n13, n14, n15, n16)
b.transform-origin
描述：允许你改变被转换元素的位置。
选项：
left
center
right
top
bottom
50% (百分比值，默认为 center)
length (例如 10px, 2em)
c.transform-style
描述：规定被嵌套元素如何在 3D 空间中显示。
选项：
flat (默认值，嵌套元素被绘制为 2D)
preserve-3d (保持 3D 位置和变换)
d.perspective
描述：规定 3D 元素的透视效果。
选项：
任意正值（如 300px, 500px, 1000px）
e.perspective-origin
描述：规定 3D 元素的透视视点的位置。
选项：
left
center
right
top
bottom
50% (百分比值，默认为 center)
length (例如 10px, 2em)
f.backface-visibility
描述：定义元素在不面对屏幕时是否可见。
选项：
visible (默认值，元素在背面也可见)
hidden (元素在背面不可见)
b.3D转换方法
a.matrix3d(n,n,n,n,n,n,,n,n,n,n,n,n,n,n,n)
描述：定义 3D 转换，使用 16 个值的 4x4 矩阵。
选项：16 个数字（如 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1）
b.translate3d(x,y,z)
描述：定义 3D 位移转换。
选项：
x：沿 X 轴的位移（如 100px）
y：沿 Y 轴的位移（如 50px）
z：沿 Z 轴的位移（如 200px）
c.translateX(x)
描述：沿 X 轴位移。
选项：任意长度单位（如 100px, 10%）
d.translateY(y)
描述：沿 Y 轴位移。
选项：任意长度单位（如 100px, 10%）
e.translateZ(z)
描述：沿 Z 轴位移。
选项：任意长度单位（如 100px, 10%）
f.scale3d(x, y, z)
描述：定义 3D 缩放转换。
选项：
x：沿 X 轴的缩放比例（如 1.5）
y：沿 Y 轴的缩放比例（如 1.5）
z：沿 Z 轴的缩放比例（如 1.5）
g.scaleX(x)
描述：沿 X 轴缩放。
选项：缩放比例（如 1.5）
h.scaleY(y)
描述：沿 Y 轴缩放。
选项：缩放比例（如 1.5）
i.scaleZ(z)
描述：沿 Z 轴缩放。
选项：缩放比例（如 1.5）
j.rotate3d(x, y, z, angle)
描述：沿任意轴旋转元素。
选项：
x, y, z：表示旋转轴的坐标值（如 1, 0, 0）
angle：旋转角度（如 45deg）
k.rotateX(angle)
描述：沿 X 轴旋转。
选项：旋转角度（如 45deg）
l.rotateY(angle)
描述：沿 Y 轴旋转。
选项：旋转角度（如 45deg）
m.rotateZ(angle)
描述：沿 Z 轴旋转。
选项：旋转角度（如 45deg）
n.perspective(n)
描述：定义 3D 转换元素的透视视图。
选项：任何正值（如 300px, 500px）
02.样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 3D Transforms with Animation</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
}
.box {
width: 200px;
height: 200px;
margin: 20px auto;
background-color: #4CAF50;
color: white;
line-height: 200px;
text-align: center;
font-size: 24px;
font-weight: bold;
position: relative;
transform-style: preserve-3d;
transition: transform 1s;
}
/* 动画效果 */
@keyframes rotateAnimation {
0% { transform: rotateX(0deg) rotateY(0deg); }
50% { transform: rotateX(180deg) rotateY(180deg); }
100% { transform: rotateX(360deg) rotateY(360deg); }
}
.animate-transform {
animation: rotateAnimation 5s infinite;
}
/* transform 示例 */
.transform-example {
transform: rotateX(30deg) rotateY(30deg);
}
/* transform-origin 示例 */
.transform-origin-example {
transform-origin: top left;
transform: rotateY(45deg);
}
/* transform-style 示例 */
.transform-style-example {
transform: rotateY(30deg);
transform-style: preserve-3d;
}
.transform-style-example > .box {
background-color: #FF5722;
}
/* perspective 示例 */
.perspective-example {
perspective: 500px;
transform: rotateY(45deg);
}
.perspective-example > .box {
transform: rotateY(90deg);
transform-style: preserve-3d;
}
/* perspective-origin 示例 */
.perspective-origin-example {
perspective: 500px;
perspective-origin: right bottom;
transform: rotateY(45deg);
}
.perspective-origin-example > .box {
transform: rotateY(90deg);
transform-style: preserve-3d;
}
/* backface-visibility 示例 */
.backface-visibility-example {
perspective: 500px;
}
.backface-visibility-example > .box {
transform: rotateY(180deg);
backface-visibility: hidden;
}
/* matrix3d 示例 */
.matrix3d-example {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
/* translate3d 示例 */
.translate3d-example {
transform: translate3d(100px, 100px, 100px);
}
/* scale3d 示例 */
.scale3d-example {
transform: scale3d(1.5, 1.5, 1.5);
}
/* rotate3d 示例 */
.rotate3d-example {
transform: rotate3d(1, 1, 0, 45deg);
}
/* rotateX 示例 */
.rotateX-example {
transform: rotateX(60deg);
}
/* rotateY 示例 */
.rotateY-example {
transform: rotateY(60deg);
}
/* rotateZ 示例 */
.rotateZ-example {
transform: rotateZ(60deg);
}
</style>
</head>
<body>
<h1>CSS3 3D Transforms Examples with Animation</h1>
<h2>Animated transform</h2>
<div class="box animate-transform">
Animated 3D Transform
</div>
<h2>transform</h2>
<div class="box transform-example">
Rotate X and Y
</div>
<h2>transform-origin</h2>
<div class="box transform-origin-example">
Transform Origin
</div>
<h2>transform-style</h2>
<div class="box transform-style-example">
Transform Style
<div class="box">Nested Box</div>
</div>
<h2>perspective</h2>
<div class="perspective-example">
<div class="box">
Perspective
</div>
</div>
<h2>perspective-origin</h2>
<div class="perspective-origin-example">
<div class="box">
Perspective Origin
</div>
</div>
<h2>backface-visibility</h2>
<div class="backface-visibility-example">
<div class="box">
Backface Visibility
</div>
</div>
<h2>matrix3d</h2>
<div class="box matrix3d-example">
Matrix3d
</div>
<h2>translate3d</h2>
<div class="box translate3d-example">
Translate3d
</div>
<h2>scale3d</h2>
<div class="box scale3d-example">
Scale3d
</div>
<h2>rotate3d</h2>
<div class="box rotate3d-example">
Rotate3d
</div>
<h2>rotateX</h2>
<div class="box rotateX-example">
RotateX
</div>
<h2>rotateY</h2>
<div class="box rotateY-example">
RotateY
</div>
<h2>rotateZ</h2>
<div class="box rotateZ-example">
RotateZ
</div>
</body>
</html>
3.9 css3过渡
00.属性
transition 简写属性，用于在一个属性中设置四个过渡属性
transition-property 规定应用过渡的 CSS 属性的名称
transition-duration 定义过渡效果花费的时间。默认是 0
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"
transition-delay 规定过渡效果何时开始。默认是 0
01.属性选项
a.transition
描述: 用于设置过渡效果的简写属性，包含以下四个属性。
选项:
transition-property: 要应用过渡的 CSS 属性名称。
transition-duration: 过渡效果持续的时间。
transition-timing-function: 过渡效果的时间曲线。
transition-delay: 过渡效果开始的延迟时间。
b.transition-property
描述: 规定应用过渡的 CSS 属性的名称。
选项:
all: 所有属性（默认值）。
具体属性名称，例如 width、height、background-color、opacity 等。
c.transition-duration
描述: 定义过渡效果花费的时间。默认值是 0。
选项:
时间单位：可以是秒（s）或毫秒（ms）。
示例: 2s, 500ms, 0.5s
d.transition-timing-function
描述: 规定过渡效果的时间曲线。默认值是 ease。
选项:
ease: 默认值，开始慢，接着加速，然后减速。
linear: 以恒定速度过渡。
ease-in: 从慢到快。
ease-out: 从快到慢。
ease-in-out: 先慢后快再慢。
cubic-bezier(n,n,n,n): 自定义贝塞尔曲线，n 是 0 到 1 之间的值，定义过渡的速度变化。
e.transition-delay
描述: 规定过渡效果何时开始。默认值是 0。
选项:
时间单位：可以是秒（s）或毫秒（ms）。
示例: 1s, 200ms, 0s
02.样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 过渡效果</title>
<style>
body {
font-family: Arial, sans-serif;
}
.box {
width: 200px;
height: 200px;
background-color: #4CAF50;
transition: width 2s, height 2s; /* 应用过渡效果 */
-webkit-transition: width 2s, height 2s; /* Safari */
margin: 20px;
}
.box:hover {
width: 300px; /* 鼠标悬浮时宽度变化 */
height: 300px; /* 鼠标悬浮时高度变化 */
}
/* 其他示例 */
.box-multiple {
width: 150px;
height: 150px;
background-color: #2196F3;
transition: width 2s, height 2s, transform 2s; /* 多个样式变化 */
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
margin: 20px;
}
.box-multiple:hover {
width: 250px;
height: 250px;
transform: rotate(20deg); /* 鼠标悬浮时旋转 */
}
</style>
</head>
<body>
<h1>CSS3 过渡效果示例</h1>
<div class="box">鼠标悬浮在此</div>
<div class="box-multiple">多个变化示例</div>
<h2>过渡属性</h2>
<table border="1">
<tr>
<th>属性</th>
<th>描述</th>
<th>CSS</th>
</tr>
<tr>
<td>transition</td>
<td>简写属性，用于在一个属性中设置四个过渡属性。</td>
<td>3</td>
</tr>
<tr>
<td>transition-property</td>
<td>规定应用过渡的 CSS 属性的名称。</td>
<td>3</td>
</tr>
<tr>
<td>transition-duration</td>
<td>定义过渡效果花费的时间。默认是 0。</td>
<td>3</td>
</tr>
<tr>
<td>transition-timing-function</td>
<td>规定过渡效果的时间曲线。默认是 "ease"。</td>
<td>3</td>
</tr>
<tr>
<td>transition-delay</td>
<td>规定过渡效果何时开始。默认是 0。</td>
<td>3</td>
</tr>
</table>
</body>
</html>
3.10 css3动画
00.属性
@keyframes 规定动画
animation 所有动画属性的简写属性
animation-name 规定 @keyframes 动画的名称
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0
animation-timing-function 规定动画的速度曲线。默认是 "ease"
animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
animation-delay 规定动画何时开始。默认是 0
animation-iteration-count 规定动画被播放的次数。默认是 1
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"
01.属性选项
a.@keyframes
描述: 规定动画的关键帧。
选项: 关键帧的名称。可以使用百分比（0% 到 100%）或关键字 from 和 to（等同于 0% 和 100%）。
b.animation
描述: 所有动画属性的简写属性。
选项:
animation-name: 动画的名称
animation-duration: 动画持续时间
animation-timing-function: 动画速度曲线
animation-delay: 动画延迟时间
animation-iteration-count: 动画迭代次数
animation-direction: 动画播放方向
animation-fill-mode: 动画填充模式
animation-play-state: 动画播放状态
c.animation-name
描述: 规定 @keyframes 动画的名称。
选项: 动画名称（字符串），或 none 表示没有动画。
d.animation-duration
描述: 规定动画完成一个周期所花费的时间。
选项: 时间值（如 2s, 500ms），默认值为 0。
e.animation-timing-function
描述: 规定动画的速度曲线。
选项:
linear: 线性速度
ease: 缓动（默认）
ease-in: 加速
ease-out: 减速
ease-in-out: 加速后减速
cubic-bezier(n,n,n,n): 自定义贝塞尔曲线
f.animation-fill-mode
描述: 规定当动画不播放时要应用到元素的样式。
选项:
none: 默认，不应用任何样式
forwards: 保持动画结束时的样式
backwards: 在动画开始前应用动画的初始样式
both: 同时应用前向和后向样式
g.animation-delay
描述: 规定动画何时开始。
选项: 时间值（如 1s, 500ms），默认值为 0。
h.animation-iteration-count
描述: 规定动画被播放的次数。
选项:
正整数（如 1, 2 等）
infinite: 无限循环
i.animation-direction
描述: 规定动画是否在下一周期逆向地播放。
选项:
normal: 正常方向（默认）
reverse: 反向
alternate: 正向和反向交替
alternate-reverse: 反向和正向交替
j.animation-play-state
描述: 规定动画是否正在运行或暂停。
选项:
running: 运行（默认）
paused: 暂停
02.样式
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 动画示例</title>
<style>
/* 动画定义 */
@keyframes myfirst {
0% { background: red; left: 0px; top: 0px; }
25% { background: yellow; left: 200px; top: 0px; }
50% { background: blue; left: 200px; top: 200px; }
75% { background: green; left: 0px; top: 200px; }
100% { background: red; left: 0px; top: 0px; }
}
@-webkit-keyframes myfirst { /* Safari 和 Chrome */
0% { background: red; left: 0px; top: 0px; }
25% { background: yellow; left: 200px; top: 0px; }
50% { background: blue; left: 200px; top: 200px; }
75% { background: green; left: 0px; top: 200px; }
100% { background: red; left: 0px; top: 0px; }
}
/* 应用动画 */
.animated-div {
position: relative;
width: 100px;
height: 100px;
animation: myfirst 5s infinite; /* 使用动画 */
-webkit-animation: myfirst 5s infinite; /* Safari 和 Chrome */
}
</style>
</head>
<body>
<h2>CSS3 动画示例</h2>
<div class="animated-div"></div>
<script>
// 动画属性方法示例
function animationExamples() {
// 1. @keyframes 规则
const keyframesExample = `
@keyframes myAnimation {
from { background: red; }
to { background: yellow; }
}
`;
console.log("1. @keyframes 规则示例:\n", keyframesExample);
// 2. animation 属性
const animationExample = `
animation: myAnimation 2s;
`;
console.log("2. animation 属性示例:\n", animationExample);
// 3. animation-name 属性
const animationNameExample = `
animation-name: myAnimation;
`;
console.log("3. animation-name 属性示例:\n", animationNameExample);
// 4. animation-duration 属性
const animationDurationExample = `
animation-duration: 2s;
`;
console.log("4. animation-duration 属性示例:\n", animationDurationExample);
// 5. animation-timing-function 属性
const animationTimingFunctionExample = `
animation-timing-function: ease;
`;
console.log("5. animation-timing-function 属性示例:\n", animationTimingFunctionExample);
// 6. animation-fill-mode 属性
const animationFillModeExample = `
animation-fill-mode: forwards;
`;
console.log("6. animation-fill-mode 属性示例:\n", animationFillModeExample);
// 7. animation-delay 属性
const animationDelayExample = `
animation-delay: 1s;
`;
console.log("7. animation-delay 属性示例:\n", animationDelayExample);
// 8. animation-iteration-count 属性
const animationIterationCountExample = `
animation-iteration-count: infinite;
`;
console.log("8. animation-iteration-count 属性示例:\n", animationIterationCountExample);
// 9. animation-direction 属性
const animationDirectionExample = `
animation-direction: alternate;
`;
console.log("9. animation-direction 属性示例:\n", animationDirectionExample);
// 10. animation-play-state 属性
const animationPlayStateExample = `
animation-play-state: paused;
`;
console.log("10. animation-play-state 属性示例:\n", animationPlayStateExample);
}
animationExamples(); // 调用动画属性方法示例
</script>
</body>
</html>
3.11 css3多列
00.属性
column-count 指定元素应该被分割的列数。
column-fill 指定如何填充列
column-gap 指定列与列之间的间隙
column-rule 所有 column-rule-* 属性的简写
column-rule-color 指定两列间边框的颜色
column-rule-style 指定两列间边框的样式
column-rule-width 指定两列间边框的厚度
column-span 指定元素要跨越多少列
column-width 指定列的宽度
columns column-width 与 column-count 的简写属性
01.属性选项
a.column-count
描述: 指定元素应该被分割的列数。
选项:
任何正整数（如 1, 2, 3, …）
b.column-fill
描述: 指定如何填充列。
选项:
auto: 默认值，浏览器决定填充方式。
balance: 尝试使所有列的高度相等。
c.column-gap
描述: 指定列与列之间的间隙。
选项:
任何长度单位（如 px, em, % 等）
d.column-rule
描述: 所有 column-rule-* 属性的简写。
选项:
column-rule-width column-rule-style column-rule-color
例如: 1px solid lightblue
e.column-rule-color
描述: 指定两列间边框的颜色。
选项:
任何有效的颜色值（如 red, #ff0000, rgba(255,0,0,0.5)）
f.column-rule-style
描述: 指定两列间边框的样式。
选项:
none: 无边框
solid: 实线
dotted: 点线
dashed: 虚线
double: 双线
groove: 凹槽边框
ridge: 隆起边框
inset: 内嵌边框
outset: 外凸边框
g.column-rule-width
描述: 指定两列间边框的厚度。
选项:
任何长度单位（如 px, em, % 等）
h.column-span
描述: 指定元素要跨越多少列。
选项:
none: 默认值，不跨越列
all: 跨越所有列（仅在某些浏览器支持）
i.column-width
描述: 指定列的宽度。
选项:
任何长度单位（如 px, em, % 等）
j.columns
描述: column-width 与 column-count 的简写属性。
选项:
column-count column-width
例如: 3 100px 表示 3 列，每列宽度为 100px
02.样式
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 多列示例</title>
<style>
body {
font-family: Arial, sans-serif;
}
/* 多列布局 */
.multi-column {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
-moz-column-rule: 1px solid lightblue; /* Firefox */
column-rule: 1px solid lightblue;
-webkit-column-width: 100px; /* Chrome, Safari, Opera */
column-width: 100px;
}
/* 跨越所有列 */
.span-all {
-webkit-column-span: all; /* Chrome, Safari, Opera */
column-span: all;
display: block; /* 确保跨列标题为块级元素 */
margin-top: 20px; /* 添加顶部外边距 */
margin-bottom: 10px; /* 添加底部外边距 */
background-color: lightgray; /* 设置背景色 */
padding: 10px; /* 添加内边距 */
text-align: center; /* 文字居中 */
}
</style>
</head>
<body>
<h1>CSS3 多列示例</h1>
<h2 class="span-all">跨越所有列的标题</h2> <!-- 这里移动了标题 -->
<div class="multi-column">
菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程(www.runoob.com)提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编程。
</div>
<script>
// CSS3 多列属性方法
function columnCountExample() {
console.log('column-count: 指定元素应该被分割的列数。');
}
function columnGapExample() {
console.log('column-gap: 指定列与列之间的间隙。');
}
function columnRuleExample() {
console.log('column-rule: 所有 column-rule-* 属性的简写。');
}
function columnRuleColorExample() {
console.log('column-rule-color: 指定两列间边框的颜色。');
}
function columnRuleStyleExample() {
console.log('column-rule-style: 指定两列间边框的样式。');
}
function columnRuleWidthExample() {
console.log('column-rule-width: 指定两列间边框的厚度。');
}
function columnSpanExample() {
console.log('column-span: 指定元素要跨越多少列。');
}
function columnWidthExample() {
console.log('column-width: 指定列的宽度。');
}
function columnsExample() {
console.log('columns: column-width 与 column-count 的简写属性。');
}
// 调用示例
columnCountExample();
columnGapExample();
columnRuleExample();
columnRuleColorExample();
columnRuleStyleExample();
columnRuleWidthExample();
columnSpanExample();
columnWidthExample();
columnsExample();
</script>
</body>
</html>
3.12 css3用户界面
00.属性
appearance 允许您使一个元素的外观像一个标准的用户界面元素
box-sizing 允许你以适应区域而用某种方式定义某些元素
icon 为创作者提供了将元素设置为图标等价物的能力
nav-down 指定在何处使用箭头向下导航键时进行导航
nav-index 指定一个元素的Tab的顺序
nav-left 指定在何处使用左侧的箭头导航键进行导航
nav-right 指定在何处使用右侧的箭头导航键进行导航
nav-up 指定在何处使用箭头向上导航键时进行导航
outline-offset 外轮廓修饰并绘制超出边框的边缘
resize 指定一个元素是否是由用户调整大小
01.属性选项
a.appearance
appearance 属性用于控制元素的外观，使其与操作系统的默认用户界面元素外观一致。
none：去除默认的用户界面外观样式，使元素显示为普通的 HTML 元素。
button：使元素看起来像一个按钮（适用于按钮类元素）。
textfield：使元素看起来像一个文本输入框（适用于输入框）。
searchfield：使元素看起来像一个搜索输入框（适用于搜索框）。
listbox：使元素看起来像一个下拉列表框（适用于下拉选择框）。
b.box-sizing
box-sizing 属性定义了元素的尺寸如何计算，包括边框和内边距。
content-box（默认值）：宽度和高度仅包括内容区域，边框和内边距不包括在内。
border-box：宽度和高度包括内容区域、内边距和边框。
c.icon
icon 属性用于将元素指定为图标。
url()：定义图标的 URL 地址。通常用于指定图标文件。
none：不显示图标（默认值）。
d.nav-*
nav-* 属性用于控制使用方向键导航时的元素顺序（实际支持可能有限）。
nav-up：指定当按下向上箭头键时应导航到的元素。
nav-down：指定当按下向下箭头键时应导航到的元素。
nav-left：指定当按下向左箭头键时应导航到的元素。
nav-right：指定当按下向右箭头键时应导航到的元素.
nav-index：指定元素的 tab 顺序。
e.outline-offset
outline-offset 属性设置轮廓线与元素边框之间的距离。
<length>：定义轮廓线与元素边框之间的距离。单位可以是 px、em 等。
initial：使用默认值。
inherit：继承父元素的 outline-offset 值。
f.resize
resize 属性允许用户调整元素的大小。
none：禁止用户调整大小（默认值）。
both：允许用户在两个方向上调整大小（水平和垂直）。
horizontal：仅允许用户水平调整大小。
vertical：仅允许用户垂直调整大小.
02.样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 User Interface Properties</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
/* Resize */
.resize-example {
width: 200px;
height: 200px;
border: 2px solid black;
resize: both;
overflow: auto;
margin: 20px auto;
}
/* Box-Sizing */
.box-sizing-example {
width: 200px;
height: 200px;
border: 5px solid black;
box-sizing: border-box;
background-color: lightblue;
float: left;
margin: 20px;
}
.box-sizing-example + .box-sizing-example {
background-color: lightcoral;
}
/* Outline Offset */
.outline-offset-example {
border: 2px solid black;
outline: 2px solid red;
outline-offset: 15px;
width: 200px;
height: 200px;
margin: 20px auto;
background-color: lightgreen;
}
/* Appearance */
.appearance-example {
appearance: none;
border: 2px solid black;
padding: 10px;
margin: 20px;
font-size: 16px;
background-color: lightyellow;
}
/* Navigation (Tab Order) */
.nav-example {
margin: 20px;
padding: 10px;
border: 2px solid black;
}
.nav-example input {
margin: 5px;
padding: 5px;
}
/* Using nav-* attributes for tab order (Note: Browser support may vary) */
.nav-example input:nth-of-type(1) {
nav-index: 1;
}
.nav-example input:nth-of-type(2) {
nav-index: 2;
}
.nav-example input:nth-of-type(3) {
nav-index: 3;
}
.nav-example input:nth-of-type(4) {
nav-index: 4;
}
/* Custom styles for visibility */
.nav-example input:focus {
border-color: blue;
outline: none;
}
</style>
</head>
<body>
<h1>CSS3 User Interface Properties Examples</h1>
<h2>Resize</h2>
<div class="resize-example">
Resize Me
</div>
<h2>Box-Sizing</h2>
<div class="box-sizing-example">
Box Sizing 1
</div>
<div class="box-sizing-example">
Box Sizing 2
</div>
<h2>Outline Offset</h2>
<div class="outline-offset-example">
Outline Offset
</div>
<h2>Appearance</h2>
<input type="text" class="appearance-example" placeholder="Custom appearance input">
<h2>Navigation (Tab Order)</h2>
<div class="nav-example">
<input type="text" placeholder="Input 1">
<input type="text" placeholder="Input 2">
<input type="text" placeholder="Input 3">
<input type="text" placeholder="Input 4">
</div>
</body>
</html>
3.13 css3图片1
00.属性
a.css图片属性
background 用于设置背景图像、颜色、位置等。 background: url(image.jpg) no-repeat center center;
background-color 设置背景颜色。 background-color: #fff;
background-image 设置背景图像。 background-image: url(image.jpg);
background-position 设置背景图像的位置。 background-position: center;
background-repeat 设置背景图像的重复方式。 background-repeat: no-repeat;
background-size 设置背景图像的尺寸。 background-size: cover;
border-image 允许你将图像用作边框。 border-image: url(border.png) 30 round;
border-image-source 设置用作边框的图像。 border-image-source: url(border.png);
border-image-slice 定义图像的哪些部分用作边框。 border-image-slice: 30%;
border-image-width 设置边框图像的宽度。 border-image-width: 10px;
border-image-outset 设置边框图像的外扩。 border-image-outset: 10px;
border-image-repeat 设置边框图像的重复方式。 border-image-repeat: repeat;
clip 控制元素的可视区域（已废弃，使用 clip-path 代替）。 clip: rect(0, 100px, 100px, 0);
mask 用于应用遮罩效果。 mask: url(mask.svg);
mask-image 设置用于遮罩的图像。 mask-image: url(mask.svg);
mask-size 设置遮罩图像的尺寸。 mask-size: cover;
mask-repeat 设置遮罩图像的重复方式。 mask-repeat: no-repeat;
mask-position 设置遮罩图像的位置。 mask-position: center;
mask-composite 控制遮罩图像的合成模式（已废弃，使用 mask-mode 代替） mask-composite: add;
mask-mode 设置遮罩图像的模式。 mask-mode: alpha;
mask-origin 设置遮罩图像的原点。 mask-origin: content-box;
mask-clip 设置遮罩图像的剪切区域。 mask-clip: border-box;
mask-border 设置边框遮罩效果。 mask-border: url(border-mask.svg);
mask-border-source 设置用于边框遮罩的图像。 mask-border-source: url(border-mask.svg);
mask-border-slice 设置边框遮罩的切片区域。 mask-border-slice: 30%;
mask-border-width 设置边框遮罩的宽度。 mask-border-width: 10px;
mask-border-outset 设置边框遮罩的外扩。 mask-border-outset: 10px;
mask-border-repeat 设置边框遮罩的重复方式。 mask-border-repeat: repeat;
b.css3图片属性
background-attachment 设置背景图像是否固定在视口中。 background-attachment: fixed;
background-clip 设置背景的绘制区域。 background-clip: border-box;
background-origin 设置背景图像的原点。 background-origin: padding-box;
background-size CSS3 扩展了背景图像的尺寸控制。 background-size: contain;
object-fit 控制替代元素的内容如何适配其盒子。 object-fit: cover;
object-position 控制替代元素内容的位置。 object-position: center;
clip-path 定义元素的可视区域。 clip-path: circle(50% at 50% 50%);
mask-type 指定遮罩图像的类型。 mask-type: luminance;
mask-mode 允许指定遮罩模式。 mask-mode: alpha;
mask-composite 定义多个遮罩的合成方式（CSS2废弃，CSS3mask-mode替代） mask-composite: add;
mask-image 允许使用图像作为遮罩。 mask-image: url(mask.svg);
01.属性选项
a.css图片属性
a.background
描述: 用于设置背景图像、颜色、位置等。
选项:
background: url(image.jpg) no-repeat center center;
background: #fff;
background: url(image.jpg) repeat-x;
background: #000 url(image.jpg) center top;
b.background-color
描述: 设置背景颜色。
选项:
background-color: #fff; (白色)
background-color: rgba(255, 0, 0, 0.5); (半透明红色)
background-color: hsl(120, 100%, 50%); (绿色)
c.background-image
描述: 设置背景图像。
选项:
background-image: url(image.jpg);
background-image: linear-gradient(to right, #ff7e5f, #feb47b);
d.background-position
描述: 设置背景图像的位置。
选项:
background-position: center;
background-position: top left;
background-position: 10px 20px;
e.background-repeat
描述: 设置背景图像的重复方式。
选项:
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
f.background-size
描述: 设置背景图像的尺寸。
选项:
background-size: cover;
background-size: contain;
background-size: 100px 200px;
g.border-image
描述: 允许你将图像用作边框。
选项:
border-image: url(border.png) 30 round;
border-image: url(border.png) 10 stretch;
h.border-image-source
描述: 设置用作边框的图像。
选项:
border-image-source: url(border.png);
border-image-source: none;
i.border-image-slice
描述: 定义图像的哪些部分用作边框。
选项:
border-image-slice: 30%;
border-image-slice: 10 20 30 40;
j.border-image-width
描述: 设置边框图像的宽度。
选项:
border-image-width: 10px;
border-image-width: 1em;
k.border-image-outset
描述: 设置边框图像的外扩。
选项:
border-image-outset: 10px;
border-image-outset: 2em;
l.border-image-repeat
描述: 设置边框图像的重复方式。
选项:
border-image-repeat: stretch;
border-image-repeat: repeat;
border-image-repeat: round;
m.clip(已废弃)
描述: 控制元素的可视区域。
选项:
clip: rect(0, 100px, 100px, 0);
n.mask
描述: 用于应用遮罩效果。
选项:
mask: url(mask.svg);
mask: none;
o.mask-image
描述: 设置用于遮罩的图像。
选项:
mask-image: url(mask.svg);
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
p.mask-size
描述: 设置遮罩图像的尺寸。
选项:
mask-size: cover;
mask-size: contain;
mask-size: 100px 200px;
q.mask-repeat
描述: 设置遮罩图像的重复方式。
选项:
mask-repeat: no-repeat;
mask-repeat: repeat;
r.mask-position
描述: 设置遮罩图像的位置。
选项:
mask-position: center;
mask-position: top right;
s.mask-composite (已废弃)
描述: 控制遮罩图像的合成模式。
选项:
mask-composite: add;
t.mask-mode
描述: 设置遮罩图像的模式。
选项:
mask-mode: alpha;
mask-mode: luminance;
u.mask-origin
描述: 设置遮罩图像的原点。
选项:
mask-origin: content-box;
mask-origin: padding-box;
y.mask-clip
描述: 设置遮罩图像的剪切区域。
选项:
mask-clip: border-box;
mask-clip: padding-box;
w.mask-border
描述: 设置边框遮罩效果。
选项:
mask-border: url(border-mask.svg);
mask-border: none;
z.mask-border-source
描述: 设置用于边框遮罩的图像。
选项:
mask-border-source: url(border-mask.svg);
mask-border-source: none;
a.mask-border-slice
描述: 设置边框遮罩的切片区域。
选项:
mask-border-slice: 30%;
mask-border-slice: 10 20 30 40;
b.mask-border-width
描述: 设置边框遮罩的宽度。
选项:
mask-border-width: 10px;
mask-border-width: 1em;
c.mask-border-outset
描述: 设置边框遮罩的外扩。
选项:
mask-border-outset: 10px;
mask-border-outset: 2em;
d.mask-border-repeat
描述: 设置边框遮罩的重复方式。
选项:
mask-border-repeat: repeat;
mask-border-repeat: round;
b.CSS3图片属性（新特性）
a.background-attachment
描述: 设置背景图像是否固定在视口中。
选项:
background-attachment: fixed;
background-attachment: scroll;
b.background-clip
描述: 设置背景的绘制区域。
选项:
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
c.background-origin
描述: 设置背景图像的原点。
选项:
background-origin: padding-box;
background-origin: border-box;
background-origin: content-box;
d.background-size
用于设置背景图像的尺寸和覆盖方式。其主要选项包括：
auto：让背景图像保持其原始尺寸。如果只指定一个尺寸，另一个维度将自动调整以保持图像的纵横比。
contain：缩放背景图像，使其完全包含在背景区域内，同时保持图像的纵横比。图像可能不会完全覆盖背景区域，可能会有空白区域。
cover：缩放背景图像，使其覆盖整个背景区域，同时保持图像的纵横比。图像可能会超出背景区域的边界。
<length>：使用具体的长度单位（如 px、em）来设置背景图像的宽度。高度可以使用 auto 保持纵横比。例如：background-size: 100px auto;。
<percentage>：使用百分比来设置背景图像的宽度。高度可以使用 auto 保持纵横比。例如：background-size: 50% auto;。
<length> <length>：分别设置背景图像的宽度和高度，允许您指定具体的宽度和高度。例如：background-size: 100px 50px;。
<percentage> <percentage>：使用百分比来分别设置背景图像的宽度和高度。例如：background-size: 50% 50%;。
e.object-fit
描述: 控制替代元素的内容如何适配其盒子。
选项:
object-fit: cover;
object-fit: contain;
object-fit: fill;
object-fit: none;
object-fit: scale-down;
f.object-position
描述: 控制替代元素内容的位置。
选项:
object-position: center;
object-position: top right;
object-position: 10px 20px;
g.clip-path
描述: 定义元素的可视区域。
选项:
clip-path: circle(50% at 50% 50%);
clip-path: ellipse(50% 30% at 50% 50%);
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
clip-path: inset(10px 20px 30px 40px);
h.mask-type
描述: 指定遮罩图像的类型。
选项:
mask-type: luminance;
mask-type: alpha;
i.mask-mode
描述: 允许指定遮罩模式。
选项:
mask-mode: alpha;
mask-mode: luminance;
j.mask-composite(已废弃)
描述: 定义多个遮罩的合成方式。
选项:
mask-composite: add;
mask-composite: subtract;
k.mask-image
描述: 允许使用图像作为遮罩。
选项:
mask-image: url(mask.svg);
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent);
02.样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 图片属性示例</title>
<style>
/* 基本背景属性 */
.background-example {
width: 300px;
height: 200px;
margin: 10px;
color: white;
font-weight: bold;
text-align: center;
line-height: 200px;
}
.background-example1 {
background: url('https://via.placeholder.com/300x200') no-repeat center center;
background-size: cover;
background-color: #ffcccb; /* 背景色 */
}
.background-example2 {
background-color: #ffcccb;
color: black;
}
.background-example3 {
background-image: url('https://via.placeholder.com/300x200');
background-position: bottom right;
background-repeat: no-repeat;
background-size: contain;
}
/* 边框图像属性 */
.border-image-example {
width: 200px;
height: 200px;
border: 10px solid transparent;
border-image-source: url('https://via.placeholder.com/200x200');
border-image-slice: 30%;
border-image-width: 10px;
border-image-repeat: round;
margin: 10px;
}
/* 遮罩属性 */
.mask-example {
width: 300px;
height: 200px;
background: url('https://via.placeholder.com/300x200') no-repeat center center;
background-size: cover;
-webkit-mask-image: url('https://via.placeholder.com/300x200/ff0000');
mask-image: url('https://via.placeholder.com/300x200/ff0000');
-webkit-mask-size: cover;
mask-size: cover;
margin: 10px;
}
/* CSS3 图片属性示例 */
.object-fit-example {
width: 300px;
height: 200px;
object-fit: cover;
object-position: center;
margin: 10px;
}
.clip-path-example {
width: 300px;
height: 200px;
background: url('https://via.placeholder.com/300x200') no-repeat center center;
background-size: cover;
clip-path: circle(50% at 50% 50%);
margin: 10px;
}
.filter-example {
width: 300px;
height: 200px;
background: url('https://via.placeholder.com/300x200') no-repeat center center;
background-size: cover;
filter: grayscale(50%) sepia(50%) brightness(80%);
margin: 10px;
}
.mix-blend-mode-example {
width: 300px;
height: 200px;
background: url('https://via.placeholder.com/300x200') no-repeat center center;
background-size: cover;
mix-blend-mode: multiply;
margin: 10px;
}
/* 使用图像作为按钮背景 */
.button {
display: inline-block;
padding: 10px 20px;
color: white;
background: url('https://via.placeholder.com/100x50') no-repeat center center;
background-size: cover;
border: none;
font-size: 16px;
cursor: pointer;
text-align: center;
line-height: normal;
}
.button:hover {
background-color: rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<h1>CSS 图片属性示例</h1>
<!-- 基本背景属性 -->
<h2>背景属性</h2>
<div class="background-example background-example1">背景示例 1</div>
<div class="background-example background-example2">背景颜色示例</div>
<div class="background-example background-example3">背景图像示例</div>
<!-- 边框图像属性 -->
<h2>边框图像属性</h2>
<div class="border-image-example">边框图像示例</div>
<!-- 遮罩属性 -->
<h2>遮罩属性</h2>
<div class="mask-example">遮罩示例</div>
<!-- CSS3 图片属性 -->
<h2>CSS3 图片属性</h2>
<div class="object-fit-example">
<img src="https://via.placeholder.com/300x200" alt="Object Fit Example" style="width: 100%; height: 100%; object-fit: cover;">
</div>
<div class="clip-path-example">Clip Path 示例</div>
<div class="filter-example">Filter 示例</div>
<div class="mix-blend-mode-example">Mix Blend Mode 示例</div>
<!-- 使用图像作为按钮背景 -->
<h2>按钮背景图像</h2>
<button class="button">按钮示例</button>
</body>
</html>
3.14 css3图片2
01.类型
圆角图片
椭圆形图片
缩略图
响应式图片
图片文本定位
卡片式图片
图片滤镜
响应式图片相册
02.样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 图片示例</title>
<style>
/* 全局样式 */
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
margin: 20px;
padding: 0;
}
/* 圆角图片 */
.rounded {
border-radius: 8px;
}
/* 椭圆形图片 */
.oval {
border-radius: 50%;
}
/* 缩略图 */
.thumbnail img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
}
.thumbnail a {
display: inline-block;
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
transition: 0.3s;
}
.thumbnail a:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
/* 响应式图片 */
.responsive img {
max-width: 100%;
height: auto;
}
/* 图片文本定位 */
.text-overlay {
position: relative;
width: 50%;
}
.text-overlay img {
width: 100%;
height: auto;
}
.text-overlay .text {
position: absolute;
color: white;
padding: 5px;
}
.text-top-left { top: 0; left: 0; }
.text-top-right { top: 0; right: 0; }
.text-bottom-left { bottom: 0; left: 0; }
.text-bottom-right { bottom: 0; right: 0; }
.text-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* 卡片式图片 */
.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.polaroid img {
width: 100%;
}
.polaroid .container {
text-align: center;
padding: 10px 20px;
}
/* 图片滤镜 */
.grayscale img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
/* 响应式图片相册 */
.gallery .responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px) {
.gallery .responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {
.gallery .responsive {
width: 100%;
}
}
/* 图片 Modal(模态) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.9);
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
.modal-content {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0.1)}
to {transform:scale(1)}
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<h2>CSS 图片示例</h2>
<h3>圆角图片</h3>
<img src="https://via.placeholder.com/200" alt="示例图片" class="rounded" width="200">
<h3>椭圆形图片</h3>
<img src="https://via.placeholder.com/200" alt="示例图片" class="oval" width="200">
<h3>缩略图</h3>
<div class="thumbnail">
<img src="https://via.placeholder.com/200" alt="示例图片" width="200">
</div>
<div class="thumbnail">
<a href="https://via.placeholder.com/200">
<img src="https://via.placeholder.com/200" alt="示例图片" width="200">
</a>
</div>
<h3>响应式图片</h3>
<div class="responsive">
<img src="https://via.placeholder.com/600x400" alt="示例图片">
</div>
<h3>图片文本定位</h3>
<div class="text-overlay">
<img src="https://via.placeholder.com/600x400" alt="示例图片">
<div class="text text-top-left">左上角</div>
</div>
<div class="text-overlay">
<img src="https://via.placeholder.com/600x400" alt="示例图片">
<div class="text text-top-right">右上角</div>
</div>
<div class="text-overlay">
<img src="https://via.placeholder.com/600x400" alt="示例图片">
<div class="text text-bottom-left">左下角</div>
</div>
<div class="text-overlay">
<img src="https://via.placeholder.com/600x400" alt="示例图片">
<div class="text text-bottom-right">右下角</div>
</div>
<div class="text-overlay">
<img src="https://via.placeholder.com/600x400" alt="示例图片">
<div class="text text-center">居中</div>
</div>
<h3>卡片式图片</h3>
<div class="polaroid">
<img src="https://via.placeholder.com/400x300" alt="示例图片">
<div class="container">
<p>示例图片</p>
</div>
</div>
<h3>图片滤镜</h3>
<div class="grayscale">
<img src="https://via.placeholder.com/200" alt="示例图片" width="200">
</div>
<h3>响应式图片相册</h3>
<div class="gallery">
<div class="responsive">
<img src="https://via.placeholder.com/300" alt="示例图片">
</div>
<div class="responsive">
<img src="https://via.placeholder.com/300" alt="示例图片">
</div>
<div class="responsive">
<img src="https://via.placeholder.com/300" alt="示例图片">
</div>
<div class="responsive">
<img src="https://via.placeholder.com/300" alt="示例图片">
</div>
</div>
<h3>图片 Modal(模态)</h3>
<img id="myImg" src="https://via.placeholder.com/300" alt="示例图片" width="300">
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script>
// 获取模态窗口
var modal = document.getElementById('myModal');
// 获取图片模态框，alt 属性作为图片弹出中文本描述
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function() {
modal.style.display = "block";
modalImg.src = this.src;
modalImg.alt = this.alt;
captionText.innerHTML = this.alt;
}
// 获取 <span> 元素，关闭模态窗口
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>