CSS3 全面概述

CSS3 是 CSS 的最新版本，为前端开发人员提供了丰富的工具，能够轻松实现现代网页设计需求。以下将详细介绍 CSS3 的选择器、盒子模型、属性、Flexbox 布局及动画等，并提供相应的代码示例。

选择器

CSS3 新增和扩展了许多选择器，使选择元素更加灵活和精确。以下是 CSS3 的选择器类型和示例代码：

简单选择器

元素选择器: 选择 HTML 元素
1
2
3
p {
color: blue;
}
类选择器: 选择拥有特定类名的元素
1
2
3
.example {
color: red;
}

ID 选择器: 选择拥有特定 ID 的元素

1
2
3

#header {
    background-color: grey;
}

属性选择器: 选择带有特定属性的元素
1
2
3
a[target="_blank"] {
color: green;
}

组合选择器

子选择器: 选择直接子元素
1
2
3
div > p {
color: purple;
}
后代选择器: 选择任何后代元素
1
2
3
div p {
color: yellow;
}
相邻兄弟选择器: 选择紧接在另一个元素之后的元素
1
2
3
h1 + p {
margin-top: 0;
}
通用兄弟选择器: 选择在另一个元素之后的所有兄弟元素
1
2
3
h1 ~ p {
color: orange;
}

伪类选择器

:hover: 选择鼠标悬停的元素

1
2
3

a:hover {
    text-decoration: underline;
}

:nth-child(n): 选择父元素的第 n 个子元素

1
2
3

tr:nth-child(odd) {
    background-color: #f2f2f2;
}

:not(selector): 选择不匹配指定选择器的元素

1
2
3

input:not([type="submit"]) {
    background-color: lightyellow;
}

伪元素选择器

::before: 在元素内容之前插入内容

p::before {
    content: "Note: ";
    font-weight: bold;
}

::after: 在元素内容之后插入内容

p::after {
    content: " (End of paragraph)";
    color: grey;
}

盒模型

CSS 盒模型描述了元素在页面中的布局，包括内容、内边距（padding）、边框（border）和外边距（margin）。

盒模型的组成

内容区域（content box）: 元素的实际内容部分
内边距（padding）: 内容与边框之间的空白区域
边框（border）: 围绕内容和内边距的线
外边距（margin）: 元素与外部元素之间的空白区域

盒模型的示例

div {
    width: 300px;
    height: 150px;
    padding: 20px;
    border: 5px solid blue;
    margin: 10px;
    box-sizing: border-box;
}

属性详解

content-box: 默认值。元素的宽度和高度仅包括内容区域，不包括内边距和边框。
border-box: 元素的宽度和高度包括内容区域、内边距和边框。

属性（CSS Properties）

CSS3 提供了大量属性来控制元素的外观和行为。以下是常见属性及其可能的值和含义。

颜色与背景

color: 设置文本颜色

p {
    color: #333; /* 十六进制颜色 */
    color: rgb(255, 0, 0); /* RGB颜色 */
    color: rgba(255, 0, 0, 0.5); /* 带透明度的颜色 */
}

background-color: 设置元素的背景颜色
1
2
3
div {
background-color: #f0f0f0;
}

background-image: 设置背景图像

1
2
3

body {
    background-image: url('background.webp');
}

background-repeat: 设置背景图像的重复方式
- repeat: 水平和垂直方向重复（默认）
- no-repeat: 不重复
- repeat-x: 仅在水平方向重复
- repeat-y: 仅在垂直方向重复
  1
  2
  3
  body {
  background-repeat: no-repeat;
  }
background-size: 设置背景图像的大小
- auto: 保持原始尺寸（默认）
- cover: 背景图像填满整个容器
- contain: 背景图像保持宽高比缩放到最大而不超出容器
  1
  2
  3
  body {
  background-size: cover;
  }
background-position: 设置背景图像的位置
- left top: 左上角
- center: 居中
- right bottom: 右下角
  1
  2
  3
  body {
  background-position: center;
  }

文字与字体

font-family: 设置字体族

1
2
3

p {
    font-family: Arial, sans-serif;
}

font-size: 设置字体大小

p {
    font-size: 16px; /* 固定大小 */
    font-size: 1em; /* 相对大小 */
    font-size: 100%; /* 相对于父元素的大小 */
}

font-weight: 设置字体的粗细
- normal: 正常
- bold: 粗体
- 100 到 900: 数值表示的粗细程度
  1
  2
  3
  4
  p {
  font-weight: bold;
  font-weight: 700;
  }
font-style: 设置字体样式
- normal: 正常
- italic: 斜体
- oblique: 斜体（不同于 italic，倾斜效果不同）
  1
  2
  3
  p {
  font-style: italic;
  }
line-height: 设置行高
1
2
3
p {
line-height: 1.5;
}
text-align: 设置文本对齐方式
- left: 左对齐
- right: 右对齐
- center: 居中
- justify: 两端对齐
  1
  2
  3
  p {
  text-align: justify;
  }
text-decoration: 设置文本的装饰线
- none: 无
- underline: 下划线
- overline: 上划线
- line-through: 删除线
  1
  2
  3
  a {
  text-decoration: underline;
  }
text-transform: 设置文本转换
- none: 无转换
- capitalize: 每个单词的首字母大写
- uppercase: 转为大写
- lowercase: 转为小写
  1
  2
  3
  p {
  text-transform: uppercase;
  }

盒子模型相关属性

display: 设置元素的显示方式
- block: 块级元素
- inline: 内联元素
- inline-block: 内联块级元素
- none: 不显示
  1
  2
  3
  div {
  display: inline-block;
  }
visibility: 控制元素的可见性
- visible: 可见（默认）
- hidden: 隐藏，但仍占据空间
- collapse: 对表格元素隐藏且不占据空间
  1
  2
  3
  div {
  visibility: hidden;
  }
overflow: 控制内容溢出时的行为
- visible: 溢出内容可见（默认）
- hidden: 溢出内容隐藏
- scroll: 溢出内容可滚动
- auto: 如果溢出内容则出现滚动条
  1
  2
  3
  div {
  overflow: auto;
  }
position: 设置元素的定位方式
- static: 默认定位，不设置偏移（默认）
- relative: 相对定位，元素相对于其正常位置进行偏移
- absolute: 绝对定位，元素相对于最近的已定位祖先元素进行偏移
- fixed: 固定定位，元素相对于浏览器窗口进行偏移
- sticky: 粘性定位，元素根据用户的滚动在相对和固定定位之间切换
  1
  2
  3
  4
  5
  div {
  position: absolute;
  top: 50px;
  left: 100px;
  }

z-index: 设置元素的堆叠顺序

div {
    position: absolute;
    z-index: 10;
}

过渡与动画

transition: 设置元素的过渡效果
1
2
3
div {
transition: all 0.5s ease;
}

animation: 设置动画

@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

div {
    animation-name: example;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

transform: 设置元素的 2D 或 3D 变换
- translate(x, y): 平移
- rotate(angle): 旋转
- scale(x, y): 缩放
- skew(x-angle, y-angle): 倾斜
  1
  2
  3
  div {
  transform: rotate(45deg);
  }

Flexbox 布局

C SS Flexbox（弹性盒模型）提供了一种更灵活的布局方式，适用于复杂的页面布局。以下是 Flexbox 的主要属性及其值：

容器属性

display: flex: 将容器设为 Flex 容器
1
2
3
.container {
display: flex;
}
flex-direction: 设置主轴方向
- row: 水平从左到右（默认）
- row-reverse: 水平从右到左
- column: 垂直从上到下
- column-reverse: 垂直从下到上
  1
  2
  3
  .container {
  flex-direction: column;
  }
flex-wrap: 控制是否换行
- nowrap: 不换行（默认）
- wrap: 换行，溢出的项目移到下一行
- wrap-reverse: 换行，下一行项目排列在上方
  1
  2
  3
  .container {
  flex-wrap: wrap;
  }
justify-content: 设置主轴上的对齐方式
- flex-start: 从主轴的起点对齐（默认）
- flex-end: 从主轴的终点对齐
- center: 居中对齐
- space-between: 两端对齐，中间均匀分布
- space-around: 项目均匀分布，项目之间的间距相等
- space-evenly: 项目之间和项目与容器边框之间的间距相等
  1
  2
  3
  .container {
  justify-content: space-between;
  }
align-items: 设置交叉轴上的对齐方式
- stretch: 拉伸项目以填满容器（默认）
- flex-start: 从交叉轴的起点对齐
- flex-end: 从交叉轴的终点对齐
- center: 居中对齐
- baseline: 基线对齐
  1
  2
  3
  .container {
  align-items: center;
  }
align-content: 设置多根轴线的对齐方式（当项目换行时）
- stretch: 拉伸项目以填满容器（默认）
- flex-start: 从交叉轴的起点对齐
- flex-end: 从交叉轴的终点对齐
- center: 居中对齐
- space-between: 两端对齐，中间均匀分布
- space-around: 项目均匀分布，项目之间的间距相等
  1
  2
  3
  .container {
  align-content: space-around;
  }

子项属性

order: 设置子项的排列顺序
1
2
3
.item {
order: 2;
}

flex-grow: 定义项目的放大比例

1
2
3

.item {
    flex-grow: 1; /* 项目将分配剩余空间 */
}

flex-shrink: 定义项目的缩小比例

1
2
3

.item {
    flex-shrink: 0; /* 项目不会缩小 */
}

flex-basis: 定义项目的初始大小

1
2
3

.item {
    flex-basis: 100px; /* 固定大小 */
}

align-self: 允许单个项目在交叉轴上有不同的对齐方式
1
2
3
.item {
align-self: flex-end;
}

动画与过渡

过渡效果

transition: 设置过渡效果的速率和持续时间
- transition-property: 设置要过渡的属性（如 width、height、background-color 等）
- transition-duration: 设置过渡效果的持续时间
- transition-timing-function: 设置过渡效果的速率曲线
  - ease: 慢开始，快中间，慢结束（默认）
  - linear: 匀速
  - ease-in: 慢开始
  - ease-out: 慢结束
  - ease-in-out: 慢开始和慢结束
- transition-delay: 设置过渡效果的延迟时间
  1
  2
  3
  4
  5
  6
  div {
  transition: width 2s ease-in-out;
  }
  div:hover {
  width: 300px;
  }

动画

@keyframes: 定义动画的关键帧

@keyframes example {
    0% { background-color: red; }
    100% { background-color: yellow; }
}

animation: 应用动画
- animation-name: 指定要使用的关键帧名称
- animation-duration: 设置动画的持续时间
- animation-timing-function: 设置动画的速率曲线
- animation-delay: 设置动画的延迟时间
- animation-iteration-count: 设置动画的播放次数（infinite 表示无限次）
- animation-direction: 设置动画的播放方向（normal、reverse、alternate）
- animation-fill-mode: 设置动画结束时元素的状态（forwards、backwards）
- animation-play-state: 控制动画的播放状态（paused、running）
  1
  2
  3
  4
  5
  6
  7
  div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  }
transform: 定义元素的变换（平移、旋转、缩放、倾斜）
- translate(x, y): 平移
- rotate(angle): 旋转
- scale(x, y): 缩放
- skew(x-angle, y-angle): 倾斜
  1
  2
  3
  div {
  transform: rotate(45deg);
  }
perspective: 设置 3D 透视视角
1
2
3
div {
perspective: 500px;
}
transform-style: 设置子元素是否在 3D 空间中呈现
1
2
3
div {
transform-style: preserve-3d;
}
backface-visibility: 控制元素的背面是否可见
1
2
3
div {
backface-visibility: hidden;
}