目录：
- 结构伪类选择器
- 盒子模型-边框线
- 盒子模型-内边距
- 盒子模型-解决盒子被撑大
- 盒子模型-外边距与版心居中
- 小知识：清除浏览器中所有标签的默认样式
- 内容溢出控制显示方式
- 盒子模型-圆角
🐎正片开始
结构伪类选择器
什么是结构伪类选择器：结构伪类选择器是CSS中的一种选择器，用于基于文档结构选择元素。 这些选择器通常用于模仿或替代JavaScript中的事件处理器，使得可以通过CSS样式对文档中的某些结构位置或状态进行样式设计。结构伪类选择器能够选择元素在其生命周期中的特定时刻的状态，比如当用户悬停在链接上时，或者当元素是其父元素的第一个子元素时
结构伪类选择器的作用主要体现在以下几个方面：
- 减少对HTML属性的依赖
- 动态样式设计
- 文档结构选择
一些常见的结构伪类选择器包括：
- hover：选择鼠标悬停在上面的元素。
- focus：选择拥有焦点的元素。
- active：选择被激活的元素（例如，被点击的链接）。
- visited 和 link：分别选择已访问和未访问的链接。
- first-child 和 last-child：选择某个元素的第一个或最后一个子元素。
- nth-child()：选择某个元素的特定索引的子元素。
接下来主要介绍 first-child ,last-child, nth-child()
通过以下表格介绍着三个的用法和作用
| 结构伪类选择器 | 作用 |
|---|---|
| 选择器:first-child | 查找第一个元素对其赋予属性值 |
| 选择器:last-child | 查找最后一个元素对其赋予属性值 |
| 选择器:nth-child(N) | 查找第N个元素(第一个元素N值为1) |
- 选择器:first-child的使用
代码如下
<!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>li:first-child{background-color: red;}</style>
</head>
<body><ul><li>我是第一个</li><li>我是第二个</li><li>我是第三个</li><li>我是第四个</li><li>我是第五个</li><li>我是第六个</li><li>我是第七个</li><li>我是第八个</li><li>我是第九个</li></ul>
</body>
</html>
可能有朋友好奇这么写结构伪类选择器是啥意思？
<style>li:first-child{background-color: red;}</style>
其实就是在选中<li>标签中进行查找，first-child 单词意思就是说第一个孩子，其实也就是找到所有<li>标签中的第一个<li>标签 然后让其伪类结构选择器的属性，这里的属性就是让其背景变为红色
看看效果
- 选择器:last-child的使用
使用代码如下
<!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>li:last-child{background-color: blue;}</style></head><body><ul><li>我是第一个</li><li>我是第二个</li><li>我是第三个</li><li>我是第四个</li><li>我是第五个</li><li>我是第六个</li><li>我是第七个</li><li>我是第八个</li><li>我是第九个</li></ul></body>
</html>
对以下代码进行解释
<style>li:last-child{background-color: blue;}
</style>
last-child 单词的意思是最后一个孩子，也就是说在所有<li>标签中选择最后一个<li>标签对其背景色赋值为蓝色
效果图如下
- 选择器:nth-child(N)的使用
这里的N从1开始取正整数。
<!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>li:nth-child(1){background-color: red;}li:nth-child(2){background-color: blue;}li:nth-child(3){background-color: green;}</style></head><body><ul><li>我是第一个</li><li>我是第二个</li><li>我是第三个</li><li>我是第四个</li><li>我是第五个</li><li>我是第六个</li><li>我是第七个</li><li>我是第八个</li><li>我是第九个</li></ul></body>
</html>
结构伪类选择器代码如下
<style>li:nth-child(1){background-color: red;}li:nth-child(2){background-color: blue;}li:nth-child(3){background-color: green;}</style>
当N取几时就选中所有<li> 标签中的第几个标签，上述代码分别是选中了第1，2，3个<li>分别背景色会变为红绿蓝。
效果图
选择器：nth-child（公式）
| 公式 | 作用 |
|---|---|
| 2n | 选中偶数 |
| 2n+1；2n-1 | 选中奇数标签 |
| 5n | 选中5的倍数的标签 |
| n+5 | 选中(5,6,7…)一系列标签 |
| -n+5 | 选中(5,4,3,2,1…)一系列标签 |
这里的n从0开始取正整数
公式(2n)和(2n+1；2n-1)的用法
代码如下
<!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>/*选中偶数标签*/li:nth-child(2n){background-color: red;}/*选中奇数标签*/li:nth-child(2n+1){background-color: blue;}</style></head><body><ul><li>我是第一个</li><li>我是第二个</li><li>我是第三个</li><li>我是第四个</li><li>我是第五个</li><li>我是第六个</li><li>我是第七个</li><li>我是第八个</li><li>我是第九个</li></ul></body>
</html>效果图如下偶数标签背景色为红色，奇数标签背景色为蓝色
其他公式用法和上面用法相同，依葫芦画瓢即可。
盒子模型-边框线
- 这是同时设置四个方向的边框线
属性名：border
属性值：边框线粗细 线条样式 颜色 (不区分顺序)
常用线条样式
| 属性值 | 线条样式 |
|---|---|
| solid | 实线 |
| dashed | 虚线 |
| dotted | 点线 |
代码用法如下
<!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>.solid{width: 200px;height: 200px;background-color: green;border: 4px solid blue;}.dashed{width: 200px;height: 200px;background-color: green;border: 6px dashed red;}.dotted{width: 200px;height: 200px;background-color: green;border: 8px dotted #000;}</style>
</head><body>这是实线： <div class="solid"></div>这是虚线：<div class="dashed"></div>这是点线：<div class="dotted"></div>
</body>
</html>
效果图
- 设置指定方向的边框线
属性名：border-方位(left,right,top,bottom)
属性值：边框线粗细 线条样式 线条颜色(不区分顺序)
用法如下
<!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{width: 200px;height: 200px;background-color:pink;/* 这是设置上边框线 */border-top: 2px solid red;/* 这是设置下边框线 */border-bottom: 3px dashed green;/* 这是设置左边框线 */border-left: 4px dotted blue; /* 这是设置右边框线 */border-right: 5px solid orange;}</style>
</head>
<body>指定方向设置边框线测试如下：<div></div>
</body>
</html>
效果展示
盒子模型-内边距
- 设置某个方向的内边距
作用：设置内容与盒子边缘之间的距离
属性名：padding-方向(top, bottom,left,right)
代码用法如下
<!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{width: 200px;height: 200px;background-color: orange;/* 设置指定方向内边距 */padding-top: 10px;padding-bottom: 20px;padding-left: 30px;padding-right: 40px;}</style>
</head>
<body><div></div>
</body>
</html>
效果图如下
- 同时设置多个方向的内边距
padding多值写法
| 取值个数 | 实例 | 含义 |
|---|---|---|
| 一个值 | padding：10px; | 四个方向内边距均为10px |
| 两个值 | padding：10px 80px; | 上下：10px，左右：80px |
| 三个值 | padding：10px 40px 90px; | 上：10px，左右：40px，下：90px |
| 四个值 | padding：10px 20px 30px 40px; | 上：10 px，下：30px，左：40px，右：20px |
- 测试padding一个值的情况
代码如下
<!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{width: 200px;height: 200px;background-color: orange;/* 设置指定方向内边距 */padding: 40px;}</style></head><body><div></div></body>
</html>
效果图如下
当为padding设置一个像素值时则四个方向内边距都是这个像素值
- 测试padding两个值的情况
代码如下
<!-- 1. 测试padding两个值的情况 -->
<!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{width: 200px;height: 200px;background-color: red;/* 设置指定方向内边距 */padding: 40px 80px;}</style></head><body><div></div></body>
</html>效果图
当为padding设置两个值时，第一个值为上内边距设置40px,第二个值对应的就是右内边距的像素值80px,因为左，下内边距没有被设置，则浏览器会把下内边距设置为和上内边距一样的像素值40px，同理，左内边距也被设置为和右内边距相同的值80px
盒子模型-解决盒子被撑大
<style>div{width: 200px;height: 200px;background-color: pink;padding: 20px;}</style>
可以看见在代码中我设置div尺寸为200px200px，但是实际变成了239.99239.99,我们就当初240*240来看这是为什么呢？
那是因为我们加了padding:20px;这个属性，导致<div> 尺寸被撑大了，那为什么宽高各加40px呢？因为上下左右内边距是20px。
最终<div>标签的宽高计算如下
宽=左内边距+右内边距+里面框的宽度=20px+20px+200px=240px；
高=上内边距+下内边距+里面框的高度= 20px+20px+200px=240px;
盒子不被撑大解决方法如下
加上：box-sizing:border-box;
接下来在试试，代码如下
<!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{width: 200px;height: 200px;background-color: pink;padding: 20px;box-sizing: border-box;}</style>
</head>
<body><div></div>
</body>
</html>
效果展示
此时就解决了被撑大问题。
盒子模型-外边距与版心居中
作用：拉开两盒子之间的距离
属性名：margin
用法与padding用法相同，都可以设置某个单独方向，以及同时设置全部方向，只是这两个属性作用不同
指定某个方向设置外边距
<!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{width: 600px;height: 200px;background-color: orange;/* 设置指定方向外边距 */margin-top: 100px;margin-bottom: 60px;margin-left: 30px;margin-right: 40px;}</style>
</head>
<body><div></div>
</body>
</html>
效果展示
版心居中小知识
只需要在margin属性的第二值用上auto即可版心居中
代码如下
<!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{width: 600px;height: 200px;background-color: orange;/* 设置版心居中 */margin: 60px auto;}</style>
</head>
<body><div></div>
</body>
</html>
居中效果图
清除默认样式
在没有清除之前会有默认样式如下图所示
清除默认样式代码如下
<style>*{margin: 0; /*清除外边距*/padding: 0; /*清除内边距*/list-style: none;/*清除无序序列前面的小点点*/box-sizing: border-box; /*将来设置内边距时，防止盒子被内容撑大*/}</style>
清除后效果图
内容溢出控制显示方式
属性名：overflow
属性值
| 属性值 | 效果 |
|---|---|
| hidden | 溢出隐藏 |
| scroll | 溢出滚动(无论是否溢出，都显示滚动条位置) |
| auto | 溢出滚动(溢出才显示滚动条位置) |
接下来对这三种属性值的使用情况如下
代码部分
<!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>.hldden{width: 200px;height: 200px;background-color: pink;overflow: hidden; }.scroll{width: 200px;height: 200px;background-color: pink;overflow: scroll;}.auto{width: 200px;height: 200px;background-color: pink;overflow: auto;}</style>
</head>
<body>1. 测试hidden属性值，此时已经溢出，但溢出部分被隐藏<div class="hldden"><p>测试中</p><p>测试中</p><p>测试中</p><p>测试中</p><p>测试中</p><p>测试中</p><p>测试中</p><p>测试中</p></div><br><br>2.测试scroll属性值,此时未溢出情况，但也显示滚动条<div class="scroll"> <p>测试中</p><p>测试中</p><p>测试中</p></div><br>2.1 测试scroll属性值,此时有溢出情况，显示滚动条<div class="scroll"><p>测试中</p><p>测试中</p><p>测试中</p><p>测试中</p><p>测试中</p><p>测试中</p><p>测试中</p></div><br>3.测试auto属性值,此时未溢出情况，没显示滚动条<div class="auto"> <p>测试中</p><p>测试中</p><p>测试中</p></div><br>3.1 测试auto属性值,此时有溢出情况，显示滚动条<div class="auto"><p>测试中</p><p>测试中</p><p>测试中</p><p>测试中</p><p>测试中</p><p>测试中</p><p>测试中</p></div>
</body>
</html>
效果图
盒子模型-圆角
作用：为元素外边框设置为圆角
属性名： border-radius
属性值：数字+px/百分比
注意：属性值是圆角半径
<!--用法如下-->
border-radius:10px(左上角) 20px(右上角) 30px(左下角) 40px(右下角);
- 当只给属性border-radius赋值一个值时的情况
<!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{width: 200px;height: 100px;background-color:cadetblue;border-radius: 30px;}</style>
</head>
<body><div></div>
</body>
</html>
效果图
可以看见所有角都是一样的，都是30px。
- 当只给属性border-radius赋值两个值时的情况
<!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{width: 200px;height: 100px;background-color:cadetblue;border-radius: 10px 40px;}</style>
</head>
<body><div></div>
</body>
</html>
效果图
可以看见左上角的弧度和右下角的弧度一致，右上角的和左下角的一致。因为我只给border-radius属性赋了两个值，按照赋值规则，第一个值是给左上角的，第二个则是给右上角的，如果没有被主动赋值的角，会和对角的弧度效果一致。
正圆形状：给正方形的盒子设置圆角属性值为宽或高的一半即可或者写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{border-radius:50%;}div{padding-top: 30px;box-sizing: border-box;height: 300px;font-size: 30px;line-height: 0px;background-color:darkgray;}</style></head>
<body><div><img src="1.png" width="200"><p> 头像</p></div></body>
</html>效果图
- 胶囊形状
代码如下
<!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{width: 200px;height: 100px;background-color:burlywood;border-radius:50px;}</style> </head><body><div></div></body>
</html>效果图展示
