CSS

CSS1

简介

使用场景：美化网页，布局页面
CSS是一种标记语言
CSS可以美化HTML，让HTML更漂亮，让页面布局更简单
CSS最大价值：由HTML专注去做结构呈现，样式交给CSS，即结构与样式相分离

语法规范

CSS规则由两个主要的部分构成：选择器以及一条或多条声明
基本语法格式如下：
选择器 { 属性：值； 属性：值;}
注意：
1、选择器是用与指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
2、属性和属性值以“键值对”的形式出现
3、属性是对指定的对象设置的样式属性，例如字体大小，文本颜色等
4、属性和属性值之间用英文 “:” 分开

CSS代码风格

样式格式

1、紧凑格式
h3{color:deeppink;font-size:20px;}
2、展开格式
h3{
color:pink;
font-size:20px;
}
推荐使用第二种格式，更直观

样式大小写

1、小写
h3{
color:pink;
}
2、大写
H3{
COLOR:PINK;
}
强烈推荐样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外

空格规范

h3 {
color: pink;
}
1、属性值前面，冒号后面，保留一个空格
2、选择器（标签）和大括号之间保留空格

CSS基础选择器

CSS选择器的作用
选择器（选择符）就是根据不同需求把不同的标签选出来。简单来说，就是选择标签用的

选择器的分类
选择器可以分为基础选择器和复合选择器两大类

基础选择器

基础选择器是由单个选择器组成的
基础选择器又包括：标签选择器、类选择器、id选择器、通配选择器

标签选择器

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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>
        p {
            color: skyblue;
        }
        div {
            color: pink;
        }
    </style>
</head>
<body>
    <p>有点意思</p>
    <p>男生</p>
    <p>男生</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
</body>
</html>

![[Pasted image 20240418211124.png]]

作用
标签选择器可以把某一类标签全部选择出来，比如所有的<div>标签
优点
能快速为页面中同类型的标签统一设置样式
缺点
不能设计差异化样式，只能选择全部的当前标签

类选择器

如果想要差异化选择不同的标签，单独选一个或几个标签，可以使用类选择器
语法基本格式如下：
.类名 {
属性1: 属性值1;
...
}
结构需要用class属性来调用class类的意思

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!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>
        .red {
            color: red;
        }
    </style>
</head>
<body>
    <p class="red">有点意思</p>
    <p>男生</p>
    <p>男生</p>
    <div>女生</div>
    <div>女生</div>
    <div class="red">女生</div>
</body>
</html>

![[Pasted image 20240418212404.png]]

注意：
1、类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义）
2、不要使用纯数字、中文等命名
3、命名要有意义，尽量让别人一眼就知道这个类名的目的
4、命名规范：
![[Pasted image 20240418213307.png]]

![[Pasted image 20240418213332.png]]
![[Pasted image 20240418213405.png]]

类选择器口诀： 样式点定义，结构类（class）调用，一个或多个，开发最常用

类选择器——多类名

给一个标签指定多个类名，从而达到更多的选择目的。
1、多类名使用方式
语法基本格式：
<div class="red font20">亚瑟</div>
在标签class属性中写多个类名
在多个类名中间必须用*空格分开

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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>
        .red {
            color: red;
        }
        .font {
            font-size: 35px;
        }
        .backcolor {
            background-color: pink ;
        }
    </style>
</head>
<body>
    <p class="red font backcolor">有点意思</p>
</body>
</html>

![[Pasted image 20240419195421.png]]

2、多类名开发中的使用场景
可以把一些标签元素相同的样式（共同的部分）放到一个类里面
这些标签都可以调用这个公共的类，然后再调用自己独有的类
从而节省CSS代码，统一修改也非常方便

id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式
注意： HTML元素以id属性来设置id选择器，CSS中id属性以 “#” 来定义
语法基本格式：
#id名 {
属性1：属性值1；
...
}
例如，将id为nav元素中的内容设置为红色
#nav {
color: red;
}
口诀：样式#定义，结构id调用，只能调用1次，别人切勿使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!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>
        #pink {
            color: pink;
        }
    </style>
</head>
<body>
    <div id="pink">小羊计算器</div>
</body>
</html>

![[Pasted image 20240419200737.png]]

通配符选择器

CSS中，通配符选择器使用 “#” 定义，它表示选取页面中的所有元素（标签）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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>
        * {
            color: pink;
        }
    </style>
</head>
<body>
    <div id="pink">小羊计算器</div>
    <span>欢迎使用小羊计算器</span>
    <ul>
        <li>开始使用</li>
    </ul>
</body>
</html>

![[Pasted image 20240419201910.png]]

注意：
1、通配符选择器不需要调用，自动就给所有的元素使用样式
2、特殊情况才使用，如清楚所有的元素标签内外边距
* {
margin: 0;
padding: 0;
}

基础选择器总结

![[Pasted image 20240419202504.png]]

复合选择器

  • 复合选择器可以更准确、更高效的选择目标元素（标签）
  • 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成
  • 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等

后代选择器（重要）

后代选择器又称包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代
语法基本格式：
元素1 元素2 {样式声明}
上述语法表示选择元素1里面的所有元素2（后代元素）
例如：
ul li {样式声明} /* 选择元素1里面的所有元素2 */

  • 元素1和元素2中间用**空格隔开
  • 元素1是父级，元素2是子级，最终选择的是元素2
  • 元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可
  • 元素1和元素2可以是任意基础选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!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>
            ol li {
                color: pink;
            }
            ol li a {
                color: red;
            }
            .nav li a {
                color: red;
            }
        </style>
	</head>
	<body>
		<ol>
            <li>我是ol的孩子</li>
            <li>我也是</li>
            <li><a href="#">我是孙子</a></li>
        </ol>
        <ul class="nav">
            <li>我是ul的孩子</li>
            <li>我是ul的孩子</li>
            <li>我是ul的孩子</li>
            <li><a href="#">我是ul的孩子</a></li>
        </ul>
	</body>
</html>

![[Pasted image 20240423165951.png]]

子选择器（重要）

子选择器只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素
语法基本格式：
元素1>元素2 {样式声明}
上述语法表示选择元素1里面的所有直接后代（子元素）元素2
例如：
div > p {样式声明} /* 选择div里面所有最近一级p标签元素 */

  • 元素1和元素2中间用大于号隔开
  • 元素1是父级，元素2是子级。最终选择的是元素2
  • 元素2必须是亲儿子，其孙子之类都不归他管
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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>
            .nav > a {
                color: pink;
            }
        </style>
	</head>
	<body>
		<div class="nav">
            <a href="#">我是儿子</a>
            <p>
                <a href="#">我是孙子</a>
            </p>
        </div>
	</body>
</html>

![[Pasted image 20240423170941.png]]

并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式。 通常用于集体声明
并集选择器是各选择器通过英文逗号(,)连接而成，任何形式的选择器都可以作为并集选择器的一部分
语法基本格式：
元素1，元素2 {样式声明}
上述语法表示选择元素1和元素2
例如：
ul, div {样式声明} /* 选择ul和div标签 */`

  • 元素1和元素2中间用逗号隔开
  • 逗号可以理解为和的意思
  • 并集选择器通常用于集体声明
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!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>
			/* 把熊大熊二改为粉色 */
			/* div,
			p {
				color: pink;
			} */
			/* 把熊大熊二还有小猪一家改为粉色 */
			div,
			p,
			.pig li {
				color: pink;
			}
		</style>
	</head>
	<body>
		<div>熊大</div>
		<p>熊二</p>
		<span>光头强</span>
		<ul class="pig">
			<li>小猪佩奇</li>
			<li>猪爸爸</li>
			<li>猪妈妈</li>
		</ul>
	</body>
</html>

![[Pasted image 20240423172936.png]]

伪类选择器

伪类选择器用[[1.图像与计算机视觉类]]于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素
伪类选择器书写最大的特点是用冒号(:)表示，比如 :hover、:first-child
伪类选择器很多，如链接伪类、结构伪类等

链接伪类访问器

a: link /* 选择所有未被访问的链接 */
a: visited /* 选择所有已被访问的链接 ，即已经被访问过的链接的样式*/
a: hover /* 选择鼠标指针位于其上的链接，即鼠标放在链接上样式的改变 */
a: active /* 选择活动链接（鼠标按下未弹起的链接），即按下鼠标时样式的改变 */

链接伪类选择器注意事项
1、为了确保生效，请按照LVHA的循顺序声明：:link - :visited - :hover - :active
2、因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式

链接伪类选择器实际工作开发中的写法
/* a是标签选择器 所有的链接 */
a {
color: gray:
}
/* :hover是链接伪类选择器 鼠标经过 */
a:hover {
color: red; /* 鼠标经过的时候，由原来的灰色变成了红色 */
}

:focus 伪类选择器

:focus 伪类选择器用于选取获得焦点（光标）的表单元素，一般情况<input>类表单元素才能获得
语法基本格式：
input:focus {
background-color: yellow;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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>
			input:focus {
                background: pink;
                color: red;
            }
		</style>
	</head>
	<body>
		<input type="text">
        <input type="text">
        <input type="text">
	</body>
</html>

![[Pasted image 20240423200908.png]]

结构伪类
:nth-child()

:nth-child(x)
是父元素的第x个子元素
语法基本格式：
元素1 元素2:nth-child(x)
上述语法表示选取元素1里面的第x个元素2
元素1是元素2的父亲

:nth-child(2n)
是父元素的第偶数个子元素
语法基本格式：
元素1 元素2:nth-child(2n)
上述语法表示选取元素1里面的第偶数个元素2
注意：

  • n代表任意正整数和0
  • 是父元素中的第偶数个子元素（第2、4、6、8……个）
  • 跟 :nth-child(even)同义

:nth-child(2n+1)
是父元素的第奇数个子元素
语法基本格式：
元素1 元素2:nth-child(2n+1)
注意：

  • n代表任意正整数和0
  • 是父元素中的第奇数个子元素（第1、3、5、7……个）
  • 跟 :nth-child(odd)同义

:nth-child(-n+x)
是父元素的前x个子元素
语法基本格式：
元素1 元素2:nth-child(-n+x)
表示前x个子元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!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>
			ul li:nth-child(2n) {
				color: red;
			}
			ul li:nth-child(2n+1){
				color: pink;
			}
			div div:nth-child(6){
				color: skyblue;
			}
			div div:nth-child(-n+3){
				color: green;
			}
		</style>
	</head>
	<body>
		<ul>
			<li>列表元素1</li>
			<li>列表元素2</li>
			<li>列表元素3</li>
			<li>列表元素4</li>
			<li>列表元素5</li>
			<li>列表元素6</li>
		</ul>
		<div>
			<div>列表元素1</div>
			<div>列表元素2</div>
			<div>列表元素3</div>
			<div>列表元素4</div>
			<div>列表元素5</div>
			<div>列表元素6</div>
			<div>列表元素7</div>
			<div>列表元素8</div>
			<div>列表元素9</div>
			<div>列表元素10</div>
		</div>
	</body>
</html>

![[Pasted image 20240424164515.png]]

:nth-last-child()

:nth-last-child()的语法跟 :nth-child()类似，不同点是 :nth-last-child()从最后一个子元素开始往前计数
:nth-last-child(1) 代表倒数第一个子元素
:nth-last-child(-n+2) 代表最后2个子元素

:nth-of-type()

用法跟 :nth-of-type()类似

  • 不同点是：:nth-of-type() 计数时只计算同种类型的元素
    ![[Pasted image 20240425182154.png]]

:nth-last-of-type() 用法跟 :nth-of-type() 类似，只是 :nth-last-of-type() 是从最后一个这种类型的子元素开始往前计数

其他结构伪类
  • :first-child，等同于 :nth-child(1)
  • :last-child，等同于 :nth-last-child(1)
  • :first-of-type，等同于 :nth-of-type(1)
  • :last-of-type，等同于 :nth-last-of-type(1)
  • :only-child，是父元素中唯一的子元素
  • :only-of-type，是父元素中唯一的这种类型的子元素
  • :root，根元素，就是html元素
  • :empty，代表里面完全空白的元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!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>
			/* 找寻父级下的子级的第三个，再看第三个是不是div */
			div > div:nth-child(3) {
				color: red;
			}
			/* 找寻父级下的div子级的第三个 */
			div > div:nth-of-type(3) {
				color: red;
			}
			:root {
				font-size: 30px;
			}
			:empty {
				background-color: pink;
				width: 200px;
				height: 300px;
			}
		</style>
	</head>
	<body>
		<div>
			<div>列表元素1</div>
			<div>列表元素2</div>
			<div>列表元素3</div>
			<div>列表元素4</div>
			<div>列表元素5</div>
			<div>列表元素6</div>
			<div>列表元素7</div>
			<div>列表元素8</div>
			<div>列表元素9</div>
			<div>列表元素10</div>
		</div>
		<div></div>
	</body>
</html>

![[Pasted image 20240425184246.png]]

否定伪类

:not() 的格式是 :not(x)

  • x是一个简单选择器
  • 元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类（除否定伪类）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!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>
			/* 除item外的其他元素 */
			div :not(.item) {
				color: skyblue;
			}
		</style>
	</head>
	<body>
		<div>
			<div class="item">元素列表1</div>
			<div class="item">元素列表2</div>
			<div class="item">元素列表3</div>
			<div class="yjy">元素列表1</div>
			<div class="yjy">元素列表2</div>
			<div class="yjy">元素列表3</div>
			<div class="qxy">元素列表1</div>
			<div class="qxy">元素列表2</div>
			<div class="qxy">元素列表3</div>
		</div>
		<div></div>
	</body>
</html>

![[Pasted image 20240425185747.png]]

复合选择器总结

![[Pasted image 20240423201023.png]]

CSS字体属性

CSS Fonts（字体）属性用于定义字体系列、大小、粗细、文字样式

字体系列

CSS使用font-family属性定义文本的字体系列
语法基本格式：
p {
font-family: "微软雅黑";
}
div {
font-family: Arial, "Microsoft Yahei", "微软雅黑";
}
注意：
1、各种字体之间必须使用英文状态下的逗号搁开(前一个字体不能显示，自动看下一个字体)
2、一般情况下，如果有空格隔开的多个单词组成的字体，加引号
3、尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
4、最常见的几个字体：body{font-family: ‘Microsoft Yahei’, tahoma, arial, ‘Hiragino Sans GB’; }

字体大小

CSS使用font-size属性定义字体大小
语法基本格式如下：
p {
font-size: 20px;
}
注意：
1、px（像素）大小是我们网页的最常用的单位
2、谷歌浏览器默认的文字大小为16px
3、不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
4、可以给body指定整个界面文字大小（但标题比较特殊，需要单独指定）

字体粗细

CSS使用font-weight属性设置文本字体的粗细
语法基本格式：
p {
font-weight: bold;
}

![[Pasted image 20240419210053.png]]
注意：
1、学会让加粗标签（比如h和strong等）不加粗，或者其他标签加粗
2、实际开发时，我们更喜欢用数字表示粗细

文字样式

CSS使用font-style属性设置文本的风格
语法基本格式：
p {
font-style: normal;
}

![[Pasted image 20240419212958.png]]
注意： 平时我们很少给文字加斜体，反而要给斜体标签（em, i）改为不倾斜字体

字体复合属性

语法基本格式：
body {
font: font-style font-weight font-size/line-height font-family;
}
注意：
1、使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开
2、不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性不起作用

总结

![[Pasted image 20240419215118.png]]

CSS文本属性

CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等

文本颜色

color属性用于定义文本颜色

语法基本格式：
div {
color: red;
}

![[Pasted image 20240421155234.png]]
开发中最常用的是16进制

对齐文本

text-align属性用于设置元素内文本内容的水平对齐方式
语法基本格式：
div {
text-align: center;
}

![[Pasted image 20240421174347.png]]

注意： 想要图片居中对齐，需要把图片放在一个p标签内，再给p标签添加水平居中对齐

装饰文本

text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等

![[Pasted image 20240421175228.png]]
最常用于取消a链接自带的下划线

文本缩进

text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进
语法基本格式：
1、
所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值
div {
text-indent: 10px;
}
2、
em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的一个文字大小
p {
text-indent: 2em;
}

行间距

line-height属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离。
语法基本格式：
p {
line-height: 26px;
}

![[Pasted image 20240421210855.png]]

总结

![[Pasted image 20240421211545.png]]

CSS引入方式

CSS的三种样式表

1、行内样式表（行内式）
2、内部样式表（嵌入式）
3、外部样式表（链接式）

内部样式表

内部样式表（内嵌样式表）是写在HTML页面内部，是将所有的CSS代码抽取出来，单独放在一个 <style>标签中。
语法基本格式：
<style>
div {
color: red;
font-size: 12px;
}
<style>
特点：

  • <style>标签理论上可以放在HTML文档的任何地方，*但一般会放在文档的<head>标签中 *
  • 通过此方式，可以方便控制当前整个页面中的元素样式设置
  • 代码结构清晰，但是并没有实现结构与样式完全分离
  • 使用内部样式设定CSS，通常也被称为嵌入式引入，这种方式是我们练习时常用的方式

行内样式表

行内样式表（内联样式表）是在元素内部的style属性中设定CSS样式，适用于修改简单样式
语法基本格式：
<div style="color: red; font-size: 12px;">欢迎使用小羊计算器</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体验CSS语法规范</title>
</head>
<body>
    <h1 style= "color: pink;">小羊计算器</h1>
    <span>欢迎使用小羊计算器</span>
    <ul>
        <li>开始使用</li>
    </ul>
</body>
</html>

![[Pasted image 20240422195751.png]]
注意：

  • style其实就是标签的属性
  • 在双引号之间，写法要符合CSS规范
  • 可以控制当前的标签设置样式
  • 不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用
  • 使用行内样式表设定CSS，通常也被称为行内式引入

外部样式表

实际开发都是外部样式表，适用于样式比较多的情况，核心是：样式单独写在CSS文件中，之后把CSS文件引入到HTML页面中使用
引入外部样式表的步骤：
1、新建一个后缀名为 .css 的样式文件，把所有的CSS代码都放入此文件中
2、在HTML页面中，使用<link>标签引入这个文件
语法基本格式：<link rel="stylesheet" href="css文件路径">

![[Pasted image 20240422201307.png]]

  • 使用外部样式表设定CSS，通常也被称为外链式或外链式引入，是开发中最常用的方式

总结

![[Pasted image 20240422201605.png]]

Chrome调试工具使用

1. 打开调试工具

打开Chrome浏览器，按下F12键或者点击页面空白处->检查

2、使用调试工具

  1. Ctrl+滚轮可以放大开发者代码大小
  2. 左边是HTML结构，右边是CSS样式
  3. 右边CSS样式可以改动数值和查看颜色
  4. Ctrl+0复原浏览器大小
  5. 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误
  6. 如果有样式，但是样式前面有黄色感叹号提示，则是样式属性书写错误

CSS2

Emmet语法

Emmet语法前身是Zen coding, 它使用缩写来提高HTML/CSS的编写速度，Vscode内部已经集成该语法。

快速生成HTM结构语法

1、生成标签，直接输入标签名，按tab键即可 比如 div 然后tab键，就可以生成<div> </div>
2、如果想要生成多个相同标签 加上 * 就可以了 比如 div * 3 就可以快速生成3个div
3、如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
4、如果有兄弟关系的标签，用+就可以了 比如 div+p
5、如果生成带有类名或者id名字的，直接写 .demo 或者 #two tab键就可以了
6、如果生成的div类名是有顺序的，可以用自增符号 ￥
7、如果想要在生成的标签内部写内容可以用{ }表示

快速生成CSS样式语法

CSS基本采取简写模式形式即可。
1、比如 w200 按tab键可以生成 width: 200px;
2、比如lh26 按tab键可以生成 line-height: 26px;

CSS的元素显示模式

什么是元素显示模式

作用：网页的标签非常多，在不同的地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页
元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>
HTML元素一般分为块元素和行内元素两种类型

块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>元素是最典型的块元素
块级元素的特点：

  1. 自己独占一行
  2. 高度、宽度、外边距以及内边距都可以控制
  3. 宽度默认是容器（父级宽度）的100%
  4. 是一个容器及盒子，里面可以放行内或者块级元素
    注意：
  • 文字类的元素内不能使用块级元素
  • <p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>
  • 同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素。
行内元素的特点：

  1. 相邻行内元素在一行上，一行可以显示多个
  2. 高、宽直接设置是无效的
  3. 默认宽度就是它本身内容的宽度
  4. 行内元素只能容纳文本或其他行内元素
    注意：
  • 链接里面不能再放链接
  • 特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全

行内块元素

在行内元素中有几个特殊的标签——<img />、<input />、<td>，它们同时具有块元素和行内元素的特点。
行内块元素的特点：

  1. 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）
  2. 默认宽度就是它本身内容的宽度（行内元素特点）
  3. 高度、行高、外边距以及内边距都可以控制（块级元素特点）

如何指定元素的显示类型

display属性用于指定元素的显示类型
常见的display属性值及其含义：

  1. block：将元素呈现为块级元素。块级元素会独占一行，并且默认情况下会在前后添加换行符。常见的块级元素包括<div>、<p>、<h1>-<h6>等。

  2. inline：将元素呈现为内联元素。内联元素不会独占一行，而是与其他元素在同一行内显示，并根据内容自动收缩。常见的内联元素包括<span>、<a>、<strong>、<em>等。

  3. inline-block：将元素呈现为内联块级元素。内联块级元素与内联元素类似，可以与其他元素在同一行内显示，但可以设置宽度、高度和内外边距。常见的内联块级元素包括<img>、<button>等。

  4. none：将元素隐藏，不在页面中显示。隐藏后的元素不占据空间。

  5. flex：将元素呈现为弹性盒子。通过使用弹性盒子布局，可以方便地创建灵活的、自适应的布局。常见的弹性盒子属性包括flex-direction、justify-content、align-items等。

  6. grid：将元素呈现为网格容器。使用网格布局可以将页面划分为行和列，并使元素在网格中进行布局。常见的网格属性包括grid-template-columns、grid-template-rows、grid-gap等。

总结

![[Pasted image 20240423213701.png]]

CSS3（布局）

CSS元素定位

标准流（Normal Flow）

  • 默认情况下，元素都是按照normal flow 进行排布
    • 从左到右、从上到下按顺序摆放好
    • 默认情况下，互相之间不存在层叠现象

margin-padding位置调整

  • 在标准流中，可以使用margin、padding对元素进行定位
    • 其中margin还可以设置负数
  • 缺点：
    • 设置一个元素的margin或者padding，通常会影响标准流中其他元素的定位效果
    • 不便于实现元素叠层效果
  • 如果希望一个元素跳出标准流，单独的对某个元素进行定位
    • 可以通过position属性来进行设置

相对定位

认识元素定位

  • 定位允许你从正常的文档流布局中取出元素，并使它们具有不同的行为

    • 例如放在另一个元素上面
    • 或者始终保持在浏览器视窗内的同一位置

  • 定位在开发中非常常见

    ![[Pasted image 20240426210030.png]]![[Pasted image 20240426210100.png]]
    ![[Pasted image 20240426210111.png]]

认识position属性

  • 利用position属性可以对元素进行定位，常用取值有5个：
    static、relative、absolute、sticky、fixed
  • 默认值：
    • static：默认值，静态定位
  • 使用下面的值，可以让元素变成定位元素：
    • realtive：相对定位
    • absolute：绝对定位
    • fixed：固定定位
    • sticky：粘性定位
      语法基本格式：
      position: realtive;

position值比对
![[Pasted image 20240427175031.png]]

静态定位- static

  • position属性的默认值
    • 元素按照normal flow布局
    • left、right、top、bottom没有任何作用

相对定位-relative

  • 元素按照normal Flow布局

  • 可以通过left、right、top、bottom进行定位

    • 定位参照对象是元素自己原来的位置

  • left、right、top、bottom用来设置元素的具体位置，对元素的作用如下图所示：

    ![[Pasted image 20240426212721.png]]

  • 相对定位的应用场景

    • 在不影响其他元素位置的前提下，对当前元素位置进行微调
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /* 相对定位 */
            position: relative;
            left: 30px;
            bottom: 50px;
    }
    </style>
</head>
<body>
    <span>我是span元素</span>
    <strong class="box">我是strong元素</strong>
    <img src="../pct/pic.jpeg" alt="">
    <div>我是div元素</div>
</body>
</html>

![[Pasted image 20240426213008.png]]

练习：写3的平方+2的三次方=17这个式子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            /* 把指数缩小一点 */
            font-size: 12px;
            /* 位置调整为相对定位 */
            position: relative;
            /* 向上移 */
            bottom: 10px;
        }
    </style>
</head>
<body>
    <div>
        <!-- 3的平方+2的三次方=17 -->
        3<span>2</span> + 2<span>3</span> = 17
    </div>
</body>
</html>

![[Pasted image 20240426213542.png]]

固定定位-fixed

  • 元素脱离normal flow(脱离标准流、脱标)
  • 可以通过left、right、top、bottom进行定位
  • 定位参照对象是视口（viewport）
  • 当画布滚动时，固定不动
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            position: fixed;
            bottom: 20px;
            right: 20px;
        }
    </style>
</head>
<body>
    <div>我是div</div>
    <span>我是span</span>
    <img src="./photo/OIP.jpg" alt="">
</body>
</html>

![[Pasted image 20240427145731.png]]

画布和视口

![[Pasted image 20240427150152.png]]

  • 视口：
    • 文档的可视区域
    • 如上图红框所示
  • 画布：
    • 用于渲染文档的区域
    • 文档内容超出视口范围，可以通过滚动查看
    • 如上图黑框所示
  • 宽高对比：
    • 画布 >= 视口
      练习：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .handel {
            /* 固定位置 */
            position: fixed;
            right: 30px;
            bottom: 30px;
        }
        .handel .item {
            width: 80px;
            height: 40px;
            /* 文字居中 */
            text-align: center;
            /* 文字高度 */
            line-height: 40px;
            /* 背景颜色 */
            background-color: rgb(89, 90, 91);
            /* 字体颜色 */
            color: #fff;
            /* 角落的角圆半径 */
            border-radius: 8px;
            /* 鼠标放上去时，光标变成小手 */
            cursor: pointer;
        }
        /* 鼠标放上去时改变背景颜色 */
        .handel .item:hover {
            background-color: pink;
        }
        /* 间隔 */
        .top {
            margin-bottom: 10px;
        }

    </style>
</head>
<body>
    <div class="handel">
        <div class="item top">顶部</div>
        <div class="item bottom">反馈</div>
    </div>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>
    <br><br><br><br><br><br>    
    <br><br><br><br><br><br>   
    <br><br><br><br><br><br>  
    <br><br><br><br><br><br>  
    <br><br><br><br><br><br>
</body>
</html>

![[Pasted image 20240427163004.png]]

绝对定位-absolute

  • 元素脱离normal flow
  • 可以通过left、right、top、bottom进行定位
    • 定位参照对象是最邻近的定位祖先元素
    • 如果找不到这样的祖先，参照对象是视口（这时候跟固定定位类似）
  • 定位元素
    • position值不为static的元素
    • 也就是position值为relative、absolute、fixed的元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        strong {
            /* 脱离标准流 */
            position: absolute;
            top: 0;
            right: 0;
        }
        .box {
            width: 700px;
            height: 500px;
            background-color: pink;
            /* 给div设置定位 */
            position: relative;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>我是span元素</span>
        <strong>我是strong元素</strong>
        <img src="./photo/OIP.jpg" alt="">
    </div>
    <div>我是div元素</div>
</body>
</html>

![[Pasted image 20240427172357.png]]

  • 在绝大多数情况下，子元素的绝对定位都是相对于父元素进行定位
  • 如果希望子元素相对于父元素进行定位，又不希望父元素脱标，常用解决方案：
    • 父元素设置position:relative（让父元素成为定位元素，而且父元素不脱离标准流）
    • 子元素设置position:absolute
    • 简称：子绝父相

将position设置为absolute/fixed元素的特点（一）

  • 可以随意设置宽度、高度
  • 高度默认由内容决定
  • 不再受标准流的约束
    • 不再严格按照从上到下、从左到右排布
    • 不再严格区分块级、行内级，行内块级的很多特性都会消失
  • 不再给父元素汇报宽高数据

将position设置为absolute/fixed元素的特点（二）

  • 绝对定位元素
    • position值为absolute/fixed的元素
  • 对于绝对定位元素来说
    • 定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度
    • 定位参照对象的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度
  • 如果希望绝对定位元素的宽高和定位参照对象一样，可以给绝对定位元素设置以下属性
    • left：0、right：0、top：0、bottom：0、margin：0
  • 如果希望绝对定位元素在定位参照对象中居中显示，可以给绝对定位元素设置以下属性
    • left：0、right：0、top：0、bottom：0、margin：auto
    • 另外，还得设置具体的宽高值（小于定位参照对象的宽高）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            height: 500px;
            width: 800px;
            background-color: pink;
            position: relative;
        }
        /* 设置居中显示，且不存在兼容性问题*/
        /* 上下偏移量相等，左右偏移量相等，margin设置为auto会使剩余空间平均分配到左右两侧和上下两侧 */
        .containter {
            height: 200px;
            width: 200px;
            background-color: #d8afaf;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="containter"></div>
    </div>
</body>
</html>

![[Pasted image 20240428170130.png]]

练习：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 去除链接原有样式 */
        a {
            text-decoration: none;
            color: black;
        }

        .item {
            width: 140px;
            margin: 0 auto;
        }
        /* 设置为定位元素 */
        .item .top {
            position: relative;
        }

        .item .top img{
            /* 去除图片下面多出来的区域 */
            display: block;
        }
        /* 添加背景覆盖图片 */
        .item .top .cover {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-image: url(./photo/coverall.png);
            background-position: 0 0;
        }

        .item .top .info {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 27px;
            line-height: 27px;
            padding-left: 10px;
            font-size: 12px;
            color: #ccc;
            background-image: url(./photo/coverall.png);
            background-position: 0 -537px;
        }

        .item .top .info .icon {
            position: relative;
            top: 1px;
            display: inline-block;
            width: 14px;
            height: 11px;
            /* 设置间距 */
            margin-right: 4px;
            background-image: url(./photo/iconall.png);
            background-position: 0 -24px;
        }

        .item .bottom {
            display: block;
            margin-top: 8px;
            font-size: 14px;
        }

        .item .bottom:hover {
            text-decoration: underline;
        }

    </style>
</head>
<body>
    <div class="item">
        <div class="top">
            <img src="./photo/wy.01.jpg" alt="">
            <a class="cover" href="#"></a>
            <div class="info">
                <i class="icon"></i>
                <span class="count">4999万</span>
            </div>
        </div>
        <a class="bottom" href="#">
            无前奏 | 欧美女声 | 三秒爱上
        </a>

    </div>
</body>
</html>

![[Pasted image 20240428190122.png]]

left…….属性和margin-left……的区别

  1. 定位属性 vs 外边距属性：

    • left、right、top、bottom是用于定位元素的属性，通常与position属性（如relative、absolute、fixed）一起使用。
    • margin-left、margin-right、margin-top、margin-bottom是用于设置元素的外边距的属性。

  2. 控制位置 vs 控制间距：

    • left、right、top、bottom属性用于控制元素相对于其包含块的位置，分别表示元素的左、右、上、下偏移量。
    • margin-left、margin-right、margin-top、margin-bottom属性用于控制元素与其相邻元素之间的间距，分别表示元素的左、右、上、下外边距的大小。

  3. 值的类型：

    • left、right、top、bottom属性可以使用具体的长度值（如像素、百分比）或关键字（如auto）来指定偏移量。
    • margin-left、margin-right、margin-top、margin-bottom属性也可以使用具体的长度值或关键字。

  4. 应用方式：

    • left、right、top、bottom属性通常用于定位元素的具体位置，例如将元素相对于包含块的左上角或右下角进行定位。
    • margin-left、margin-right、margin-top、margin-bottom属性主要用于控制元素与其相邻元素之间的间距，例如设置元素与其相邻元素的水平或垂直间距。

需要注意的是:left、right、top、bottom属性通常与position属性一起使用，而margin-left、margin-right、margin-top、margin-bottom属性可以在任何情况下使用。另外，定位属性（如relative、absolute、fixed）会影响left、right、top、bottom属性的行为，而外边距属性不受定位属性的影响。

width：auto

auto是什么：交由浏览器处理，自动调整

  • 行内非替换元素 -> width: 包裹内容
  • 块级元素 -> width: 包含块的宽度
  • 绝对定位元素 -> width: 包裹内容

粘性定位-sticky

  • 可以看做是相对定位和绝对定位的结合体
  • 它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点
  • 当达到阈值点时，就会变成绝对定位
  • sticky是相对于最近的包含滚动视口的滚动祖先
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            height: 300px;
            width: 500px;
            margin: 100px auto 0;
            /* 元素内容溢出时，显示滚条 */
            overflow: scroll;

        }

        .nav {
            position: sticky;
            background-color: pink;
            /* 距离上方0的时候变成绝对定位 */
            top: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>我是标题</h1>
        <div class="nav">
            <span>电脑</span>
            <span>手机</span>
            <span>衣服</span>
            <span>鞋子</span>
        </div>
        <ul>
            <li>电脑列表1</li>
            <li>电脑列表2</li>
            <li>电脑列表3</li>
            <li>电脑列表4</li>
            <li>电脑列表5</li>
            <li>电脑列表6</li>
            <li>电脑列表7</li>
            <li>电脑列表8</li>
            <li>电脑列表9</li>
            <li>电脑列表10</li>
            <li>电脑列表11</li>
            <li>电脑列表12</li>
            <li>电脑列表13</li>
            <li>电脑列表14</li>
            <li>电脑列表15</li>
            <li>电脑列表16</li>
            <li>电脑列表17</li>
            <li>电脑列表18</li>
            <li>电脑列表19</li>
            <li>电脑列表20</li>
        </ul>
    </div>
</body>
</html>

![[Pasted image 20240430171525.png]]

CSS属性 - z - index

  • z-index属性用来设置定位元素的层叠顺序（仅对定位元素有效）
    • 取值可以是正整数、负整数、0
  • 比较原则
    • 如果是兄弟关系
      • z-index越大，层叠在越上面
      • z-index相等，写在后面的那个元素层叠在上面
    • 如果不是兄弟关系
      • 各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较
      • 而且这2个定位元素必须设置z-index的具体数值
      • 父元素的 z-index 值会影响其子元素的堆叠顺序。如果父元素的 z-index 值较低，那么子元素即使具有较高的 z-index 值，也无法覆盖其他父元素的内容。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            height: 100px;
            width: 100px;
            position: fixed;
        }
        .box1 {
            background-color: pink;
            z-index: 1;
        }

        .box2 {
            background-color: skyblue;
            left: 20px;
            top: 20px;
        }

        .box3 {
            background-color: greenyellow;
            left: 40px;
            top: 40px;
        }
    </style>
</head>
<body>
        <div class="item box1">1</div>
        <div class="item box2">2</div>
        <div class="item box3">3</div>
</body>
</html>

![[Pasted image 20240430184648.png]]

CSS元素浮动

认识浮动

  • float属性可以指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它
  • 绝对定位、浮动都会让元素脱离标准流，以达到灵活布局的效果
  • 可以通过float属性让元素产生浮动效果，float的常用取值
    • none：不浮动，默认值
    • left：向左浮动
    • right：向右浮动

浮动的规则

  • 规则一
    • 元素一旦浮动后，脱离标准流
      • 朝着向左或向右方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止
      • 定位元素会层叠在浮动元素上面

![[Pasted image 20240430200108.png]]

  • 规则二
    • 如果元素是向左（右）浮动，浮动元素的左（右）边界不能超出包含块） 的左（右i）边界
  • 规则三
    • 浮动元素之间不能层叠
      • 如果一个元素浮动，另一个元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素（左浮找左浮，右浮找右浮）
      • 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止
  • 规则四
    • 浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出（如行内级元素、inline-block元素、块级元素的文字内容）
      ![[Pasted image 20240430200705.png]]
  • 规则五
    • 行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐
      可以利用将所有子元素向同一个方向浮动来解决子元素间的间隙问题
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .containter {
            width: 500px;
            height: 300px;
            background-color: pink;
            margin: 100px auto;
        }
        .box1 {
            background-color: skyblue;
            float: left;
        }
        .box2 {
            background-color: greenyellow;
            float: right;
        }
        .box3 {
            background-color: blanchedalmond;
            float: left;
        }
        .info {
            width: 300px;
            height: 100px;
            background-color: rgb(155, 202, 215);
            margin: auto;
        }
        .ht {
            width: 100px;
            height: 50px;
            background-color: brown;
            float: left;
        }
    </style>
</head>
<body>
    <div class="containter">
        <div class="item box1">1</div>
        <div class="item box2">2</div>
        <div class="item box3">3</div>
        <div class="info">
            <div class="ht"></div>
            我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
        </div>
    </div>
</body>
</html>

![[Pasted image 20240430201831.png]]

浮动的问题-高度塌陷

  • 由于浮动元素脱离了标准流，变成了脱标元素，所以不再向父元素汇报高度
    • 父元素计算总高度时，就不会计算浮动子元素的高度，导致高度塌陷的问题
  • 解决父元素高度塌陷问题的过程，一般叫做**清浮动（清理浮动、清除浮动）
  • 清浮动的目的是让*父元素计算总高度时，把浮动子元素的高度算进去
  • 如何清除浮动？使用clear属性

CSS属性-clear

  • clear属性是做什么的？
    • clear属性可以指定一个元素是否必须移动（清除浮动后）到在它之前的浮动元素下面
  • clear的常用取值
    • left：要求元素的顶部低于之前生成的所有左浮动元素的底部
    • right：要求元素的顶部低于之前生成的所有右浮动元素的底部
    • both：要求元素的顶部低于之前生成的所有浮动元素的底部
    • none：默认值，无特殊要求

清理浮动的方法：给父元素添加after伪元素：

1
2
3
4
5
6
7
8
9
10
11
元素::after {
	content: "";
	clear: both;
	display: block;
	/*提高浏览器兼容性*/
	visibility: hidden;
	height: 0;
}
元素 {
	*zoom: 1;/*IE6/7兼容性*/
}

CSS flex布局

CSS Flexbox 布局指南 |CSS 技巧

认识flex布局

  • flexbox翻译为弹性盒子
    • 弹性盒子是一种用于按行或按列布局元素的唯一布局方法
    • 元素可以膨胀以填充额外的空间，收缩以适应更小的空间
    • 通常我们使用flexbox来进行布局的方案称之为flex布局
  • flex布局是目前web开发中使用最多的布局方案
    • 目前特别在移动端可以说已经完全普及
    • 在pc端也几乎完全普及和使用，只有非常少数的网站依然在用浮动来布局

felx布局的重要概念

  • 两个重要概念
    • 开启了flex布局的元素叫flex containter
    • flex containter里面的直接子元素叫做flex item
      ![[Pasted image 20240501213649.png]]
  • 当flex containter中的子元素变成了flex item时，具备以下特点
    • flex item的布局将受flex containter属性的设置来进行控制和布局
    • flex item不再严格区分块级元素和行内级元素
    • flex item默认情况下是包裹内容的，但是可以设置宽度和高度
  • 设置display属性为flex或者inline-flex可以成为flex containter
    • flex：flex containter以block-level形式存在
    • inline-flex：flex containter以inline-level形式存在

flex布局的模型

![[Pasted image 20240501214659.png]]

flex相关的属性

  • 应用在flex containter上的CSS属性
    • flex-flow
    • flex-direction
    • flex-wrap
    • justify-content
    • align-items
    • align-content
  • 应用在flex items上的CSS属性
    • flex-grow
    • flex-basis
    • flex-shrink
    • order
    • align-self
    • flex

flex-containter

flex-direction
  • flex items 默认都是沿着main axis（主轴）从main start开始往main end方向排布
    • flex-direction决定了main axis 的方向，有四个取值
    • row(默认值)、row-reverse、column、column-reverse
      ![[Pasted image 20240501220522.png]]
flex-wrap
  • flex-wrap决定了flex containter是单行还是多行
    • nowrap(默认)：单行
    • wrap：多行
    • wrap-reverse：多行（对比wrap，cross start与cross end相反）
      ![[Pasted image 20240501221341.png]]
flex-flow
  • flex-flow属性是flex-direction和flex-wrap的简写
    • 任何顺序，并且都可以省略
      <'flex-direction'> || <'flex-wrap'>
justify-content
  • justify-content决定了flex items在main axis上的对齐方式
    • flex-start(默认值)：与main start对齐
    • ![[Pasted image 20240501223509.png]]
    • flex-end：与main end对齐
    • ![[Pasted image 20240501223533.png]]
    • center：居中对齐
    • ![[Pasted image 20240501223545.png]]
    • space-between：
      • flex items之间的距离相等
      • 与main start、main end两端对齐
    • ![[Pasted image 20240501223655.png]]
    • space-around：
      • flexitems之间的距离相等
      • flexitems与main start、main end之间的距离是flex items之间距离的一半
    • ![[Pasted image 20240501223951.png]]
    • space-evenly：
      • flex items之间的距离相等
      • flex items与main start、main end之间的距离等于是flex items之间距离
    • ![[Pasted image 20240501223923.png]]
align-items
  • align-items决定了flex items在cross axis上的对齐方式
    • normal：在弹性布局中，效果和stretch一样
    • stretch：当flex items在cross axis方向的size为auto时，会自动拉伸至填充flex containter
    • ![[Pasted image 20240501225200.png]]
    • flex-start：与cross start对齐
    • ![[Pasted image 20240501225312.png]]
    • flex-end：与cross end对齐
    • ![[Pasted image 20240501225327.png]]
    • center：居中对齐
    • ![[Pasted image 20240501225337.png]]
    • baseline：与基准线对齐
    • ![[Pasted image 20240501225348.png]]
align-content
  • align-content决定了多行flex items在cross axis上的对齐方式，用法与justify-content类似
    • stretch（默认值）：与align-items的stretch类似
    • flex-start：与cross start对齐
    • ![[Pasted image 20240501230258.png]]
    • flex-end：与cross end对齐
    • ![[Pasted image 20240501230306.png]]
    • center：居中对齐
    • ![[Pasted image 20240501230317.png]]
    • space-between：
      • flex items之间的距离相等
      • 与cross start、cross end两端对齐
    • ![[Pasted image 20240501230329.png]]
    • space-around：
      • flexitems之间的距离相等
      • flexitems与main start、main end之间的距离是flex items之间距离的一半
    • ![[Pasted image 20240501230341.png]]
    • space-evenly：
      • flex items之间的距离相等
      • flex items与main start、main end之间的距离等于是flex items之间距离

flex-items

order
  • order决定了flex items的排布顺序
    • 可以设置任意整数（正整数、负整数、0），值越小就越排在前面
    • 默认值是0
align-self
  • flex items可以通过align-self覆盖flex containter设置的align-items
    • auto（默认值）：遵从flex containter的align-items设置
    • stretch、flex-start、flex-end、center、baseline，效果跟align-items一致
flex-grow
  • flex-grow决定了flex items如何扩展（拉伸、成长）
    • 可以设置任意非负数字（正整数、正小数、0），默认值是0
    • 当flex containter在main axis方向上有剩余size时，flex-grow属性才会有效
  • 如果所有flex items的flex-grow总和sum超过1，每个flex item扩展的size为
    • flex containter的剩余size * flex-grow/sum
  • flex items 扩展后的最终size不能超过max-width/max-height
flex-shrink
  • flex-shrink决定了flex items如何收缩
    • 可以设置任意非负数字（正整数、正小数、0），默认值是1
    • 当flex items在main axis方向上超过了flex containter的size时，flex-shrink属性才会有效
  • 如果所以flex items的flex-grow总和sum超过1，每个flex item收缩的size为
    • flex items超出flex containter的size * 收缩比例 / 所有flex items的收缩比例之和
  • flex items 收缩后的最终size不能小于min-width/min-height
flex-basis
  • flex-basis用来设置flex items在main axis方向上的basis size
    • auto（默认值）、具体的宽度数值
  • 决定flex items最终base size的因素，从优先级高低
    • max-width \ max-height \ min-width \ min-height
    • flex-basis
    • width \ height
    • 内容本身的size
flex
  • flex是flex-grow || flex-shrink || flex-basis的简写，flex属性可以指定1个、2个或3个值
    none || [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
  • 单值语法：值必须是以下之一：
    • 一个 <flex-grow> 的有效值：此时简写会扩展为 。flex: <flex-grow> 1 0
    • 一个 <flex-basis> 的有效值：此时简写会扩展为 。flex: 1 1 <flex-basis>
    • 关键字 或者全局关键字之一。none
  • 双值语法：
    • 第一个值必须是一个 flex-grow 的有效值。
    • 第二个值必须是以下之一：
      • 一个 flex-shrink 的有效值：此时简写会扩展为 。flex: <flex-grow> <flex-shrink> 0
      • 一个 flex-basis 的有效值：此时简写会扩展为 。flex: <flex-grow> 1 <flex-basis>
  • 三值语法：值必须按照以下顺序指定：
    1. 一个 flex-grow 的有效值。
    2. 一个 flex-shrink 的有效值。
    3. 一个 flex-basis 的有效值。
      注意
      initial
      元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器。相当于将属性设置为””。flex: 0 1 auto

auto
元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为 “”.flex: 1 1 auto

none
元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为””。flex: 0 0 auto

flex布局的常见问题

如何解决如下布局的对齐问题？
![[Pasted image 20240503172805.png]]
解决办法：在子元素的最后添加几个空的span/i元素，高度与其他子元素一致，添加的个数是列数-2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .containter {
            width: 800px;
            height: 600px;
            background-color: pink;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .item {
            width: 220px;
            height: 150px;
            background-color: rgb(79, 155, 200);
        }

        i {
            width: 220px;
        }
    </style>

</head>
<body>
    <div class="containter">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
        <div class="item item5">5</div>
        <div class="item item6">6</div>
        <div class="item item7">7</div>
        <div class="item item8">8</div>
        <div class="item item9">9</div>
        <div class="item item10">10</div>
        <div class="item item11">11</div>
        <!-- 添加span/i的个数是列数-2，并且宽度要和前面的div一致 -->
        <i></i>
    </div>
</body>
</html>

![[Pasted image 20240503174704.png]]

布局方案总结

![[Pasted image 20240501163839.png]]

额外补充知识

03

border图形

border主要用来给盒子增加边框，但是在开发中我们也可以利用边框的特性来实现一些形状

给一个盒子四周添加不同颜色的边框
![[Pasted image 20240425192608.png]]

![[Pasted image 20240425192628.png]]

将border设置为盒子长宽的一半
![[Pasted image 20240425192903.png]]

![[Pasted image 20240425192918.png]]
将另外三边的颜色去除
![[Pasted image 20240425193311.png]]

![[Pasted image 20240425193352.png]]

将这个盒子旋转
![[Pasted image 20240425193858.png]]

![[Pasted image 20240425193914.png]]

Web网络字体

Web fonts的工作原理

  • 首先，我们需要通过一些渠道获取到希望使用的字体：

![[Pasted image 20240425194548.png]]

  • 其次，在我们CSS代码中使用该字体：
  • 最后，在部署静态资源时，将HTML/CSS/JavaScript/Font一起部署在静态服务器中
  • 用户角度：
    1. 浏览一个网页时，因为代码中有引入字体文件，字体文件会被一起下载下来
    2. 浏览器会根据使用的字体在下载的字体文件中查找、解析、使用对应的字体
    3. 在浏览器中使用对应的字体显示内容

使用Web Fonts

  • 第一步： 在字体天下网站下载一个字体（实际开发中由产品部提供）
  • 第二步： 使用字体
  • 使用过程如下：
    • 1、将字体放到对应的目录中
    • 2、通过@font-face来引入字体，并且设置格式
    • 3、使用字体
  • 注意：@font-face 用于加载一个自定义的字体
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 将这个字体引入到网页中 */
       @font-face {
            font-family: "why"; /* 给这个字体起一个名字，方便接下来引用 */
            src: url("./fonts/YeZiGongChangTangYingHei-2.ttf");
       }
       .box {
        font-family: "why";
       }
    </style>
</head>
<body>
    <div class="box">我是div元素</div>
</body>
</html>

![[Pasted image 20240425212330.png]]

Web Fonts的兼容性

  • 我们刚才使用的字体文件是 .ttf, 他是True Type字体。
    • 在开发中某些浏览器可能不支持该字体，所以为了浏览器的兼容性问题，我们需要有对应其他格式的字体；
  • True Type字体：拓展名是 .ttf
    • OpenType/TrueType字体：拓展名是 .ttf、.otf, 建立在TrueType字体之上
    • Embedded OpenType字体：拓展名是 .eot, OpenType字体的压缩版
    • SVG字体：拓展名是 .svg、.svgz
    • WOFF表示Web Open Font Format web开放字体：拓展名是 .woff, 建立在True Type字体之上

![[Pasted image 20240425213333.png]]

  • 如果我们要具备很强的兼容性，那么可以如下格式编写：
1
2
3
4
5
6
7
8
9
10
@font-face {
            font-family: "why"; /* 给这个字体起一个名字，方便接下来引用 */
            src: url("./fonts/YeZiGongChangTangYingHei-2.eot");
            src: url("./fonts/YeZiGongChangTangYingHei-2.eot?#iefix") format("embedded-opentype"),
            url("./fonts/YeZiGongChangTangYingHei-2.woff") format("woff"),
            url("./fonts/YeZiGongChangTangYingHei-2.ttf") format("truetype"),
            url("./fonts/YeZiGongChangTangYingHei-2.svg#uxfonteditor") format("svg");
            font-style: normal;
            font-weight: normal;
       }
  • 这被称为刀枪不入的 @font-face语法：是Paul Irish早期的一篇文章提及后开始流行起来
  • src用于指定字体资源
    • url指定资源的路径
    • format用于帮助浏览器快速识别字体的格式

Web 字体图标

认识字体图标

  • 什么是字体图标：把字体直接设计成图标的样子就叫做字体图标
  • 字体图标的好处：
    • 放大不会失真
    • 可以任意切换颜色
    • 用到很多个图标时，文件相对图片较小
  • 字体图标的使用：
  • 将字体文件和默认的CSS文件导入到项目中

字体图标的使用

  • 字体图标的使用步骤：
    • 第一步：通过link引入iconfont.css文件
    • 第二步：使用字体图标
  • 使用字体图标常见的两种方式：
    • 方式一：通过对应字体图标的Unicode来显示代码
    • 方式二：利用已经编写好的class，直接使用
      ![[Pasted image 20240426164410.png]]
      第一种方式：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: "iconfont";
            src: url(./fonts01/iconfont.ttf);
        }
        .iconfont {
            font-family: "iconfont";
            font-size: 100px;
        }
        .music::before {
            content: "\e617";
        }
    </style>
</head>
<body>
    <!-- 直接通过内容（字符实体）展示 -->
    <span class="iconfont">&#xe66a;</span>
    <!-- 不使用字符实体的方式展示（伪元素）出来 -->
    <span class="iconfont music"></span>
</body>
</html>

![[Pasted image 20240426162331.png]]
第二种方式：使用iconfont配置的CSS：将 .ttf文件和 .css文件一起拖到项目里

![[Pasted image 20240426163726.png]]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./fonts01/iconfont.css">
    <style>
        .icon {
            font-size: 30px;
            color: pink;
        }
    </style>
</head>
<body>
    <i class="iconfont icon-dashuju icon"></i>
</body>
</html>

![[Pasted image 20240426163746.png]]

CSS精灵图标 CSS Sprite

认识精灵图

  • 什么是CSS Sprite
    • 是一种CSS图像合成技术，将各种小图片合并到一张图上，然后利用CSS的背景定位来显示对应的图片部分
    • 有人翻译为：CSS雪碧、CSS精灵
  • 使用CSS Sprite的好处
    • 减少网页的http请求数量，加快网页响应速度，减轻服务器压力
    • 减少图片总大小
    • 解决了图片命名问题，只需要针对一张集合的图片命名
  • Sprite图片制作

精灵图的使用

  • 精灵图的原理：通过只显示图片的很小的一部分来展示
  • 通常使用背景：
    • 设置对应元素的宽度和高度
    • 设置精灵图作为背景图片
    • 调整背景图片的位置来展示
  • 如何获取精灵图的位置

![[Pasted image 20240426172126.png]]

![[Pasted image 20240426172243.png]]

cursor属性

  • cursor可以设置鼠标指针（光标）在元素上面时的显示样式
  • cursor常见的设值有：
    • auto：浏览器根据上下文决定指针的显示样式，比如根据文本和非文本切换指针样式
    • default：由操作系统决定，一般就是一个小箭头
    • pointer：一只小手，鼠标挪动到链接上面默认就是这个样式
    • text：一条竖线，鼠标指针挪动到文本输入框上面默认就是这个样式
    • none：没有任何指针显示在元素上面

04

CSS属性-transform

  • CSS transform属性允许对某一个元素进行某些形变，包括旋转，缩放，倾斜或平移等
  • 通常行内级元素不能进行形变
    • 对于行内非替换元素是无效的，比如span、a元素等

用法

  • transform属性的语法如下：
    ![[Pasted image 20240508141635.png]]
  • 常见的函数transform function有：
    • 平移：translate(x, y)
    • 缩放：scale(x, y)
    • 旋转：rotate(deg)
    • 倾斜：skew(deg, deg)
位移-translate
  • 平移： translate(x, y)：这个函数用于移动元素在平面上的位置
  • 值个数
    • 一个值时，设置x轴上的位移
    • 两个值时，设置x轴和y轴上的位移
  • 值类型
    • 数字：100px
    • 百分比：参照物本身
  • translate函数是translateX()和translateY()的缩写
缩放-scale
  • 缩放：scale(x, y)：这个函数可改变元素的大小
  • 值个数
    • 一个值时，设置x轴上的缩放
    • 两个值时，设置x轴和y轴上的缩放
  • 值类型
    • 数字：
      • 1：保持不变

      • 1：放大

      • <1：缩小
    • 百分比：不常用
  • scale函数是scaleX()和scaleY()的缩写
旋转-rotate
  • 旋转：rotate（angel)：这个函数可以让元素进行旋转
  • 值类型：
    • 常用单位deg：旋转的角度
    • 正数为顺时针
    • 负数为逆时针
    • transform: rotate(90deg)
  • rotate函数是rotateZ函数的简写写法
  • rotate的其他单位
    • 度（degrees)、百分度(gradians)、弧度(radians)、圈数(turns)
倾斜-skew
  • 倾斜：skew(x, y)：这个函数定义了一个元素在二维平面上的倾斜转换
  • 值个数
    • 一个值时，表示x轴上的倾斜
    • 两个值时，表示x轴和y轴上的倾斜
  • 值类型
    • deg: 旋转的角度
    • 正数为顺时针
    • 负数为逆时针

transform设置多个值

  • 我们可以给transform设置多个形变的函数
  • ![[Pasted image 20240508203909.png]]
  • “+”代表可以设置一个或多个值，多个值之间以空格隔开
  • “#”代表可以设置一个或多个值，多个值之间以“,”隔开

CSS属性：transform-origin

  • transform-origin：形变的原点
  • 一个值：
    • 设置x轴的原点
  • 两个值：
    • 设置x轴和y轴的原点
  • 必须是<length>, <percentage>, 或left, right, top, bottom关键字中的一个
    • left、center、right、top、bottom关键字
    • length：从左上角开始计算
    • 百分比：参考元素本身大小

元素水平居中和垂直居中的方案

水平居中

  • 行内级元素：
    • 设置父元素的text-align：center
  • 块级元素：
    • 设置当前块级元素（需要有固定宽度）margin：0 auto
  • 绝对定位：
    • 元素有宽度情况下，left0+right0+margin: 0 auto
  • flex:
    • justify-content: center

垂直居中

  • 绝对定位
    • 元素有高度的情况下，top0+bottom0+margin: auto 0
    • 弊端：
      • 必须使用定位（脱离标准流）
      • 必须给元素设置高度
  • flex布局
    • align-items：center
    • 弊端：
      • 当前flex布局中所有元素都会垂直居中
  • top+translate
    • 先让元素向下移动父元素的50%
      • `position：relative
      • top：50%
        -注意：这里不能用margin-top：50%，margin-top的百分比是相对于父元素的宽度，而非高度
    • 再让元素向上移动自身的50%
      • transform: translate(0, -50%)

transition动画

认识transition动画

  • 什么是transition动画？
    • CSS transition提供了一种在更改css属性时控制动画速度的方法
    • 可以让css属性变化成为一个持续一段时间的过程，而不是立即生效的
  • 通常将两个状态之间的过渡称为隐式过渡
  • CSS transition可以决定
    • 哪些属性发生动画效果
    • 何时开始（设置delay）
    • 持续多久（设置duration）
    • 如何动画（定义timing function，如匀速地或先快后慢）

可以做动画的CSS属性

  • 方法一：在MDN可执行动画的CSS属性中查询
  • 方法二：阅读CSS属性的文档说明
    ![[Pasted image 20240508195925.png]]

过渡动画-transition

  • transition CSS属性是transition-property，transition-duration，transition-timing-function和transition-delay的一个简写属性
  • transition-property：指定应用过渡性的名称
    • all：所有属性都执行动画
    • none：所以属性都不执行动画
    • CSS属性名称：要执行动画的CSS属性名称，比如width、left、transform等
  • transition-duration：指定动画所需的时间
    • 单位可以是秒(s)或毫秒（ms)
  • transition-timing-function：指定动画的变化曲线
  • transition-delay：指定过渡动画执行之前的等待时间
  • 缺点：
    • 只能定义开始状态和结束状态，不能定义中间状态
    • 不能重复执行，除非一再触发动画
    • 需要在特定状态下触发才能执行，比如某个属性被修改了

Animation动画

认识Animation动画

  • CSS Animation的使用分成两个步骤
    • 步骤一：使用@keyframes定义动画序列（每一帧动画如何执行）
    • 步骤二：配置动画执行的名称、持续时间、动画曲线、延迟、执行次数、方向等

@Keyframes规则

  • 可以使用 @Keyframes来定义多个变化状态，并且使用animation-name来声名匹配
    • 关键帧使用percentage来指定动画发生的时间点
    • 0% 表示动画的第一时刻，100% 表示动画的最终时刻
    • 第一时刻和最终时刻还有特殊的别名：from和to
      基本语法如下：
      @Keyframes 名称 {
      0% {
      transform: translate(0, 0) scale(0.5, 0.5)
      }
      50% {
      transform: translate(0, 200px) scale(1.2, 1.2)
      }
      100% {
      transform: translate(400px, 0) scale(0.5, 0.5)
      }
      }

animation属性

  • CSS animation 属性是animation-name，animation-duration，animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode和animation-play-style属性的一个简写属性形式
  • animation-name：指定执行哪一个关键帧动画
  • animation-duration：指定动画的持续时间
  • animation-timing-function：指定动画的变化曲线
  • animation-delay：指定延迟执行的时间
  • animation-iteration-count：指定动画执行的次数，执行infinite表示无限动画
  • animation-direction：指定方向，常用值normal和reverse
  • animation-fill-mode：执行动画最后保留哪一个值
    • none：回到没有执行动画的位置
    • forwards：动画最后一帧的位置
    • backwards：动画第一帧的位置
  • animation-play-state：指定动画运行或者暂停（在JS中使用，用于暂停动画）

vertical-align

深入理解vertical-align-line box

  • vertical-align会影响行内块级元素在一个行盒中垂直方向的位置
  • 当一个div没有设置高度的时候：
    • 没有内容，没有高度
    • 有内容，内容撑起来高度
  • 内容撑起来高度的本质
    • 内容有行高（line-height），撑起来了div的高度
  • 行高为什么可以撑起来div的高度
    • 这是因为line boxes的存在，并且line-boxes有一个特性，包裹每行的inline level
    • 而其中的文字是有行高的，必须将整个行高包裹进去，才算包裹这个line-level
      不同情况分析
  • 只有文字时![[Pasted image 20240508220221.png]]
  • 有图片，有文字时![[Pasted image 20240508220246.png]]
  • 有图片，有文字，有inline-block（比图片要大）![[Pasted image 20240508220432.png]]
  • 有图片，有文字，有inline-block而且设置了margin-bottom![[Pasted image 20240508220529.png]]
  • 有图片，有文字，有inline-block而且设置了margin-bottom并且有文字（当一个inline-box中有文本时，它的基线不再是底部，基线变成最后一行文本的基线）![[Pasted image 20240508220608.png]]

vertical-align的baseline

  • 结论：line-boxes一定会想办法包裹住当前行中所有的内容
  • vertical-align的默认值是baseline
  • baseline都是哪些
    • 文本的baseline是字母x的下方
    • line-block默认的baseline是margin-bottom的底部（如果没有，就是盒子的底部）
    • inline-block有文本时，baseline是最后一行文本的x的下方

vertical-align的其他值

  • 不同的取值
    • baseline（默认值）：基线对齐
    • top： 把行内级盒子的顶部跟line boxes顶部对齐
    • middle：行内级盒子的中心点与父盒基线加上x-height一半的线对齐(不建议用来做图片的居中)
    • bottom：把行内级盒子的底部跟line boxes底部对齐
    • percentage：把行内级盒子提升或者下降一段距离（距离相对于line-height计算\元素高度），0%意味着同baseline一样
    • length：把行内级盒子提升或者下降一段距离，0cm意味着同baseline一样
  • 解决图片下边缘的间隙方法
    • 方法一：设置成top/middle/bottom
    • 方法二：将图片设置为block元素

05

CSS属性：white-space

  • white-space用于设置空白处理和换行规则
    • normal：合并所有连续的空白，允许单词超屏时自动换行
    • nowrap：合并所有连续的空白，不允许单词超屏时自动换行
    • pre：阻止合并所有连续的空白，不允许单词超屏时自动换行
    • pre-wrap：阻止合并所有连续的空白，允许单词超屏时自动换行
    • pre-line：合并所有连续的空白（但保留换行），允许单词超屏时自动换行

CSS属性：text-overflow

  • text-overflow通常用来设置文字溢出时的行为
    • cilp：溢出的内容直接裁剪掉（字符可能会显示不完整）
    • ellipsis：溢出那行的结尾处用省略号表示

CSS中的函数

  • CSS函数通常可以帮助我们更加灵活的来编写样式的值
  • 几个好用的CSS函数
    • var：使用CSS定义的变量
    • calc：计算CSS值，通常用于计算元素的大小或位置
    • blur：毛玻璃（高斯模糊）效果
    • gradient：颜色渐变函数

CSS函数 - var

  • CSS中可以自定义属性
    • 属性名需要以两个减号（–） 开始
    • 属性值则可以是任何有效的CSS值
1
2
3
div {
	--why-color: red;
}
  • 我们可以通过var函数来使用
1
2
3
span {
color: var(--why-color);
}
  • 规则集定义的选择器，是自定义属性的可见作用域（只在选择器内部有效）
    • 推荐将自定义属性定义在html中，也可以使用 :root选择器

CSS函数 - calc

  • cala()函数允许在声明CSS属性值时执行一些计算
    • 计算支持加减乘除的运算：+ 和 -运算符的两边必须要有空白字符
    • 通常用来设置一些元素的尺寸或者位置
1
2
3
4
5
6
7
.box.containter{
	display: inline-block;
	/* width的百分比相对于包含块（通常是父元素） */
	width: calc(100% - 60px);
	height: 100px;
	background-color: pink;
}

CSS函数 - blur

  • blur()函数将高斯模糊应用于输出图片或者元素
    • blur(radius)
    • radius，模糊的半径，用于定义高斯函数的偏差值，偏差值越大，图片越模糊
  • 通常会和两个属性一起使用：
    • filter：将模糊或颜色偏移等图形效果应用于元素；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    img {
      filter: blur(5px);
    }
  </style>

</head>
<body>
  <div class="box">
    <img src="../pct/pic.jpeg" alt="">
  </div>
</body>
</html>

![[Pasted image 20240513151105.png]]

  • backdrop-filter：为元素后面的区域添加模糊或者其他效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>

    .box {
      display: inline-block;
      position: relative;
    }

    .cover {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      background-color: rgba(0, 0, 0, .5);
      backdrop-filter: blur(5px);
    }

  </style>

</head>
<body>
  <div class="box">
    <img src="../pct/pic.jpeg" alt="">
    <div class="cover"></div>
  </div>
</body>
</html>

![[Pasted image 20240513151848.png]]

CSS函数 - gradient

  • <gradient>是一种 <image>CSS数据类型的子类型，用于表现 两种或多种颜色的过渡转变
    • CSS的 <image>数据类型描述的是2D图形
    • 比如background-image、list-style-image、border-image、content等
    • <image>常见的方式是 通过url来引入一个图片资源
    • 它也可以通过CSS的<gradient>函数来设置颜色的渐变
  • <gradient>常见的函数实现
    • linear-gradient()：创建一个表示两种或多种颜色线性渐变的图片
    • radial-gradient()：创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成
    • repeating-linear-gradient()：创建一个由重复线性渐变组成的<image>
    • repeating-radial-gradient()：创建一个重复的原点触发渐变组成的<image>
linear-gradient的使用
  • linear-gradient：创建一个表示两种或多种颜色线性渐变的图片
    ![[Pasted image 20240513154320.png]]
  • radial-gradient：创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成
    ![[Pasted image 20240513154427.png]]

浏览器前缀

  • 有时候会看到有些CSS属性名前面带有：-o-、-xv-、-ms-、-mso-、-webkit-
    ![[Pasted image 20240513213207.png]]
  • 为什么需要浏览器前缀
    • CSS属性刚开始并没有成为标准，浏览器为了防止后续会修改名字给新的属性添加了浏览器前缀
  • 浏览器私有前缀，只有对应的浏览器才能解析使用
    • -o-、-xv-：Opera等
    • -ms-、-mso-：IE等
    • -moz-：Firefox等
    • -webkit-：Safari、Chrome等

FC-Formatting Context

  • 元素在标准流里面都是属于一个FC的
  • 块级元素的布局属于Block Formatting Context（BFC）
  • 行内级元素的布局属于Inline Formatting Context（IFC）

BFC-Block Formatting Context

![[Pasted image 20240513221209.png]]

作用

概述如下：

  • 在BFC中，box会在垂直方向上一个挨着一个排布
  • 垂直方向的间距由margin属性决定
  • 在同一个BFC中，相邻两个box之间的margin会折叠
  • 在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的
    作用：
  • 解决margin的折叠问题
  • 解决浮动高度塌陷问题

BFC的作用二：解决浮动高度塌陷

  • BFC解决高度塌陷需要满足两个条件
    • 浮动元素的父元素触发BFC，形成独立的块级格式化上下文
    • 浮动元素的父元素的高度是auto的
  • BFC的高度是auto的情况下，如下方法计算高度
    • 如果只有inline-level，是行高的顶部和底部的距离
    • 如果有block-level，是由最底层的块上边缘和最底层块盒子的下边缘之间的距离
    • 如果有绝对定位元素，将被忽略
    • 如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘

媒体查询

  • 媒体查询是一种提供给开发者针对不同需求进行定制化开发的一个接口
  • 可以根据设备的类型（比如屏幕设备、打印机设备）或者特定的特性（如屏幕的宽度）来修改页面
  • 媒体查询的使用方式
    • 一：通过 @media和@import使用不同的CSS规则
      ![[Pasted image 20240513225836.png]]
    • 二：使用 media属性为<style>、 <link>、 <source>和其他html元素指定的媒体类型
      ![[Pasted image 20240513225905.png]]
    • 三：使用Windows.matchMedia()和MediaQuerylist.addListener()方法来测试和监控媒体状态
  • 比较常用的是通过@media来使用不同的CSS规则，目前掌握这个即可

媒体类型

  • 在使用媒体查询时，你必须指定要使用的媒体类型
    • 不选则是应用all类型
  • 常见的媒体类型值如下
    • all：适用于所有设备
    • print：适用于在打印预览模式下在屏幕上查看的分页材料和文档
    • screen：主要用于屏幕
    • speech：主要用于语音合成器

媒体特性

  • 媒体特性描述了浏览器、输出设备，或是预览环境的具体特征
    • 通常会将媒体特性描述为一个表达式
    • 每条媒体特性表达式都必须用括号括起来
      ![[Pasted image 20240513231454.png]]

逻辑操作符

  • 媒体查询的表达式最终会获得一个Boolean值，真或者假
    • 结果为真，则生效
    • 结果为假，不会生效
  • 如果有多个条件，可以通过逻辑操作符联合复杂的媒体查询
    • and：and操作符用于将多个媒体查询规则组合成单条媒体查询
    • not：not运算符用于否定媒体查询，如果不满足这个条件则返回true，否则返回false
    • only：only运算符仅在整个查询匹配时才用于应用样式
    • ，(逗号)：
      ![[Pasted image 20240513232247.png]]