CSS伪类选择器，字体图标，盒模型及常用布局单位
程序员文章站
2022-05-20 15:51:03
...
伪类选择器
-
伪类选择器的类型
-
结构伪类：根据元素位置获取元素
如以下代码所示
效果为<!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>Document</title></head><body><ul class="list"><li class="first">Item1</li><li>Item2</li><li>Item3</li><li>Item4</li><li>Item5</li><li>Item6</li><li>Item7</li><li>Item8</li></ul><style>.list > :nth-of-type(5) {background-color: blue;}</style></body></html>
代码中用到的:nth-of-type(5)就是伪类选择器，用来选择list类里第五个子元素结构伪类选择器的计算
:nth-of-type(an+b)中，a控制选择个数及相隔数，b控制偏移量，n是线性增长的
例如:nth-of-type(5)就是a=0，b=5，故而单选第五个元素
例如:nth-of-type(n+3)，就是选择第三个元素及以后的元素
再例如:nth-of-type(2n)就是选择2，4，6…等偶数元素 -
状态伪类：根据元素状态来获取元素
如
:focus input:focus 匹配获得焦点的 <input> 元素
:hover a:hover 匹配鼠标悬停其上的元素
-
字体图标
字体图标来源有不少，如阿里巴巴矢量图标库、Bootstrap图标库和awesome图标库等
引用方式
-
在线引入
通过link标签引入该图标库的url来实现引用
如bootstrap的引用`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
` -
本地引入
- 通过npm安装，只需在npm中输入指令即可安装
如bootstrap的npm安装npm i bootstrap-icons - 通过下载zip压缩包解压到项目文件夹中，别忘了在所需页面中引用
- 通过npm安装，只需在npm中输入指令即可安装
盒模型
盒模型的五种属性
width(宽度),heigh(高度),border边框,padding(内边框,内边距),margin(外边框,外边距)
演示如下
<!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>Document</title></head><body><div class="box"></div><style>.box {width: 200px;height: 200px;background-color: violet;border: 10px dashed currentColor;background-clip: content-box;padding: 20px;}</style></body></html>
我们可以看到设置高度200px与宽度200px是里面粉色部分的宽高，实际宽高是200+20*2+10*2=260px,这不利于我们设计页面时的计算
使用box-sizing: border-box;属性可以准确生成200*200的盒模型
<!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>Document</title></head><body><div class="box"></div><style>.box {width: 200px;height: 200px;background-color: violet;border: 10px dashed currentColor;background-clip: content-box;padding: 20px;box-sizing: border-box;}</style></body></html>
该属性会自动压缩内容部分的宽高，来保证整体宽高是准确的