css 伪类选择器详解，如何引入字体图标库，盒模型
- 伪类的定义
| 伪 | 类 |
|---|---|
| 表示假的 | class 级权重 |
- 伪类的类型
| 伪类的类型 | 作用 |
|---|---|
| 结构伪类 | 根据位置获取元素 |
| 状态伪类 | 根据状态获取元素 |
结构伪类
- 常用的语法
| 结构伪类语法 | 代码 | 用法 |
|---|---|---|
| 取指定位置的元素 | :nth-of-type() |
直接在“()”内填写要取第几个元素 |
| 倒着取指定位置的元素 | :nth-last-of-type() |
直接在“()”内填写要取倒数第几个元素 |
| 取第一个 | first-of-type |
取第一个元素 |
| 取倒数第一个 | last-of-type |
取倒数第一个元素 |
伪类选择器的参数
nth-of-type(an+b)
| 参数 | 规则 |
|---|---|
| a 系数 | [0,1,2,3…] |
| n 权数 | [0,1,2,3…] |
| b 偏移量 | 从 0 开始 |
注:计算出来的索引必须是有效，从 1 开始
- 选择元素只有两种情况： 1.选择一个 2.选择一组
匹配单个元素 a=0
匹配多个元素 a>=1
- 匹配单个元素代码示例(a=0)
<!DOCTYPE html><html lang="zh-CN"><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>伪类选择器匹配单个元素(a=0)</title><style>/* 注：因为我们要取单个元素，所以a=0，n为从0开始自动计算，b为我们要找的元素的偏移量。我们要取的是ul下的第三个li所以偏移量b=3。匹配过程：a=0，n=【0,1,2,3...直到索引结束】，b=3a*n=0，b=3，an+b=3，因为0乘任何数都等一零，所以当a=0时只会索引一次 */.list > li:nth-of-type(0n + 3) {background-color: coral;}</style></head><body><ul class="list"><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li><li>item6</li><li>item7</li><li>item8</li></ul></body></html>
- 匹配多个元素代码示例(a=1)
<!DOCTYPE html><html lang="zh-CN"><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>伪类选择器匹配单个元素(a=0)</title><style>/* 注：因为我们要取多个元素，所以a=1，n为从0开始自动计算，b为我们要找的元素的偏移量。我们要取的是ul下的第三个包括下面的所有li元素，所以偏移量b=3。匹配过程：a=1，n=【0,1,2,3...直到索引结束】，b=3第一遍索引：1*0+3=0+3=3第二遍索引：1*1+3=1+3=4第三遍索引：1*2+3=2+3=5第四遍索引：1*3+3=3+3=6第五遍索引：1*4+3=4+3=7第六遍索引：1*5+3=5+3=8第七遍索引：1*6+3=6+3=9！索引到这里索引的到第九个元素，代码里没有第九个li，所以索引超纲自动停止，索引结束 */.list > li:nth-of-type(1n + 3) {background-color: coral;}</style></head><body><ul class="list"><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li><li>item6</li><li>item7</li><li>item8</li></ul></body></html>
如果我们想要向上取参数参数为：(-1n+b)
如果我们要取偶数参数为：(2n),但是这里我们有更简洁的方式，参数只需要填 even;
如果我们要取奇数参数为：(2n+1),但是这里我们有更简洁的方式，参数只需要填 odd;
表单伪类
- 状态伪类
| 代码 | 作用 |
|---|---|
| disabled | 禁用状态 |
| enabled | 启用状态 |
| checked | 选中状态 |
| hover | 鼠标悬停状态 |
| focus | 获取焦点状态 |
以下时代码示例：
<!DOCTYPE html><html lang="zh-CN"><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的属性 */input:enabled {/* 背景色：绿 */background-color: green;border: 3px dotted green;}/* 所有未开放的input的属性 */input:disabled {/* 背景色：红 */background-color: red;/* 边框尺寸3px 虚线 绿色 */border: 3px dotted green;}/* 当男被选中后后面的label内的内容变为蓝色 */#male:checked + * {/* 文本色：蓝 */color: blue;}/* 当女被选中后后面label内的内容变为红色 */#female:checked + * {/* 文本色：红 */color: red;}/* input获取焦点时的样式 */input:focus {/* 背景色：royalblue */background-color: royalblue;}button {/* 高100 */width: 100px;/* 宽30 */height: 30px;/* 边框：无 */border: none;/* 轮廓线：无 */outline: none;/* 背景色：红 */background-color: red;/* 文本色：白 */color: white;}/* 鼠标悬停hover样式 */button:hover {background-color: seagreen;color: black;cursor: pointer;}</style></head><body><div><label for="username">username:</label><input type="text" name="username" id="username" value="admin" disabled /></div><div><label for="">password:</label><input type="password" name="password" id="password" /></div><div><input type="radio" name="gender" id="male" value="0" /><label for="male">男</label><input type="radio" name="gender" id="female" value="1" /><label for="female">女</label><p><button type="submit">提交</button></p></div></body></html>
开发小技巧-引用字体图标库
- 什么是字体图标？
图标样式的字体，本质上仍然是字体/文本 - 阿里矢量图标库
如何引用图标库？
1.使用 link 标签链接到图标库
<link rel="stylesheet" href="./图标库文件地址/" />2.使用图标库(class 里填写相对应的图标名称即可)
<span class="iconfont WIFI icon-WIFI"></span>完整引入演示代码如下
<!DOCTYPE html><html lang="zh-CN"><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" /><!-- 引入字体图标库css文件 --><link rel="stylesheet" href="./font_icon/iconfont.css" /><title>引入字体图标库</title><style>/* 设置字体图标的样式：大小，颜色； */div.iconfont.qrcode.icon-qrcode {font-size: 100px;color: red;}</style></head><body><!-- 使用字体图标 --><div class="iconfont qrcode icon-qrcode"></div></body></html>
盒模型
- 盒模型的常用属性
| 序号 | 代码 | 作用 | 备注 |
|---|---|---|---|
| 1 | width |
宽 | |
| 2 | height |
高 | |
| 3 | border |
边框 | 可视化属性，有多种样式，solid实线，dashed虚线 |
| 4 | pandding |
内边距 | |
| 5 | margin |
外边距 |
1.通常情况下我们给一个元素边框和背景色，背景色会融入到边框内，这时我们只需要给该元素一个样式就可以了。背景色裁切：background-clip: content-box;这个代码的意思是内容在盒子中心。
2.通常我们在布局中给的width和height都是希望这是盒子的大小，但是通常会因为边框，内边距和外边距等等的因素出现撑大了盒子的宽和高，所以这里我们要用到一个代码 box-sizing:border-box,此时的width和height设置的宽高就是我们盒子计算的宽高，不会因为盒子的其他元素改变盒子的尺寸。
- padding 语法
| 类型 | 语法 | 解释 |
|---|---|---|
| 单值语法 | padding:20px |
上下左右四个值都是 20px |
| 双值语法 | padding:20px 30px |
左右 20px 上下 30px |
| 三值语法 | padding:20px 30px 20px |
左 20px 上下 30px 右 20px |
| 四值语法 | padding:30px 20px 30px 20px |
顺时针语法：上 30px 右 20px 下 30px 左 20px |
- 以下是代码详情示例以及解析
<!DOCTYPE html><html lang="zh-CN"><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>/* 初始化所有元素的内边距和外边距，并且设置盒子的大小不受内外边距和边框的影响，只由width和height决定大小 */* {/* 内边距padding */padding: 0px;/* 外边距margin */margin: 0px;/* 设置元素大小只能由width和height决定 */box-sizing: border-box;/* 边框=1px 实现边框 红色 */outline: 1px solid red;}/* 盒模型常用属性1.width2.height3.border4.padding5.margin *//* 这里是class=box的div标签的样式声明 */.box {/* 宽：200px */width: 200px;/* 高：200px */height: 200px;/* 边框：10px 虚线 红色（已被下方的边框声明覆盖） */border: 10px dashed red;/* 背景色：黑色 */background-color: black;/* 背景裁切：在盒子内 */background-clip: content-box;/* 内边距：20px（因为.box的权重为（0,1,0） 所以覆盖了全局设置的padding） */padding: 20px;/* 外边距：20px */margin: 20px-;/* 这里我们在全局设置中设置了box-sizing：border-box，所以元素的宽度为左右border（边框的大小）+左右padding（内边距的大小）+width=10(左边框)+20(左padding)+140(元素内容部分的宽度)+10(右边框)+20(右padding)=200 *//* 元素的宽度为上下border（边框的大小）+上下padding（内边距的大小）+height=20(上边框)+20(上padding)+120(元素内容部分的高度)+20(下边框)+20(下padding)=200 *//* 设置元素大小只能由width和height决定(由于上方全局设置已经设置过了，这里省略也可以) */box-sizing: border-box;/* 为了记忆padding的四值语法，我们这里的边框单独设置也采用了上右下左的顺序 *//* 单独设置边框上方：20px 实线 红色 */border-top: 20px solid red;/* 单独设置边框右方：10px 虚线 蓝色 */border-right: 10px dashed blue;/* 单独设置边框下方：20px 实线 红色*/border-bottom: 20px solid red;/* 单独设置边框左方：10px 虚线 蓝色 */border-left: 10px dashed blue;}/* 这里是class=box1的div标签的样式声明 *//* 这个样式声明主要是为了测试上面的全局声明，看下是否生效，元素的大小是否只由width和height来决定而不是会收到padding(内边距)和margin(外边距)的影响 */.box1 {/* 宽：300px */width: 300px;/* 高：300px */height: 300px;/* 内边距：100px */padding: 100px-;/* 外边距：100px */margin: 100px-;}</style></head><body><!-- 这里是class=box的div标签 --><div class="box"></div><!-- 这里是class=box1的div标签 --><div class="box1">aaaaa</div></body></html>
常用单位
- 常用单位的种类
| 序号 | 单位类型 | 符号 |
|---|---|---|
| 1 | 绝对单位 | px(像素)： 1lin(英寸)=96px |
| 2 | 相对单位 | em：永远和当前或父级的 font-size(字号)进行绑定 |
| 3 | 相对单位 | rem:永远和 html(根元素)中的 font-size 进行绑定 |
| 4 | 相对单位 | vw:常用在响应式布局（多在移动端）,指把视口宽度分为 100 份，1vw=1/100 |
| 5 | 相对单位 | vh:常用在响应式布局（多在移动端）,指把视口高度分为 100 份，1vh=1/100 |
- 以下是 px，em，rem，vw，vh 代码的示例
<!DOCTYPE html><html lang="zh-CN"><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: 0px;margin: 0px;box-sizing: border-box;}html {/* 这里我们给html（根元素）设置一个统一的字号：10px */font-size: 10px;}.box {/* 这里我们给div.box一个单独的字号 */font-size: 20px;/* 宽=5em=5*20px=100px */width: 5em;/* 高=10rem=10*10px=100px */height: 10rem;border: 1px solid red;background-color: black;background-clip: content-box;}.box {/* 这里我们把视窗宽度分为100份，100vw=100%宽度 */width: 100vw;/* 这里我们把视窗高度分为100份，10vh=10%高度 */height: 10vh;}</style></head><body><div class="box">aaaaa</div></body></html>
