1.选择器
1.1 结构伪类选择器
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>结构伪类选择器</title>
<style>
/* 第一个 */
/* li:first-child {
background-color: green;
} */
/* 最后一个 */
/* li:last-child {
background-color: orange;
} */
/* 写数字几就选第几个 */
li:nth-child(3) {
background-color: green;
}
</style>
</head>
<body>
<ul>
<li>li 1</li>
<li>li 2</li>
<li>li 3</li>
<li>li 4</li>
<li>li 5</li>
<li>li 6</li>
<li>li 7</li>
<li>li 8</li>
</ul>
</body>
</html>效果：
1.2 结构伪类选择器公式
通过公式可以快速找到多个元素
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>结构伪类选择器</title>
<style>
/* 写数字几就选第几个 */
/* 偶数 */
/* li:nth-child(2n) {
background-color: green;
} */
/* 奇数 */
/* li:nth-child(2n+1) {
background-color: green;
} */
/* 5的倍数 */
/* li:nth-child(5n) {
background-color: green;
} */
/* n是从0开始计算，即寻找5及以后的数 */
/* li:nth-child(n+5) {
background-color: green;
} */
/* 找第5个及以前 */
li:nth-child(-n+5) {
background-color: green;
}
</style>
</head>
<body>
<ul>
<li>li 1</li>
<li>li 2</li>
<li>li 3</li>
<li>li 4</li>
<li>li 5</li>
<li>li 6</li>
<li>li 7</li>
<li>li 8</li>
</ul>
</body>
</html>效果：查找-n+5
1.3 伪元素选择器
用来生成假标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素选择器</title>
<style>
div {
height: 300px;
width: 300px;
background-color: pink;
}
/* 必须设置content属性，没有content，伪元素选择器不生效 */
div::before {
content: "老鼠";
}
div::after {
content: "大米";
}
</style>
</head>
<body>
<!-- 标签内容：老鼠爱大米 -->
<div>爱</div>
</body>
</html>比如我们只有一个div标签，内容是爱，但是想生成老鼠爱大米，就可以在div前后加假标签来显示
加完之后就正确显示：
假标签是生效的
2.PxCook软件
用来查找设计图中各元素距离等
3.盒子模型
3.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>
div {
width: 200px;
height: 200px;
background-color: pink;
/* 内边距：内容和盒子边缘 */
padding: 20px;
/* 边框线 */
border: 1px solid #000;
/* 外边距：出现在盒子外面，拉开两个盒子之间的距离 */
margin: 50px;
}
</style>
</head>
<body>
<div>div标签</div>
</body>
</html>效果：
初始：
修改后：
3.2 边框线
代码：
<!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: 1px solid #000; */
/* 虚线 */
/* border: 2px dashed red; */
/* 点线 */
border: 3px dotted green;
}
</style>
</head>
<body>
<div>div标签</div>
</body>
</html>效果：
3.3 设置单独方向的边框线
代码：
<!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: 1px solid #000;
border-right: 2px dashed red;
border-bottom: 5px dotted green;
border-left: 10px solid orange;
}
</style>
</head>
<body>
<div>div标签</div>
</body>
</html>效果：
四个方向都可以单独设置边框线
3.4 内边距
内边距也可以单独设置四个方向的距离
代码：
<!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; */
/* 与上边缘的距离 */
padding-top: 10px;
/* 与右边缘的距离 */
padding-right: 20px;
/* 与下边缘的距离 */
padding-bottom: 40px;
/* 与左边缘的距离 */
padding-left: 100px;
}
</style>
</head>
<body>
<div>div标签</div>
</body>
</html>效果：
3.5 内边距多值写法
代码：
<!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: 10px 20px 80px 100px; */
/* 三值： 上 左右 下 */
/* padding: 10px 40px 80px; */
/* 两值： 上下 左右 */
padding: 10px 80px;
/* 从上开始顺时针转一圈，如果当前方向没有数值，取值和对面一样 */
}
</style>
</head>
<body>
<div>div标签</div>
</body>
</html>规律：从上开始顺时针转一圈，如果当前方向没有数值，取值和对面一样
3.6 盒子模型尺寸计算
代码：
<!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;
/* 手动减法实现盒子 200x200 */
/* width: 160px;
height: 160px; */
background-color: pink;
padding: 20px;
/* 内减模式：不需要手动减法，加padding和border不会撑大盒子 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div>div标签</div>
</body>
</html>我们想要让div这个盒子大小不变，加了padding等属性之后可以用手动减法去设置原来的w和h大小，或者使用内减模式
3.7 盒子模型外边距及版心居中
添加外间距后，盒子大小不变
像京东界面，让版心内容居中
代码：
<!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: 1000px;
height: 200px;
background-color: pink;
/* 外间距不会撑大盒子 */
/* margin: 50px; */
/* margin-left: 50px; */
/* margin的多值写法和padding是一样的 */
/* margin: 50px 100px; */
/* 版心居中 */
margin: 0 auto;
}
</style>
</head>
<body>
<div>版心内容</div>
</body>
</html>版心居中必须要有width值，因为浏览器auto计算的逻辑是用整个的宽减去width再除以2得出左右外间距
/* 版心居中 */
margin: 0 auto;效果：
3.8 清除标签默认样式
清除标签默认样式，方便之后按照设计稿修改，我们使用京东模式
代码：
<!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>
/* 清除默认边距 */
* {
margin: 0;
padding: 0;
/* 使用内减，方便之后修改不会撑大盒子 */
box-sizing: border-box;
}
/* 去掉列表的项目符号 */
li {
list-style: none;
}
</style>
</head>
<body>
<h1>h1标题</h1>
<p>p</p>
<ul>
<li>
li
</li>
</ul>
</body>
</html>修改前：
清除后
但是li的小圆点只是挪到浏览器外面了，没有被清除
添加这行代码即可：
/* 去掉列表的项目符号 */
li {
list-style: none;
}3.9 盒子模型-元素溢出
内容已经超出了盒子范围
hidden:
超出的部分会被隐藏
scroll：
无论内容多少，scroll都有滚动条
auto：
多的时候有滚动条，少的时候没有
3.10 外边距合并现象
代码：
<!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>
.one {
width: 100px;
height: 100px;
background-color: pink;
margin-bottom: 80px;
}
.two {
width: 100px;
height: 100px;
background-color: orange;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
</body>
</html>
发现较小的margin会被大的合并，这里是下面的two的margin top被上面的one的margin bottom合并了
3.11 外边距塌陷问题
添加前：
添加后：
发现添加之后父级这个盒子也下去了
代码：
<!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>
.father {
width: 300px;
height: 300px;
background-color: pink;
padding-top: 50px;
box-sizing: border-box;
/* 内容溢出就会隐藏 */
/* overflow: hidden; */
/* border-top: 1px solid #000; */
}
.son {
width: 100px;
height: 100px;
background-color: orange;
/* margin-top: 50px; */
}
</style>
</head>
<body>
<div class="father">
<div class="son">son</div>
</div>
</body>
</html>
取消子级margin，只设置父级padding（推荐使用）
父级设置hidden和border top都可以产生一样的效果
3.12 行内元素内外间距问题
添加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>
span {
margin: 50px;
padding: 20px;
line-height: 100px;
}
</style>
</head>
<body>
<span>span标签</span>
<span>span标签</span>
</body>
</html>3.13 盒子模型-圆角
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width= , initial-scale=1.0">
<title>Document</title>
<style>
div {
margin: 50px auto;
width: 200px;
height: 200px;
background-color: orange;
/* border-radius: 20px; */
/* 圆角写多值，从左上角顺时针赋值，没有取值的角与对角取值相同 */
/* 左上 右上 右下 左下 */
/* border-radius: 10px 20px 40px 80px; */
/* 左上 右上+左下 右下*/
/* border-radius: 10px 40px 80px; */
/* 左上+右下 右上+左下 */
border-radius: 10px 80px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
圆角效果
四值写法
三值写法
3.14 圆角的应用
代码：
<!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 {
/* 盒子本身要是正方形才能做圆形 */
width: 200px;
height: 200px;
/* border-radius: 100px; */
/* 做成正圆形，50%是最大值，超过50%也跟50%一样 */
border-radius: 50%;
}
div {
/* 盒子本身是长方形才能做胶囊 */
width: 200px;
height: 80px;
background-color: orange;
/* 高度的一半 */
border-radius: 40px;
}
</style>
</head>
<body>
<!-- 正圆形--头像 -->
<img src="../day04/image/3.jpg" alt="">
<!-- 胶囊状--按钮 -->
<div></div>
</body>
</html>效果：
3.15 盒子模型-阴影
给边框添加阴影更有层次感
代码：
<!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 {
margin: 50px auto;
width: 200px;
height: 80px;
background-color: orange;
/* x轴偏移量 y轴偏移量 模糊半径 扩散半径 颜色 内外阴影（inset表示内阴影） */
box-shadow: 2px 5px 10px 1px rgba(0, 0, 0, 0.5) inset;
}
</style>
</head>
<body>
<div></div>
</body>
</html>效果：
这是加了内阴影inset的
案例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>
* {
/* 整体去除默认样式 */
margin: 0;
padding: 0;
/* 使用内减，方便之后修改不会撑大盒子 */
box-sizing: border-box;
}
body {
/* 设置网页背景色 */
background-color: #f1f1f1;
}
.product {
margin: 50px auto;
/* 图片上边缘和盒子的距离 */
padding-top: 40px;
width: 270px;
height: 253px;
background-color: #fff;
/* 行内内容居中 */
text-align: center;
/* 设置圆角 */
border-radius: 10px;
}
.product h4 {
/* 与上面的盒子的距离 */
margin-top: 20px;
/* 与下面的盒子的距离 */
margin-bottom: 12px;
font-size: 18px;
color: #333;
/* 去粗 */
font-weight: 400;
}
.product p {
font-size: 12px;
color: #555;
}
img {
/* 把图片设置为圆形 */
width: 70px;
height: 70px;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="product">
<img src="../day04/image/3.jpg" alt="">
<h4>优选产品</h4>
<p>包含最好的产品</p>
</div>
</body>
</html>效果：
案例2：新闻
整体新闻区域：w360+h200，且要版心居中
新闻标题区：w360+h34，去掉左边边框线
单新闻标题：w48+h34
新闻上面的描边：w48+h3
右边框线和父级一样
正文区域：内边距5px
两张图片，一个设置给li的背景，一个设置给a的背景
a标签里面文字的距离20px
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新闻</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
/* 整体新闻区域 */
.news {
margin: 100px auto;
width: 360px;
height: 200px;
/* background-color: orange; */
}
/* 新闻标题区 */
.news .hd {
height: 34px;
background-color: #eee;
border: 1px solid #dbdee1;
border-left: 0;
}
/* 单新闻标题 */
.news .hd a {
/* -1，盒子向上移动 */
/* 超链接行内元素转块元素 */
margin-top: -1px;
display: block;
/* 上边框线 */
border-top: 3px solid #ff8400;
/* 右边框线 */
border-right: 1px solid #dbdee1;
width: 48px;
height: 34px;
background-color: #fff;
/* 文字居中 */
text-align: center;
line-height: 32px;
font-size: 14px;
color: #333;
}
/* 正文区域 */
.news .bd {
padding: 5px;
}
/* li负责的背景图 */
.news .bd li {
/* 装饰图片 */
padding-left: 15px;
background-image: url(./image/2.png);
background-repeat: no-repeat;
/* 图片最左边居中 */
background-position: 0 center;
}
/* a负责的背景图 */
.news .bd li a {
padding-left: 20px;
/* 图片最左边居中 */
background: url(./image/1.png) no-repeat 0 center;
font-size: 12px;
color: #666;
line-height: 24px;
}
.news .bd li a:hover {
/* 鼠标悬停 */
color:#ff8400;
}
</style>
</head>
<body>
<!-- 新闻区域：标题+内容 -->
<div class="news">
<div class="hd"><a href="#">新闻</a></div>
<div class="bd">
<ul>
<li><a href="#">点赞新农人温暖的伸手</a></li>
<li><a href="#">在希望的田野上</a></li>
<li><a href="#">中国天眼又有新发现 已在《自然》杂志发表</a></li>
<li><a href="#">急！这个领域，缺人！月薪4万元还不好招！啥情况？</a></li>
<li><a href="#">G9“带货”背后：亏损面持续扩大，竞争环境激烈</a></li>
<li><a href="#">多地力推二手房“带押过户”，有什么好处？</a></li>
</ul>
</div>
</div>
</body>
</html>效果：
