谁不是一路荆棘而过呢
—— 24.5.12
CSS.3 选择器、PxCook软件、盒子模型
一、选择器
1.结构伪类选择器
1.作用:
根据元素的结构关系查找元素。
选择器 说明
E:first-child 查找第一个 E元素
E:last-child 查找最后一个E元素
E:nth-child(N) 查找第 N 个E元素(第一个元素 N 值为1)2.示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>结构伪类选择器</title> <style> /* 第一个 first-child */ li:first-child{ background-color: green; } /* 最后一个 last-child */ li:last-child{ background-color: gray; } /* 任意个 nth-child */ li:nth-child(3){ background-color: grey; } </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>
3.:nth-child(公式)
作用:
根据元素的结构关系查找多个元素。
功能 公式
偶数标签 2n
奇数标签 2n+1:2n-1
找到5的倍数的标签 5n
找到第5个以后的标签 n+5
找到第5个以前的标签 -n+5<!DOCTYPE html> <html lang="zh-CN"> <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: blue; } /* 奇数标签 */ li:nth-child(2n-1){ background-color: red; } /* 5的倍数 */ li:nth-child(5n){ background-color: green; } /* 9以后的标签 */ li:nth-child(n+9){ background-color: yellow; } /* 2以前的标签 */ li:nth-child(-n+2){ background-color: orange; } </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> <li>li 9</li> <li>li 10</li> </ul> </body> </html>
2.伪元素选择器
1.作用:
创建虚拟元素(伪元素)，用来摆放装饰性的内容。
选择器 说明
E::before 在E元素里面最前面添加一个伪元素
E..after 在E元素里面最后面添加一个伪元素2.注意点:
① 必须设置content:" "属性，用来 设置伪元素的内容如果没有内容，则引号留空即可
② 伪元素默认是行内显示模式
③ 权重和标签选择器相同3.示例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>伪元素选择器</title> <style> div{ width:300px; height:300px; background-color: pink; } /* before创建出的显示模式是行内的 before是在div标签的前面 */ /* content属性不写，伪元素不生效 */ div::before{ content: "老鼠"; width: 100px; height: 100px; background-color: brown; display: block; } /* after创建出的显示模式是行内的 after是在div标签的后面 必须要写content属性 */ div::after{ width: 100px; height: 100px; background-color: orange; content: "大米"; display: block; } </style> </head> <body> <!-- 标签内容：老鼠爱大米 --> <div>爱</div> </body> </html>
二、PxCook像素大厨
PxCook(像素大厨)是一款切图设计工具软件。支持PSD文件(设计稿)的文字、颜色、距离自动智能识别。
开发面板(自动智能识别)
设计面板(手动测量尺寸和颜色)设计模式和开发模式进行测量尺寸
⭐三、盒子模型
1.作用：
布局网页，摆放盒子和内容
2.盒子模型 - 组成
盒子模型重要组成部分:
内容区域 — width & height
内边距 — padding(出现在内容与盒子边缘之间)
边框线 — border
外边距 — margin(出现在盒子外面)<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子模型—组成</title> <style> div { width: 200px; height: 200px; background-color: pink; /* 内边距 内容与盒子边缘之间 */ padding: 20px; /* 边框线 */ border:3px solid #000; /* 外边距 出现在盒子外面，拉开两个盒子的距离 */ margin: 45px; } </style> </head> <body> <div> div 标签 </div> </body> </html>
3.盒子模型 - 边框线
属性名:
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"> <title>盒子模型-边框线</title> <style> div{ width: 200px; height: 200px; background-color: pink; /* 实线 */ border: 1px solid #000; /* 虚线 */ border: 2px dashed darkcyan; /* 点线 */ border: 3px dotted darkgray; } </style> </head> <body> <div>div 标签</div> </body> </html>示例：
4.设置单方向边框线
属性名:
border-方位名词（bd+方位名词首字母，例如，bdl)
方位名词：top、right、bottom、left
属性值:
边框线粗细 线条样式 颜色(不区分顺序)
<!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{ width: 200px; height: 200px; background-color: pink; /* 上边框线 */ border-top: 1px solid #000; /* 左边框线 */ border-left: 3px dashed red; /* 右边框线 */ border-right: 2px solid blue; /* 下边框线 */ border-bottom: 1px solid green; } </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"> <title>盒子模型-内边距</title> <style> div{ width: 200px; height: 200px; background-color: pink; /* 上边距 */ padding-top: 30px; /* 内边距 */ padding: 20px; } </style> </head> <body> <div>div 标签</div> </body> </html>5.盒子模型 - 内边距
作用:
设置 内容 与 盒子边缘 之间的距离
属性名：
padding / padding-方位名词
示例：
<!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{ width: 200px; height: 200px; background-color: pink; /* 上边距 */ padding-top: 30px; /* 内边距 */ padding: 20px; } </style> </head> <body> <div>div 标签</div> </body> </html>
6.盒子模型 - 内边距 - 多值写法
padding 多值写法
取值个数 示例 含义
一个值 padding:10px; 四个方向内边距均为10px
四个值 padding:10px 20px 40px80px; 上：10px；右：20px；下：40px；左：80px
三个值 padding:10px 40px 80px; 上：10px；左右：40px；下：80px
两个值 padding:10px 80px; 上下：10px；左右：80px
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>盒子模型 - padding多值写法</title> <style> div{ width: 200px; height: 200px; background-color: pink; /* padding的多值写法 四值写法 上右下左 从上开始顺时针循环 */ padding: 10px 20px 40px 80px; /* padding的多值写法 三值写法 上 左右 下 左右相同 */ padding: 10px 40px 80px; /* padding的多值写法 两值写法 先上下 再左右 */ padding: 20px 40px; } </style> </head> <body> <div>div 标签</div> </body> </html>
7.盒子模型 - 尺寸计算
默认情况
盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸
结论:
给盒子加 border / padding 会撑大盒子
解决
手动做减法，减掉 border/padding 的尺寸
内减模式：box-sizing:border-box
8.盒子模型 - 外边距
作用:
拉开两个盒子之间的距离
属性名:
margin
提示:
与 padding 属性值写法、含义相同
示例：
9.盒子模型 - 版心居中
<!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{ width: 1000px; height: 200px; background-color: pink; /* 上下外边距是0 左右外边距是auto中心 */ margin: 0 auto; } </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"> <title>清除默认样式</title> <style> *{ margin: 0; padding: 0; /* 选中了所有标签启动内减模式 */ box-sizing: border-box; } /* 去除列表的项目符号 none */ li{ list-style: none; } </style> </head> <body> <h1>h1 标签</h1> <p>pppppp</p> <ul> <li> li </li> </ul> </body> </html>
10.盒子模型 - 元素溢出
作用:
控制溢出元素的内容的显示方式
属性名:
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>元素溢出</title> <style> div{ width: 200px; height: 200px; background-color: pink; } </style> </head> <body> <div> 文字内容测试溢出显示方式文字内容测试潜出显示方式 文字内容测试溢出显示方式文字内容测试滥出显示方式 文字内容测试滥出显示方式文字内容测试溢出显示方式 文字内容测试溢由显示方式文字内容测试溢出最示方式 文字内容测试溢出显示方式文字内容测试滥出显示方式 文字内容测试滥出显示方式文字内容测试溢出显示方式 文字内容测试滥出显示方式文字内容测试滥出显示方式 文字内容测试溢出显示方式文字内容测试溢出显示方式 文字内容测试滥出显示方式文字内容测试滥出显示方式 </div> </body> </html>
hidden
<style> div{ width: 200px; height: 200px; background-color: pink; /* hidden超出盒子集合的隐藏 */ overflow: hidden; } </style>
scroll
div{ width: 200px; height: 200px; background-color: pink; /* scroll文字滚动条效果 横竖都有滚动条 */ overflow: scroll; } </style>
auto
<!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{ width: 200px; height: 200px; background-color: pink; /* 内容溢出才有滚动条，不溢出不会产生滚动条 */ overflow: auto; } </style> </head> <body> <div> 文字内容测试溢出显示方式文字内容测试潜出显示方式 文字内容测试溢出显示方式文字内容测试滥出显示方式 文字内容测试滥出显示方式文字内容测试溢出显示方式 文字内容测试溢由显示方式文字内容测试溢出最示方式 文字内容测试溢出显示方式文字内容测试滥出显示方式 文字内容测试滥出显示方式文字内容测试溢出显示方式 文字内容测试滥出显示方式文字内容测试滥出显示方式 文字内容测试溢出显示方式文字内容测试溢出显示方式 文字内容测试滥出显示方式文字内容测试滥出显示方式 </div> </body> </html>11.外边距问题 - 合并现象
场景:
垂直排列的兄弟元素，上下 margin 会合并
现象:
取两个 margin 中的较大值生效
外边距问题-塌陷问题
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>外边距-合并现象</title> <style> .one{ width: 100px; height: 100px; background-color: brown; /* 产生间距 */ margin-bottom: 20px; } .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>
12.外边距 - 塌陷问题
场景：
父子级的标签，子级的添加 上外边距 margin-top 会产生塌陷问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>外边距-塌陷问题</title> <style> .father{ width: 300px; height: 300px; background-color: pink; } .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
② 父级设置 overflow: hidden
③ 父级设置 border-top
示例：
① 取消子级margin，父级设置padding
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>外边距-塌陷问题</title> <style> .father{ width: 300px; height: 300px; background-color: pink; /* 取消子级margin，父级设置padding */ padding-top: 50px; box-sizing: border-box; } .son{ width: 100px; height: 100px; background-color: orange; /* 取消子级margin，父级设置padding */ /* margin-top:50px ; */ } </style> </head> <body> <div class="father"> <div class="son">son</div> </div> </body> </html>② 父级设置 overflow: hidden
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>外边距-塌陷问题</title> <style> .father{ width: 300px; height: 300px; background-color: pink; /* 1.取消子级margin，父级设置padding */ /* padding-top: 50px; box-sizing: border-box; */ /* 2. 父级设置 overflow: hidden */ overflow: hidden; } .son{ width: 100px; height: 100px; background-color: orange; /* 1.取消子级margin，父级设置padding */ margin-top:50px ; } </style> </head> <body> <div class="father"> <div class="son">son</div> </div> </body> </html>③ 父级设置 border-top
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>外边距-塌陷问题</title> <style> .father{ width: 300px; height: 300px; background-color: pink; /* 1. 取消子级margin，父级设置padding */ /* padding-top: 50px; box-sizing: border-box; */ /* 2. 父级设置 overflow: hidden */ /* overflow: hidden; */ /* 3. 父级设置 border-top */ border-top: 1px solid #000; } .son{ width: 100px; height: 100px; background-color: orange; /* 1.取消子级margin，父级设置padding */ margin-top:50px ; } </style> </head> <body> <div class="father"> <div class="son">son</div> </div> </body> </html><style> .father{ width: 300px; height: 300px; background-color: pink; /* 1. 取消子级margin，父级设置padding */ /* padding-top: 50px; box-sizing: border-box; */ /* 2. 父级设置 overflow: hidden */ /* overflow: hidden; */ /* 3. 父级设置 border-top */ border-top: 1px solid #000; } .son{ width: 100px; height: 100px; background-color: orange; /* 1.取消子级margin，父级设置padding */ margin-top:50px ; } </style>13.行内元素-内外边距问题
场景:
行内元素添加 margin 和 padding，无法改变元素垂直位置
解决方法:
给行内元素添加 line-height 可以改变垂直位置
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>行内元素的垂直内外边距</title> <style> span{ /* margin padding属性不影响垂直位置，只影响水平位置的变化 */ margin: 50px; padding: 20px; line-height: 100px; } </style> </head> <body> <span>span标签</span> <span>span标签</span> </body> </html>
14.盒子模型 - 圆角
作用:
设置元素的外边框为圆角。
属性名:
border-radius
属性值:
数字+px/百分比
提示：属性值是圆角半径
圆角效果 属性值写多个代表各个边不同 从左上顺时针旋转 如果没有取值的和对角属性相同
两值写法 左上+右下 右上+左下
三值写法 左上 右上+左下 右下
四值写法：左上 右上 左下 右下
示例：
<!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{ /* 上下是50px，左右是auto 居中效果 */ margin: 50px auto; width: 200px; height: 200px; background-color: orange; /* 圆角效果 属性值写多个代表各个边不同 从左上顺时针旋转 如果没有取值的和对角属性相同 */ border-radius: 30px; /* 两值写法 左上+右下 右上+左下 */ border-radius: 30px 70px; /* 三值写法 左上 右上+左下 右下 */ border-radius: 10px 20px 30px; /* 四值写法：左上 右上 左下 右下 */ border-radius: 45px,20px,30px,10px; } </style> </head> <body> <div></div> </body> </html>
常见应用 — 正圆形状
给正方形盒子设置圆角属性值为 宽高的一般 / 50%
常见应用 — 胶囊形状
给长方形盒子设置圆角属性值为 盒子高度的一半
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>圆角-特殊场景</title> <style> img{ width: 200px; height: 200px; /* 圆角属性 宽高的一半 必须在正方形内才行 百分比取值越小 头像就越不圆 */ /* border-radius: 100px; */ /* 圆角属性最大值取值是50% */ border-radius: 50%; } div{ width: 200px; height: 80px; background-color: orange; /* 胶囊状态的按钮 */ border-radius:40px ; } </style> </head> <body> <!-- 正圆形 头像 --> <img src="./头像.jpg" alt=""> <!-- 胶囊形状 --> <div></div> </body> </html>
15.盒子模型 - 阴影(拓展)
作用:
给元素设置阴影效果
属性名:
box-shadow
属性值:
x轴偏移量 γ轴偏移量 模糊半径 扩散半径 颜色 内外阴影
注意:
X轴偏移量 和Y轴偏移量 必须书写
默认是外阴影，内阴影需要添加inset
示例：
<!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{ margin: 50px auto; width: 200px; height: 80px; background-color: orange; /* box-shadow 阴影属性 */ box-shadow: 3px 5px 11px 1px rgba(0, 0, 0,0.5); /* inset 内阴影 */ /* box-shadow: 3px 5px 11px 1px rgba(0, 0, 0,0.5) inset;*/ } </style> </head> <body> <div></div> </body> </html>
四、综合案例
1.综合案例一 产品卡片
CSS 书写顺序:
1.盒子模型属性
2.文字样式
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> *{ /* 清除默认内外边距 */ margin: 0%; padding: 0%; /* padding border会撑大盒子，设置内减模式 不会撑大盒子 */ box-sizing: border-box; } body{ background-color: #f1f1f1; } .product{ margin:50px auto; padding-top: 38px; width: 253px; height: 236px; background-color: #fff; /* 文字居中 */ text-align: center; /* 圆角效果 */ border-radius: 10px; } .product h4{ margin-top: 21px; margin-bottom: 15px; color: #50595d; font-size: 15px; font-weight: 400; } .product p{ font-size: 12px; color: #545c5f; } </style> </head> <body> <div class="product"> <img src="./liveSDK.svg" alt=""> <h4>抖音直播SDK</h4> <p>包含抖音直播看播功能</p> </div> </body> </html>运行结果
开发细节
在工作中写CSS属性最好先写盒子模型的、再写文字的属性、最后写圆角阴影等等修饰性属性，这样可以提高浏览器渲染页面的效率
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> *{ /* 清除默认样式 */ margin: 0%; padding: 0%; /* 启动内减模式 */ box-sizing: border-box; } li{ /* 清除列表的项目符号 */ list-style: none; } a{ /* 清除超链接下划线 */ text-decoration: none; } /* 新闻整体布局 */ .news{ /* 版心居中效果 */ margin: 100px auto; /* 宽度 */ width: 359px; /* 高度 */ height: 193px; } /* 新闻标题布局 */ .news .hd { height: 34px; /* 背景颜色 */ background-color: #eee; /* 描边颜色 */ border: 1px solid #dbdee1; /* 删去左边区域线 */ border-left: 0; } /* 新闻两个字的背景框 */ .news .hd a{ /* 为了让盒子压住模块 盒子向上移动 超链接标签上移 */ 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: 34px; /* 超链接文字大小 */ font-style: 14px; /* 超链接文字颜色 */ color: #333; } .news .bd{ /* 加内边距 */ padding: 6px; } /* li的背景 */ .news .bd li{ /* 加左边距 */ padding-left: 15px; /* li中设置背景 */ background-image: url(./images/square.png); background-repeat: no-repeat; background-position: 0 center; } /* a的背景 */ .news .bd li a{ background: url(./images/img.gif) no-repeat 0 center; padding-left: 20px; font-size: 12px; color: #666; /* 设置文字间隔 */ line-height: 24px; } /* 新闻区域鼠标悬停效果 */ .news .bd li a:hover{ color: #ff8400; } </style> </head> <body> <!-- 新闻区域 包含：标题+内容 news作新闻整体布局 --> <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>运行结果
