CSS笔记

2.CSS

层叠样式表 样式表语言 用来描述html文档的呈现（美化内容）

基础选择器

顾名思义 作用是查找标签设置样式

1.标签选择器

使用标签名命名的选择器 可以选中同名标签设置相同的样式 但缺点是无法差异化同名标签的样式

标签选择器的基本格式为

<title>Document</title>
    <style>
        /* 这里为选择器 即选择哪个标签进行优化 */
        p{
            /* 这里为CSS属性 即期望的效果 */
            /* 属性名与属性值成对出现称为键值对 */
            /* 调整文字颜色 */
            color:blue;  
            /* 调整文字字号 */
            font-size: 30px;
        }
    </style>

此时展现出来的效果为

2.类选择器

也可以查找标签 但同时可以差异化设置同名标签的显示效果

一，定义类选择器 ： .类名 类名可以随便取

二，使用类选择器： 给其他标签添加class属性 class=“类名”

<title>Document</title>
    <style>
        .blue {
            color:blue;  
            font-size: 30px;
        }
        .red {
            color: red;
            font-size: 40px;
        }
    </style>

<p class="blue">
        i can live without &nbsp; &nbsp; <strong>limit</strong>
</p>
<p class="red"><strong><ins>LOVE</ins></strong></p>

这样即实现了对两个相同标签的差异化显示 效果如下

对于类选择器有如下几个特性

相同的类选择器可以用在多个标签中

一个标签只能拥有一个class类型 但这个class类型中可以具有几个类名 故而一个标签也可以使用多个类名

<style>
        .blue {
            color:blue;  
            font-size: 30px;
        }
        .red {
            color: red;
        }
        .size{
            font-size: 40px;
        }
    </style>

<p class="blue">
        i can live without &nbsp; &nbsp; <strong>limit</strong>
    </p>
    <p class="red size"><strong><ins>LOVE</ins></strong></p>

展示效果如下

当然注意 最好能让类名见名知意 多个单词之间可以用-连接

3.id选择器

它的作用也是查找标签 差异化设置标签的显示效果

这个作用跟类选择题很像 但是应用的场景是不同的 id选择器一般配合js使用 很少用来设置css样式 那么css样式当然是最常用类选择器来设置了

1.定义id选择器 -> #id名

2.使用id选择器 -> 标签添加属性id = “id名”

注意同一个id选择器在一个页面中只能使用一次

#green{
            color: green;
        }

<p id="green">gogogog</p>

通配符选择器

用来查找页面的所有标签 设置相同的样式

无需调用浏览器会自动查找页面所有的标签设置相同的样式

*{
     color:aqua;
}

CSS引入方式

书写位置

1.内部样式表

title标签下方添加style双标签 在style标签里面书写css代码

（学习的时候使用）

<title>Document</title>
    <style>
        /* 这里为选择器 即选择哪个标签进行优化 */
        p{
            /* 这里为CSS属性 即期望的效果 */
            /* 属性名与属性值成对出现称为键值对 */
            /* 调整文字颜色 */
            color:blue;  
            /* 调整文字字号 */
            font-size: 30px;
        }
    </style>

2.外部样式表

（开发的时候使用） CSS代码写在单独的CSS文件中 在HTML中用link标签引入外部的CSS文件

#my css
p {
    color:aqua;
    font-size: 30px;
}

<!-- link：引入外部样式表 rel：关系->样式表 href：地址 -->
    <link rel="stylesheet" href="./mycss.css">

href为相对路径 这样的实现跟前面内部样式的基础选择器是完全相同的

3.行内样式

配合js使用

<div style="color:brown;font-size: 30px;">这是div标签</div>
<div style="CSS属性">这是div标签</div>

注意css的属性全都要放在style的引号内

画盒子

使用合适的选择器来画盒子

实现的方法就是在选择器中确定盒子的这三个元素

.red {
           color: red;
           width: 100px; //宽度
           height: 100px; //高度
           background-color: aqua; //背景颜色

       }

<div class="red">这是div标签</div>

此时展示出的效果为

当然这里的盒子不一定要画给div和span所谓的盒子标签 对于其他标签也是可以使用的

文字控制属性

即美化页面中文字 常见的文字属性有

描述	属性	效果说明
字体大小	font-size	用于设置文字的尺寸大小，单位常用px（像素） ，不同数值呈现不同大小的文字
字体粗细	font-weight	可调整文字的粗细程度，取值有数字（如 400、700 ）或关键字（如normal表示正常粗细，bold表示加粗 ）
字体倾斜	font-style	控制文字是否倾斜，属性值normal表示不倾斜，italic表示倾斜
行高	line-height	指的是文本行与行之间的垂直间距，可设置为数字 + 单位（如20px ）或纯数字（表示为字体大小的倍数 ），影响文本的垂直布局和排版效果
字体族	font-family	用于指定文字所使用的字体类型，可设置多个字体，以逗号分隔，浏览器会按顺序查找可用字体
字体复合属性	font	可将多个字体相关属性（如字体样式、粗细、大小、行高、字体族等 ）进行简写，需按特定顺序书写，如font: italic bold 16px/24px Arial, sans-serif; ，且字号和字体族为必填
文本缩进	text-indent	使文本首行缩进一定距离，属性值常为数字 + 单位（如2em ，em为相对单位，1em 等于当前字体大小 ），实现类似段落首行缩进的效果
文本对齐	text-align	控制文本在水平方向上的对齐方式，属性值有left（左对齐）、center（居中对齐）、right（右对齐）
修饰线	text-decoration	可为文字添加装饰线条，属性值包括none（无装饰）、underline（下划线）、line-through（删除线）、overline（上划线）
颜色	color	用于设置文字的颜色，取值方式多样，如颜色关键字（如red ）、RGB 值（如rgb(255,0,0) ）、RGBA 值（如rgba(255,0,0,0.5) ，最后一位表示透明度 ）、十六进制值（如#FF0000 ）

1.字体大小

关键字 font-size pc网页最常用的也是px像素 注意font-size属性后没有单位是不会生效的

p {
	font-size: 30px;
}

谷歌浏览器文字有默认大小16px

2.字体粗细

属性名：font-weight

属性值既可以是属性值也可以是英文关键字 具体如下

正常：400 / normal

加粗： 700 / bold

3.字体样式（是否倾斜）

作用是清楚文字默认的倾斜效果

属性名 font-style

属性值：1,正常（不倾斜） normal

​ 2.倾斜 italic

这里可以联想到文本格式化中的倾斜标签 em

p{
	font-style: italic;
	font-style: normal;
}

4.行高

作用是设置多行文本的间距

但需要注意的一个细节是虽然行高属性是用来设置文本间距的，但是行高并不是文本间距，实际上行高是由文本自身高度 和文本的上间距和下间距组成的 所以设置行高时可以用数字的形式 是因为行高，间距，文本尺寸实则是相关的。

属性名 line-height

属性值 1.数字 + px

​ 2.数字（实际的行高是该数字 * 当前标签font-siz的属性值）

.ju {
            font-size: 70px;
            line-height: 2;
}
p {
	line-height:30px;
}

行高的测量方法是从一行文字的最顶端取到下一行文字的最顶端

使用行高实现垂直居中效果

技巧是设置行高属性值等于盒子高度属性值

div{
            width: 100px;
            height: 100px;
            background-color: aqua;
}
.ju {
            line-height: 100px;
}
<div class = "ju">这是div标签</div>

这样设置后效果为

当然这样的垂直居中还只适合于单行文字 如果是多行的话要进行其他操作

5.字体族

用来设置文本的字体 属性名为 font-family 属性值为字体名

 .ziti{
            font-family: 楷体;
}

（了解）font-family属性值可以设置多个字体名 各个字体名之间用逗号隔开 执行顺序是从左到右依次查找

为了防止在不同用户处展示效果不同的情况 属性最后设置一个字体族名 网页开发建议使用无衬线字体

两种字体族名

无衬线字体

衬线字体

6.font属性

字体复合属性 顾名思义就是说可以用一个font属性来实现之前的一些文字属性 通过一个属性对应多个值的写法 （各个属性值之间用空格隔开）来实现属性的简写

使用场景是设置网页文字公共样式

font: 是否倾斜 是否加粗 字号/行高 字体;

注意必须按照顺序书写 并且字号和自体值必须书写 否则font属性不会生效

.fu{
            font: italic 400 20px/2 楷体;
}
<div class="fu">『青春像一把橡斧，你无法控制它，伐到哪里去。』</div>

7.文本缩进

按照文本习惯 文本缩进其实就是在开头空出两个字号大小

属性名 text-indent

属性值 数字 + px 或 数字 + em（注：1em = 当前标签的字号大小） （常用）

.ziti{
            font-family: 楷体;
            text-indent: 2em;
            font-size: 30px;
        }
<p class="ziti">
        这时我看到，青春是一把巨大的斧子，一下一下地，砍伐这颗大树，落下纷繁的枝叶，落下坚硬的树皮，然后轰然倒塌。木屑四溅，你说，这不是泪，因为你早已暗自接受了，你无法控制它，伐到哪里去。
</p>

此时效果为

8.对齐方式

作用是控制内容水平对齐的方式

属性名 ： text-align

属性值

属性值	效果
left	左对齐（默认 ）
center	居中对齐
right	右对齐

text-align: 属性值;

文本水平对齐方式

其对齐本质上移动的是文字内容而不是标签的位置

进一步的，本质是控制内容的对齐方式 故而有如下图片的水平对齐

图片水平对齐方式

对于图片，对齐属性要设置给内容的父级，所以图片首先要放在一个父级标签中

.tupian{
            text-align: center;
}
<div class="tupian">
        <img src="./微信图片_20250415153605.jpg" alt="my love" title="MY LOVE" width="90" height="100">
</div>

这样就能实现图片在页面中居中显示

9.文本修饰线

一方面可以用于给超链接文本去掉下划线 另一方面可以加上下划线

属性名 text-decoration

属性值

a{
            text-decoration: none;  无
}
.de{
            text-decoration: line-through;  删除线
}
.xia{
            text-decoration: underline; 下划线
}
.ding{
            text-decoration: overline; 上划线
}

10.文字颜色

这里主要是介绍color属性的一些用法

属性名 color

属性值

颜色表示方式	属性值	说明	使用场景
颜色关键字	颜色英文单词	如 red（红色）、green（绿色）、blue（蓝色）等	常用于学习测试阶段，简单直观
rgb 表示法	rgb(r, g, b)	r、g、b 分别代表红绿蓝三原色，取值范围是 0 - 255 ，通过调整三种颜色的数值来混合出不同颜色	一般用于对颜色原理的了解
rgba 表示法	rgba(r, g, b, a)	在 rgb 基础上增加了 a（透明度），a 取值范围是 0 - 1 ，可实现透明效果	实际开发中，当需要设置带有透明度的颜色时使用
十六进制表示法	#RRGGBB	如 #000000（黑色）、#ffcc00（一种黄色），当 RR、GG、BB 两位数值相同时可简写为一位，如 #000、#fc0	实际开发中，常从设计稿中复制该形式的颜色值来确保颜色准确

rgb代表三颜色 红蓝绿

在十六进制表示法中 每两个表示一个颜色 如果两位相同可以简写为一位

复合选择器

由两个或多个基础选择器 通过不同的方式组合而成

作用是更准确更高效地选择目标元素

1.后代选择器

选择某个元素的所有后代元素 注意这个所有后代包括里面的所有子代(只要是子选择器对应的标签部分)

后代选择器的写法

父选择器 子选择器{
	css属性；
}

div p{
            color:red;
            font-size: 30px;
}
 <div class = "ju">
        这是div标签
        <p>这是div的后代哇咔咔</p>
</div>

2.子代选择器

选择某元素的子代元素 （最靠近的子级）

选择器写法： 父选择器 > 子选择器 即子父选择器之间用>隔开

div > p{
            color:red;
            font-size: 30px;
}

3.并集选择器

选择多组标签设置相同的样式

写法： 多个选择器用之间用’，’隔开

div,
h1,
p{
       color: aqua;
}

4.交集选择器（了解）

选中同时满足多个条件的元素

写法 ： 选择器之间连着写 中间没有任何符号

p.ziti{
            color:red;
            font-style: italic;
}

注意 有标签选择器的时候标签选择器要写在最前面

并且 这两个选择器之间是既又得关系 即必须是既是p标签 又必须有ziti的class

5.伪类选择器

伪类表示元素状态 选中元素的某个状态来设置样式 （即一些网页出现的鼠标移动到的位置出现下划线）

鼠标悬停状态

任何选择器都可以使用

/* 选择器:hover{css属性} */
 a:hover{
            color: aqua;
            text-decoration: underline;
}

超链接的伪类状态

超链接共有四个状态

选择器	作用
:link	用于设置超链接在未被访问前的样式
:visited	用于设置超链接在被访问过后的样式
:hover	用于设置鼠标悬停在超链接上时的样式
:active	用于设置超链接在被点击（激活）时的样式

这些是 CSS 中超链接的伪类选择器。在设置超链接的不同状态样式时，遵循 LVHA 顺序（即:link - :visited - :hover - :active ）书写，是因为浏览器在解析样式时会按照这个顺序来处理，若不按此顺序，可能导致某些状态的样式无法正确显示。

在实际的应用中 一般是通过一个a标签来设置超链接的样式 比较常写的是hover状态来提示用户鼠标到哪了

a:link{
            color:red;
}
a:visited{
            color:purple;
}
a:hover{
            color: aqua;
            text-decoration: underline;
}
a:active{
            color:brown;
}

CSS特性

可以通过特性来化简代码 定位问题并且解决问题

1.继承性

子级标签默认继承父级的文字控制属性

常见的使用是把文字控制属性写在body内 那么body内的所有元素就都会继承 需要实现差异的部分就再单独去写选择器即可

<style>
        body{
            font-size: 30px;
            color: aqua;
            font-weight: 700;
            text-align: center;
        }
</style>

注意 如果自己有样式的标签 就不会继承父类的标签 而是优先显示自己的样式 可能是h1（标题） a（超链接）之类的本来就有样式的标签，但也有可能是这个标签在之前已经被选择器实现了样式了

2.层叠性

特点：1、相同的属性会覆盖：后面的CSS属性会覆盖前面的CSS属性

2、不同的属性会叠加：不同的CSS属性都会生效

其实就是代码从上到下依次执行而已

3.优先级

也叫权重，即当一个标签使用了多种选择器的时候，基于不同种类的选择器的匹配规则

选择器优先级高的样式会先生效

选中标签的范围越大，优先级越低

故而有如下公式

公式：通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

!important的作用是对选择器提升权重，只要加了!important，选择器的优先级就会最高

*{
       color: blue !important;
}

直接在属性后加上!important即可 注意 提权的部分也仅仅是这条元素而并非选择器内的所有元素哦

叠加计算原则

如果是复合选择器 则需要权重叠加计算

公式：（每一级之间不存在进位）
(行内样式，id 选择器个数，类选择器个数，标签选择器个数)

规则：

• 从左向右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较
• !important 权重最高
• 继承权重最低

这里的继承也遵循之前的继承性 即如果标签自己有样式就会优先显示标签自己的样式，这个标签自己的样式就可能是其自己的选择器实现的

看是否是继承的 只需要看这个选择器是否最终选择的是文本其本身即可

注意注意 这里可能会混淆body和*通配符 因为都是改变全部内容的属性 但其实它们的优先级并不一样 body是通过继承来实现的 而通配符是一个单独的选择器 其优先级是不一样的

Emmet写法

Emmet 写法：代码的简写方式，输入缩写 VS Code 会自动生成对应的代码。

HTML

说明	标签结构	Emmet
类选择器	<div class="box"></div>	标签名。类名
id 选择器	<div id="box"></div>	标签名 #id 名
同级标签	<div></div><p></p>	div+p
父子级标签	<div><p></p></div>	div>p
多个相同标签	<span>1</span><span>2</span><span>3</span>	span*3
有内容的标签	<div>内容</div>	div {内容}

CSS大多是属性的首字母 甚至可以通过首字母加元素值的方式生成

比如说

w500px+h300px+bgc - > 
width: 500px;
height: 300px;
background-color: #fff;

背景属性

描述	属性
背景色	background-color
背景图	background-image
背景图平铺方式	background-repeat
背景图位置	background-position
背景图缩放	background-size
背景图固定	background-attachment
背景复合属性	background

1.背景颜色

之前已经介绍过了 略过

2.背景图

使用背景图实现装饰性的图片效果

属性名 background-image （bgi）

属性值 url（背景图的URL）

一般要加背景图的时候 是在一个盒子里显示 所以应该先把盒子的宽高限制 即先把盒子画好

div{
            width: 400px;
            height: 400px;
            background-image: url();
}

背景图默认是平铺（复制）的效果

所以当盒子太大的时候图片可能会出现好几份

当盒子太小的时候可能并不能完整显示这张图片

3.背景图平铺方式

属性名 background-repeat (bgr)

属性值

属性值	效果
no-repeat	不平铺
repeat	平铺（默认效果）
repeat-x	水平方向平铺
repeat-y	垂直方向平铺

/* 不平铺 盒子的左上角显示一张背景图 */
background-repeat: no-repeat;

background-repeat: repeat;

background-repeat: repeat-x;

background-repeat: repeat-y;

4.背景图位置

属性名：background-position (bgp)

属性值: 水平方向位置 垂直方向位置

关键字

关键字	位置
left	左侧
right	右侧
center	居中
top	顶部
bottom	底部

坐标

坐标（数字 + px，正负都可以）

注意关键字和坐标既可以单独使用 也可以混合在一起使用

background-position: 50px center;
background-position: center center;
background-position: 50px 100px;

bgp的这个窗口坐标实际上跟easyx绘制窗口是很像的 都是

左上角（left bottom）为零点 （0 0）

零点下方垂直坐标为正，上方为负；

零点右方水平坐标为正，左方为负

关键字取值方式 可以颠倒取值的顺序

可以只写一个关键字 另一个方向会默认为居中

数字只写一个值表示水平方向，垂直方向为居中

作用：

background - position 能够控制背景图像相对于它所在盒子的位置

即它的属性值是相对于它所在盒子的那个窗口而言的！

5.背景图缩放

作用是用来设置背景图大小

属性名 background-size （bgz）

常用属性值：

1.关键字：

**cover: 等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见 **

**contain: 等比例缩放背景图片以完全装入背景区，可能背景区部分空白 **

cover会使得图片的宽高完全与图片的宽高一样 但是有可能会使得背景图片部分超出盒子 就看不见了

contain可能填充不全的意思是 当图片缩放的宽高有一个与盒子的宽高相等的时候就要会停止缩放

2.百分比：根据盒子的尺寸计算图片大小

3.数字加单位（例如px） （很少使用）

/* 图片完全覆盖盒子 */
background-size: cover;
/* 图的宽高和盒子尺寸相等停止缩放 */
background-size: contain;
/* 100%图片宽度和盒子宽度一样 图片的高度按照图片比例等比缩放 */
background-size: 100%;

当热 当背景图的比例和盒子比例相同的时候 这三种写法都能实现完整覆盖

6.背景图固定

作用是背景不会随着元素的内容而滚动 即在滑动页面的时候图片一直在那里不动

属性名 background-attachment（bga）

属性值：fixed

background-attachment: fixed;

7.背景图复合属性

跟font复合属性的用法很像 都是一个属性名对应多个属性值 空格隔开各个属性值

不区分顺序

属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定

background: pink url(Snipaste_2025-04-21_20-36-42.png) no-repeat center/cover ;

显示模式

其实是标签（元素）的显示方式 比如说div会独占一行 而span只占一小块地方

作用：布局网页的时候 根据标签的显示模式选择合适的标签摆放内容

这些元素其实都是盒子！

块级元素

典型标签是div标签

其特点是 独占一行 宽度默认是父级的100% 添加宽高属性生效

背景色可以生效

添加宽高属性其实就是画盒子！

行内元素

典型标签是span标签

一行可以存在多个 默认尺寸由内容撑开 添加宽高属性不生效

背景色可以生效

行内块元素

典型标签是图片img

一行共存多个 默认尺寸由内容撑开 添加宽高属性生效

转化显示模式

属性名 ：display

属性值

属性值	效果
block	块级
inline-block	行内块
inline	行内

即可以用这些属性来转化显示模式 由于行内元素加宽高并不生效 所以使用的相对比较少

div{
            width: 200px;
            height: 200px;
            background-color: pink;
            display: inline-block;
}
 <div>你再看看再看看你后面后面呢</div>
 <div>你再看看再看看再看看你后面后面后面呢</div>

此时块级元素被转化为行内块元素

改变显示模式后 特性完全和上面对应的三种元素的显示模式相同

结构伪类选择器

根据元素的结构关系查找标签

选择器	说明
E:first-child	查找第一个 E 元素
E:last-child	查找最后一个 E 元素
E:nth-child(N)	查找第 N 个 E 元素（第一个元素 N 值为 1）

其中E表示一种显示器

注意这里数元素是从1开始数的

li:nth-child(3){
    background-color:pink;
}
li:first-child{
	background-color: red;
}
li:last-child{
	background-color: blue;
}
<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
</ul>

效果为

:nth-child公式查找元素

功能	公式
偶数标签	2n
奇数标签	2n+1; 2n-1
找到 5 的倍数的标签	5n
找到第 5 个以后的标签	n+5
找到第 5 个以前的标签	-n+5

当然后三个的公式中的5只是一个特例而已 实际上这个数字是多少都可以

注意 公式中的n是从0开始算的 所以会包含那个数字

伪元素选择器

作用是创建虚拟元素（伪元素） 用来摆放装饰性的内容

所谓装饰性的内容可能是一些提示性的箭头等

E指的是标签

选择器	说明
E::before	在 E 元素里面最前面添加一个伪元素
E::after	在 E 元素里面最后面添加一个伪元素

注意

必须设置content内容属性 如果没有内容 也要用引号留空

如果没有content属性的话 伪元素选择器就不会生效了

伪元素默认是行内显示模式

权重和标签选择器相同

div::before{
	content: "什么？";
}
div::after{
	content: '什么！';
}

盒子模型

注意注意 盒子模型并不是说只针对div和span标签 只是它们比较典型而已 所以下面的操作也不只针对div和span 上面显示模式部分介绍的三种元素实际上都是盒子 它们都有各自的盒子组成！

1.组成

盒子的重要组成部分

• 内容区域 - width & height
• 内边距 - padding（出现在内容与盒子边缘之间）
• 边框线 - border
• 外边距 - margin（出现在盒子外面）

基本书写方式如下

/* 会在盒子四个方向都添加内边距 拉开内容和边框的距离 */
padding: 20px;
border: 1px solid #000;
/* 相当于在外隔出空白，同样在四个方向都有外边界 用来拉开两个盒子之间的距离 */
margin: 50px;

基本布局可以参考网页检测中的 Computed

2.边框线

border（bd）

属性值分为 边框线粗细· （数字+单位） 线条样式 颜色（不用区分顺序）

常用的线条样式

属性值	线条样式
solid	实线
dashed	虚线
dotted	点线

单独的border会给四个方向设置上完全相同的边框线

border: 1px solid #000;

设置单方向边框线

属性名 border-方位名词

方位名词有 left right top bottom

border-left: 2px solid #000;
border-right: 5px dashed #000;;
border-top: 5px dotted #000;
border-bottom: 2px solid #000;

3.内边距

作用是设置内容和盒子边缘之间的距离

属性名 padding 属性值是 数字+单位

与边框线很像 也是有两种方式

1.直接书写padding 会在四个方向添加完全相同的内边距

2. padding-方位名词 单独设置某个方向的内边距

padding的多值写法

padding可以被当作复合属性来使用 一次性设置上下左右四个方向的内边距

取值个数	示例	含义
一个值	padding: 10px;	四个方向内边距均为 10px
四个值	padding: 10px 20px 40px 80px;	上: 10px; 右: 20px; 下: 40px; 左: 80px
三个值	padding: 10px 40px 80px;	上: 10px; 左右: 40px; 下: 80px
两个值	padding: 10px 80px;	上下: 10px; 左右: 80px

注意顺序的对应关系

一个值：四个方向 两个值：上下，左右

三个值：上，左右，下 四个值：上，右，下，左

即：从上开始顺时针赋值，如果转到的位置没有数字，则取值跟它对面的取值一样

4.尺寸计算

默认情况：盒子尺寸 = 内容尺寸 + border尺寸 + 内边距尺寸

那么给盒子加border/padding都会撑大盒子

为了解决这个问题

1.手动做减法，即在设置盒子的宽高的时候提前算出来除去border和padding尺寸的二倍值，将宽高设置成这个值就可以实现所需的尺寸

2.内减模式 （即自动做减法）

box-sizing: border-box;

这样只需要将宽高设置成所需的尺寸即可 会自动实现完全是这个尺寸的盒子

5.外边距

作用是拉开两个盒子之间的距离 margin

与padding的属性值写法 多值写法 完全相同

既可以设置四个相同的 也可以加方向生成不同的 也可以用作复合属性

区别是margin是设置在盒子外面 不会撑大盒子

版心居中

能让盒子出现在页面窗口的正中间 （这里其实一般考虑的是左右居中）

margin:0 auto

几个注意点 ： 1.盒子必须设置宽度 否则无法自动居中

2.盒子的显示模式不能是被改变过的 即盒子必须是块级显示

3.第一个属性是0 因为我们希望盒子只是居中显示 而在上下不会出现空白的情况

4.若把第一个值设为auto，像margin: auto auto; （等同于margin: auto;），在大多数情况下，会让元素在垂直和水平方向都尝试居中。不过，垂直方向的auto外边距在普通文档流里对块级元素无效，只有在使用flexbox或者grid布局时，垂直方向的auto外边距才会起作用。

6.清除默认样式

清除标签默认的样式 例如盒子默认的内外边距

常用的有 用通配符选择器选中所有 或用并集选择器全部选择

/* 清除所有盒子的内外边距 并且设置自减模式 保证在后续操作中盒子尺寸正确 */
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
/* 去掉列表的项目符号，即无序列表前面那个小点 */
li{
	list-style: none;
}
/* 去掉超链接的下划线 */
a{
	text-decoration: none;
}

这里还顺手介绍了关于无序列表和超链接的清除默认样式

7.元素溢出

作用是控制溢出元素的内容的显示方式

属性名 overflow

属性值

属性值	效果
hidden	溢出隐藏
scroll	溢出滚动（无论是否溢出，都显示滚动条位置）
auto	溢出滚动（溢出才显示滚动条位置）

overflow: hidden;
overflow: scroll;
overflow: auto;

三种方式的效果分别为

可以看到hidden无法看完 scroll在没有溢出的部分也有滚动条 而auto则没有

8.外边距问题

合并现象

场景 ：垂直排列的兄弟元素（两个盒子） 上下margin会合并

现象： 取两个margin中的较大值生效 注意不是相加

所以如果要求两个盒子之间间距为100px 只需要设置其中一个是100px即可 会取max

塌陷问题

场景：父子级的标签，子级的盒子添加上外边距就会产生塌陷问题

即

.fa{
	background-color: aqua;
	width: 300px;
	height: 300px;
	/* padding-top: 50px; */
	box-sizing: border-box;
}
.son{
	width: 100px;
	height: 100px;
	background-color: pink;
	box-sizing: border-box;
	margin-top: 50px;
}
<div class = "fa">
        <div class = "son">
            鱼仔
        </div>
</div>

当设置了上外边距后会出现下述现象

现象：导致父级一起向下移动

为了规避这个问题 有以下解决方法

1**.取消子级margin 父级设置padding**

​ 这是直接不设置margin的方法（最优方法）

​ 通过padding把子级顶开一部分

.fa{
            background-color: aqua;
            width: 300px;
            height: 300px;
            padding-top: 50px;
            box-sizing: border-box;
}

padding-top的尺寸跟本来需要设置的margin尺寸是一样的即可

2. 父级设置overflow:hidden

   ​

   overflow: hidden;

   原理是hidden隐藏溢出内容 当设置了子盒子的上外边距后，父盒子会被拖拽，hidden会找到父盒子原始的开始位置和结束位置，将溢出的部分隐藏，所以最后解决了父盒子被拖拽的问题

3. 父级设置border-top

border-top: 1px solid #000;

原理跟hidden法相似 都是让浏览器找到了父盒子正确的上下边缘从而避免了拖拽问题

9.行内元素-内外边距问题

场景：行内元素添加margin和padding 无法改变垂直位置（因为其只具有水平性质）

解决方法：只能通过给行内元素添加line-height改变垂直位置

（改变行高从而把文字挤下去实现效果）

10.圆角效果

作用是设置元素的外边框为圆角

属性名 border-radius

属性值为 数字 + px 或 百分比 不管是什么 属性值其实都是圆角半径

border-radius: 20px;
border-radius: 50%;

注意 圆角半径用百分比表示的时候最大只能是50% 此时为正圆，再增大这个值就不去效果了

效果为

设置的方法跟padding margin很像 也可以作为复合标签使用 （但是不能加方位名词分开设置）

border-radius: 20px 10px 40px 80px;

其也支持四个值 三值 二值 一值的写法

从左上角顺时针赋值，转到没有赋值的角，该角与其对角的取值相同

常用的圆角形状

正圆形状

经常用来设置头像框

给 正方形盒子 设置圆角属性值为 宽高的一半 or 50 %

img{
            width: 200px;
            height: 200px;
            border-radius: 50%;
}
<img src="微信图片_20250415153605.jpg" alt="">

胶囊形状

经常用来做按钮

给 长方形盒子 设置圆角属性值为 盒子高度的一半

div{
            width: 200px;
            height: 100px;
            background-color: pink;
            box-sizing: border-box;
            border-radius: 50px;
            text-align: center;
}

注意要设置这种样式的话需要让盒子的高小于宽

11.阴影效果

作用：给元素设置阴影效果

属性名 box-shadow

属性值

x轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影

x和y轴偏移量必须书写

默认是外阴影 内阴影需要添加 inset（最后一个属性位置） 即inset表示内阴影

div{
	width: 200px;
	height: 100px;
	background-color: pink;
	box-sizing: border-box;
	border-radius: 50px;
	text-align: center;
	margin:  10px auto;
	box-shadow: 2px 5px 10px 1px rgba(0,0,0,0.5) /*inset*/;
}

（图示的这个效果是用了网页校测工具修改的 实际上代码中的阴影没有这么明显 会相对柔和一点 这里的inset被注释掉了 这里书写的是外阴影）

CSS书写顺序

1、盒子模型属性

2.文字样式

3、圆角阴影等修饰属性

标准流

标准流也叫文档流 指的是标签在页面中默认的排布规则 例如块元素独占一行 行内元素一行显示多个

如果标准流无法达到想要实现的效果了的话 就用浮动或者Flex布局

浮动

作用是让块元素水平排列

属性名 float

属性值 left：左对齐 ->父级的最左边

​ right：右对齐->父级的最右边

.one{
	width: 100px;
	height: 100px;
	background-color: pink;
	float: left;
}
.two{
	width: 300px;
	height: 300px;
	background-color: aqua;
	float: right;
}
<div class="one">如果我也变成一条鱼</div>
<div class="two">如果你也变成了氧气</div>

特点

顶对齐；

具备行内块显示模式特点；

浮动的盒子会脱离标准流的控制 也就是说浏览器并不能检测到这个浮动盒子的存在 这个盒子同时也不会占据标准流的位置 所以对于多个盒子 一个要浮动最好就都浮动

区域布局

现在用浮动来实现一个类似下图的产品区域布局

<!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>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        li{
            list-style-type: none;
        }
        .one{
            width: 234px;
            height: 628px;
            background-color: red;
            float: left;
        }
        .two{
            width: 978px;
            height: 628px;
            background-color: aqua;
            float: right;
        }
        .all{  /*父级标签 作为版心 即底盒子*/
            width: 1280px;
            height: 630px;
            background-color: pink;
        }
        .two li{
            margin-right: 14px;
            margin-bottom: 14px;
            float:left;
            width: 234px;
            height: 300px;
            background-color: #fff;
        }
        .two li:nth-child(4n){
            margin-right: 0;
        }
    </style>
</head>
<body>
    <div class="all">
        <div class="one"></div>
        <div class="two">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</body>
</html>

就可以实现如下的效果

一个需要注意的细节是

如果父级宽度不够 那么即使是浮动的盒子也会掉下来(即子级会换行)

清除浮动

场景：浮动元素会脱标 如果父级没有设置高度 子级无法撑开父级的高度 这样的话可能会导致页面布局错乱

解决方法：清除浮动带来的影响

方法一：额外标签法

在父元素内容最后添加一个块级元素 设置CSS属性 clear:both

.clearfix{
            clear: both;
}  /*注 此类名是常用的清除浮动类名 */
<div class="all">
        <div class="one"></div>
        <div class="two">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="clearfix"></div>  /*额外添加的标签 */
</div>

方法二：单伪元素法

跟方法一的效果类似 但它是通过伪元素自动的 而方法一是手动的

.clearfix::after{
            content: " ";
            display: block;
            clear: both;
}
<div class="all clearfix">
        <div class="one"></div>
        <div class="two">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
</div>

可以每次都添加到清除默认样式的代码中去 类似于cpp中提前打好的头文件

方法三：双伪元素法（推荐）

区别是在父级的开头结尾都加上标签

/* before伪元素在这里解决外边距塌陷问题*/
.clearfix::before,
.clearfix::after{
	content: " ";
	display: table;
}
.clearfix::after{
	clear:both;
}
/* after伪元素在这里清除浮动带来的影响*/
<div class="all clearfix">
        <div class="one"></div>
        <div class="two">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
</div>

同样的， 可以每次都添加到清除默认样式的代码中去 类似于cpp中提前打好的头文件，并且这个方法会更加地常用

方法四：overflow

父元素添加CSS元素 overflow：hidden

.all{
            width: 1280px;
            height: 630px;
            background-color: pink;
            overflow: hidden;
}
<div class="all">
        <div class="one"></div>
        <div class="two">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
</div>

BFC（块级格式化上下文）内部的元素会按照正常的文档流进行布局，它既可以处理标准流元素，也能处理浮动元素。

触发 BFC 计算元素高度和 overflow: hidden 隐藏溢出内容是两个不同方面的效果。触发 BFC 解决的是浮动元素导致的高度塌陷问题，让父元素能正确包裹内部元素；而 overflow: hidden 则是在有内容超出元素指定区域时，对溢出内容进行隐藏处理。它们各自发挥不同的作用，并不相互矛盾。

如果你不希望隐藏溢出的内容，但又想解决高度塌陷问题，可以考虑使用其他方式触发 BFC，比如设置 display: flow-root ，它专门用于创建 BFC 且不会隐藏溢出内容。

本质

其实浮动本质的作用是实现图文混排效果

Flex布局

同样地啰嗦一句 不要把这里面的盒子都认为是div或span 大部分具备盒子属性的标签都是这里处理的盒子

描述	属性
创建 flex 容器	display: flex
主轴对齐方式	justify-content
侧轴对齐方式	align-items
某个弹性盒子侧轴对齐方式	align-self
修改主轴方向	flex-direction
弹性伸缩比	flex
弹性盒子换行	flex-wrap
行对齐方式	align-content

另一种让块级元素水平排列的方法

也叫做弹性布局 是浏览器提倡的布局模型 非常适合结构化布局 提供了强大的空间分布和对齐能力

（结构化布局就是上下排列或者是左右排列那样的结构）

Flex模型不会产生像浮动那样的脱标现象 布局网页更简单灵活

1.组成

给父级元素设置 **display: flex ** 子元素就可以自动挤压或者拉伸

所谓自动挤压或者拉伸 可以跟浮动对比一下

浮动布局时 如果父级宽度不够 则多余的盒子会换行掉出来 而用Flex布局的话 父级宽度不变 子级增多 会自动调节子级盒子尺寸

（挤压和拉伸都是可以控制的）

也就是说盒子变成了弹性容器 它的子级就变成了弹性盒子

主轴默认在水平方向

侧轴or交叉轴默认在垂直方向

主轴在那个方向 弹性盒子就会在哪个方向进行排列

 .box{
/*弹性容器 */
        display: flex;
        height: 300px;
        border: 1px solid #000;
}
.box div{
/*弹性盒子：沿着主轴方向排列 */
        width: 200px;
        height: 100px;
        background-color: pink;
        border: 1px solid #000;
}

2.主轴与副轴对齐方式

需要注意的是不要默认主轴和副轴就是水平和垂直 因为其方向是可以改变的

主轴对齐方式

属性名 ： justify-content

属性值	效果
flex-start	默认值，弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列
center	弹性盒子沿主轴居中排列
space-between	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

.box{
        display: flex;
        /* justify-content: flex-start; */
        /* justify-content: flex-end; */
        /* justify-content: center; */

        /* 父级剩余的尺寸分配成间距 */

        /* 弹性盒子之间的间距相等 */
        /* justify-content: space-between; */    

        /* 间距出现在弹性盒子两侧 */
        /* 视觉效果：弹性盒子之间的间距是两端间距的二倍 */
        /* justify-content: space-around; */

        /* 各个间距都相等 */
        justify-content: space-evenly;
        height: 300px;
        border: 1px solid #000;
}

最常用的是 center和三个space

侧轴对齐方式

属性名

• align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
• align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

属性值及效果

属性值	效果
stretch	弹性盒子沿着侧轴线被拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸）
center	弹性盒子沿侧轴居中排列
flex-start	弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列

前两个属性值常用 后两个了解即可

使用align-items

/* 弹性盒子在侧轴方向没有尺寸才能够拉伸 即不能设置弹性盒子的侧轴方向宽度or高度 */
        /* align-items: stretch; */

        /* 在侧轴的中间排列 */
        align-items: center;

        /* 在侧轴的起点或终点排列 */
        /* align-items: flex-start; */
        /* align-items: flex-end; */

几个需要注意的地方：

1.不能设置弹性盒子的侧轴方向尺寸才能stretch 这个侧轴方向尺寸是相对的 因为侧轴方向是可以改变的 所以可能是width也可能是height

2.只要弹性盒子没有设置侧轴方向的尺寸 那么就算不写侧轴对齐 也会自动拉伸

使用align-self

只需要单独找到需要控制的盒子然后加属性即可

.box div:nth-child(2) {
        align-self: center;
}

3.修改主轴方向

注意改变方向后 再用主轴侧轴对齐方式的时候要写清楚主轴是哪个方向副轴是哪个方向

属性名 ： flex-direction

属性值（图中的方向都是指主轴方向)

属性值	效果
row	水平方向，从左向右（默认）
column	垂直方向，从上向下
row-reverse	水平方向，从右向左
column-reverse	垂直方向，从下向上

只需要记 column 其他的基本不用

.box{
        display: flex;
        flex-direction: column;
        height: 300px;
        border: 1px solid #000;
}

修改了主轴方向后 副轴方向会自动变换到水平方向

4.弹性伸缩比

控制弹性盒子的主轴方向的尺寸（同样的 主轴是水平 -> 设置宽度 or垂直 -> 设置高度 并不确定）

属性名 flex 属性值 整数数字 表示占用 父级剩余尺寸的份数

/* 默认情况下 主轴方向尺寸靠内容撑开 侧轴默认拉伸 */
    .box{
        display: flex;
        height: 300px;
        border: 1px solid #000;
    }
    .box div{
        height: 100px;
        background-color: pink;
        border: 1px solid #000;
        border-top: 0;
    }
    .box div:nth-child(2) {
        width: 200px;
    }
    .box div:nth-child(2){
        flex:1;
    }

默认情况下 主轴方向尺寸靠内容撑开 侧轴默认拉伸

5.弹性盒子换行

弹性盒子可以自动挤压或者拉伸 所以默认情况下 所有弹性盒子都会在一行内显示

属性名 flex-wrap

属性值 ： wrap 换行 nowrap 不换行

flex-wrap: wrap;
flex-wrap: nowrap;

当设置了换行后 弹性盒子的尺寸一般就不会被挤压或者拉伸了（按照规定尺寸确定是否换行，即父级内容是否还够）

6.行对齐方式

当然 这个属性是基于已经设置换行后的弹性容器来说的 对单行弹性盒子不生效

属性名： align-content

属性值	效果
flex-start	默认值，弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列
center	弹性盒子沿主轴居中排列
space-between	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

跟主轴对齐方式的属性是完全相同的

那么使用方式和效果也是跟其很相似的

注意在vscode里space-evenly没有代码提示

网页制作相关

项目目录

网站根目录是指存放网站的第一层文件夹 内部包括该网站的所有素材 包括三件套 图片

• images 文件夹：存放固定使用的图片素材，例如：logo、样式修饰图等

• uploads 文件夹：存放非固定使用的图片素材，例如：商品图、宣传图等需上传的图片

• iconfont 文件夹：字体图标素材

• css 文件夹

  ：存放 CSS 文件（link 标签引入）

  • base.css：基础公共样式
  • common.css：各个网页相同模块的重复样式，例如：头部、底部
  • index.css：首页 CSS 样式

• index.html：首页 HTML 文件

思路

1.布局思路：

先整体再局部 由外到内 从上到下 从左到右

2.CSS实现思路：

画盒子 调整盒子 -> 宽高背景色

调整盒子位置 - > flex布局 内外边距

控制图片文字内容样式

定位

作用是灵活改变盒子在网页中的位置

实现：

1.定位模式 position

2、边偏移：设置盒子的方向

left right

top bottom

1.相对定位

div{
            position: relative;
            top:100px;
}

注意 1、改变位置的参照物 为自己原来的位置

​ 2、相对定位不脱标 即虽然被移动走 但原来的位置还是占位的 不会被其他填充

​ 3、标签显示模式特点不变

一般不会单独使用相对定位 因为单独使用它会因为点2的存在 造成网页较多留白

2.绝对定位

position: absolute

子绝父相 —->>> 子级绝对定位 父级相对定位

<!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{
            width: 400px;
        }
        .news{
            position: relative;
            margin: 100px auto;
            width: 400px;
            height: 350px;
            background-color: #fff;
        }
        .news span{
            position: absolute;
            top: 0;
            right: 0;
            display:block;
            width: 92px;
            height: 32px;
            background-color: rgba(0,0,0,0.6);
            text-align: center;
            line-height: 32px;
            color: #fff;
        }
    </style>
</head>
<body>
    <p>
        <div class="news">
            <img src="a1b355c494e9cbfd923086a45e2683c9.jpg" alt="">
            <span>展会活动</span>
            <h4>2222世界移动大会</h4>
        </div>
        
    </p>
</body>
</html>

注意在这段代码中图片的宽度必须和news盒子的宽度是一样的 因为我们想要实现的效果是让span标签出现在图片的右上角 （相对偏移量在right方向为0）

1.span为绝对定位 会找最近的定位过的父级即news元素div

2.span的绝对位置为（0,0）即相对的父级news元素div的右上角

3.想要出现在图片的右上角就需要让这个图片跟div盒子宽度重合

（这里不涉及垂直位置 故而不考虑高度）

绝对定位特点：

1.脱标，不再占位

2.参照物：先找最近的已经定位的祖先元素；如果所有祖先元素都没有定位 参照浏览器可视区改位置

3.绝对定位的盒子显示特点改变：宽高生效（具备了行内块的特点）

3.定位居中

实现步骤：

1.绝对定位（如果是要在父级中居中 就添加子绝父相即可 如果要在浏览器中居中的话 就单给需要的那个盒子添加绝对定位即可）

2.水平，垂直边便宜为50%

3.子级向左，上移动自身尺寸的一半

（方法一：设置左、上的外边距为 -尺寸的一半

​ 方法二： **transform:translate(-50%,-50%)**）

<!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{
            width: 200px;
            height: 200px;
            position: absolute;
            left:50%;
            top:50%;

            /* 方法一外边距法 */
            /* margin-left: -100px; */
            /* margin-top: -100px; */

            /* 方法二transform法 更方便 50%就是自己宽高的一半 */
            /* transform: translate(-50%,-50%); */
        }
    </style>
</head>
<body>
    <img src="a1b355c494e9cbfd923086a45e2683c9.jpg" alt="">
</body>
</html>

（transform: translate也是用来改变盒子位置的）

此时实现的效果就是图片盒子在整个浏览器中居中了

4.固定定位

应用场景： 元素的位置在网页滚动时不会发生改变

position:fixed
top:0;
right:0;

固定定位的特点：

1.脱标，不占位

2.固定定位改变位置的参照物是浏览器窗口

3.固定定位后的盒子改变了显示模式 具备行内块特点

5.堆叠层级 z-index

默认效果：按照标签书写顺序 后来者居上（后写的标签压在先写的标签之上）

作用：设置定位元素的层级顺序 改变定位元素的显示顺序

<!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>
        div{
            position: absolute;
            width: 200px;
            height: 200px;
        }
        .box1{
            background-color: pink;
        }
        .box2{
            background-color: skyblue;
            left: 100px;
            top: 100px;
        }
    </style>
</head>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</body>
</html>

此时显示的效果为

然后我们改变堆叠层级属性

.box1{
            background-color: pink;
            /* 取值为整数 默认为0 取值越大显示顺序越靠上 */
            z-index: 1;
}

在这里再解释一下注释 z-index的值像是一个能力大小 能力越大的排在越上面 比如现在设置了box1为1 而box2为默认0故box1更上 要想再让box2在上面 只需要把它的z-index变得比1大即可

总结

定位模式	属性值	是否脱标	显示模式	参照物
相对定位	relative	否	保持标签原有显示模式	自己原来位置
绝对定位	absolute	是	行内块特点	1. 已经定位的祖先元素 2. 浏览器可视区
固定定位	fixed	是	行内块特点	浏览器窗口

其中，相对定位和绝对定位一般结合使用，遵循 子绝父相 规则 ，实现一些显示上的堆叠效果； 在进行浏览器层面的定位居中时可以单独使用绝对定位，实现居中显示效果。固定定位单独使用，实现效果为 不管页面怎么滑动，固定定位的盒子的位置都不会发生改变（会一直被显示）。

CSS精灵

CSS Sprites 是一种网页图片应用处理方式

具体是 把网页中的一些背景图片（一般是小图）整合到一张图片文件中，再 background-position精确定位出背景图片位置。

优点：减少服务器被请求次数 ，减轻服务器压力，提高页面加载速度

实现步骤：

1.创建盒子 盒子尺寸与小图尺寸相同（小图是指整合图中的每一个小部分图）

2.设置盒子背景图为精灵图 （精灵图是指由很多小图整合而成的图）

3.添加background-position属性，改变背景图位置

（1.使用PxCook测量小图片的左上角坐标

​ 2.需要使用第几张图片，就取负的该图左上角坐标 为background-position属性值（向左上移动图片位置） ）

字体图标

跟CSS精灵的作用很像 都是用来展示一些小图

字体图标展示的是图片 但本质是字体

作用：在网页中添加简单的颜色单一的小图标 （如果是颜色丰富的一般还是要去用CSS精灵）

优点

• 灵活性：灵活地修改样式，例如：尺寸、颜色等
• 轻量级：体积小、渲染快、降低服务器请求次数
• 兼容性：几乎兼容所有主流浏览器
• 使用方便：先下载再使用

先下载再使用

下载字体

找到图标库 常用 [iconfont-阿里巴巴矢量图标库]:

在图标库下载后使用即可

使用字体

1.引入字体样式表（iconfont.CSS)

2.标签使用字体图标类名

<span class="iconfont icon-xxx"></span>

注意在调节字体样式的时候 要注意选择器优先性的问题

比如这里 我们用span标签选择器控制这个图片就不会生效 因为.iconfont标签选择器优先度更高 其有默认的样式

上传矢量库

作用：将项目特有的图标上传到iconfont图标库生成字体

CSS修饰属性

图片一开始是行内块标签 浏览器会把行内和行内块标签当作文字处理 默认按照基线对齐

垂直对齐方式

vertical-align

属性值

属性值	效果
baseline	基线对齐（默认）
top	顶部对齐
middle	居中对齐
bottom	底部对齐

在这里图示一下什么是基线对齐

这也就是为什么图片直接显示的时候会在最下面出现一个小空白间距

通过改变垂直对齐方式可以间接去掉这个空白部分

小拓展：其他去除这个空白部分的方法：直接改变图片的显示模式

（图片一开始是行内块标签 浏览器会把行内和行内块标签当作文字处理 默认按照基线对齐 这样是垂直对齐方式的背景）

display:block

谁占的高度更大，这个属性就给谁加 关于具体的属性值呢 直接顾名思义即可

过渡transition

作用：可以为一个元素在不同状态（比如说默认和点击状态）之间切换的时候添加过渡效果

提示

• 过渡的属性可以是具体的 CSS 属性
• 也可以为all（两个状态属性值不同的所有属性，都产生过渡效果）
• transition设置给元素本身

transition: 过渡的属性 花费时间（以s秒为单位）

最常用的是all

谁做过渡 就给谁加上transition状态 即要加给元素本身而并非过渡后的那个元素

最直观的例子就是应该加给img 而不是img:hover

img{
	width: 200px;
    height: 200px;
    transition: all 1s;
}
img:hover{
	width: 400px;
	height: 400px;
}

透明度

opacity: 0-1之间的数字

可以设置整个元素的透明度 注：同时包含背景和内容

属性值：0 - 1

• 0：完全透明（元素不可见）
• 1：不透明
• 0-1 之间小数：半透明

这个0到1的数值可以理解成手机的亮度

光标类型

属性值	效果
default	默认值，通常是箭头
pointer	小手效果，提示用户可以点击
text	工字型，提示用户可以选择文字
move	十字光标，提示用户可以移动

作用：鼠标悬停在元素上的时候指针显示样式

cursor:属性值（英文关键字）

SEO搜索引擎优化

可以提升网站百度搜索排名

提升 SEO 的常见方法：

1. 竞价排名
2. 将网页制作成 html 后缀
3. 标签语义化（在合适的地方使用合适的标签）
4. ……

网页头部 SEO 标签：

• title：网页标题标签
• description：网页描述
• keywords：网页关键词

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学成在线</title>
    <meta name="description" content="这是网页的介绍部分">
    <meta name="keywords" content="这是网页的关键词部分">
    <!-- 顺序要求：先清除再设置 -->
    <link rel="stylesheet" href="css\base.css">
    <link rel="stylesheet" href="css\index.css">
</head>

Favicon图标

出现在浏览器标题栏的网页图标

图标：文件名favicon.ico 放在网站根目录

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">