伪类选择器、字体图标、盒模型属性、em和rem 的区别小结
程序员文章站
2022-03-13 12:37:23
...
一、伪类选择器（权重属类级）
<!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></head><body><!-- 1. 结构伪类：根据元素的位置选择元素 --><!-- 格式一： 标签:nth-of-type(数字) 说明：选择同类型中的第n个同级兄弟元素 --><!-- 格式二： 标签:nth-last-of-type(数字) 说明：选择同类型中的倒数第n个同级兄弟元素 --><!-- 格式三： 标签:first-of-type(数字) 说明：选择同类型中的第1个同级兄弟元素 --><!-- 格式二： 标签:last-of-type(数字) 说明：选择同类型中的倒数第1个同级兄弟元素 --><ul class="w1"><li>排行第1</li><li>排行第2</li><li>排行第3</li><p>另一家人不是同类，不影响选择</p><p>另一家人不是同类，不影响选择</p><li>排行第4</li><li>排行第5</li><li>排行第6</li></ul><style>/* 选择正数第二个li */.w1 > li:nth-of-type(2) {color: rgb(180, 70, 175);}/* 选择正数第五个li */.w1 > li:nth-of-type(5) {color: rgb(180, 70, 175);}/* 选择倒数第三个li */.w1 > li:nth-last-of-type(3) {font-size: 35px;}/* 这里没有指定li，所以选择第1个li和第1个p */.w1 :first-of-type {background-color: wheat;}/* 选择最后的li */.w1 li:last-of-type {background-color: thistle;}</style><!-- 2. nth-of-type（）的计算方法： --><!-- an+b :a 选择单个或多个元素，取值：0，1，2...n 自动取值：0，1，2...b 计算元素位置偏移量，取值：0，1，2... --><ul class="w2"><li>打进了1个好球</li><li>打进了2个好球</li><li>打进了3个好球</li><li>打进了4个好球</li><li>打进了5个好球</li><li>打进了6个好球</li><li>打进了7个好球</li><li>打进了8个好球</li></ul><style>/* a=0 an等于0,选择单个元素,an+2=2，选择第二个元素 */.w2 :nth-of-type(0n + 2) {color: tomato;}/* a=1 an=n，选择多个元素，an+2计算结果：n=0时为2；n=1时为3；n=2时为4...n=7时为9，超过元素数量，不再计算。选择2至8元素 */.w2 :nth-of-type(1n + 2) {color: turquoise;}/* a=2 选择多个元素，an+2计算结果：n=0时为2；n=1时为4；n=2时为6...n=4时为10，不再计算则选择2,4,6,8元素 */.w2 :nth-of-type(2n + 2) {color: blue;}</style><!-- 3. 状态伪类：根据元素状态来选择元素 --><button class="b1">鼠标在按钮上时变手，背景变黄，按下变蓝</button><style>.b1:hover {cursor: pointer;background-color: yellow;}.b1:active {background-color: turquoise;}</style></body></html>
二、使用字体图标
- 使用字体图标可下载或通过链接使用
- 常用字体图标网站下载 https://www.iconfont.cn/
- 下载后放到网站目录
- 在页面中引入
<link rel="stylesheet" href="./font_ico/iconfont.css" /> - 在标签中设置样式，字体图标样式可看网站提示
- 示例：
<!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><link rel="stylesheet" href="./font_ico/iconfont.css" /></head><body><i class="iconfont icon-icon_issue_leader_add"></i><span class="iconfont icon-icon_issue_add_on"></span></body></html>
运行效果
三、盒模型的 5 个属性
<!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>盒模型的 5 个属性</title></head><body><!-- 盒模型常用的5个属性：width宽度height高度border边框padding内边距margin外边距 --><div class="div1"><div>盒子1</div></div><div class="div2"><div>盒子2</div></div><style>/* 盒子外边尺寸：宽300+30*2+60*2=480px高200+30*2+60*2=380px */.div1 {width: 300px;height: 200px;border: 30px solid;padding: 60px;margin-bottom: 50px;}.div1 div {background-color: turquoise;width: 100%;height: 100%;}/* 盒子外边尺寸：宽300高200设置了box-sizing属性后， 盒子内部被内边距压缩*/.div2 {width: 300px;height: 200px;border: 30px solid;padding: 60px;box-sizing: border-box;}.div2 div {background-color: rgb(224, 64, 211);width: 100%;height: 100%;}</style></body></html>
运行效果
四、em，rem 单位的区别
- em ： 总是和当前或父级的 font-size 绑定
- rem ： 总是和 html 根元素的 font-size 绑定
<!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>em，rem 单位的区别</title></head><body><!-- em ： 总是和当前或父级的 font-size 绑定rem ： 总是和 html 根元素的 font-size 绑定 --><style>/* 父元素font-size为20px */.bb {font-size: 20px;}/* 根元素Html设置font-size为40px */html {font-size: 40px;}/* 盒子1大小与.bb样式绑定，即10*20=200 */.d1 {width: 10em;height: 10em;background-color: tomato;margin: 20px 0;}/* 盒子2大小与html样式绑定，即10*40=400 */.d2 {width: 10rem;height: 10rem;background-color: tomato;}</style><div class="bb"><div class="d1">盒子1</div><div class="d2">盒子2</div></div></body></html>
运行效果