伪类选择器、字体图标、盒模型属性、em和rem 的区别小结
程序员文章站
2022-03-03 21:34:01
...
一、伪类选择器(权重属类级)
<!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>
运行效果