一.选择器
1.结构伪类选择器
作用：
根据元素的结构关系查找元素
使用方式：
（1）.类名:first-child（查找第一个元素）
（2）.类名:last-child（查找最后一个元素）
（3）.类名:nth-child(N)（查找第N个元素）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 查找第一个元素 */
div:first-child {
background-color: aqua;
}
/* 查找最后一个元素 */
div:last-child {
background-color: bisque;
}
/* 查找第3个元素 */
div:nth-child(3) {
background-color: blueviolet;
}
</style>
</head>
<body>
<div>div标签</div>
<div>div标签</div>
<div>div标签</div>
<div>div标签</div>
<div>div标签</div>
</body>
</html>
注意：
我们还可以利用类名:nth-child(N)的公式根据元素的结构关系查找多个元素
①：查找偶数标签（2n）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 偶数标签 */
div:nth-child(2n) {
background-color: blueviolet;
}
</style>
</head>
<body>
<div>div标签</div>
<div>div标签</div>
<div>div标签</div>
<div>div标签</div>
<div>div标签</div>
</body>
</html>
②：查找奇数标签（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">
<style>
/* 奇数标签（2n + 1和2n - 1没区别） */
div:nth-child(2n + 1) {
background-color: blueviolet;
}
</style>
</head>
<body>
<div>div标签</div>
<div>div标签</div>
<div>div标签</div>
<div>div标签</div>
<div>div标签</div>
</body>
</html>
③：查找3的倍数的标签（3n）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 3的倍数的标签 */
div:nth-child(3n) {
background-color: blueviolet;
}
</style>
</head>
<body>
<div>div标签</div>
<div>div标签</div>
<div>div标签</div>
<div>div标签</div>
<div>div标签</div>
</body>
</html>
④：查找第3个以后的标签（n+3）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 第3个以后的标签（包括3） */
div:nth-child(n + 3) {
background-color: blueviolet;
}
</style>
</head>
<body>
<div>div标签</div>
<div>div标签</div>
<div>div标签</div>
<div>div标签</div>
<div>div标签</div>
</body>
</html>
⑤：查找第三个之前的标签（-n+3）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 第3个之前的标签（包括3） */
div:nth-child(-n + 3) {
background-color: blueviolet;
}
</style>
</head>
<body>
<div>div标签</div>
<div>div标签</div>
<div>div标签</div>
<div>div标签</div>
<div>div标签</div>
</body>
</html>
2.伪元素选择器
作用：
创建虚拟元素（伪元素），用来摆放装饰性的内容
使用方式：
（1）.类名::before（在标签里最前面添加一个伪元素）
（2）.类名::after（在标签里面最后面添加一个伪元素）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 伪元素选择器 */
div {
width: 300px;
height: 300px;
background-color: blueviolet;
}
/* 在伪元素选择器中必须添加content元素 */
div::before {
content: "伪元素选择器";
width: 100px;
height: 100px;
background-color: red;
display: block;
}
div::after {
content: "器择选素元伪";
width: 100px;
height: 100px;
background-color: orange;
display: block;
}
</style>
</head>
<body>
<div>div标签</div>
</body>
</html>
注意：
（1）.必须设置content:""属性用来设置伪元素的内容，如果没有内容，则在引号内留空
（2）.伪元素的显示模式默认是行内
（3）.伪元素选择器的权重和标签选择器相同
二.PxCook（像素大厨）
PxCook是一款切面设计工具软件，支持PSD文件的文字，颜色，距离的自动智能识别
1.开发面板（自动智能识别）
2.设计面板（手动测量尺寸和颜色）
三.盒子模型
1.作用：
布局网页，摆放盒子和内容
2.盒子模型的组成部分：
（1）.内容区域（width，height）
（2）.内边距padding（存在于内容和盒子边缘之间）
注意：
内边距会把盒子撑大（四个方向都会增加与我们设置的内边距相同的大小），读者最好自己试试内边距撑大盒子的效果
作用：
设置内容与盒子边缘之间的距离
属性名：
padding（四个方向设置的样式相同）或padding-方位名词（但方向设置）
内边距简单案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 300px;
height: 300px;
background-color: orange;
/* 设置四个方向的内边距都为50像素 */
padding: 50px;
/* 上方的内边距 */
padding-top: 10px;
/* 底部的内边距 */
padding-bottom: 20px;
/* 左边的内边距 */
padding-left: 30px;
/* 右边的内边距 */
padding: 40px;
/* 注意padding和padding-方位名词是不能连用的哦 */
}
</style>
</head>
<body>
<div>div标签</div>
</body>
</html>
padding中还有一种多值写法
①：如果只写一个值，表示四个方向设置的内容都相同
②：如果写两个值则表示上下为第一个值，左右为第二个值
③：如果写三个值则是上为第一个值，左右为第二个值，下为第三个值
④：四个值对应的顺序就是上，右，下，左
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 300px;
height: 300px;
background-color: orange;
/* 四个方向的内边距都相同 */
padding: 10px;
/* 上下，左右 */
padding: 10px 20px;
/* 上，左右，下 */
padding: 10px 20px 30px;
/* 上，右，下，左 */
padding: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div>div标签</div>
</body>
</html>
（3）.边框线（border）
属性名：
border（简写为bd）
属性值：
边框线粗细，线条样式（常用的线条样式有：solid（实线），dashed（虚线），dotted（点线）），颜色（不区分顺序）
三种线条样式简单案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 300px;
height: 300px;
background-color: orange;
/* 实线 */
border: 1px solid #000;
/* 虚线 */
border: 2px dashed #000;
/* 点线 */
border: 3px dotted #000;
}
</style>
</head>
<body>
<div>div标签</div>
</body>
</html>
我们还可以在单方向设置边框线：
属性名：
border-方位名词（缩写为bd+方位名词首字母（lrtb））
属性值：
边框线粗细，线条样式，颜色（同样不区分顺序）
单方向边框线简单案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 300px;
height: 300px;
background-color: orange;
/* 上边框线 */
border-top: 1px solid #000;
/* 下边框线 */
border-bottom: 2px dashed red;
/* 左边框线 */
border-left: 3px dotted green;
/* 右边框线 */
border-right: 4px solid blue;
}
</style>
</head>
<body>
<div>div标签</div>
</body>
</html>
（4）.外边距margin（存在于盒子外侧）
作用：
拉开两个盒子之间的距离
属性名：
margin
属性值：
和内边距padding的用法相同，读者有兴趣的话，在margin的属性值中最为特别的就是有一个auto属性，能够使得外边距自动适应两侧的长度，实现居中的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 300px;
height: 300px;
background-color: blueviolet;
/* 左右方向都自动计算，表现形式为盒子居中 */
margin: auto;
}
</style>
</head>
<body>
<div>div标签</div>
</body>
</html>
注意：
①：外边距是不会撑大盒子的
②：要利用auto属性实现居中的效果的话，盒子必须要有宽度（如果没有宽度的话就会直接占满一行，也就无所谓居中了）
在外边距中还有两种经常遇见的问题：
①：合并现象
合并现象的具体表现：垂直排列的兄弟元素的上下margin会合并（取两个margin中的较大值生效）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 如果两个外边距都起作用的话应该是50+100=150px的距离，但是实际在页面上显示的效果
却是两者之中较大的那一个，这就是外边距中的合并现象 */
.test_one {
width: 300px;
height: 300px;
background-color: red;
margin-bottom: 50px;
}
.test_two {
width: 300px;
height: 300px;
background-color: blueviolet;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="test_one">div标签</div>
<div class="test_two">div标签</div>
</body>
</html>
②：塌陷问题
在父子级的标签中，子级如果添加了上边距就会产生塌陷问题（导致父级一起向下移动）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 塌陷问题，子级的上边距导致父级一起塌陷 */
.test_one {
width: 900px;
height: 900px;
background-color: red;
}
.test_two {
width: 300px;
height: 300px;
background-color: blueviolet;
margin-top: 300px;
}
</style>
</head>
<body>
<div class="test_one">
<!-- 如果在子级之前随便添加一些内容就不会导致父级塌陷 -->
<div class="test_two">div标签</div>
</div>
</body>
</html>
解决方法：
①：取消子级的margin，转而在父级中设置padding
②：父级设置overflow:hidden
③：父级设置border-top
（5）.盒子模型的各个组成部分的简单案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 300px;
height: 300px;
background-color: orange;
/* 内边距 */
padding: 100px;
/* 边框线 */
border: 1px solid #000;
/* 外边距 */
margin: 100px;
}
</style>
</head>
<body>
<div>div标签</div>
</body>
</html>
3.对盒子模型的尺寸进行计算
（1）.默认情况：
盒子模型的尺寸 = 内容尺寸 + border尺寸 + 内边距尺寸
所以我们在给盒子加border和padding属性会撑大盒子（之前提到过）
对此的解决方式一共有两种：
①：手动做减法：
手动减掉border和padding撑大的盒子的尺寸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
/* 手动方式 */
/* 原有的width为300px，height为300px，但是加上了一个30px的padding，所以我们需要
减去padding撑大的盒子的那一部分 */
width: 240px;
height: 240px;
background-color: blueviolet;
padding: 30px;
}
</style>
</head>
<body>
<div>div标签</div>
</body>
</html>
②：使用编译软件提供的内减模式：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">
<style>
div {
/* 自减模式 */
width: 300px;
height: 300px;
background-color: blueviolet;
box-sizing: border-box;
}
</style>
</head>
<body>
<div>div标签</div>
</body>
</html>
4.清除默认样式
作用：
清除我们不需要的，标签默认的样式
使用方式：
其实是有两种方式的，一种是直接使用*选中所有样式，另一种则是逐一列出有我们不需要的标签的样式，但是第二种方式实在太过麻烦，也不怎么实用，所以只看第一种方式即可
简单案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 读者可以自己看看清除默认样式与否的区别 */
* {
margin: 0;
padding: 0;
/* 使用内减模式防止盒子被撑大 */
box-sizing: border-box;
}
/* 去除列表的项目符号 */
li {
list-style: none;
}
</style>
</head>
<body>
<div>div标签</div>
<h1>h1标签</h1>
<p>p标签</p>
<ul>
<li>li标签</li>
</ul>
</body>
</html>
5.元素溢出
作用：
控制溢出元素的内容的显示方式
属性名：
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">
<style>
div {
width: 300px;
height: 300px;
background-color: blueviolet;
/* 建议读者首先不控制元素溢出，看看最后呈现出的效果如何 */
/* 使用hidden，只要是超出了盒子大小的内容都会被直接清除 */
overflow: hidden;
/* 无论是否溢出都会显示滚动条 */
overflow: scroll;
/* 只有元素溢出时才显示滚动条 */
overflow: auto;
}
</style>
</head>
<body>
<div>
div标签div标签div标签div标签div标签div标签div标签div标签
div标签div标签div标签div标签div标签div标签div标签div标签
div标签div标签div标签div标签div标签div标签div标签div标签
div标签div标签div标签div标签div标签div标签div标签div标签
div标签div标签div标签div标签div标签div标签div标签div标签
div标签div标签div标签div标签div标签div标签div标签div标签
div标签div标签div标签div标签div标签div标签div标签div标签
div标签div标签div标签div标签div标签div标签div标签div标签
div标签div标签div标签div标签div标签div标签div标签div标签
div标签div标签div标签div标签div标签div标签div标签div标签
div标签div标签div标签div标签div标签div标签div标签div标签
div标签div标签div标签div标签div标签div标签div标签div标签
div标签div标签div标签div标签div标签div标签div标签div标签
div标签div标签div标签div标签div标签div标签div标签div标签
div标签div标签div标签div标签div标签div标签div标签div标签
div标签div标签div标签div标签div标签div标签div标签div标签
div标签div标签div标签div标签div标签div标签div标签div标签
div标签div标签div标签div标签div标签div标签div标签div标签
div标签div标签div标签div标签div标签div标签div标签div标签
</div>
</body>
</html>
6.在行内元素中存在着内外边距的问题
具体表现为我们在行内元素中添加margin和padding时无法改变元素的垂直位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 塌陷问题，子级的上边距导致父级一起塌陷 */
.test_one {
width: 900px;
height: 900px;
background-color: red;
}
.test_two {
width: 300px;
height: 300px;
background-color: blueviolet;
margin-top: 300px;
}
</style>
</head>
<body>
<div class="test_one">
<!-- 如果在子级之前随便添加一些内容就不会导致父级塌陷 -->
<div class="test_two">div标签</div>
</div>
</body>
</html>
解决方法为：给行内元素添加line-height就可以改变垂直位置
7.圆角属性
作用：
设置元素的外边框为圆角
属性名：
border-radius
属性值：
可以为数字+px或百分比两种形式（属性值表示的是圆角半径）
圆角属性的简单应用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 300px;
height: 300px;
background-color: blueviolet;
border-radius: 30px;
}
</style>
</head>
<body>
<div>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">
<style>
div {
width: 300px;
height: 300px;
background-color: blueviolet;
/* 正圆形 */
border-radius: 50%;
}
</style>
</head>
<body>
<div>div标签</div>
</body>
</html>
②：胶囊形：
将长方形盒子设置圆角属性值为盒子高度的一半
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 600px;
height: 300px;
background-color: blueviolet;
/* 胶囊形 */
border-radius: 150px;
}
</style>
</head>
<body>
<div>div标签</div>
</body>
</html>
注意：设置属性值时不能超过50%，否则是不会生效的
8.添加阴影
作用：
给元素添加阴影效果
属性名：
box-shadow
属性值：
X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 600px;
height: 300px;
background-color: blueviolet;
/* X轴偏移量10px Y轴偏移量10px 模糊半径10px 扩散半径1px 颜色black 外阴影 */
box-shadow: 10px 10px 10px 1px black;
}
</style>
</head>
<body>
<div>div标签</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 600px;
height: 300px;
background-color: blueviolet;
/* X轴偏移量5px Y轴偏移量5px 模糊半径5px 扩散半径3px 颜色black 内阴影 */
box-shadow: 5px 5px 5px 3px black inset;
}
</style>
</head>
<body>
<div>div标签</div>
</body>
</html>
注意：在属性值中两个偏移量是必须书写的参数，内外阴影这个参数则默认是外阴影，如果需要使用内阴影则需要添加inset