CSS简介#

CSS概念#

CSS(Cascading Style Sheets)层叠样式表，又叫级联样式表，简称样式表。

CSS文件后缀名为.css

CSS用于HTML文档中元素样式的定义

使用CSS的唯一目的是让网页具有美观一致的页面

语法#

CSS规则是由两个主要的部分构成：选择器，以及一条或多条声明。

选择器通常是需要改变样式的HTML元素

每条声明由一个属性和一个值组成

属性(property)是你希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开

1
<style>    <!--在html文件中直接用样式(在head标签里面写)-->
2
    h1 {    <!--h1是选择器-->
3
        color: blue;    <!--color是属性，blue是值，整体为声明-->
4
        font-size: 12px;
5
    }
6
</style>

CSS引入方式#

内联样式(行内样式)#

要使用内联样式，需要在相关标签内使用样式<style>属性。

Style属性可以包含任何CSS属性。

提示

缺乏整体性和规划性，不利于维护，维护成本高。

1
<p style="background: orange; font-size: 24px;">CSS</p>

内部样式#

当单个文档需要特殊的样式时，就应该使用内部样式表。

可以使用<style>标签在文档头部定义内部样式表

提示

单个页面内的CSS代码具有统一性和规划性，便于维护，但是在多个页面之间容易混乱。

1
<head>
2
    <style>
3
        h1 {
4
            background: red;
5
        }
6
    </style>
7
</head>

外部样式(推荐)#

当样式需要应用于很多页面时，外部样式表将是理想的选择。

在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。

每个页面使用<link>标签链到样式表。<link>标签在(文档的)头部<head>

1
<link rel="stylesheet" type="text/css" href="xxx.css">

选择器#

CSS语法规则由两个主要的部分构成：选择器，以及一条或多条声明(样式)

全局选择器#

可以与任意元素匹配，优先级最低，一般做样式初始化。

1
* {
2
    margin: 0;
3
    padding: 0;
4
}

元素选择器#

HTML文档中的元素，p、b、div、a、img、body等。

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”

1
p {
2
    font-size: 14px;
3
}

再比如说，我想让“学完前端，继续学习java”这句话中的“前端”两个字变为红色字体，那么可以用<span>标签把“前端”两个字围起来，然后给<span>标签加一个标签选择器。

1
span {
2
  color: red;
3
}
4
<p>学完了<span>前端</span>，继续学java</p>

温馨提示

所有的标签，都可以是选择器.比如ul、li、label、dt、dl、input、div等。
无论这个标签藏的多深，一定能够被选择上。
选择的所有，而不是一个。

类选择器#

规定用圆点.来定义，针对想要的所有标签使用

优点：灵活

1
.one {
2
  width: 800px;
3
}
4
<h2 class="one">你好</h2>

class属性的特点

类选择器可以被多种标签使用。
类名不能以数字开头。
同一个标签可以使用多个类选择器，用空格隔开。

1
<h3 class="classone  classtwo">一个h3标签</h3>

1
<h3 class="teshu" class="zhongyao">一个h3标签</h3>  <!--错误的-->

ID选择器#

针对某一个特定的标签来使用，只能使用一次。

CSS中的ID选择器以#来定义

1
#two {
2
  color: red;
3
}
4
<h2 id="mytitle">你好</h2>

特别强调

ID是唯一的(不能重复使用)
ID不能以数字开头

合并选择器#

语法：选择器1,选择器2,...{}

作用：提取共同的样式，减少重复代码

1
.header, .footer{
2
    height: 300px;
3
}

选择器的优先级#

CSS中，权重用数字衡量

元素选择器的权重为：1

类选择器(class)的权重为：10

id选择器的权重为：100

内联样式的权重为：1000

优先级从高到低：行内样式 > ID选择器 > 类选择器 > 元素选择器

字体属性#

CSS字体属性定义字体，颜色、大小、加粗、字体样式

color#

规定文本的颜色

1
div{color: red;}
2
div{color: #ff0000;}  /*推荐*/
3
div{color: rgb(255,0,0);}
4
div{color: rgba(255,0,0,5);}  /*a是透明度*/

font-size#

设置文本的大小

能否管理文字的大小，网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。

1
h1 {font-size: 40px;}
2
h2 {font-size: 30px;}
3
p {font-size: 14px;}

温馨提示

chrome浏览器接受最小字体是12px

font-weight#

设置文本的粗细

值	说明
bold	定义粗体字符
bolder	定义更粗的字符
lighter	定义更细的字符
100~900	定义由细到粗 400等同默认，而700等同于bold

1
h1 {font-weight: normal;}
2
div {font-weight: bold;}
3
p {font-weight: 900;}

font-style#

指定文本的字体样式

提示：每个值用逗号分开，如果字体名称包含空格，它必须加上引号

1
p {font-family:"Microsoft YaHei";}  /*微软雅黑*/

背景属性#

CSS背景属性主要由以下几个

属性	描述
background-color	设置背景颜色
background-image	设置背景图片
background-position	设置背景图片显示位置
background-repeat	设置背景图片如何填充
background-size	设置背景图片大小属性

background-color属性#

该属性设置背景颜色

1
<div class="box"></div>
2
.box {
3
  width: 300px;
4
  height: 300px;
5
  background-color: red;
6
}

background-image属性#

设置元素的背景图像

元素的背景是元素的总大小，包括填充和边界(不包括外边距)。默认情况下background-image属性放置在元素的左上角，如果图像不够大的话会在垂直和水平方向平铺图像，如果图像大小超过元素大小从图像的左上角显示元素大小的那部分。

1
<div class="box"></div>
2
.box {
3
    width: 600px;
4
    height: 600px;
5
    background-image: url("1.png")
6
}

background-repeat属性#

该属性设置如何平铺背景图像

值	说明
repeat	默认值
repeat-x	只向水平方向平铺
repeat-y	只向垂直方向平铺
no-repeat	不平铺

1
.box {
2
    width: 600px;
3
    height: 600px;
4
    background-color: #fcc;
5
    background-image: url("img/1.png")
6
    background-repeat: no-repeat;
7
}

background-size属性#

该属性设置背景图像的大小

值	说明
length	设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只是设置一个，则第二个auto
percentage	计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只是设置一个，则第二个值auto
cover	保持图片横纵比并将图片缩放成完全覆盖背景区域的最大大小
contain	保持图片横纵比并将图像缩放成适合背景定位区域的最大大小

1
.box {
2
    width: 600px;
3
    height: 600px;
4
    background-image: url("img/1.png")
5
    background-repeat: no-repeat;
6
    background-size: 100% 100%;
7
}

background-position属性#

该属性设置背景图像的起始位置，默认值是：0% 0%

值	说明
left top	左上角
left center	左中
left bottom	左下
right top	右上角
right center	右中
right bottom	右下
center top	中上
center center	中中
center bottom	中下
x% y%	第一个值是水平位置，第二个值是垂直位置，左上角是0% 0%，右下角是100% 100% 。如果只指定了一个值，其他值默认是50%，默认是0% 0%

文本属性#

text-align属性#

指定元素文本的水平对齐方式

值	描述
left	文本居左排列(默认)
right	文本居右排列
center	文本居中排列

1
h1{text-align:center;}

text-decoration属性#

规定添加到文本的修饰，下划线、上划线、删除线等

值	描述
underline	定义下划线
overline	定义上划线
line-through	定义删除线

1
h1{text-decoration: overline;}

text-transform属性#

控制文本的大小写

值	描述
capitalize	定义每个单词开头大写
uppercase	定义全部大写字母
lowercase	定义全部小写字母

1
p {text-transform: capitalize;}

text-indent属性#

规定文本块中首行文本的缩进

1
p {text-indent: 50px;}

提示：负值时允许的。如果值时负数，将第一行左缩进。

表格属性#

使用CSS可以使HTML表格更美观

表格边框#

指定CSS表格边框，使用border属性

1
table, td {
2
    border: 1px solid black;
3
}    /*边框大小、边框线样式(solid实线)、颜色*/

折叠边框#

border-collapse属性设置边框是否被折叠成一个单一的边框或隔开

1
table {border-collapse: collapse;}
2
table, td {border: 1px solid black;}

表格宽度和高度#

width和height属性定义表格的宽度和高度

1
table {width:100%;}
2
td {height: 50px;}

表格文字对齐#

表格中的文本对齐和垂直对齐属性

text-align属性设置水平对齐方式，向左、右、中心

1
td{text-align: right;}

垂直对齐属性设置垂直对齐

1
td{height:50px; vertical-align: bottom;}

表格填充#

如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性

1
td {padding:15px;}

表格颜色#

下面例子指定边框的颜色，和th元素的文本和背景颜色

1
table, td, th {border:1px solid green;}
2
td {background-color:green; color:white;}

关系选择器#

关系选择器分类#

后代选择器
子代选择器
相邻兄弟选择器
通用兄弟选择器

后代选择器#

定义#

选择所有被A元素包含的B元素，中间用空格隔开

语法#

1
A B{}

例子#

1
<ul>
2
    <li>宝马</li>
3
    <li>奔驰</li>
4
</ul>
5
<ol>
6
    <li>奥迪</li>
7
</ol>

1
ul li{
2
    color:green;
3
}

子代选择器#

定义#

选择所有作为A元素的直接子元素B，对更深一层的元素不起作用，用>表示

语法#

1
A>B{}

例子#

1
<div>
2
    <a href="#">子元素1</a>
3
    <p> <a href="#">孙元素</a> </p>
4
    <a href="#">子元素2</a>
5
</div>

1
div>a{
2
    color:red;
3
}

相邻兄弟选择器#

定义#

选择紧跟A元素后的C元素，用加号(+)表示，选择相邻的第一个兄弟元素(向下选择)

语法#

1
A+C{}

例子#

1
<h1>h1元素</h1>
2
<p>第一个元素</p>
3
<p>第二个元素</p>

1
h1+p {
2
    color:red;
3
}

通用兄弟选择器#

定义#

选择A元素之后的所有兄弟元素B，作用于多个元素，用~隔开

语法#

1
A~B {}

例子#

1
<h1>h1元素</h1>
2
<p>元素1</p>
3
<p>元素2</p>

1
h1~p {
2
    color:red;
3
}

CSS盒子模型#

概念#

所有的HTML元素可以看作盒子，在CSS中，“box model”这一术语使用来设计和布局时使用(<div>)

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：

Margin(外边距)-清除边框外的区域，外边距时透明的(两个值：第一个为上下，第二个为左右)
Border(边框)-围绕在内边距和内容外的边框(边框粗细、实线或虚线、线颜色)
Padding(内边距)-清除内容周围的区域，内边距是透明的(两个值：第一个为上下，第二个为左右)
Content(内容)-盒子的内容，显示文本和图像

例子：如果把盒子模型看作是一个生活中的快递，那么内容部分=你买的物品，内边距=快递盒子中的泡沫，边距=快递盒子，外边距=两个快递盒子之间的距离。

1
div{
2
    padding-left: 50px;/*左内边距*/
3
    padding-right: 100px;/*右内边距*/
4
    padding-top: 150px;/*上内边距*/
5
    padding-bottom: 20px;/*下内边距*/
6
    border: 2px solid red;/*边框粗细、实线、线颜色*/
7
    margin: 10px;/*外边距*/
8
}

弹性盒子模型(flex box)#

定义#

弹性盒子是CSS3的一种新的布局模式

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

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

CSS3弹性盒内容#

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成

弹性容器通过设置<display>属性的值为<flex>将其定义为弹性容器

弹性容器内包含了一个或多个弹性子元素

提示：弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局

1
<style>
2
    .flex-container {
3
        display: flex;/*定义盒子为弹性盒子*/
4
        width: 400px;
5
        height: 200px;
6
        background-color: lightgrey;
7
    }
8
    .box {
9
        width: 100px;
10
        height: 100px;
11
        margin: 10px;
12
        background-color: cornflowerblue;
13
    }
14
</style>
15
<div class="flex-container">
16
    <div class="flex-item">flex item 1</div>
17
    <div class="flex-item">flex item 2</div>
18
    <div class="flex-item">flex item 3</div>
19
</div>

提示：默认弹性盒里的内容是横向摆放

父元素上的属性#

display属性#

<display:flex;>开启弹性盒

display:flex;属性设置后子元素默认水平排列

flex-direction属性#

定义#

flex-direction属性指定了单行子元素在父容器中的位置

语法#

1
flex-direction: row | row-reverse | column | column-reverse

row：横向从左到右排列(左对齐)，(默认)
row-reverse：反转横向排列(右对齐，从后往前排，最后一项在最前面)
column：纵向排列
column-reverse：反转纵向排列，从后往前排，最后一项在最上面

1
.flex-container {
2
    display: flex;
3
    flex-direction: column;
4
    width: 400px;
5
    height: 250px;
6
    background-color: lightgrey;
7
}

justify-content 属性#

justify-content 属性定义弹性项目在主轴上的对齐方式。

1
.flex-container {
2
    display: flex;
3
    justify-content: flex-start;     /* 默认：左对齐 */
4
    justify-content: flex-end;       /* 右对齐 */
5
    justify-content: center;         /* 居中对齐 */
6
    justify-content: space-between;  /* 两端对齐 */
7
    justify-content: space-around;   /* 环绕对齐 */
8
    justify-content: space-evenly;   /* 均匀分布 */
9
}

📌 Flexbox 完整指南见本章末尾 Flexbox 完整指南部分。

伪类选择器#

伪类用于选择元素的特定状态或位置。

常见伪类#

动态伪类#

1
/* 未访问的链接 */
2
a:link {
3
    color: blue;
4
}
5

6
/* 已访问的链接 */
7
a:visited {
8
    color: purple;
9
}
10

11
/* 鼠标悬停 */
12
a:hover {
13
    color: red;
14
    text-decoration: underline;
15
}
16

17
/* 元素获得焦点 */
18
input:focus {
19
    border-color: blue;
20
    outline: none;
21
}
22

23
/* 元素被激活（点击时） */
24
a:active {
25
    color: orange;
26
}

结构伪类#

1
/* 第一个子元素 */
2
p:first-child {
3
    font-weight: bold;
4
}
5

6
/* 最后一个子元素 */
7
p:last-child {
8
    color: gray;
9
}
10

11
/* 第 n 个子元素 */
12
li:nth-child(2) {
13
    background: yellow;
14
}
15

16
/* 奇数行 */
17
tr:nth-child(odd) {
18
    background: #f2f2f2;
19
}
20

21
/* 偶数行 */
22
tr:nth-child(even) {
23
    background: #ffffff;
24
}
25

26
/* 唯一子元素 */
27
p:only-child {
28
    color: blue;
29
}
30

31
/* 第一个元素 */
32
p:first-of-type {
33
    font-size: 18px;
34
}
35

36
/* 最后一个元素 */
37
p:last-of-type {
38
    font-style: italic;
39
}

表单伪类#

1
/* 启用状态 */
2
input:enabled {
3
    background: white;
4
}
5

6
/* 禁用状态 */
7
input:disabled {
8
    background: gray;
9
    cursor: not-allowed;
10
}
11

12
/* 选中状态（复选框、单选框） */
13
input:checked {
14
    accent-color: blue;
15
}
16

17
/* 验证失败 */
18
input:invalid {
19
    border-color: red;
20
}
21

22
/* 验证成功 */
23
input:valid {
24
    border-color: green;
25
}
26

27
/* 必填字段 */
28
input:required {
29
    border-left: 3px solid red;
30
}
31

32
/* 可选字段 */
33
input:optional {
34
    border-left: 3px solid gray;
35
}
36

37
/* 只读字段 */
38
input:read-only {
39
    background: #f0f0f0;
40
}

否定伪类#

1
/* 不是 p 元素的元素 */
2
:not(p) {
3
    color: blue;
4
}
5

6
/* 不是第一个的 li */
7
li:not(:first-child) {
8
    margin-top: 10px;
9
}

伪元素选择器#

伪元素用于选择元素的特定部分并添加样式。

1
/* 元素内容之前 */
2
p::before {
3
    content: "📌 ";
4
    color: red;
5
}
6

7
/* 元素内容之后 */
8
p::after {
9
    content: " ✨";
10
    color: blue;
11
}
12

13
/* 选中元素的首字母 */
14
p::first-letter {
15
    font-size: 24px;
16
    font-weight: bold;
17
    color: red;
18
}
19

20
/* 选中元素的第一行 */
21
p::first-line {
22
    font-weight: bold;
23
    font-size: 16px;
24
}
25

26
/* 文本选中状态 */
27
::selection {
28
    background: yellow;
29
    color: red;
30
}
31

32
/* 输入框占位符 */
33
input::placeholder {
34
    color: gray;
35
    font-style: italic;
36
}

CSS 过渡（Transition）#

过渡允许 CSS 属性值在一定时间内平滑变化。

基本语法#

1
.box {
2
    width: 100px;
3
    height: 100px;
4
    background: red;
5

6
    /* 过渡效果 */
7
    transition: all 0.3s ease;
8
}
9

10
.box:hover {
11
    width: 200px;
12
    background: blue;
13
}

过渡属性详解#

1
.element {
2
    /* 过渡属性 */
3
    transition-property: width, height, background-color;
4

5
    /* 过渡持续时间 */
6
    transition-duration: 0.5s;
7

8
    /* 过渡时间函数 */
9
    transition-timing-function: ease-in-out;
10

11
    /* 过渡延迟 */
12
    transition-delay: 0.2s;
13

14
    /* 简写：property duration timing-function delay */
15
    transition: width 0.5s ease-in-out 0.2s;
16
}

时间函数#

值	描述
`linear`	匀速
`ease`	慢 - 快 - 慢（默认）
`ease-in`	慢速开始
`ease-out`	慢速结束
`ease-in-out`	慢速开始和结束
`cubic-bezier(n,n,n,n)`	自定义贝塞尔曲线

CSS 动画（Animation）#

动画允许元素逐渐从一种样式变为另一种样式。

关键帧动画#

1
/* 定义动画 */
2
@keyframes slideIn {
3
    from {
4
        transform: translateX(-100%);
5
        opacity: 0;
6
    }
7
    to {
8
        transform: translateX(0);
9
        opacity: 1;
10
    }
11
}
12

13
/* 使用动画 */
14
.box {
15
    width: 100px;
16
    height: 100px;
17
    background: blue;
18
    animation: slideIn 1s ease-in-out;
19
}

复杂动画#

1
@keyframes bounce {
2
    0%, 100% {
3
        transform: translateY(0);
4
    }
5
    50% {
6
        transform: translateY(-50px);
7
    }
8
}
9

10
.ball {
11
    animation: bounce 1s infinite;
12
}

动画属性#

1
.element {
2
    /* 动画名称 */
3
    animation-name: myAnimation;
4

5
    /* 动画持续时间 */
6
    animation-duration: 2s;
7

8
    /* 时间函数 */
9
    animation-timing-function: ease-in-out;
10

11
    /* 延迟时间 */
12
    animation-delay: 0.5s;
13

14
    /* 播放次数 */
15
    animation-iteration-count: infinite;
16

17
    /* 播放方向 */
18
    animation-direction: alternate;
19

20
    /* 填充模式 */
21
    animation-fill-mode: forwards;
22

23
    /* 运行状态 */
24
    animation-play-state: running;
25

26
    /* 简写 */
27
    animation: myAnimation 2s ease-in-out 0.5s infinite alternate forwards;
28
}

媒体查询（Media Queries）#

媒体查询使网页能够针对不同设备和屏幕尺寸应用不同的样式。

基本语法#

1
/* 针对小屏幕（手机） */
2
@media screen and (max-width: 768px) {
3
    .container {
4
        width: 100%;
5
        padding: 10px;
6
    }
7
}
8

9
/* 针对中等屏幕（平板） */
10
@media screen and (min-width: 769px) and (max-width: 1024px) {
11
    .container {
12
        width: 750px;
13
        margin: 0 auto;
14
    }
15
}
16

17
/* 针对大屏幕（桌面） */
18
@media screen and (min-width: 1025px) {
19
    .container {
20
        width: 960px;
21
        margin: 0 auto;
22
    }
23
}

常见断点#

1
/* 超小屏幕（手机，< 576px） */
2
@media (max-width: 575.98px) { }
3

4
/* 小屏幕（手机，≥ 576px） */
5
@media (min-width: 576px) and (max-width: 767.98px) { }
6

7
/* 中等屏幕（平板，≥ 768px） */
8
@media (min-width: 768px) and (max-width: 991.98px) { }
9

10
/* 大屏幕（桌面，≥ 992px） */
11
@media (min-width: 992px) and (max-width: 1199.98px) { }
12

13
/* 超大屏幕（大桌面，≥ 1200px） */
14
@media (min-width: 1200px) { }

响应式设计示例#

1
/* 移动端优先 */
2
.container {
3
    width: 100%;
4
    padding: 15px;
5
}
6

7
.nav {
8
    display: block;
9
}
10

11
/* 平板 */
12
@media (min-width: 768px) {
13
    .container {
14
        width: 750px;
15
        margin: 0 auto;
16
    }
17

18
    .nav {
19
        display: flex;
20
        justify-content: space-between;
21
    }
22
}
23

24
/* 桌面 */
25
@media (min-width: 992px) {
26
    .container {
27
        width: 960px;
28
    }
29
}
30

31
/* 大桌面 */
32
@media (min-width: 1200px) {
33
    .container {
34
        width: 1140px;
35
    }
36
}

Position 定位#

定位类型#

1
/* 静态定位（默认） */
2
.static {
3
    position: static;
4
}
5

6
/* 相对定位（相对于自身原位置） */
7
.relative {
8
    position: relative;
9
    top: 10px;
10
    left: 20px;
11
}
12

13
/* 绝对定位（相对于最近的定位祖先元素） */
14
.absolute {
15
    position: absolute;
16
    top: 0;
17
    right: 0;
18
}
19

20
.parent {
21
    position: relative; /* 作为绝对定位的参考 */
22
}
23

24
/* 固定定位（相对于浏览器窗口） */
25
.fixed {
26
    position: fixed;
27
    bottom: 0;
28
    right: 0;
29
}
30

31
/* 粘性定位（滚动时固定） */
32
.sticky {
33
    position: sticky;
34
    top: 0;
35
}

Display 属性#

1
/* 块级元素 */
2
.block {
3
    display: block;
4
}
5

6
/* 行内元素 */
7
.inline {
8
    display: inline;
9
}
10

11
/* 行内块元素 */
12
.inline-block {
13
    display: inline-block;
14
}
15

16
/* Flex 布局 */
17
.flex {
18
    display: flex;
19
}
20

21
/* Grid 布局 */
22
.grid {
23
    display: grid;
24
}
25

26
/* 隐藏元素 */
27
.none {
28
    display: none;
29
}

Box-sizing 属性#

1
/* 标准盒模型（width = content） */
2
.content-box {
3
    box-sizing: content-box;
4
}
5

6
/* IE 盒模型（width = content + padding + border） */
7
.border-box {
8
    box-sizing: border-box;
9
}
10

11
/* 推荐全局设置 */
12
* {
13
    box-sizing: border-box;
14
    margin: 0;
15
    padding: 0;
16
}

CSS Grid 布局基础#

1
.container {
2
    display: grid;
3
    grid-template-columns: repeat(3, 1fr); /* 3 列 */
4
    grid-template-rows: 100px 200px; /* 2 行 */
5
    gap: 20px; /* 间距 */
6
}
7

8
.item {
9
    background: lightblue;
10
}
11

12
/* 网格项跨列跨行 */
13
.item-1 {
14
    grid-column: 1 / 3; /* 跨 2 列 */
15
    grid-row: 1 / 2; /* 跨 1 行 */
16
}

CSS 变量（自定义属性）#

1
:root {
2
    --primary-color: #3498db;
3
    --secondary-color: #2ecc71;
4
    --font-size-base: 16px;
5
    --spacing-unit: 8px;
6
}
7

8
.button {
9
    background-color: var(--primary-color);
10
    font-size: var(--font-size-base);
11
    padding: calc(var(--spacing-unit) * 2);
12
}
13

14
/* 带默认值 */
15
.card {
16
    background: var(--card-bg, #ffffff);
17
}

Flexbox 完整指南#

justify-content 属性（已完成文档中断部分）#

justify-content 属性定义弹性项目在主轴上的对齐方式。

1
.flex-container {
2
    display: flex;
3
    justify-content: flex-start;     /* 默认：左对齐 */
4
    justify-content: flex-end;       /* 右对齐 */
5
    justify-content: center;         /* 居中对齐 */
6
    justify-content: space-between;  /* 两端对齐，项目间隔相等 */
7
    justify-content: space-around;   /* 每个项目两侧间隔相等 */
8
    justify-content: space-evenly;   /* 所有间隔都相等 */
9
}

align-items 属性#

align-items 属性定义弹性项目在交叉轴上的对齐方式。

1
.flex-container {
2
    display: flex;
3
    align-items: stretch;    /* 默认：拉伸填满容器 */
4
    align-items: flex-start; /* 交叉轴起点对齐 */
5
    align-items: flex-end;   /* 交叉轴终点对齐 */
6
    align-items: center;     /* 交叉轴居中对齐 */
7
    align-items: baseline;   /* 基线对齐 */
8
}

align-content 属性#

align-content 属性定义多行弹性项目在交叉轴上的对齐方式（仅在多行时有效）。

1
.flex-container {
2
    display: flex;
3
    flex-wrap: wrap;
4
    align-content: flex-start;    /* 起点对齐 */
5
    align-content: flex-end;      /* 终点对齐 */
6
    align-content: center;        /* 居中对齐 */
7
    align-content: space-between; /* 两端对齐 */
8
    align-content: space-around;  /* 环绕对齐 */
9
    align-content: stretch;       /* 默认：拉伸 */
10
}

flex-wrap 属性#

flex-wrap 属性定义弹性项目是否换行。

1
.flex-container {
2
    display: flex;
3
    flex-wrap: nowrap;      /* 默认：不换行 */
4
    flex-wrap: wrap;        /* 换行，第一行在上方 */
5
    flex-wrap: wrap-reverse;/* 换行，第一行在下方 */
6
}

flex-flow 属性#

flex-flow 属性是 flex-direction 和 flex-wrap 的简写。

1
.flex-container {
2
    flex-flow: row nowrap;      /* 默认 */
3
    flex-flow: row wrap;
4
    flex-flow: column nowrap;
5
    flex-flow: column wrap;
6
}

子元素（项目）属性#

order 属性#

order 属性定义项目的排列顺序，数值越小越靠前。

1
.item {
2
    order: 0;  /* 默认值 */
3
}
4

5
.item-first {
6
    order: -1; /* 排在最前面 */
7
}
8

9
.item-last {
10
    order: 1;  /* 排在最后面 */
11
}

flex-grow 属性#

flex-grow 属性定义项目的放大比例。

1
.item {
2
    flex-grow: 0;  /* 默认：不放大 */
3
}
4

5
.item-grow {
6
    flex-grow: 1;  /* 放大，占据剩余空间 */
7
}
8

9
.item-grow-more {
10
    flex-grow: 2;  /* 放大比例更大 */
11
}

flex-shrink 属性#

flex-shrink 属性定义项目的缩小比例。

1
.item {
2
    flex-shrink: 1;  /* 默认：缩小 */
3
}
4

5
.item-no-shrink {
6
    flex-shrink: 0;  /* 不缩小 */
7
}

flex-basis 属性#

flex-basis 属性定义项目分配多余空间之前的默认大小。

1
.item {
2
    flex-basis: auto;   /* 默认：根据内容大小 */
3
    flex-basis: 200px;  /* 固定大小 */
4
    flex-basis: 30%;    /* 百分比 */
5
}

flex 属性#

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

1
.item {
2
    flex: 0 1 auto;  /* 默认 */
3
    flex: 1;         /* flex: 1 1 0% */
4
    flex: 2;         /* flex: 2 2 0% */
5
    flex: none;      /* flex: 0 0 auto */
6
    flex: auto;      /* flex: 1 1 auto */
7
}

align-self 属性#

align-self 属性允许单个项目有自己的对齐方式（覆盖 align-items）。

1
.item {
2
    align-self: auto;         /* 默认：继承 align-items */
3
    align-self: flex-start;   /* 起点对齐 */
4
    align-self: flex-end;     /* 终点对齐 */
5
    align-self: center;       /* 居中对齐 */
6
    align-self: baseline;     /* 基线对齐 */
7
    align-self: stretch;      /* 拉伸 */
8
}

Flexbox 实用示例#

水平垂直居中#

1
.center-container {
2
    display: flex;
3
    justify-content: center;
4
    align-items: center;
5
    height: 100vh;
6
}

圣杯布局（三列布局）#

1
.holy-grail {
2
    display: flex;
3
    flex-direction: column;
4
    min-height: 100vh;
5
}
6

7
.header, .footer {
8
    flex: 0 0 auto;
9
}
10

11
.body {
12
    display: flex;
13
    flex: 1;
14
}
15

16
.sidebar {
17
    flex: 0 0 200px;
18
}
19

20
.main {
21
    flex: 1;
22
}

导航栏布局#

1
.navbar {
2
    display: flex;
3
    justify-content: space-between;
4
    align-items: center;
5
    padding: 0 20px;
6
}
7

8
.nav-left {
9
    display: flex;
10
    gap: 20px;
11
}
12

13
.nav-right {
14
    display: flex;
15
    gap: 10px;
16
}

等间距卡片布局#

1
.card-container {
2
    display: flex;
3
    flex-wrap: wrap;
4
    gap: 20px;
5
    justify-content: space-between;
6
}
7

8
.card {
9
    flex: 1 1 calc(33.333% - 20px);
10
    min-width: 250px;
11
}

响应式侧边栏#

1
.layout {
2
    display: flex;
3
}
4

5
.sidebar {
6
    flex: 0 0 250px;
7
}
8

9
.main {
10
    flex: 1;
11
}
12

13
/* 移动端 */
14
@media (max-width: 768px) {
15
    .layout {
16
        flex-direction: column;
17
    }
18

19
    .sidebar {
20
        flex: 0 0 auto;
21
    }
22
}

音乐

音乐

CSS知识点

CSS简介#

CSS概念#

语法#

CSS引入方式#

内联样式(行内样式)#

内部样式#

外部样式(推荐)#

选择器#

全局选择器#

元素选择器#

类选择器#

ID选择器#

合并选择器#

选择器的优先级#

字体属性#

color#

font-size#

font-weight#

font-style#

背景属性#

background-color属性#

background-image属性#

background-repeat属性#

background-size属性#

background-position属性#

文本属性#

text-align属性#

text-decoration属性#

text-transform属性#

text-indent属性#

表格属性#

表格边框#

折叠边框#

表格宽度和高度#

表格文字对齐#

表格填充#

表格颜色#

关系选择器#

关系选择器分类#

后代选择器#

定义#

语法#

例子#

子代选择器#

定义#

语法#

例子#

相邻兄弟选择器#

定义#

语法#

例子#

通用兄弟选择器#

定义#

语法#

例子#

CSS盒子模型#

概念#

弹性盒子模型(flex box)#

定义#

CSS3弹性盒内容#

父元素上的属性#

display属性#

flex-direction属性#

定义#

语法#

justify-content 属性#

伪类选择器#

常见伪类#

动态伪类#

结构伪类#

表单伪类#

否定伪类#

伪元素选择器#

CSS 过渡（Transition）#

基本语法#

过渡属性详解#

时间函数#