CSS语法规范
CSS规则由两个主要的部分构成：选择器以及一条或多条声明。
选择器 {
属性: 属性值; /*一条声明**/
属性: 属性值;
}
- 选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
- 属性和属性值以“键值对”的形式出现
- 属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
- 属性和属性值之间用英文
:分开 - 多个“键值对”之间用英文
;进行分开
选择器
选择器（选择符）就是根据不同需求把不同的标签选出来，这就是选择器的作用。简单来说，就是选择标签用的。
选择器分为基础选择器和复合选择器两个大类。基础选择器是由单个选择器组成的，包括标签选择器、类选择器、id选择器和通配符选择器。
1、标签选择器
标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。
作用：选择器可以把某一类标签全部选择出来，比如所有的
标签和所有的
标签。
优点：能快速为页面中同一类型的标签统一设置样式。
缺点：不能设计差异化样式，只能选择全部的当前标签。
优点：能快速为页面中同一类型的标签统一设置样式。
缺点：不能设计差异化样式，只能选择全部的当前标签。
2、类选择器
如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。
类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点.号显示
- 类选择器使用
.（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。 - 可以理解为给这个标签起了一个名字。
- 长名称或词组可以使用中横线来为选择器命名。
- 不要使用纯数字、中文等命名，尽量使用英文字母来表示。
- 命名要有意义，尽量使别人一眼就知道这个类名的目的。
类选择器-多类名
我们可以给一个标签指定多个类名，从而达到更多的选择目的。这些类名都可以先出这个标签，简单理解就是一个标签有多个名字。
- 多类名使用方式
<div class="box1 box2">Linda</div>。- 在标签class属性中写多个类名。
- 多个类名中间必须用空格分开。
- 这个标签就可以分别具有这些类名的样式。
- 多类名开发中使用场景。
- 可以把一些标签元素相同的样式（共同的部分）放到一个类里面。
- 这些标签都可以调用这个公共的类，然后再调用自己独有的类。
- 从而节省CSS代码，统一修改也非常方便。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签</title>
<style>
.red {
color: red;
font-size: 5vh;
}
.blue {
color: blue;
}
.box {
width: 100px;
height: 100px;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
</style>
</head>
<body>
<!-- 类选择器 -->
<ul>
<li class="red">琳达Linda</li>
<li class="blue">伊娃Eva</li>
<li>雅各布JaKob</li>
</ul>
<div class="red">托莱多Toretto</div>
<hr />
<!-- 类选择器-多类名 -->
<div class="box green"></div>
<div class="box yellow"></div>
<div class="box green"></div>
</body>
</html>
3、id选择器
id选择器以可以为标有特定id的HTML元素指定特定的样式。
HTML元素以id属性来设置id选择器，用#来定义。
#id名 {
属性1: 属性值1;
属性2: 属性值2;
}
例如，将id为nav元素中的内容设置为红色
#nav {
color: red;
}
id选择器和类选择器的区别
- 类选择器(class)好比人的名字，一个人可能有不同的昵称，同时一个昵称也可以被多个不同的人使用。
- id选择器好比人的身份证号码，是唯一的，不能重复。
- id选择器和类选择器最大的不同在于使用次数上。
- 类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用。
4、通配符选择器
在CSS中，通配符选择器使用*定义，它表示选取页面中所有元素（标签）。
通配符选择器不需要调用，自动就给所有的元素使用样式。
* {
属性1: 属性值1;
}
* {
margin: 0;
padding: 0;
}
复合选择器
复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。
- 复合选择器可以更准确。更高效的选择目标元素（标签）
- 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
- 常用的复合选择器包括：后代选择器、子选择器、并集选择器和伪类选择器等
1、后代选择器
后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
- 元素1和元素2中间必须用空格隔开
- 元素1是父级，元素二是子级，最终选择的是元素2
- 元素2可以是儿子，也可以是孙子，只要是元素1的后代即可
- 元素1和元素2可以是任意基础选择器
元素1 元素2 {
属性: 属性值;
}
/**上述语法表示选择元素1里面所有元素2（后代元素）*/
元素1 元素2 元素3.. {
属性: 属性值;
}
ul li {
color: pink;
/**ul中所有的li颜色设置为pink*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合选择器之后代选择器</title>
<style>
/* 把所有ol里面的li选出来，颜色改为pink */
ol li {
color: pink;
}
ol li a {
color: red;
text-decoration: none;
}
.second li a {
color: aqua;
text-decoration: none;
}
</style>
</head>
<body>
<ol>
变态写法
<li>我是ol的孩子1</li>
<li>我是ol的孩子2</li>
<li>我是ol的孩子3</li>
<li><a href="#">我会变化</a></li>
</ol>
<ul>
<li>我是ul的孩子1</li>
<li>我是ul的孩子2</li>
<li>我是ul的孩子3</li>
<li><a href="#">我不会变化</a></li>
</ul>
<ul class="second">
<li>我是第二组ul的孩子1</li>
<li>我是第二组ul的孩子2</li>
<li>我是第二组ul的孩子3</li>
<li><a href="#">我会变化</a></li>
<li><a href="#">我会变化</a></li>
<li><a href="#">我会变化</a></li>
</ul>
</body>
</html>
2、子元素选择器
子元素选择器（子选择器）只能选择作为某元素最近一级的子元素，简单理解就是选亲儿子元素。
- 元素1和元素2中间用大于号
>隔开 - 元素1是父级，元素2是子级，最终选择元素是元素2
- 元素2必须是亲儿子，其孙子、重孙子之类都不归他管，所以我也可以叫他亲儿子选择器
元素1>元素2 {
属性: 属性值;
}
/**上述语法表示选择器1里面所有的直接后代（子元素）元素2*/
div>p {
属性: 属性值;
}
/**选择div里面所有最近一级p标签元素*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后代选择器之子元素选择器</title>
<style>
.nav>a {
color: red;
text-decoration: none;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">我是亲儿子，我会变</a>
<p>
<a href="#">我是孙子，我不会变</a>
</p>
</div>
</body>
</html>
3、并集选择器
并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明。
并集选择器是各选择器通过英文逗号,连接而成，任何基础选择器和复合选择器都可以作为并集选择器的一部分。
- 元素1和元素2中间用逗号隔开
- 逗号可以理解为和的意思
- 并集选择器通常用于集体声明
元素1, 元素2 {
属性: 属性值;
}
/**上述语法表示选择元素1和元素2*/
div, ul {
color: red;
}
/**选择ul和div标签*/
4、伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个，第n个元素。
伪类选择器书写最大的特点是冒号:表示，比如:hover、:first:child。
伪类选择器有链接伪类和结构伪类等。
1、链接伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类选择器之链接伪类选择器</title>
<style>
/*链接伪类选择器必须严格按照:link、:visited、:hover、:active顺序来写，不需要的可以进行省略*/
/* 1.未访问的链接a:link，把没有点击（访问）过的链接选出来 */
a:link {
color: blue;
text-decoration: none;
}
/* 2. a:visited 选择点击（访问）过的链接 */
a:visited {
color: green;
}
/* 3. a:hover 选择鼠标经过的那个标签 */
a:hover {
color: yellow;
font-size: 3em;
}
/* 4. a:active 选择的是鼠标正在按下还没有弹起和那个链接 */
a:active {
color: red;
}
</style>
</head>
<body>
<a href="https://www.baidu.com">我要飞！我要飞！</a>
<hr>
<a href="https://www.bilibili.com">飞的更高</a>
<hr>
<a href="https://www.csdn.com">CSDN</a>
</body>
</html>
2、focus伪类选择器
:focus伪类选择器用于选取获得焦点的表单元素。焦点就是光标，一般情况类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合选择器之伪类选择器</title>
<style>
input:focus {
background-color: pink;
color: red;
}
</style>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">
</body>
</html>
Font（字体）
Fonts（字体）属性用于定义字体系统、大小、粗细和文字样式（如斜体）。
1、font-family
- 可以设置一个或多个字体，当设置多个字体时表示如果用户电脑未安装第一种字体，就执行第二种字体进行显示，以此类推。
- 各种字体之间必须使用英文状态下的逗号隔开。
- 一般情况下，如果有空格隔开的多个单词组成的字体要加引号。
- 尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示。
body {
font-family: 'Microsoft YaHei', tahoma, arial, 'Hiragino Sans GB';
}
2、font-size
- px（像素）大小是我们网页中最常用的单位。
- 谷歌浏览器默认的文字大小是16px。
- 不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小。
- 可以给body指定整个页面文字大小。
- 标题标签比较特殊，需要单独指定文字大小。
body {
font-size: 16px;
}
3、font-weight
CSS使用font-weight属性设置文本字体的粗细
.p {
font-weight: 400;
font-weight: normal;/* 默认值（不加粗的），等同于400 */
font-weight: 700;
font-weight: bold;/* 定义粗体 ，等同于700*/
/* font-weight更推荐使用数值，而不是normal或bold，并且使用数值不需要加任何单位，且取值范围为100-900 */
}
4、font-style
CSS使用font-style属性设置文本的风格。
.p {
font-style: normal;/* 默认值，浏览器会显示标准的字体 */
font-style: italic;/* 浏览器会显示斜体的字体样式 */
/* 平时我们很少给文字加斜体，所以这个方法反而成了给某些具有斜体效果的标签(em, i)改为不倾斜 */
}
5、字体复合属性
字体属性可以把以上文字样式综合来写，这样可以更节约代码。
body {
font-style: italic;
font-weight: 700;
font-size: 16px;
line-height: 20px;
font-family: 'Microsoft YaHei';
/* 上述代码可以使用以下代码达到相同效果 */
font: italic 700 16px/20px 'Microsoft YaHei';
/* font: font-style font-weight font-size/line-height font-family */
/* 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开。 */
/* 不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。 */
/* font: 20px 'Microsoft YaHei'=>font: font-size font-family */
}
文本属性
Text（文本）属性可以定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距。
1、文本颜色
color属性用于定义文本的颜色
| 类型 | 属性值 |
|---|---|
| 预定义的颜色值 | red,green,blue等；编写代码时测试常用 |
| 十六进制 | #FF0000,#FF6600,#29D794；开发上线最常用 |
| RGB代码 | rgb(255,0,0)或rgb(100%,0%,0%) |
div {
color: red;
}
2、对齐文本
text-align属性用于设置元素内文本内容水平对齐方式。
| 属性值 | 解释 |
|---|---|
| left | 左对齐（默认值） |
| righf | 右对齐 |
| center | 居中对齐 |
h1 {
text-align: center;/**本质是让h1盒子里面的文字水平居中对齐*/
}
3、装饰文本
text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线和上划线。
| 属性值 | 描述 |
|---|---|
| none | 没有装饰线，默认值，可以用此属性去掉文本的下划线，如a标签 |
| underline | 下划线，常用，a标签自带下划线 |
| overline | 上划线 |
| line-through | 删除线 |
4、文本缩进
text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。
div {
text-indent: 10px;
}
p {
text-indent: 2em;
/**em是一个相对单位，就是当前元素(font-size)1个文字的大小，如果当前元素没有设置大小，则会按照父元素的一个文字大小*/
}
5、行间距
line-height属性用于设置行间的距离（行高）。可以控制文字与行之间的距离。
行间距=上间距+文本高度+下间距，上间距=下间距，当我们设置行间距时，实际上是在控制上间距和下间距的大小。
p {
line-height: 26px;
}
CSS引入方式
按照CSS样式书写的位置（或者引入的方式），CSS样式表可以分为三大类：行内样式表（行内式）、内部样式表（嵌入式）和外部样式表（链接式）。
1、内部样式表
内部样式表（内嵌样式表）是写到HTML页面内部，将所有CSS代码抽取出来，单独放到一个
<style>标签理论上可以放在HTML文档中的任何地方，但一般会放在文档的标签中。- 通过此种方式，可以方便控制当前整个页面中的元素样式设置
- 代码结构清晰，但是并没有实现结构与样式完全分离
- 使用内部样式表设定CSS，通常也被称为嵌入式引入，这种方式是我们练习时常用的方式
<style>
div {
color: red;
font-size: 12px;
}
</style>
2、行内样式表
行内样式表（内联样式表）是在元素标签内部的style属性中设定CSS样式，适合于修改简单样式。
- style其实就是标签的属性
- 在双引号中间，写法要符合CSS规范
- 可以控制当前的标签设置样式
- 由于书写繁琐，并且没有体现结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候考虑使用
- 使用行内样式表设定CSS，通常也被称为行内式引入
<p style="color: pink; font-size: 20px;">给我一个粉红的回忆</p>
3、外部样式表
实际开发都是外部样式表，适合于样式比较多的情况。核心是样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。
引入外部样式表分为两步：
- 新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中。
- 在HTML页面中，使用标签引入这个。
<link rel="stylesheet" href="css文件路径">
| 属性 | 作用 |
|---|---|
| rel | 定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件 |
| href | 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径 |
使用外部样式表设定CSS，通常也被称为外链式或链接式引入，这种方式是开发常用的方式。
4、CSS引入方式总结
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 结构样式混写 | 较少 | 控制一个标签 |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面 |
| 外联样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多 | 控制多个页面 |
综合案例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS第一天综合案例</title>
<style>
body {
font-size: 16px;
line-height: 28px;
font-family: 'Microsoft YaHei';
}
h1 {
font-weight: 400;
text-align: center;
}
.gray {
color: #888;
font-size: 12px;
text-align: center;
}
a {
text-decoration: none;
}
.search {
color: #666;
width: 170px;
}
.btn {
font-weight: 700;
}
p {
text-indent: 2em;
}
.pic {
/* 想要图片居中对齐，则是让它的父亲p标签添加水平居中代码 */
text-align: center;
}
.footer {
color: #888;
font-size: 12px;
text-align: right;
}
</style>
</head>
<body>
<h1>神舟十六号完成载人任务 中国航天技术恐追上美国?</h1>
<div class="gray">2023-06-03 15:45:30 来源：<a href="#">google新闻 </a>
<input type="text" value="请输入查询条件" class="search">
<button class="btn">搜索</button>
</div>
<hr>
<p>台北 — 中国成功发射神舟十六号载人飞船后，三名宇航员6月2日已在天宫空间站与前一期的宇航员正式完成交接。
观察人士表示，这代表中国的载人航天技术已取得稳步进展，有助于中共进一步宣扬国力和巩固其政权的合法性。
分析人士说，美国虽仍在太空领域保有技术领先和经验优势，但若未持续将航太发展视为优先政策，未来恐被中国追上。
</p>
<h4>专家：中国载人航天工程稳步进展</h4>
<p class="pic">
<img src="https://gdb.voanews.com/01000000-0aff-0242-db40-08db606c7481_cx0_cy7_cw0_w1023_r1_s.jpg" alt="中国">
</p>
<p>
据官媒央视5月31日引述中国载人航天工程办公室主任助理季启明的话称，去年底建造完成的空间站将进入为期10年以上的
应用与发展阶段，未来将透过每年两个乘组的轮换，来保持空间站的稳定运行，并实现航天员长期在轨工作和生活。
</p>
<p>
焦立中告诉美国之音：“他们(中国)在这20年里取得了长足进步，现在自行运转一个太空站，不仅展現操作成熟度，也能
在太空站维持宇航员长期在轨工作，(中国)宇航员也有太空漫步的能力。现在，他们还首度将一位科学家宇航员送上太空站，
他们的进展可谓稳步。”
</p>
<h4>中国拚2030载人登月 专家：指日可待</h4>
<p>
中国载人航天工程办公室副主任林西强5月29日宣布，中国计划在2030年前完成载人登月任务。据该办公室主任助理季启明
解释，为了于2030年前实现中国航天员登陆月球的计划，中国未来7年将分三步走，包括第一阶段的建制任务，如完成新一代
的载人火箭和飞船等；第二阶段则要进入无人飞行的验证阶段，以便实现最后阶段的载人登月飞行任务。
</p>
<p>对应中国雄心勃勃的计划，美国国家航空航天局(NASA)、欧洲太空总署（ESA）、日本宇宙航空研究开发机构（JAXA）和加拿大太
空总署（CSA）合作推动“阿耳忒弥斯(探月火箭)计划(Artemis)”，依据已公布的时间表，该计划最快将于明年开展载人绕月飞行
任务，并争取在2025年实现载人登月，可能比中国早了5年。
</p>
<p class="footer">
本文来源：google新闻 责任编辑：李贤
</p>
</body>
</html>
Emmet语法
Emmet语法有前身是Zen coding，它使用缩写来提高HTML和CSS的编写速度，VS Code内部已经集成该语法。
- 快速生成HTML结构语法
- 快速生成CSS样式语法
快速生成HTML结构语法
- 快速生成整个HTML文件基本结构，输入
!按tab键就可以 - 生成标签直接输入标签名按tab键即可，比如div然后按tab键就可以生成
<div></div> - 如果想要生成多个相同标签加上
*就可以了，比如div*3可以快速生成3个div - 如果有父子级关系的标签，可以用
>，比如ul>li*2可以生成<ul><li></li><li></li></ul>，也可以div>span生成` - 如果有兄弟关系的标签，用
+就可以了，比如div+p可以生成<div></div><p></p>，也可以div*2+p*3生成<div></div><div></div><p></p><p></p><p></p> - 如果生成带有类名或者id的标签，直接写.demo或者#two，这样默认是生成
div标签，可以生成<div class="demo"></div> <div id="two"></div>，如果要生成其它的标签需要加上对应的标签名进行约束如p.demo或者p#two生成的就是和 - 如果生成的div类名是有顺序的，可以用自增符号
$，比如p.demo$*3可以生成<p class="dmeo1"></p><p class="demo2"></p><p class="demo3"></p> - 如果想要在生成的标签内部写内容可以用
{}表示，例如div{Emmet语法真好用}可以生成<div>Emmet语法真好用</div>
快速生成CSS样式语法
CSS基本采取简写形式即可
- 比如
w200按tab可以生成width: 200px;，w2em可以生成width: 2em; - 比如
lh26px按tab可以生成line-height: 26px; - 比如
tac按tab可以生成text-align: center; - 诸如以上缩写，自己平时写代码时都可以经常去试，并且记住
VS Code保存时自动格式化代码
在VS Code页面中，点击左下角齿轮图标（管理），点击设置，点击展开文本编辑器，点击格式化，找到Format OnSave，将前面方框打勾就行，这样在每次ctrl+s保存时都会自动格式化代码。
元素显示模式
元素显示模式分为行内元素、块元素和行内块元素。
1、行内元素
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点：
- 相邻行内元素在一行上，一行可以显示多个。
- 高、宽直接设置是无效的。
- 默认宽度是本身内容的宽度。
- 行内元素只能容纳文本或其它行内元素。
注意：
- 链接里面不能再放链接。
- 特殊情况链接
<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全。
2、块元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
块级元素的特点：
- 自己独占一行。
- 高度、宽度、外边距和内边距都可以控制。
- 宽度默认是容器（父级宽度）的100%。
- 是一个容器及盒子，里面可以放行内或块级元素。
注意：
- 文字类的元素内不能使用块级元素。
<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>。- 同理，
<h1>~<h6>等都是文字类块级标签，里面也不能放其它块级元素。
3、行内块元素
在行内元素中有几个特殊的标签<img/>、<input/>、<td>，它们同时具有块元素和行内元素的特点，称为行内块元素。
特点：
- 和相邻行内元素（行内块）在一行上，但是它们之间会有空白缝隙，一行可以显示多个（行内元素特点）。
- 默认宽度就是它本身内容的宽度（行内元素特点）。
- 高度、宽度、外边距和内边距都可以控制（块级元素特点）。
4、元素显示模式转换
特殊情况下，我们需要对元素模式进行转换，简单理解为，一个模式需要另外一种模式的特性。
/**转换为块元素*/
span {
display: block;
}
/**转换为行内元素*/
div {
display: inline;
}
/**转换为行内块元素*/
p {
display: inline-block;
}
小米侧边栏案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单版小米侧边栏</title>
<style>
a {
display: block;
text-decoration: none;
background-color: #9c9b9c;
width: 230px;
height: 40px;
line-height: 40px;
font-size: 14px;
color: #e5e4e5;
text-indent: 2em;
/* 在上述样式中若不添加line-height: 40px;，那么容器中的文字会偏上，而当设置了文字行高line-height等于盒子
的高度height，文字就会垂直居中对齐。这是因为行高是由上边距、文字本身高度和下边距(上边距等于下边距)共同构成的，
整个行高又存放在块元素的盒子内，当行高等于盒子高度时，行高中的文字就会垂直居中对齐。当行高小于盒子高度时，
文字会偏上；如果行高大于盒子高度，文字会偏下。 */
}
a:hover {
background: #ff6700;
}
</style>
</head>
<body>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">健康 儿童</a>
<a href="#">耳机 音响</a>
</body>
</html>
CSS背景
通过CSS背景属性，可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置和背景图像固定等。
1、背景颜色
background-color属性定义了元素的背景颜色。
background-color: transparent（默认值） | color（自定义颜色）
所以有时我们写一个<div>在设置了高度和宽度的情况下看不到效果就是因为这个<div>的background-color属性值默认是透明的，要设置颜色才能看到。
2、背景图片
background-image属性描述了元素的背景图像，实际开发常见于Logo或者一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置（精灵图也是一种运用场景）。
background-image: none（默认值） | url()（自定义图片路径，绝对或相对路径）
3、背景平铺
如果需要在HTML页面上对背景图片进行平铺，可以使用background-repeat属性。
background-repeat: repeat | no-repeat | repeat-x | repeat-y
| 参数值 | 作用 |
|---|---|
| repeat | 背景图片在纵向和横向上均平铺（默认） |
| no-repeat | 背景图片不平铺 |
| repeat-x | 背景图片在横向上平铺 |
| repeat-y | 背景图片在纵向上平铺 |
页面元素既可以添加背景颜色也可以添加背景图片，只不过图片会压住背景颜色。
4、背景图片位置
利用background-position属性可以改变图片在背景中的位置。
background-position: x y;
参数代表的意思是：x坐标和y坐标。可以使用方位名词或者精确单位。
| 参数值 | 说明 |
|---|---|
| length | 百分数 | 由浮点数字和单位标识符组成的长度值 |
| position | top | center| bottom | left | right 方位名词 |
1、参数是方位名词
- 如果指定的两个值是方位名词，则两个值前后顺序无关，比如left top和top left效果一致。
- 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景位置-方位名词</title>
<style>
div {
width: 300px;
height: 300px;
background-color: rgb(0, 195, 255);
background-image: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png);
background-repeat: no-repeat;
/* background-position: 方位名词; */
/* 下面两效果相同，这是因为水平方向只有左右，没有上下，当写了一个left或right后，另一个就会被解析为垂直方向 */
/* background-position: center top; */
/* background-position: top center; */
/* background-position: right center; */
/* 只写一个，另一个默认是居中对齐 */
/* background-position: right; */
background-position: top;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2、参数是精确单位
- 如果参数值是精确单位，那么第一个是x坐标，第二个是y坐标。
- 如果只指定一个数值，那该数值是x坐标，另一个y坐标默认垂直居中。
background-position: 20px 50px;
3、混合单位
如果指定的两个值是方位名词和精确单位混合使用，则第一个值是x坐标，第二个值是y坐标。
background-position: center 40px;
5、背景图片固定（背景附着）
background-attachment属性设置背景图像是否固定或者随着页面的其余部分一起滚动。
background-attachment后期可以制作视差滚动的效果。
background-attachment: scroll | fixed;
| 参数 | 作用 |
|---|---|
| scroll | 背景图像是随着对象内容滚动（默认值） |
| fixed | 背景图像固定 |
6、背景复合写法
为了简化背景属性的代码，我们可以将这些属性合并简写在一个属性background中，从而节约代码量。
当使用简写属性时，没有特定的书写顺序，中间用空格隔开，一般习惯约定顺序为：
background：背景颜色 背景图片地址 背景平铺 背景图片滚动 背景图片位置;
background: transparent url(image.jpg) repeat-y fixed top center;
这是实际开发中，我们更提倡的写法。
7、背景色半透明
CSS3为我们提供了背景颜色半透明的效果。
background: rgba(0, 0, 0, 0.3)
background: rgba(0, 0, 0, .3)
- 最后一个参数是alpha透明度，取值范围在0~1之间。
- 我们习惯反0.3的0省略掉，写为.3。
- 背景半透明是指盒子背景半透明，盒子里面的内容不受影响。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景色半透明</title>
<style>
div {
width: 300px;
height: 300px;
font-size: 50px;
color: aquamarine;
text-align: center;
background: rgba(0, 0, 0, 0.6) url(https://game.gtimg.cn/images/yxzj/coming/v2/skins//image/20230602/16856950163279.jpg);
}
</style>
</head>
<body>
<div>琳达Linda</div>
</body>
</html>
综合案例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五彩导航</title>
<style>
.nav a {
display: inline-block;
text-decoration: none;
width: 624px;
height: 341px;
line-height: 341px;
font-size: 60px;
font-weight: 700;
text-align: center;
}
.nav .bg1 {
background-image: url(https://i0.hdslb.com/bfs/banner/dbac3feaf8130557aeab460ed32af0e3dfe74e81.jpg@976w_550h_1c_!web-home-carousel-cover.avif);
}
.nav .bg1:hover {
background-image: url(https://i0.hdslb.com/bfs/banner/e5c84952c3abffa8f1f33be01d069c02eb6f0426.png@976w_550h_1c_!web-home-carousel-cover.avif);
}
.nav .bg2 {
background-image: url(https://i0.hdslb.com/bfs/banner/65fa286a5fa1460950613cb84be5fa2b70c97873.png@976w_550h_1c_!web-home-carousel-cover.avif);
}
.nav .bg2:hover {
background-image: url(https://i0.hdslb.com/bfs/banner/e5c84952c3abffa8f1f33be01d069c02eb6f0426.png@976w_550h_1c_!web-home-carousel-cover.avif);
}
.nav .bg3 {
background-image: url(https://i0.hdslb.com/bfs/banner/fa6e5fafc0bb3f57232639c39465a93083463e2d.jpg@976w_550h_1c_!web-home-carousel-cover.avif);
}
.nav .bg3:hover {
background-image: url(https://i0.hdslb.com/bfs/banner/e5c84952c3abffa8f1f33be01d069c02eb6f0426.png@976w_550h_1c_!web-home-carousel-cover.avif);
}
.nav .bg4 {
background-image: url(https://i0.hdslb.com/bfs/banner/3f6e27ddf0f1709883c20133f48bda55500bc696.png@976w_550h_1c_!web-home-carousel-cover.avif);
}
.nav .bg4:hover {
background-image: url(https://i0.hdslb.com/bfs/banner/e5c84952c3abffa8f1f33be01d069c02eb6f0426.png@976w_550h_1c_!web-home-carousel-cover.avif);
}
</style>
</head>
<body>
<div class="nav">
<a href="https://www.baidu.com" class="bg1">五彩导航</a>
<a href="https://www.baidu.com" class="bg2">五彩导航</a>
<a href="https://www.baidu.com" class="bg3">五彩导航</a>
<a href="https://www.baidu.com" class="bg4">五彩导航</a>
</div>
</body>
</html>
CSS三大特性
CSS有三个非常重要的特性：层叠性、继承性和优先级。
1、层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。层叠性主要解决样式冲突的问题。
层叠性原则：
- 样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式。
- 样式不冲突，不会层叠。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS三大特性之层叠性</title>
<style>
div {
color: red;
font-size: 20px;
}
div {
color: pink;
}
</style>
</head>
<body>
<div>
<p>长江后浪推前浪，前浪死在沙滩上</p>
</div>
</body>
</html>
2、继承性
子标签会继承父标签的某些样式，如文本颜色和字号，并不是全部都会继承。
- 恰当地使用继承可以简化代码，降低CSS样式的复杂性。
- 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）
- 例子见上面层叠性代码。
文本的行高也具有继承性，相关示例如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS三大特性之继承性</title>
<style>
body {
color: pink;
/* font: 12px/24px 'Microsoft YaHei'; */
font: 12px/1.5 'Microsoft YaHei';
}
div {
/* 子元素继承了父元素body的行高1.5 */
/* 这个1.5就是当前元素文字大小font-size的1.5倍，即div的行高是14*1.5=21px */
font-style: 14px;
}
p {
/* p的行高是24px */
font-size: 16px;
}
/* li没有手动指定文字大小，则会继承父亲的文字大小，body的font-size是12px，所以li的文字大小为12px，行高是18px */
</style>
</head>
<body>
<div>
长江后浪推前浪，前浪死在沙滩上
</div>
<p>长江后浪推前浪，前浪死在沙滩上</p>
<ul>
<li>我没胡指定文字大小</li>
</ul>
</body>
</html>
3、优先级
当同一个元素指定多个选择器，就会有优先级的产生。
- 选择器相同，则执行层叠性。
- 选择器不同，则根据选择器权重执行。
| 选择器 | 选择器权重 |
|---|---|
| 继承或者* | 0.0.0.0 |
| 元素选择器 | 0.0.0.1 |
| 类选择器、伪类选择器 | 0.0.1.0 |
| ID选择器 | 0.1.0.0 |
| 行内样式style=“” | 1.0.0.0 |
| !important重要的 | 无穷大 |
注意点：
- 权重是由4组数字组成，但是不会进位。
- 可以理解为类选择器永远大于元素选择器，ID选择器永远大于类选择器，以此类推。
- 等级判断从左向右，如果某一位数值相同，则判断下一位数值。
- 继承的权重是0，如果该元素没有直接选选中，不管父元素权重多高，子元素得到的权重都是0。
权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。
- div ul li ----> 0,0,0,3
- .nav ul li ----> 0,0,1,2
- a:hover ----> 0,0,1,1
- .nav a ----> 0,0,1,1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS三大特性之优先级</title>
<style>
div {
color: pink !important;
}
.test {
color: red;
}
#demo {
color: green;
}
#father {
color: red !important;
}
/* p继承的权重为0 */
p {
color: pink;
}
body {
color: red;
}
/* a链接浏览器默认制定了一个样式，蓝色的，有下划线，所以在body中虽然设置了color: red;但是a链接并不会变红 */
a {
color: green;
text-decoration: none;
}
/* li的权重是0,0,0,1 */
li {
color: red;
}
/* 复合选择器会有权重叠加的问题 */
/* ul li 的权重是 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */
/* 权重虽然有叠加，但不会进位，哪怕叠加了10个，也只会是0,0,0,10，不会变成0,0,1,0或别的啥 */
ul li {
color: green;
}
/* .nav li 的权重是 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
.nav li {
color: pink;
}
</style>
</head>
<body>
<div class="test" id="demo" style="color: purple">
你啸起来真好看
</div>
<div id="father">
<p>你还是很好看</p>
</div>
<a href="#">我是单独的样式</a>
<ul class="nav">
<li>大猪蹄子</li>
<li>大肘子</li>
<li>猪尾巴</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>权重练习</title>
<style>
.nav {
color: red;
}
/* 继承的权重是0 */
li {
color: pink;
}
/* 需要：把第一个小li颜色改为粉色加粗 */
/* .nav li 的权重是 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */
.nav li {
color: green;
}
/* .nav .pink 的权重是 0,0,1,0 + 0,0,1,0 = 0,0,2,0 */
.nav .pink {
color: pink;
font-weight: 700;
}
</style>
</head>
<body>
<ul class="nav">
<li class="pink">人生四大悲</li>
<li>家里没宽带</li>
<li>网速不够快</li>
<li>手机没流量</li>
<li>学校没wifi</li>
</ul>
</body>
</html>
盒子模型
所谓盒子模型(Box Model)：就是把HTML页面中的布局看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS盒子模型包括边框(border)、内容(content)、外边距(margin)和内边距(padding)。
1、边框(border)
border可以设置元素的边框，边框有三部分组成：边框宽度(border-width)、边框样式(border-style)和边框颜色(border-color)。
| 属性 | 作用 |
|---|---|
| border-width | 定义边框粗细，一般用px |
| border-style | 边框的样式，solid实线边框、dashed虚线边框、dotted点线边框 |
| border-color | 边框颜色 |
边框三个属性可以简写在一条语句中：border: 1px solid red;没有固定的顺序，不过大多数人使用这种顺序。
边框分为上下左右四个边框，我们也可以单独定义一条边框
- 只设定上边框：
border-top: 1px solid red - 只设定下边框：
border-bottom: 1px solid red - 只设定左边框：
border-left: 1px solid red - 只设定右边框：
border-right: 1px solid red
边框会额外增加盒子的实际大小，比方说我们给盒子的宽高均设置为180px，然后设置了边框粗细boeder-width: 10px;那么最后整个盒子的大小会是宽高均为200px。如何保证盒子跟效果图大小保持一致，有两种解决方案：
- 测量盒子大小的时候，不量边框。
- 如果测量的时候包含了边框，则需要width/height减去边框宽度。
表格的细线边框
border-collapse属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框。
table {
border-collapse: collapse;
}
/**这样设置后，表格内相邻边框会合并在一起，不这样设置表格中每个单元格边框重叠在一起的部分会显得很粗*/
/**border-collapse: separate;separate是默认值，表示每个单元格的边框会单独显示，相邻单元格的边框不会合并。这是默认的表格边框行为。*/
2、内边距
padding属性用于设置内边距，即边框与内容之间的距离。
| 属性 | 作用 |
|---|---|
| padding-top | 上内边距 |
| padding-right | 右内边距 |
| padding-bottom | 下内边距 |
| padding-left | 左内边距 |
padding属性可以进行简写
| 值的个数 | 表达意思 |
|---|---|
| padding: 5px; | 1个值，代表上右下左都有5px内边距 |
| padding: 5px 10px; | 2个值，代表上下内边距是5px，左右内边距是10px |
| padding: 5px 10px 20px; | 3个值，代表上内边距5px，左右内边距10px，下内边距20px |
| padding: 5px 10px 20px 30px; | 4个值，上5px，右10px，下20px，左30px，顺时针 |
这四个简写都经常使用，但是记忆起来有点困难，可以这么记忆，无论写了几个值都是按照上右下左的顺时针顺序来的，如果没有定义某一边，则未定义的一边取对边的值。以上方表格为例，只写一个的时候四个方位值相同不必说，当写两个值时，其实只定义了上内边距为5px和右内边距为10px，下内边距和左内边距未定义，所以取对边值，即下内边距等于上内边距为5px，左内边距等于右内边距为10px。当写了三个值时，其实只定义了上内边距为5px，右边距为10px，下内边距为20px，左内边距未定义，所以取对边值，即左内边距等于右内边距为10px。四个值全写时，按照上右下左顺时针顺序进行赋值。
内边距也会影响盒子的实际大小，也就是说，如果盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子。如何保证盒子跟效果图大小保持一致，让盒子的width/height减去多出来的内边距大小即可。
如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新浪导航栏</title>
<style>
div {
background-color: #fcfcfc;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
height: 41px;
color: #4c4c4c;
line-height: 41px;
}
a:link {
display: inline-block;
font-size: 12px;
padding: 0 20px;
text-decoration: none;
}
a:hover {
color: #ff8500;
background-color: #eee;
}
</style>
</head>
<body>
<div>
<a href="#">Brian</a>
<a href="#">Eva</a>
<a href="#">Jakob</a>
<a href="#">Ramsey</a>
<a href="#">Roman</a>
</div>
</body>
</html>
3、外边距
margin属性用于设置外边距，即控制盒子和盒子之间的距离。
| 属性 | 作用 |
|---|---|
| margin-top | 上外边距 |
| margin-right | 右外边距 |
| margin-bottom | 下外边距 |
| margin-left | 左外边距 |
margin简写方式和padding完全一致，这里不再赘述。
外边距可以让块级盒子水平居中，但是必须满足两个条件：
- 盒子必须指定了宽度(width)。
- 盒子左右的外边距都设置为auto。
上面是让块级元素水平居中，不能用于行内元素和行内块元素，行内元素和行内块元素要实现水平居中给其父元素添加text-align: center;即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>块元素、行内元素和行内块元素水平居中对齐</title>
<style>
.foo {
width: 300px;
height: 200px;
background-color: red;
margin: 100px auto;
text-align: center;
}
.bar {
width: 300px;
height: 200px;
background-color: skyblue;
margin: 100px auto;
text-align: center;
}
img {
width: 160px;
height: 90px;
}
</style>
</head>
<body>
<div class="foo">
<span>我要实现水平居中对齐</span>
</div>
<div class="bar">
<img src="https://w.wallhaven.cc/full/kx/wallhaven-kxkgqq.png" alt="图片">
</div>
</body>
</html>
4、外边距合并
当使用margin定义块元素的垂直外边距时，可能会出现外边距的合并问题。
1、相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则它们之间的垂直距离不是margin-top和matgin-bottom的和，而是取两者中较大的那一个，这种现象被称为相邻块元素垂直外边距的合并。解决方案就是当两个块元素需要相隔时，只给其中一个盒子添加margin值。
2、嵌套块元素垂直外边距的塌陷
对于两个嵌套关系（父子关系）的块元素，例如一个div内部还有一个div，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案：
- 可以为父元素定义上边框。
- 可以为父元素定义上内边距。
- 可以为父元素添加overflow: hidden;
其实还有其它方法，比如浮动、固定。绝对定位的盒子不会有塌陷问题，后面咱们再总结。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>嵌套块元素塌陷问题及部分解决方案</title>
<style>
.foo {
width: 400px;
height: 400px;
background-color: red;
margin-top: 20px;
/* border-top: 1px solid transparent; */
/* padding-top: 1px; */
/* overflow: hidden; */
/* 上面三种方案均可以解决塌陷问题，最推荐overflow: hidden;方法 */
}
.bar {
width: 200px;
height: 200px;
background: blue;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="foo">
<div class="bar">
</div>
</div>
</body>
</html>
5、清除内外边距
网页元素很多都带有默认的内外边距，而且不同的浏览器默认的也不一样，所以我们在进行网页布局时，需要先清除一网页元素默认的内外边距。
* {
padding: 0;/**清除内边距*/
margin: 0;/**清除外边距*/
}
行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，因为行内元素的高度是由内容撑开的，设置上下内外边距并无效果，不过将其转换主块级元素或行内块元素就可以。
综合案例3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>产品模块</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #f5f5f5;
}
a {
color: #333;
text-decoration: none;
}
.box {
width: 300px;
height: 415px;
margin: 100px auto;
background-color: #fff;
}
img {
width: 100%;
}
.preview {
height: 70px;
font-size: 14px;
padding: 0 28px;
}
.appraise {
color: #b0b0b0;
font-size: 12px;
padding: 0 28px;
}
.info {
font-size: 14px;
padding: 0 28px;
}
.info h4 {
display: inline-block;
}
.info em {
font-style: normal;
color: #ebe4e0;
margin: 0 6px 0 15px;
}
.info span {
color: #ff6700;
}
</style>
</head>
<body>
<div class="box">
<a href="#"><img
src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/11570d5371f16d2d9b19f504e09d01f0.jpg?thumb=1&w=250&h=250&f=webp&q=90"
alt="Redmi Buds 3"></a>
<p class="preview"><a href="#">快递牛，整体不错，蓝牙可以说秒连，红米就是给力奥</a></p>
<div class="appraise">
来自于 117384232的评价
</div>
<div class="info">
<h4><a href="#">Redmi Buds 3</a></h4>
<em>|</em>
<span>149元</span>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>快报模块</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
background-color: #f5f5f5;
}
.bar {
width: 248px;
height: 163px;
background-color: #fff;
margin: 50px auto;
border: 1px solid #ccc;
}
.bar h3 {
height: 32px;
border-bottom: 1px dotted #ccc;
font-size: 14px;
font-weight: 40;
line-height: 32px;
padding-left: 15px;
}
.info ul li {
/* 去掉li前面的小圆圈 */
list-style: none;
height: 23px;
line-height: 23px;
padding-left: 20px;
}
.info ul {
margin-top: 7px;
}
.info ul li a {
text-decoration: none;
font-size: 12px;
color: #666;
}
.info ul li a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="bar">
<h3>品优购快报</h3>
<div class="info">
<ul>
<!-- shift + alt按住不放可以跨行选择多个，比方下面5个href="#"，一个个输入太麻烦，
这时可以同时按shift + alt用鼠标左键同时选中5个，然后输入一个#即可。5个特惠也可以用相同的方法实现
快速插入，不过5个特惠是要排成一排的
【特惠】爆款耳机5折秒！
【特惠】爆款耳机5折秒！
【特惠】爆款耳机5折秒！
【特惠】爆款耳机5折秒！
【特惠】爆款耳机5折秒！ -->
<li> <a href="#">【特惠】爆款耳机5折秒！</a></li>
<li> <a href="#">【特惠】母亲节，健康好礼低至5折！</a></li>
<li> <a href="#">【特惠】爆款耳机5折秒！</a></li>
<li> <a href="#">【特惠】9.9元洗100张照片！</a></li>
<li> <a href="#">【特惠】长虹智能空调立省1000！</a></li>
</ul>
</div>
</div>
</body>
</html>
6、圆角边框
在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。
border-radius属性用于设置元素的外边框圆角。
border-radius: length;
radius是半径的意思，即用一个半径为length的圆与边框的交集形成圆角效果。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VFogHaOn-1686150497050)(C:\Users\LE\Desktop\圆角边框.png)]
- 参数值可以为数值或百分比的形式：10px、50%。
- 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%。
- 如果是矩形，设置为高度的一半就可以实现圆角矩形效果。
- 只写一个值其实是简写，四个角效果一样。可以跟两个值或四个值，两个值分别代表左上角和右下角、右上角和左下角。四个值分另代表左上角、右上角、右下角、左下角。理解记忆可以类比padding和margin，从左上角开始顺时针赋值，当只有两个值时，其实只赋值给了左上角和右上角。右下角没有赋值，所以取对角值，即左上角值。左下角也没赋值，取对角值，即右上角值。
- 左上角：border-top-left-radius、右上角：border-top-right-radius、右下角：border-bottom-right-radius、左下角：border-bottom-left-radius。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>圆角边框的使用</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: aqua;
/* 下面两种方法都可以，更推荐百分比写法 */
/* border-radius: 100px; */
border-radius: 50%;
}
.bar {
width: 400px;
height: 200px;
background-color: pink;
border-radius: 100px;
}
.foo {
width: 200px;
height: 200px;
background-color: #ffc94c;
border-radius: 50px 100px;
}
.mia {
width: 200px;
height: 200px;
background-color: #100102;
border-radius: 20px 40px 60px 80px;
}
</style>
</head>
<body>
1、圆形的实现
<div class="box"></div>
2、圆角矩形的实现
<div class="bar"></div>
3、两个值设置不同的圆角
<div class="foo"></div>
4、四个值设置不同的圆角
<div class="mia"></div>
</body>
</html>
7、盒子阴影
CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影，下面属性的顺序是固定的。
box-shadow: h-shadow v-shadow blur spread color inset;
| 值 | 描述 |
|---|---|
| h-shadow | 必需，水平阴影的位置，允许负值。 |
| v-shadow | 必需，垂直阴影的位置，允许负值。 |
| blur | 可选，阴影的模糊程度，数值越大越模糊。 |
| spread | 可选，阴影的大小。 |
| color | 可选，阴影的颜色，多使用rgba()模式。 |
| inset | 可选，将外部阴影(outset)改为内部阴影，outset为默认值，但是不使用外部阴影时，outset这个值不需要自己写，写上反而会使得整个属性全部失效，只有在需要设置为内部阴影时填写为inset。 |
8、文本阴影
在CSS3中，我们可以使用text-shadow属性为文本属性添加阴影，下面属性的顺序是固定的。
text-shadow: h-shadow v-shadow blur color;
| 值 | 描述 |
|---|---|
| h-shadow | 必需，水平阴影的位置，允许负值。 |
| v-shadow | 必需，垂直阴影的位置，允许负值。 |
| blur | 可选，阴影的模糊程度，数值越大越模糊。 |
| color | 可选，阴影的颜色，多使用rgba()模式。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒子阴影和文本阴影的使用</title>
<style>
.foo {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
}
.foo:hover {
box-shadow: 10px 10px 10px 3px rgba(0, 0, 0, .3);
}
.bar {
font-size: 68px;
text-align: center;
color: tomato;
text-shadow: 5px 5px 5px rgba(0, 0, 0, .3);
}
</style>
</head>
<body>
<div class="foo"></div>
<div class="bar">
你是阴影、我是火影
</div>
</body>
</html>
浮动
网页布局的本质——用CSS来摆放盒子，把盒子摆放到相应位置。
CSS提供了三种传统布局方式，即传统网页布局的三种方式：普通流（标准流、文档流）、浮动、定位。
标准流
所谓标准流，就是标签按照规定好默认的方式进行排列。
- 块级元素会独占一行，从上向下顺序排列。常用块元素：div、hr、p、h1~h6、ul、ol、dl、form和table.
- 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行，常用行内元素：span、a、i、em等。
之前所学到的未特别指定的，都是标准流，标准流是最基本的布局方式。
上面提到的三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了。
实际开发中，一个页面基本都包含了上面提到的三种布局方式（后面移动端学习新的布局方式）
有很多的布局效果，标准流没有办法完成，此时就需要使用浮动来完成布局，因为浮动可以改变元素标签的默认排列方式。浮动最典型的应用就是让多个块级元素在一行内排列显示。或许这时你会想到之前不是学过display: inline-block;吗?可以将块元素转成行内块元素呀，也能实现让多个块级元素在一行内排列显示。其实这在某些情况确实可以满足相应的需求，但是我们当时学习行内块元素时就有提到，行内块元素虽然在一行内排列，但是每个元素并不是紧挨着的，而是默认会空出一段距离的，那当我们不希望留白的时候这个方法就不能用了。又或者我有两个div想在一行内排列显示，且第一个想要在最左边，第二个想要在最右边，这种需求使用行内块元素实现也很不方便。而使用浮动却很容易，诸如此类的情况还有很多，因此大多数情况下浮动就成了最优解。
浮动的特性
设置了浮动(float)的元素最重要特性：
- 脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标）。
- 浮动的盒子不再保留原先的位置，下面未浮动即标准流的下一个盒子会顶上来，浮动的盒子漂浮在普通流的上面，即顶上来的盒子的上面，会出现覆盖的现象。
- 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列，浮动的元素是互相紧贴在一起的，不会有缝隙，如果父级宽度半装不下这些浮动的盒子，多出 的盒子会另起一行对齐显示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动</title>
<style>
.foo,
.bar {
width: 200px;
height: 200px;
background-color: pink;
float: left;
text-align: center;
}
.bar {
/* CSS的层叠性 */
float: right;
}
.mia {
width: 300px;
height: 300px;
background-color: red;
}
.dom,
.brian,
.roman,
.tej {
float: left;
width: 300px;
height: 300px;
background-color: skyblue;
text-align: center;
}
.cipher {
float: left;
width: 400px;
height: 400px;
background-color: gray;
text-align: center;
}
</style>
</head>
<body>
<div class="foo">浮动左青龙</div>
<div class="bar">浮动右白虎</div>
<div class="mia">标准流的盒子</div>
<div class="brian">Brian</div>
<div class="dom">Dom</div>
<div class="cipher">I am Cipher</div>
<div class="roman">Roman</div>
<div class="tej">Tej</div>
</body>
</html>
元素单位
CSS3 中引入了一些新的单位，除了传统的绝对单位（如像素、英寸、厘米）和相对单位（如百分比）外，还引入了一些更灵活和适应性更强的单位。以下是一些 CSS3 中常用的单位：
rem：相对于根元素的字体大小（root em），它是相对单位，根据根元素的字体大小进行计算。em：相对于父元素的字体大小，它是相对单位，根据父元素的字体大小进行计算。vw：视口宽度的百分比，1vw 表示视口宽度的 1%。vh：视口高度的百分比，1vh 表示视口高度的 1%。vmin：视口宽度和高度中较小值的百分比，1vmin 表示视口宽度和高度中较小值的 1%。vmax：视口宽度和高度中较大值的百分比，1vmax 表示视口宽度和高度中较大值的 1%。ch：相对于 “0”（零）字符的宽度，通常用于等宽字体。ex：相对于小写字母 “x” 的高度。fr：网格布局中用于指定剩余空间的单位，表示可用空间的分数。
除了以上列出的单位外，CSS3 还引入了一些其他的单位，如 calc() 函数可以用于在计算属性值时进行数学运算，% 单位可以用于某些属性的特定用途，例如定位属性 top、left、right、bottom 中的百分比值。
使用这些新单位可以更加灵活和精确地控制元素的尺寸和布局，适应不同屏幕尺寸和设备的要求。
弹性盒子布局
CSS3 弹性盒子布局（Flexbox）是一种用于创建灵活的、自适应的页面布局的 CSS 模型。它通过使用弹性容器和弹性项目来实现元素的排列和对齐。
以下是一些关键的概念和属性，用于理解和使用弹性盒子布局：
-
弹性容器（Flex Container）：包含了一组弹性项目的父元素。通过设置容器的样式属性来控制子元素的布局。使用
display: flex;可将元素设置为弹性容器。 -
弹性项目（Flex Item）：弹性容器内的子元素。它们根据容器的设置进行排列和对齐。默认情况下，弹性项目将沿主轴（主要排列方向）依次排列。可以使用
order属性来指定项目的排列顺序。 -
主轴和侧轴：弹性容器具有主轴和侧轴的概念。主轴是弹性项目排列的方向，默认为水平方向（横向），可以使用
flex-direction属性进行设置。侧轴是垂直于主轴的方向。 -
弹性容器属性：可以使用以下属性来控制弹性容器的布局和对齐方式：
flex-direction：指定主轴的方向（row、row-reverse、column、column-reverse）。justify-content：控制弹性项目在主轴上的对齐方式（flex-start、flex-end、center、space-between、space-around）。align-items：控制弹性项目在侧轴上的对齐方式（flex-start、flex-end、center、baseline、stretch）。align-content：当存在多行时，控制弹性项目在侧轴上的对齐方式（flex-start、flex-end、center、space-between、space-around、stretch）。
-
弹性项目属性：可以使用以下属性来控制弹性项目的伸缩性、初始大小和对齐方式：
flex-grow：指定项目的放大比例。flex-shrink：指定项目的缩小比例。flex-basis：指定项目的初始大小。flex：同时设置flex-grow、flex-shrink和flex-basis的缩写属性。align-self：覆盖容器的align-items属性，控制单个项目的对齐方式。
弹性盒子布局提供了更灵活和方便的方式来创建响应式的布局，解决了传统布局中的许多问题，例如
990
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
