前端学习
HTML
标签语法
基础标签
标签
包裹内容都是双标签；
html：整个网页
head：网页头部，用来存放给浏览器看信息，例如CSS
body：网页主题，用来存放给用户看的信息，例如图片、文字
ctrl+/ ：注释 注释标签的内容不会再浏览器中显示
!+回车：生产html骨架
h1-h6：标题标签，有6个级别，字号会加粗换行，独占一行
p：段落标签，独占一行，段落之间有间隙
br：换行；回车键无法换行
hr：水平线
strong：加粗
b:加粗（一般不用）
em：倾斜
i：倾斜
ins：下划线
u：下划线
del：删除线
s：删除线
备注：加粗、倾斜、下划线和删除线，一般都用strong、em、ins、del；因为这几个标签自带强调含义(语义)。
img：图像标签 ；src用于知道图像的位置和名称，是img的必须属性；alt图片无法显示的时候显示的描述；title鼠标悬停再图片上面的时候显示的文字；width图片的宽度，值为数字没有单位；height图片的高度，值为数字没有单位
标签关系
1：父子关系（嵌套关系）
如：html 标签预 head标签
2：兄弟关系（并列关系）
如：head和body
3：代码格式
父子关系：子级标签换行且缩进（Tab键）
兄弟关系：兄弟标签换行要对其
<!DOCTYPE html>
<html>
<!--
html 整个网页
head 网页头部，用来存放给浏览器看信息，例如CSS
body 网页主题，用来存放给用户看的信息，例如图片、文字
-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>day01</title>
</head>
<body>
<!--
strong 加粗
br 换行
hr 水平线
-->
<strong>加<br>粗</strong>
<hr>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
</html>
路径
相对路径：从当前文件位置出发查找目标文件
绝对路径：从盘符出发查找目标文件 （win从盘符，mac从根目录）
/：表示进入某个文件夹里面 文件夹名字/
.（点）：表示当前文件所在文件夹 ./
…/：当前文件上一级文件夹
…/…/：当前文件上两级文件夹
audio：音频标签；src音频的地址（支持mps，Ogg,Wav） ；controls显示音频 控制面板；loop循环播放；autopaly自动播放
video：视频标签；src视频路径必须属性；controls西安市视频控制面板；loop循环播放；muted静音播放；autoplay自动播放
a：超链接，点击跳转到其他页面 ；href属性值是跳转地址，必须属性，href值写#表示空连接不会跳转；target=“_blank” 属性，浏览器新页面打开；href=“#” target=“_blank"属性同时使用，会打开一个新的当前页面；target=”_self" 属性，默认值，再当前窗口中跳转(覆盖原网页)；
列表
布局内容排列整齐的区域
列表分类：无序列表、有序列表、定义列表
无序列表：布局排列整齐的不需要规定顺序的区域；ul嵌套li，ul是无序列表，li是列表条目；ul里只能有li标签，li标签可以包裹任何内容
有序列表：布局排列整齐的需要规定顺序的区域；标签ol嵌套li，ol是有序列表，li是列表条目；ol里只能有li标签，li标签可以包裹任何内容
定义列表：自定义列表；dl嵌套dt和dd ,dl是定义列表标题，dd是定义列表的描述/详情；dl里面只能包含dt和dd，dt和dd里面可以包含任何内容
表格标签
表格
展示数据用表格
表格：table嵌套tr，tr嵌套td/th ；
table：表格整体
tr：表格每行
td：单元格内容
th：表头单元格，th标签书写在tr标签内部（用于替换td标签，表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示）
caption：表格大标题 ，caption标签书写在table标签内部(表示表格整体大标题，默认再表格整体顶部剧中位置显示)
border：边框宽度
width：表格宽度
height：表格高度
备注：表格默认没有边框线，使用table的border属性可以为表格添加边框线
thead：表格头部
tbody：表格主体
tfoot：表格底部
跨行合并单元格：保留最上单元格，添加属性 rowspan 值是数字，合并的单元格数量
跨列合并单元格：保留最左单元格，添加属性colspan 值是数字，合并的单元格数量
单元格合并不能跨结构（不能跨：thead、tbody、tfoot）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>day02</title>
</head>
<body>
<!--
相对路径：从当前文件位置出发查找目标文件
绝对路径：从盘符出发查找目标文件 （win从盘符，mac从根目录）
/：表示进入某个文件夹里面 文件夹名字/
.（点）：表示当前文件所在文件夹 ./
../：当前文件上一级文件夹
../../：当前文件上两级文件夹
a：超链接，点击跳转到其他页面 ；
href属性值是跳转地址，必须属性;
target="_blank" 属性，浏览器新页面打开
href="#" target="_blank"属性同时使用，会打开一个新的当前页面
audio：音频标签；src音频的地址（
支持mps，Ogg,Wav） ；
controls显示音频 控制面板；(备注：html5中，属性名和属性值完全一样，可以简写为一个单词)
loop循环播放；
autopaly自动播放
video：视频标签；
src视频路径必须属性；
controls西安市视频控制面板；
loop循环播放；
muted静音播放；
autoplay自动播放
-->
<img src="彦001.png" alt="当前所在文件夹" title="当前所在文件夹" width="99" height="60">
<img src="../day01/图片/桌面壁纸.jpg" alt="当前文件上一级文件夹" title="当前文件上一级文件夹" width="99" height="60">
<img src="../../html/day01/图片/彦001.png" alt="当前文件上两级文件夹" title="当前文件上两级文件夹" width="99" height="60">
<a href="https://www.baidu.com/" target="_blank">
<img src="../../html/day01/图片/彦001.png" alt="" title="网页跳转" width="99" height="60">
网页跳转
</a>
<a href="01-标签的写法.html" target="_blank">
<img src="../../html/day01/图片/彦001.png" alt="" title="网页跳转" width="99" height="60">
本地跳转
</a>
<a href="#" target="_blank" >
<img src="../../html/day01/图片/彦001.png" alt="" title="网页跳转" width="99" height="60">
本地跳转
</a>
<br>
<audio src="https://www.bilibili.com/video/BV1kM4y127Li?t=97.8&p=14"
controls loop autoplay
></audio>
<br>
<video src="https://www.bilibili.com/video/BV1kM4y127Li?t=97.8&p=14"
controls loop muted autoplay
></video>
<br>
<hr>
<!-- 列表
布局内容排列整齐的区域
列表分类：无序列表、有序列表、定义列表
无序列表：布局排列整齐的不需要规定顺序的区域；
ul嵌套li，ul是无序列表，li是列表条目
ul里只能有li标签，li标签可以包裹任何内容
有序列表：布局排列整齐的需要规定顺序的区域；
标签ol嵌套li，ol是有序列表，li是列表条目
ol里只能有li标签，li标签可以包裹任何内容
定义列表：自定义列表；
dl嵌套dt和dd ,dt是定义列表标题，dd是定义列表的描述/详情
dl里面只能包含dt和dd，dt和dd里面可以包含任何内容
-->
<ul>
<li>ul嵌套li</li>
<li>ul是无序列表</li>
<li>li是列表条目</li>
</ul>
<ol>
<li>ol嵌套li</li>
<li>ol是有序列表</li>
<li>li是列表条目</li>
</ol>
<dl>
<dt>dt是定义列表标题</dt>
<dd>dd是定义列表的描述</dd>
<dd>dd是定义列表的详情</dd>
</dl>
<br>
<hr>
<!-- 表格
展示数据用表格
表格：table嵌套tr，tr嵌套td/th ；
table：表格
tr：行
th：表头单元格
td：内容单元格
备注：表格默认没有边框线，使用border属性可以为表格添加边框线
thead：表格头部
tbody：表格主体
tfoot：表格底部
跨行合并单元格：保留最上单元格，添加属性 rowspan 值是数字，合并的单元格数量
跨列合并单元格：保留最左单元格，添加属性colspan 值是数字，合并的单元格数量
-->
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>姓别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>李四</td>
<td>女</td>
<td>18</td>
</tr>
</tfoot>
</table>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>姓别</th>
<th>年龄</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">张三</td>
<td rowspan="2">18</td>
<td >18</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<!-- <td >18</td> -->
<td >18</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>李四</td>
<td>女</td>
<td >18</td>
<td >18</td>
</tr>
</tfoot>
</table>
<table border="1">
<caption><strong>学生成绩单</strong></caption>
<thead>
<tr>
<!-- <td></td> -->
<th>姓名</th>
<th>成绩</th>
<th>评语</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td rowspan="2">100分</td>
<td>真棒, 第一名</td>
</tr>
<tr>
<td>李四</td>
<td>真棒, 第二名</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td colspan="2">郎才女貌</td>
</tr>
</tfoot>
</table>
</body>
</html>
基础标签与表格标签总结
-
排版标签：
• 标题h系列、段落p、换行br、水平线hr -
文本格式化标签：
• 加粗strong、下划线ins、倾斜em、删除线del -
图片标签：
• img标签 + src属性 + alt属性 + title属性 + width属性 + height属性 -
路径：
• 相对路径：同级目录 + 下级目录 + 上级目录 -
音频标签、视频标签：
• audio标签、 video标签 + src属性 + controls属性 -
链接标签：
• a标签 + href属性 + target属性 -
表格基本标签：
• table > tr > td
-
表格标题和表头单元格标签：
• table > caption + tr > th
-
表格结构标签：
• table > thead > tr > td
10.表格相关属性：
• border (边框宽度) - width （表格宽度）- height (表格高度)
- 合并单元格步骤：
a. 明确合并哪几个单元格
b. 通过左上原则，确定保留谁删除谁
• 上下合并→只保留最上的，删除其他
• 左右合并→只保留最左的，删除其他
c. 给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）
表单标签
- input系列标签
Ø 场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页
Ø 标签名：input
• input标签可以通过type属性值的不同，展示不同效果
Ø type属性值：
text(文本框) -password(密码框) -radio(单选框) -checkbox(多选框) -file(文本选择) -submit(提交按钮) -reset(重置按钮) -button(普通按钮)
placeholder：占位符。提示用户输入内容的文本符
1.2 input系列标签-文本框
value属性和name属性作用介绍
Ø value属性：用户输入的内容，提交之后会发送给后端服务器
Ø name属性：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义
Ø 后端接收到数据的格式是：name的属性值 = value的属性值
1.3 input系列标签-密码框
type属性值不要拼错或者多加空格，否则相当于设置了默认值状态：text→文本框
1.4 input系列标签-单选框
name属性对于单选框有分组功能
• 有相同name属性值的单选框为一组，一组中只能同时有一个被选中
1.5 input系列标签-复选框
多选多的多选表单控件
checked 默认选中
1.6 input系列标签-文件选择
文件选择的表单控件
multiple 多文件选择
1.7 input系列标签-按钮
如果需要实现以上按钮功能，需要配合form标签使用
• form使用方法：用form标签把表单标签一起包裹起来即可
- button按钮标签
显示用户点击的按钮 - select下拉菜单标签
Ø 场景：在网页中提供多个选择项的下拉菜单表单控件
Ø 标签组成：
• select标签：下拉菜单的整体
• option标签：下拉菜单的每一项
Ø 常见属性：
• selected：下拉菜单的默认选中 - textarea文本域标签
Ø 场景：在网页中提供可输入多行文本的表单控件
Ø 标签名：textarea
Ø 常见属性：
• cols：规定了文本域内可见宽度
• rows：规定了文本域内可见行数
Ø 注意点：
• 右下角可以拖拽改变大小
• 实际开发时针对于样式效果推荐用CSS设置 - label标签
Ø 场景：常用于绑定内容与表单标签的关系
Ø 标签名：label
Ø 使用方法①： - 使用label标签把内容（如：文本）包裹起来
- 在表单标签上添加id属性
- 在label标签的for属性中设置对应的id属性值
Ø 使用方法②： - 直接使用label标签把内容（如：文本）和表单标签一起包裹起来
- 需要把label标签的for属性删除即可
<!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>Document</title>
</head>
<body>
<!-- 写什么就显示什么 -->
文本框: <input type="text">
<br>
<br>
<!-- 书写的内容都会变成点点显示 -->
密码框: <input type="password">
<input type="text" placeholder="请输入用户名">
<input type="password" placeholder="请输入密码">
<br>
<br>
单选框: <input type="radio">
性别: <input type="radio" name="sex">男
<input type="radio" name="sex" checked>女
<input type="checkbox" checked>
<br>
<br>
多选框: <input type="checkbox">
<br>
<br>
上传文件: <input type="file">
文件多选 <input type="file" multiple>
<br>
<br>
<button>我是按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮, 没有任何功能</button>
<form action="">
用户名: <input type="text">
<br>
<br>
密码: <input type="password">
<br>
<br>
<!-- 按钮 -->
<input type="submit" value="免费注册">
<input type="reset">
<input type="button" value="普通按钮">
<!-- 属性 xx="xxx" -->
</form>
<br>
<br>
下拉菜单
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option selected>深圳</option>
</select>
<br>
<br>
文本域 <textarea cols="60" rows="30"></textarea>
<br>
<br>
表单
性别:
<input type="radio" name="sex" id="nan"> <label for="nan">男</label>
<label><input type="radio" name="sex"> 女</label>
<br>
<br>
<br>
<br>
</body>
</html>
表单标签总结
① input标签不同形态：
② button按钮标签：
③ select下拉菜单标签
④ textarea文本域标签：
⑤ label标签：
语义化标签
1 没有语义的布局标签-div和span
Ø 场景：实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签
Ø div标签：一行只显示一个（独占一行）
Ø span标签：一行可以显示多个
1.2 小结
Ø 常用于布局的无语义标签有哪两个？各自的特点有哪些？
• div：独占一行
• span：一行中可以显示多
2.1 有语义的布局标签（了解）
Ø 场景：在HTML5新版本中，推出了一些有语义的布局标签供开发者使用
Ø 标签：
Ø 注意点：
• 以上标签显示特点和div一致，但是比div多了不同的语义
2.2 小结
Ø 常见有语义的布局标签有哪些？
• header：网页头部
• nav：网页导航
• footer：网页底部
• aside：网页侧边栏
• section：网页区块
• article：网页文章
字符实体
- HTML的空格合并现象
Ø 场景：如果在html代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格
- 常见字符实体
Ø 场景：在网页中展示特殊符号效果时，需要使用字符实体替代
Ø 结构：
Ø 常见字符实体：
<!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>Document</title>
</head>
<body>
普通文字
<div>这是div标签</div>
<div>这是div标签</div>
<span>这是span标签</span>
<span>这是span标签</span>
<header>网页头部</header>
<nav>网页导航</nav>
<footer>网页底部</footer>
<aside>侧边栏</aside>
<section>网页区块</section>
<article>文章</article>
<!-- 网页不认识多个空格, 只认识一个 -->
这是HTML文档, 现在要学 习字符实体.
<table border="1" width="500" height="300">
<caption><h3>优秀学生信息表格</h3></caption>
<tr>
<th>年级</th>
<th>姓名</th>
<th>学号</th>
<th>班级</th>
</tr>
<tr>
<td rowspan="2">高三</td>
<td>迪丽热巴</td>
<td>110</td>
<td>三年二班</td>
</tr>
<tr>
<td>古力娜扎</td>
<td>120</td>
<td>三年三班</td>
</tr>
<tr>
<td>评语</td>
<td colspan="3">你们很优秀</td>
</tr>
</table>
<h1>青春不常在，抓紧谈恋爱</h1>
<hr>
<form action="">
昵称: <input type="text" placeholder="请输入昵称">
<br>
<br>
性别:
<label><input type="radio" name="sex" checked> 男</label>
<label><input type="radio" name="sex"> 女</label>
<br><br>
所在城市:
<select>
<option>北京</option>
<option selected>上海</option>
<option>广州</option>
</select>
<br>
<br>
喜欢的类型:
<label><input type="checkbox" checked> 可爱</label>
<label><input type="checkbox" checked> 性感</label>
<label><input type="checkbox"> 御姐</label>
<br>
<br>
个人介绍: <br>
<textarea name="" id="" cols="60" rows="10"></textarea>
<h3>我承诺</h3>
<ul>
<li>年满18岁、单身</li>
<li>年满18岁、单身</li>
<li>年满18岁、单身</li>
</ul>
<!-- 按钮: input button -->
<input type="submit" value="免费注册">
<button type="reset">重置</button>
</form>
</body>
</html>
引入外部样式
like
引入外部样式表（CSS）
rel="stylesheet"：指定了链接的关系为样式表。 href="styles.css"：指定了外部样式表文件的路径。这里的路径可以是相对路径或绝对路径，相对路径是相对于当前HTML文件的位置。 **设置网站图标（favicon）**rel=“icon”：指定了链接的关系为网站图标。
href=“favicon.ico”：指定了网站图标文件的路径。这里的路径可以是相对路径或绝对路径。
type=“image/x-icon”：指定了图标文件的类型，通常是 .ico 格式的图标。
其他用途
除了上述两种常见用法， 标签还可以用于其他用途，例如：
引入字体文件：通过 标签引入外部字体文件，以在网页中使用自定义字体。
引入预加载资源：使用 rel=“preload” 属性可以在页面加载时预加载资源，如字体、脚本等，以优化加载性能。
总之， 标签是HTML中非常有用的一个元素，用于管理和优化网页中的外部资源引入
css
CSS基础
一、基础认知
1.1 CSS的介绍
➢ CSS：层叠样式表（Cascading style sheets）
➢ CSS作用是什么？？
• 给页面中的HTML标签设置样式
1.2 CSS 语法规则
➢ 写在哪里？
• css写在style标签中，style标签一般写在head标签里面，title标签下面
➢ 怎么写？
1.3 CSS 初体验
➢ 常见属性：
/* 文字颜色变红色 */
color: red;
/* 字变大 px:像素 */
font-size: 30px;
/* 背景颜色 */
background-color: green;
/* width height; */
width: 400px;
height: 400px;
➢ 注意点：
- CSS 标点符号都是英文状态下的
- 每一个样式键值对写完之后，最后需要写分号
2.1 CSS引入方式
➢ 内嵌式：CSS 写在style标签中 作用在当前页面 小案例中使用
• 提示：style标签虽然可以写在页面任意位置，但是通常约定写在 head 标签中
➢ 外联式：CSS 写在一个单独的.css文件中 作用与多个页面 项目中使用
• 提示：需要通过link标签在网页中引入
➢ 行内式：CSS 写在标签的style属性中 作用与当前标签 配合js使用
• 提示：不推荐使用，会配合js使用
二、基础选择器
1.1 选择器的作用
➢ 选择器的作用：
• 选择页面中对应的标签（找她），方便后续设置样式（改她）
1.2 标签选择器
➢ 结构：标签名 { css属性名：属性值； }
➢ 作用：通过标签名，找到页面中所有这类标签，设置样式
➢ 注意点：
- 标签选择器选择的是一类标签，而不是单独某一个
- 标签选择器无论嵌套关系有多深，都能找到对应的标签
1.3 类选择器
➢ 结构：.类名 { css属性名：属性值； }
➢ 作用：通过类名，找到页面中所有带有这个类名的标签，设置样式
➢ 注意点：
- 所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
- 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
- 一个标签可以同时有多个类名，类名之间以空格隔开
- 类名可以重复，一个类选择器可以同时选中多个标签
1.4 id选择器
➢ 结构：#id属性值 { css属性名：属性值； }
➢ 作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
➢ 注意点：
- 所有标签上都有id属性
- id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
- 一个标签上只能有一个id属性值
- 一个id选择器只能选中一个标签
1.5 通配符选择器
➢ 结构：* { css属性名：属性值； }
➢ 作用：找到页面中所有的标签，设置样式
➢ 注意点：
- 开发中使用极少，只会在极特殊情况下才会用到
- 可能会用于去除标签默认的margin和padding
1.6 总结
类与id的区别
➢ class类名与id属性值的区别
• class类名相当于姓名，可以重复，一个标签可以同时有多个class类名
• id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值
➢ 类选择器与id选择器的区别
• 类选择器以 . 开头
• id选择器以 # 开头
➢ 实际开发的情况
• 类选择器用的最多
• id一般配合js使用，除非特殊情况，否则不要使用id设置样式
• 实际开发中会遇到冗余代码的抽取 （可以将一些公共的代码抽取到一个公共的类中去）
- 选择器作用：选中页面中对应的标签（找她），方便后续设置样式（改她）
- 标签选择器：标签名 { css属性名：属性值； }
- 类选择器：.类名 { css属性名：属性值； }
- id选择器：#id属性值 { css属性名：属性值； }
- 通配符选择器：* { css属性名：属性值； }
三、字体和文本样式
- 字体样式
- 字体大小：font-size
- 字体粗细：font-weight
- 字体样式：font-style
- 字体类型：font-family
- 字体类型：font属性连写
- 文本样式
- 文本缩进：text-indent
- 文本水平对齐方式：text-align
- 文本修饰：text-decoration
- line-height行高
1. 字体样式
** 1.1 字体大小**
➢ 属性名：font-size
➢ 取值：数字 + px
➢ 注意点：
• 谷歌浏览器默认文字大小是16px
• 单位需要设置，否则无效
1.2 字体粗细
➢ 属性名：font-weight
➢ 取值：
• 关键字：正常 normal 加粗 bold
• 纯数字：100~900的整百数： 正常 400 加粗 700
➢ 注意点：
• 不是所有字体都提供了九种粗细，因此部分取值页面中无变化
• 实际开发中以：正常、加粗两种取值使用最多。
1.3 字体样式（是否倾斜）
➢ 属性名：font-style
➢ 取值：
• 正常（默认值）：normal
• 倾斜：italic
1.4 常见字体系列（了解）
➢ 无衬线字体（sans-serif）
- 特点：文字笔画粗细均匀，并且首尾无装饰
- 场景：网页中大多采用无衬线字体
- 常见该系列字体：黑体、Arial
➢ 衬线字体（serif） - 特点：文字笔画粗细不均，并且首尾有笔锋装饰
- 场景：报刊书籍中应用广泛
- 常见该系列字体：宋体、Times New Roman
➢ 等宽字体（monospace） - 特点：每个字母或文字的宽度相等
- 场景：一般用于程序代码编写，有利于代码的阅读和编写
- 常见该系列字体：Consolas、fira code
1.5 字体系列 font-family
➢ 属性名：font-family
➢ 常见取值：具体字体1,具体字体2,具体字体3,具体字体4,…,字体系列
• 具体字体：“Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等……
• 字体系列：sans-serif、serif、monospace等……
➢ 渲染规则：
- 从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
- 如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
➢ 注意点： - 如果字体名称中存在多个单词，推荐使用引号包裹
- 最后一项字体系列不需要引号包裹
- 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示
1.6 样式的层叠问题
➢ 问题：
• 给同一个标签设置了相同的样式，此时浏览器会如何渲染呢？
➢ 结果：
• 如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效
➢ TIP：
• CSS （Cascading style sheets） 层叠样式表
• 所谓的层叠即叠加的意思，表示样式可以一层一层的层叠覆盖
1.7 字体font相关属性的连写
➢ 属性名：font (复合属性)
➢ 取值：
• font : style weight size family;
➢ 省略要求：
• 只能省略前两个，如果省略了相当于设置了默认值
➢ 注意点：如果需要同时设置单独和连写形式
• 要么把单独的样式写在连写的下面
• 要么把单独的样式写在连写的里面
1.8 字体相关属性总结
➢ 字体大小： font-size
• 数字+px
➢ 字体粗细：font-weight
• 正常：normal 或 400
• 加粗：bold 或 700
➢ 字体样式：font-style
• 正常：normal
• 倾斜：italic
➢ 字体系列：font-family
• 具体字体1,具体字体2,具体字体3,具体字体4,…,字体系列
➢ 字体连写：font
• font : style weight size family;
<!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>Document</title>
<style>
p {
/* 字号 */
font-size: 30px;
}
div {
/* 加粗 */
font-weight: 700;
}
h1 {
/* 不加粗 */
font-weight: 400;
}
div {
/* 倾斜 */
font-style: italic;
}
em {
/* 正常的, 不倾斜 */
font-style: normal;
}
div {
font-family: 宋体;
/* 如果用户电脑没有安装微软雅黑, 就按黑体显示文字 */
/* 如果电脑没有安装黑体, 就按任意一种非衬线字体系列显示 */
/* font-family: 微软雅黑, 黑体, sans-serif; */
}
p {
/* 层叠性: 后面的覆盖前面的属性 */
/* 覆盖 */
color: red;
color: blue;
}
p {
/* font-size: ;
font-style: ;
font-weight: ;
font-family: ; */
/* font: style weight size 字体; */
/* font: italic 700 66px 宋体;
font-style: normal; */
font: 100px 微软雅黑;
/* 一个属性冒号后面书写多个值的写法 -- 复合属性 */
}
</style>
</head>
<body>
<p>这是p标签</p>
<p>ppppp</p>
<div>
这是一个div标签
</div>
<div>div文字</div>
<em>em</em>
<div>这是div</div>
<h1>一级标题</h1>
<!-- 默认字号是16 -->
<p>段落文字</p>
</body>
</html>
2 文本样式
- 文本缩进：text-indent
- 文本水平对齐方式：text-align
- 文本修饰：text-decoration
2.1 文本缩进
➢ 属性名：text-indent
➢ 取值：
• 数字+px
• 数字+em（推荐：1em = 当前标签的font-size的大小）
2.2 文本水平对齐方式
➢ 属性名：text-align
➢ 取值：
left 左对齐 center 居中对齐 right 右对齐
➢ 注意点：
• 如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置
2.3 文本修饰
➢ 属性名：text-decoration
➢ 取值：
underline 下划线(常用) line-through 删除线(不常用) overline 上划线(几乎不用) none 无装饰线(常用)
➢ 注意点：
• 开发中会使用 text-decoration : none ; 清除a标签默认的下划线
2.5文本样式总结
➢ text-align : center 能让哪些元素水平居中？
- 文本
- span标签、a标签
- input标签、img标签
➢ 注意点： - 如果需要让以上元素水平居中， text-align : center 需要给以上元素的 父元素 设置
3. line-height行高
➢ 作用：控制一行的上下行间距
➢ 属性名：line-height
➢ 取值：
• 数字+px
• 倍数（当前标签font-size的倍数）
➢ 应用：
- 让单行文本垂直居中可以设置 line-height : 文字父元素高度
- 网页精准布局时，会设置 line-height : 1 可以取消上下间距
➢ 行高与font连写的注意点：
• 如果同时设置了行高和font连写，注意覆盖问题
• font : style weight size/line-height family ;
<!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>Document</title>
<style>
p {
/* text-indent: 50px; */
/* 首行缩进2个字的大小 */
/* 默认字号: 16px ; 32 */
/* text-indent: 40px;
font-size: 20px; */
/* em: 一个字的大小 */
text-indent: 2em;
font-size: 40px;
}
h1 {
/* text-align: left; */
/* text-align: right; */
text-align: center;
}
body {
text-align: right;
}
div {
text-decoration: underline;
}
p {
text-decoration: line-through;
}
h2 {
text-decoration: overline;
}
a {
text-decoration: none;
}
p {
/* line-height: 50px; */
/* 自己字号的1.5倍 */
/* line-height: 1.5; */
/* 66px 宋体 倾斜 加粗 行高是2倍 */
font: italic 700 66px/2 宋体;
}
</style>
</head>
<body>
<p>2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析</p>
<div>div</div>
<p>ppp</p>
<h2>h2</h2>
<a href="#">我是超链接, 点呀</a>
<h1>新闻标题</h1>
<img src="./images/1.jpg" alt="">
<p>2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。</p>
</body>
</html>
Chrome调试工具
1.1 Chrome调试工具操作
➢ 打开方式
• ① 右击 → 检查 ② 看哪里
➢ 选择元素
• 两种常见方法
➢ 控制样式
• ① 修改属性值 ② 添加属性 ③ 控制样式生效
➢ 特殊情况
• ① 出现删除线 ② 出现小三角形
1.2 Chrome调试工具小结
颜色常见取值
➢ 属性名：
• 如：文字颜色：color
• 如：背景颜色：background-color
➢ 属性值：
关键词
➢ 取值类型①：关键词
➢ 常见颜色取值：
• red：红色
• green：绿色
• blue：蓝色
• yellow：黄色
• orange：橘色
• skyblue：天蓝色
• pink：粉色
• …….
rgb表示法
➢ 取值类型②：rgb表示法
➢ 每项取值范围：0~255
➢ 常见颜色取值：
• rgb ( 255 , 0 , 0 ) ：红色
• rgb ( 0 , 255 , 0 ) ：绿色
• rgb ( 0 , 0 , 255 ) ：蓝色
• rgb ( 0 , 0 , 0 ) ：黑色
• rgb ( 255 , 255 , 255 ) ：白色
rgba表示法
取值类型③：rgba表示法
• 其实，比rgb表示法多个一个a，a表示透明度
➢ a的取值范围：0~1
• 1：完全不透明
• 0：完全透明
➢ 省略写法：
• rgba ( 0 , 0 , 0 , 0.5 ) 可以省略写成 rgba ( 0 , 0 , 0 , .5 )
十六进制表示法
➢ 取值类型④：十六进制表示法
➢ 取值范围：
• 两个数字为一组，每个数字的取值范围：0~9 , a , b , c , d , e , f
➢ 省略写法：
• 如果三组中，每组数字都相同，此时可以每组可以省略只写一个数字
• 正确写法：#ffaabb 改写成 #fab
➢ 常见取值：
• #fff ：白色
• #000 ：黑色
➢ 注意点
- 类似于：#ffaabc 不能改写成 #fabc
- 实际开发中会直接使用测量工具直接得到颜色，不需要前端自己设计颜色，直接复制粘贴即可。
标签水平居中方法总结 margin : 0 auto
➢ 如果需要让div、p、h（大盒子）水平居中？
• 可以通过margin : 0 auto ; 实现
➢ 注意点：
- 如果需要让 div、p、h（大盒子） 水平居中，直接给 当前元素本身 设置即可
- margin：0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度
四、选择器进阶
- 复合选择器
- 并集选择器
- 交集选择器
- hover伪类选择器
- Emmet语法
1. 复合选择器
1.1 后代选择器：空格
➢ 作用：根据 HTML 标签的嵌套关系，选择父元素 后代中 满足条件的元素
➢ 选择器语法：选择器1 选择器2 { css }
➢ 结果：
• 在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式
➢ 注意点：
- 后代包括：儿子、孙子、重孙子……
- 后代选择器中，选择器与选择器之前通过 空格 隔开
<!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>Document</title>
<style>
/* 找到div的儿子p设置文字颜色是红色 */
/* 父选择器 后代选择器 {} */
div p {
color: red;
}
</style>
</head>
<body>
<!-- 后代: 儿子, 孙子, 重孙子..... -->
<p>这是一个p标签</p>
<div>
<p>这是div的儿子p</p>
</div>
</body>
</html>
1.2 子代选择器：>
➢ 作用：根据 HTML 标签的嵌套关系，选择父元素 子代中 满足条件的元素
➢ 选择器语法：选择器1 > 选择器2 { css }
➢ 结果：
• 在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式
➢ 注意点：
- 子代只包括：儿子
- 子代选择器中，选择器与选择器之前通过 > 隔开
<style>
/* 空格隔开的是后代, 儿子,孙子,重孙子 */
/* div a {
color: red;
} */
/* 只想选中儿子a */
/* div的儿子a文字颜色是红色 */
div>a {
color: red;
}
</style>
</head>
<body>
<div>
父级
<a href="#">这是div里面的a</a>
<p>
<a href="#">这是div里面的p里面的a</a>
</p>
</div>
</body>
2. 并集选择器
2.1 并集选择器：,
➢ 作用：同时选择多组标签，设置相同的样式
➢ 选择器语法：选择器1 ， 选择器2 { css }
➢ 结果：
• 找到 选择器1 和 选择器2 选中的标签，设置样式
➢ 注意点：
- 并集选择器中的每组选择器之间通过 , 分隔
- 并集选择器中的每组选择器可以是基础选择器或者复合选择器
- 并集选择器中的每组选择器通常一行写一个，提高代码的可读性
<style>
/* p div span h1 文字颜色是红色 */
/* 选择器1, 选择器2 {} */
p,
div,
span,
h1 {
color: red;
}
</style>
</head>
<body>
<p>ppp</p>
<div>div</div>
<span>span</span>
<h1>h1</h1>
<h2>h2</h2>
3. 交集选择器
3.1 交集选择器：紧挨着
➢ 作用：选中页面中 同时满足 多个选择器的标签
➢ 选择器语法：选择器1选择器2 { css }
➢ 结果：
• （既又原则）找到页面中 既 能被选择器1选中，又 能被选择器2选中的标签，设置样式
➢ 注意点：
- 交集选择器中的选择器之间是紧挨着的，没有东西分隔
- 交集选择器中如果有标签选择器，标签选择器必须写在最前面
<style>
/* p {
color: red;
} */
/* .box {
color: red;
} */
/* 必须是p标签,而且添加了box类 */
/* p.box {
color: red;
} */
/* #dilireba {
color: red;
} */
.box1 {
color: green;
}
</style>
</head>
<body>
<!-- 找到第一个p,带box类的, 设置文字颜色是红色 -->
<p class="box box1" id="dilireba">这是p标签:box</p>
<p class="box">这是p标签:box</p>
<p>pppppp</p>
<div class="box">这是div标签:box</div>
4. hover伪类选择器
4.1 hover伪类选择器
➢ 作用：选中鼠标悬停在元素上的状态，设置样式
➢ 选择器语法：选择器:hover { css }
➢ 注意点：
- 伪类选择器选中的元素的某种状态
<style>
/* 悬停的时候文字颜色是红色 */
a:hover {
color: red;
background-color: green;
}
/* 用户鼠标悬停到div的时候, 文字是绿色 */
div:hover {
color: green;
}
</style>
</head>
<body>
<a href="#">这是超链接</a>
<!-- 任何标签都可以添加伪类, 任何一个标签都可以鼠标悬停 -->
<div>div</div>
5. Emmet语法
➢ 作用：通过简写语法，快速生成代码
➢ 语法：
• 类似于刚刚学习的选择器的写法
总结
五、背景相关属性
- 背景颜色
- 背景图片
- 背景平铺
- 背景位置
- 背景相关属性连写
1. 背景颜色
➢ 属性名：background-color（bgc）
➢ 属性值：
• 颜色取值：关键字、rgb表示法、rgba表示法、十六进制……
➢ 注意点：
• 背景颜色默认值是透明： rgba(0,0,0,0) 、transparent
• 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色
➢ 背景颜色属性的属性名是？
• background-color
➢ 背景颜色属性的属性值默认是？
• 透明：rgba(0,0,0,0)、transparent
2. 背景图片
➢ 属性名：background-image（bgi）
➢ 属性值：background-image: url(图片路径); background-image: url(./images/1.jpg);
➢ 注意点：
• 背景图片中url中可以省略引号
• 背景图片默认是在水平和垂直方向平铺的
• 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的
➢ 背景图片属性的属性名是？
• background-image
➢ 背景图片属性的属性值格式是什么样的？
background-image: url(图片路径);
background-image: url(./images/1.jpg);
3. 背景平铺
➢ 属性名：background-repeat（bgr）
➢ 属性值：
4. 背景位置
➢ 属性名：background-position（bgp）
➢ 属性值：background-position:水平方向位置 垂直方向位置; background-position: -50px -100px;
在这里插入图片描述
➢ 注意点：
• 方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直
5. 背景相关属性连写
➢ 属性名：background（bg）
➢ 属性值：
• 单个属性值的合写，取值之间以空格隔开
➢ 书写顺序：
• 推荐：background：color image repeat position
➢ 省略问题：
• 可以按照需求省略
• 特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写 background：url()
➢ 注意点
• 如果需要设置单独的样式和连写
• ① 要么把单独的样式写在连写的下面
• ② 要么把单独的样式写在连写的里面
拓展
img标签和背景图片的区别
➢ 需求：需要在网页中展示一张图片的效果？
➢ 方法一：直接写上img标签即可
• img标签是一个标签，不设置宽高默认会以原尺寸显示
➢ 方法二：div标签 + 背景图片
• 需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签
<!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>Document</title>
<style>
div {
width: 400px;
height: 400px;
/* background-color: pink; */
/* background-color: #ccc; */
/* 红绿蓝三原色, a是透明度0-1 */
/* background-color: rgba(0, 0, 0, 0.5); */
background-color: rgba(0, 0, 0, .5);
}
div {
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./images/1.jpg);
}
div {
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./images/1.jpg);
/* background-repeat: repeat; */
/* 不平铺: 图片只显示一个 */
/* background-repeat: no-repeat; */
/* background-repeat: repeat-x; */
/* background-repeat: repeat-y; */
}
div {
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./images/1.jpg);
background-repeat: no-repeat;
/* background-position: right 0; */
/* background-position: right bottom; */
/* background-position: center center; */
/* background-position: center; */
/* background-position: 50px 0; */
/* background-position: 50px 100px; */
background-position: -50px -100px;
/* 正数: 向右向下移动; 负数:向左向上移动 */
/* 注意: 背景色和背景图只显示在盒子里面 */
}
div {
width: 400px;
height: 400px;
/* 不分先后顺序 背景色 背景图 背景图平铺 背景图位置 */
/* background: pink url(./images/1.jpg) no-repeat center bottom; */
/* 背景图位置如果是英文单词可以颠倒顺序 */
background: pink url(./images/1.jpg) no-repeat bottom center ;
/* 测试背景图位置如果是数值 不要颠倒顺序 */
/* 水平50px, 垂直100px */
/* background: pink url(./images/1.jpg) no-repeat 50px 100px; */
background: pink url(./images/1.jpg) no-repeat 100px 50px;
}
</style>
</head>
<body>
<div></div>
<div>文字</div>
<div>文字</div>
<div>文字</div>
<div>div</div>
</body>
</html>
六 元素显示模式
- 块级元素
- 行内元素
- 行内块元素
- 元素显示模式转换
1. 块级元素
➢ 显示特点：
- 独占一行（一行只能显示一个）
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高
➢ 代表标签：
• div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……
➢ 块级元素的显示特点有哪些？
- 独占一行（一行只能显示一个）
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高
➢ 块级元素的代表标签有哪些？
• div、p、h系列
2. 行内元素
➢ 显示特点：
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高
➢ 代表标签：
• a、span 、b、u、i、s、strong、ins、em、del……
➢ 行内元素的显示特点有哪些？ - 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高
➢ 行内元素的代表标签有哪些？
• a、span
3. 行内块元素
➢ 显示特点：
- 一行可以显示多个
- 可以设置宽高
➢ 代表标签：
• input、textarea、button、select……
• 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline
➢ 行内块元素的显示特点有哪些？ - 一行可以显示多个
- 可以设置宽高
➢ 行内块元素的代表标签有哪些？
• input、textarea
4. 元素显示模式转换
➢ 目的：改变元素默认的显示特点，让元素符合布局要求
➢ 语法：
➢ 转换成块级元素的属性是什么？
• display：block
➢ 转换成行内块元素的属性是什么？
• display：inline-block
➢ 转换成行内元素的属性是什么？
• display：inline
拓展
拓展1：HTML嵌套规范注意点
- 块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等……
➢ 但是：p标签中不要嵌套div、p、h等块级元素 - a标签内部可以嵌套任意元素
➢ 但是：a标签不能嵌套a标签
拓展2：居中方法总结
<!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>Document</title>
<style>
/* 块: 独占一行; 宽度默认是父级100%; 添加宽度都生效 */
div {
width: 300px;
height: 300px;
background-color: pink;
/* 行内块 */
/* display: inline-block; */
/* 行内 */
display: inline;
}
/* 行内: 不换行; 设置宽高不生效; 尺寸和内容的大小相同 */
span {
width: 300px;
height: 300px;
background-color: pink;
/* 行内块 */
/* display: inline-block; */
/* 块 */
display: block;
}
/* 行内块: 一行显示多个; 加宽高生效 */
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<img src="./images/1.jpg" alt="">
<img src="./images/1.jpg" alt="">
<span>span</span>
<span>span</span>
<div>11111</div>
<div>22222</div>
<!-- p 和 h标题不能相互嵌套 -->
<!-- <p>
<h1>一级标题</h1>
</p> -->
<!-- p里面不能包含div -->
<p>
<div>divdiv</div>
</p>
</body>
</html>
CSS布局
一、CSS 特性
- 继承性
- 层叠性
1. 继承性
➢ 特性：子元素有默认继承父元素样式的特点（子承父业）
➢ 可以继承的常见属性(文字控制属性都可以继承)
- color
- font-style、font-weight、font-size、font-family
- text-indent、text-align
- line-height
- ……
➢ 注意点：
• 可以通过调试工具判断样式是否可以继承
继承的应用
➢ 好处：可以在一定程度上减少代码
➢ 常见应用场景：
- 可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式
- 直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小
继承失效的特殊情况
➢ 如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式
- a标签的color会继承失效
• 其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了 - h系列标签的font-size会继承失效
• 其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
2. 层叠性
➢ 特性：
- 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
- 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
➢ 注意点： - 当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
总结
➢ 继承性的特性是什么？
• 子元素有默认继承父元素样式的特点
➢ 有哪些常见属性可以继承？
- color
- font-style、font-weight、font-size、font-family
- text-indent、text-align
- line-height
➢ 如果给同一个标签设置了相同的属性，此时样式会？
• 会层叠覆盖，写在最后的会生效
➢ 如果给同一个标签设置了不同的样式，此时样式会？
• 会层叠叠加，共同作用在标签上
<!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>Document</title>
<style>
/* 控制文字的属性都能继承; 不是控制文字的都不能继承 */
div {
color: red;
font-size: 30px;
height: 300px;
}
div {
color: red;
font-size: 12px;
}
a {
color: red;
}
div {
color: red;
color: green;
}
.box {
font-size: 30px;
}
</style>
</head>
<body>
<div class="box">文字</div>
<div>
<a href="#">超链接</a>
<h1>一级标题</h1>
</div>
<div>
这是div标签里面的文字
<span>这是div里面的span</span>
</div>
</body>
</html>
3. 优先级
3.1 优先级的介绍
➢ 特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
➢ 优先级公式：
• 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
➢ 注意点：
- !important写在属性值的后面，分号的前面！
- !important不能提升继承的优先级，只要是继承优先级最低！
- 实际开发中不建议使用 !important 。
➢ 优先级比较公式是怎样的？
• 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
➢ !important能提升继承的优先级吗？
• 不能
3.2 权重叠加计算
➢ 场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
➢ 权重叠加计算公式：（每一级之间不存在进位）
➢ 比较规则：
- 先比较第一级数字，如果比较出来了，之后的统统不看
- 如果第一级数字相同，此时再去比较第二级数字，如果比较
- 出来了，之后的统统不看
- ……
- 如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算!）
➢ 注意点：!important如果不是继承，则权重最高，天下第一！
权重叠加计算案例
➢ 权重计算题解题步骤：
6. 先判断选择器是否能直接选中标签，如果不能直接选中 → 是继承，优先级最低 → 直接pass
7. 通过权重计算公式，判断谁权重最高
➢ 注意点：
• 实际开发中选择标签需要精准，尽量避免多个选择器同时选中一个标签的情况，不要自己难为自己
查错流程
二、盒子模型
- 盒子模型的介绍
- 内容区域的宽度和高度
- 边框（ border ）
- 内边距（ padding ）
- 外边距（margin）
1. 盒子模型的介绍
1.1 盒子模型的介绍
- 盒子的概念
- 页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局
- 浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子
- 盒子模型
➢ CSS 中规定每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（
margin）构成，这就是 盒子模型 - 记忆：可以联想现实中的包装盒
➢ 盒子模型一共有几个部分组成？分别是什么？
- 内容区域：content
- 边框区域：border
- 内边距区域：padding
- 外边距区域：margin
2. 内容区域的宽度和高度
2.1 内容的宽度和高度
➢ 作用：利用 width 和 height 属性默认设置是盒子 内容区域 的大小
➢ 属性：width / height
➢ 常见取值：数字+px
3. 边框（ border ）
3.1 边框（border）- 单个属性
➢ 作用：给设置边框粗细、边框样式、边框颜色效果
➢ 单个属性：
3.2 边框（border）- 连写形式
➢ 属性名：border
➢ 属性值：单个取值的连写，取值之间以空格隔开
• 如：border : 10px solid red;
➢ 快捷键：bd + tab
3.3 边框（border）- 单方向设置
➢ 场景：只给盒子的某个方向单独设置边框
➢ 属性名：border - 方位名词
➢ 属性值：连写的取值
3.4 盒子实际大小初级计算公式
➢ 需求：盒子尺寸 400*400，背景绿色，边框10px 实线 黑色，如何完成？
• 注意点： ① 设置width和height是内容的宽高！② 设置border会撑大盒子！
➢ 盒子实际大小初级计算公式：
• 盒子宽度 = 左边框 + 内容宽度 + 右边框
• 盒子高度 = 上边框 + 内容高度 + 下边框
➢ 解决：当盒子被border撑大后，如何满足需求？
• 解决：计算多余大小，手动在内容中减去（手动内减）
总结
➢ 给盒子设置四周 20像素、实线、蓝色的边框，属性应该如何设置？
• border：20px solid blue；
➢ 给盒子设置上边框 10像素、虚线、黄色的边框，属性应该如何设置？
• border-top：10px dashed yellow；
4. 内边距（ padding ）
4.1 内边距（padding）- 取值
➢ 作用：设置 边框 与 内容区域 之间的距离
➢ 属性名：padding
➢ 常见取值：
➢ 记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！
4.2 内边距（padding）- 单方向设置
➢ 场景：只给盒子的某个方向单独设置内边距
➢ 属性名：padding - 方位名词
➢ 属性值：数字 + px
4.3 盒子实际大小终极计算公式
➢ 需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
• 注意点：① 设置width和height是内容的宽高！② 设置border会撑大盒子 ③ 设置padding会撑大盒子
➢ 盒子实际大小终极计算公式：
• 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框
• 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框
➢ 解决：当盒子被border和padding撑大后，如何满足需求？
• 自己计算多余大小，手动在内容中减去（手动内减）
4.4 CSS3盒模型（自动内减）
➢ 需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？
• 给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大？
➢ 解决方法 ① ：手动内减
• 操作：自己计算多余大小，手动在内容中减去
• 缺点：项目中计算量太大，很麻烦
➢ 解决方法 ② ：自动内减
• 操作：给盒子设置属性 box-sizing : border-box ; 即可
• 优点：浏览器会自动计算多余大小，自动在内容中减去
总结
➢ 给盒子设置四周 20px 的内边距可以通过什么属性设置？
• padding : 20px ;
➢ 给盒子设置上下20px、左右30px的内边距可以通过什么属性设置？
• padding : 20px 30px ;
➢ 给盒子设置左侧50px的内边距可以通过什么属性设置？
• padding-left : 50px ;
➢ 不会撑大盒子的特殊情况（块级元素）
- 如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度
- 此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子
5. 外边距（margin）
5.1 外边距（margin）- 取值
➢ 作用：设置边框以外，盒子与盒子之间的距离
➢ 属性名：margin
➢ 常见取值：
➢ 记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！
5.2 外边距（margin） - 单方向设置
➢ 场景：只给盒子的某个方向单独设置外边距
➢ 属性名：margin - 方位名词
➢ 属性值：数字 + px
5.3 margin单方向设置的应用
➢ 应用：
5.4 清除默认内外边距
➢ 场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的
margin和padding，后续自己设置
• 比如：body标签默认有margin：8px
• 比如：p标签默认有上下的margin
• 比如：ul标签默认由上下的margin和padding-left
• ……
/* 清除默认的内外边距*/
* {
margin: 0;
padding: 0;
}
5.5 外边距正常情况
➢ 场景：水平布局 的盒子，左右的margin正常，互不影响
➢ 结果：最终两者距离为左右margin的和
5.6 外边距折叠现象 – ① 合并现象
➢ 场景：垂直布局 的 块级元素，上下的margin会合并
➢ 结果：最终两者距离为margin的最大值
➢ 解决方法：避免就好
• 只给其中一个盒子设置margin即可
5.7 外边距折叠现象 – ② 塌陷现象
➢ 场景：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上
➢ 结果：导致父元素一起往下移动
➢ 解决方法：
- 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
- 给父元素设置overflow：hidden
- 转换成行内块元素
- 设置浮动
5.8 行内元素的margin和padding无效情况
➢ 场景：给行内元素设置margin和padding时
➢ 结果：
- 水平方向的margin和padding布局中有效！
- 垂直方向的margin和padding布局中无效！
总结
➢ 给盒子设置四周 20px 的外边距可以通过什么属性设置？
• margin : 20px ;
➢ 给盒子设置上下20px、左右30px的外边距可以通过什么属性设置？
• margin : 20px 30px ;
➢ 给盒子设置左侧50px的外边距可以通过什么属性设置？
• margin-left : 50px ;
<!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>Document</title>
<style>
#box {
color: orange;
}
.box {
color: blue;
}
div {
color: green !important;
}
body {
color: red;
}
/* !important不要给继承的添加, 自己有样式无法继承父级样式 */
/* #one {
color: red;
}
.son {
color: blue;
}
p {
color: green;
} */
/* (行内, id, 类, 标签) */
/* (0, 1, 0, 1) */
div #one {
color: orange;
}
/* (0, 0, 2, 0) */
.father .son {
color: skyblue;
}
/* 0, 0, 1, 1 */
.father p {
color: purple;
}
/* 0, 0, 0, 2 */
div p {
color: pink;
}
/* 纸箱子, 填充泡沫 */
div {
width: 300px;
height: 300px;
background-color: pink;
/* 边框线 == 纸箱子 */
border: 1px solid #000;
/* 内边距 == 填充泡沫 : 出现在内容和盒子边缘之间 */
padding: 20px;
/* 外边距 : 出现在两个盒子之间, 出现在盒子的外面*/
margin: 50px;
}
div {
width: 200px;
height: 200px;
background-color: pink;
}
div {
width: 200px;
height: 200px;
background-color: pink;
/* border: 粗细 线条样式 颜色 -- 不分先后顺序 */
/* solid : 实线 */
/* border: 1px solid #000; */
/* dashed: 虚线 */
/* border: 5px dashed #000; */
/* dotted : 点线 */
/* border: 5px dotted #000; */
border-left: 5px dotted #000;
border-right: 5px dotted #000;
border-top: 1px solid red;
border-bottom: 1px solid red;
}
div {
/* border 撑大盒子尺寸 */
/* 盒子尺寸 = width / height + 边框线 */
/* 如果400 * 400 尺寸 */
width: 380px;
height: 380px;
background-color: green;
border: 10px solid #000;
}
div {
width: 280px;
height: 280px;
background-color: #ffc0cb;
border: 10px solid #00f;
}
.box {
height: 40px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
}
/* 后代: box里面的a */
.box a {
width: 80px;
height: 40px;
/* 推荐先加上: 清楚的看到文字在什么位置 */
/* background-color: #edeef0; */
display: inline-block;
text-align: center;
line-height: 40px;
font-size: 12px;
color: #4c4c4c;
text-decoration: none;
}
.box a:hover {
background-color: #edeef0;
color: #ff8400;
}
<!-- 从外到内 : 先宽高背景色, 放内容, 调节内容的位置; 控制文字细节 -->
div {
width: 300px;
height: 300px;
background-color: pink;
/* 添加了4个方向的内边距 */
/* padding: 50px; */
/* padding 属性可以当做复合属性使用, 表示单独设置某个方向的内边距 */
/* padding 最多取4个值 */
/* 四值: 上 右 下 左 */
/* padding: 10px 20px 40px 80px; */
/* 三值 : 上 左右 下*/
/* padding: 10px 40px 80px; */
/* 两值 : 上下 左右*/
/* padding: 10px 80px; */
padding-left: 10px;
padding-bottom: 50px;
}
/* 多值写法, 永远都是从上开始顺时针转一圈, 如果数不够, 看对面 */
div {
/* 撑大盒子的都有啥? border + padding */
width: 240px;
height: 240px;
background-color: pink;
border: 10px solid #000;
padding: 20px;
}
.box {
height: 40px;
border-top: 3px solid #ff8500;
border-bottom: 1px solid #edeef0;
}
/* 后代: box里面的a */
.box a {
padding: 0 16px;
/* width: 80px; */
height: 40px;
/* 推荐先加上: 清楚的看到文字在什么位置 */
/* background-color: #edeef0; */
display: inline-block;
text-align: center;
line-height: 40px;
font-size: 12px;
color: #4c4c4c;
text-decoration: none;
}
.box a:hover {
background-color: #edeef0;
color: #ff8400;
}
<!-- 从外到内 : 先宽高背景色, 放内容, 调节内容的位置; 控制文字细节 -->
div {
width: 100px;
height: 100px;
background-color: pink;
border: 10px solid #000;
padding: 20px;
/* 內减模式 */
/* 变成CSS3的盒子模型, 好处: 加了border和padding不需要手动减法 */
box-sizing: border-box;
}
div {
width: 100px;
height: 100px;
background-color: pink;
margin: 50px;
margin-left: 100px;
}
/* 清除默认的内外边距*/
* {
margin: 0;
padding: 0;
}
div {
width: 1000px;
height: 300px;
background-color: pink;
margin: 0 auto;
}
* {
margin: 0;
padding: 0;
/* 所有的标签都可能添加内边距或border, 都內减模式 */
box-sizing: border-box;
}
.news {
width: 500px;
height: 400px;
border: 1px solid #ccc;
margin: 50px auto;
padding: 42px 30px 0;
}
.news h2 {
border-bottom: 1px solid #ccc;
font-size: 30px;
/* 行高是1倍, 就是字号的大小 */
line-height: 1;
padding-bottom: 9px;
}
/* 去掉列表的符号 */
ul {
list-style: none;
}
/* li {} */
.news li {
height: 50px;
border-bottom: 1px dashed #ccc;
padding-left: 28px;
line-height: 50px;
}
.news a {
text-decoration: none;
color: #666;
font-size: 18px;
}
div {
width: 100px;
height: 100px;
background-color: pink;
}
.one {
/* margin-bottom: 50px; */
margin-bottom: 60px;
}
.two {
margin-top: 50px;
}
.father {
width: 300px;
height: 300px;
background-color: pink;
/* padding-top: 50px; */
/* 如果设计稿没有border, 不能使用这个解决办法 */
/* border: 1px solid #000; */
/* overflow: hidden; */
}
.son {
width: 100px;
height: 100px;
background-color: skyblue;
margin-top: 50px;
display: inline-block;
}
span {
/* margin: 100px; */
/* padding: 100px; */
line-height: 100px;
}
</style>
</head>
<body>
<!-- 行内元素 内外边距 margin padding -->
<!-- 如果想要通过margin或padding改变行内标签的垂直位置, 无法生效 -->
<!-- 行内标签的margin-top和bottom 不生效 -->
<!-- 行内标签的padding-top或botttom 不生效 -->
<span>span</span>
<span>span</span>
<div class="father">
<div class="son">son</div>
</div>
<div class="one">11</div>
<div class="two">22</div>
<!-- 从外到内 -->
<div class="news">
<h2>最新文章/New Articles</h2>
<ul>
<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
</ul>
</div>
<!-- 版心: 网页的有效内容 -->
<!-- 版心居中 -->
<div>版心</div>
<p>pppp</p>
<p>pppp</p>
<h1>h1</h1>
<ul>
<li>lili</li>
</ul>
<div>div</div>
<div>文字</div>
<div class="box">
<a href="#">新浪</a>
<a href="#">新浪导航新浪导航</a>
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
</div>
<p>
<a href="#"></a>
</p>
<div>文字</div> <div>文字</div>
<div class="box">
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
<a href="#">新浪导航</a>
</div>
<p>
<a href="#"></a>
</p>
<div></div>
<div>div</div>
<div>内容</div>
<div>文字</div>
<div>内容电脑</div>
<div>内容电脑</div>
<div class="father">
<p class="son" id="one">我是一个标签</p>
</div>
<!-- 意义: 当一个标签使用了多个选择器, 样式冲突的时候, 到底谁生效 -->
<div class="box" id="box" style="color: pink;">测试优先级</div>
</body>
</html>
三、 结构伪类选择器
结构伪类选择器
- 作用与优势：
- 作用：根据元素在HTML中的结构关系查找元素
- 优势：减少对于HTML中类的依赖，有利于保持代码整洁
- 场景：常用于查找某父级选择器中的子元素
- 选择器
注意点
➢ n的注意点： - n为：0、1、2、3、4、5、6、……
- 通过n可以组成常见公式
结构伪类选择器的易错点
➢ 问题：在下列案例中，如果需要找到第一个a标签，如何去查找？
nth-of-type结构伪类选择器
➢ 选择器： E:nth-of-type(n){} 只在父元素的同类型(E)子元素范围中，匹配第n个
➢ 区别：
• :nth-child → 直接在所有孩子中数个数
• :nth-of-type → 先通过该 类型 找到符合的一堆子元素，然后在这一堆子元素中数个数
<!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>Document</title>
<style>
/* 选中第一个 */
/* li:first-child {
background-color: green;
} */
/* 最后一个 */
/* li:last-child {
background-color: green;
} */
/* 任意一个 */
/* li:nth-child(5) {
background-color: green;
} */
/* 倒数第xx个 */
li:nth-last-child(1) {
background-color: blue;
}
</style>
</head>
<body>
<!-- ul>li{这是第$个li}*8 -->
<ul>
<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>
</ul>
</body>
<style>
/* ** 偶数 */
/* li:nth-child(2n) { */
/* *** 奇数 */
/* li:nth-child(2n+1) { */
/* 找到前3个 */
/* li:nth-child(-n+3) { */
/* *** 4的倍数 */
li:nth-child(4n) {
background-color: green;
}
</style>
</head>
<body>
<ul>
<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>
</ul>
</body>
<!-- <style>
/* 第一个li里面的a */
li:first-child a {
/* background-color: green; */
color: red;
}
</style> -->
<style>
/* 找到第一个li 里面的 第三个a 设置文字颜色是红色 */
li:first-child a:nth-child(3) {
color: red;
}
</style>
</head>
<body>
<ul>
<li>
<a href="#">这是第1个li里面的a1</a>
<a href="#">这是第1个li里面的a2</a>
<!-- 选中第三个a -->
<a href="#">这是第1个li里面的a3</a>
<a href="#">这是第1个li里面的a4</a>
<a href="#">这是第1个li里面的a5</a>
</li>
<li><a href="#">这是第2个li里面的a</a></li>
<li><a href="#">这是第3个li里面的a</a></li>
<li><a href="#">这是第4个li里面的a</a></li>
<li><a href="#">这是第5个li里面的a</a></li>
<li><a href="#">这是第6个li里面的a</a></li>
<li><a href="#">这是第7个li里面的a</a></li>
<li><a href="#">这是第8个li里面的a</a></li>
</ul>
</body>
</html>
四、伪元素
➢ 伪元素：一般页面中的非主体内容可以使用伪元素
➢ 区别：
- 元素：HTML 设置的标签
- 伪元素：由 CSS 模拟出的标签效果
➢ 种类：
::before 在父元素内容的最前添加一个伪元素
::after 在父元素内容的最后添加一个伪元素
➢ 注意点：
1. 必须设置content属性才能生效
2. 伪元素默认是行内元素
➢ 伪元素的必加属性是？
• content属性
➢ 伪元素创建出来后默认的显示模式是？
• 行内元素
<!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>Document</title>
<style>
.father {
width: 300px;
height: 300px;
background-color: pink;
}
.father::before {
/* 内容 */
/* content属性必须添加, 否则伪元素不生效 */
content: '';
color: green;
width: 100px;
height: 100px;
background-color: blue;
/* 默认是行内元素, 宽高不生效 */
display: block;
}
.father::after {
content: '大米';
}
</style>
</head>
<body>
<!-- 伪元素 通过css创建标签, 装饰性的不重要的小图 -->
<!-- 找父级, 在这个父级里面创建子级标签 -->
<div class="father">爱</div>
<!-- 老鼠爱大米 -->
</body>
</html>
五、标准流
➢ 标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
➢ 常见标准流排版规则：
1. 块级元素：从上往下，垂直布局，独占一行
2. 行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行
➢ 标准流中块级元素的排版规则是？
• 从上往下、垂直布局、独占一行
➢ 标准流中行内元素或行内块元素的排版规则是？
• 从左往右、水平布局、空间不够自动折行
六、浮动
- 浮动的作用
- 浮动的代码
- 浮动的特点
- 浮动的案例
1. 浮动的作用
➢ 早期的作用：图文环绕
➢ 现在的作用：网页布局
• 场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在右
2. 浮动的代码
属性名：float
➢ 属性值：left 左浮动 right 右浮动
➢ 浮动的作用是什么？
- 早期作用：图文环绕
- 现在作用：用于布局，让垂直布局的盒子变成水平布局，如：一个在左，一个在右
➢ 左浮动的属性是？右浮动的属性是？ - 左浮动：float : left
- 右浮动：float : right
3. 浮动的特点
- 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置
• 相当于从地面飘到了空中 - 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
- 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
- 浮动元素有特殊的显示效果
• 一行可以显示多个
• 可以设置宽高
➢ 注意点：
• 浮动的元素不能通过text-align:center或者margin:0 auto
➢ 浮动元素的特点有哪些？
- 浮动元素会脱标，在标准流中不占位置
- 浮动元素比标准流高出半个级别，可以覆盖标准流中的元素
- 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
- 浮动元素有特殊的显示效果：① 一行可以显示多个 ② 可以设置宽高
<!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>Document</title>
<style>
div {
/* 浏览器解析行内块或行内标签的时候, 如果标签换行书写会产生一个空格的距离 */
display: inline-block;
width: 100px;
height: 100px;
}
.one {
background-color: pink;
}
.two {
background-color: skyblue;
}
</style>
</head>
<body>
<div class="one">one</div><div class="two">two</div>
</body>
<style>
/* img {
float: left;
} */
div {
width: 100px;
height: 100px;
}
.one {
background-color: pink;
float: left;
}
.two {
background-color: skyblue;
/* flr */
/* float: right; */
float: left;
}
</style>
</head>
<body>
<!-- 1. 图文环绕 -->
<!-- <img src="./images/1.jpg" alt="">
阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了阿里的萨里肯定是福建安老师看见了 -->
<!-- 2. 网页布局: 块在一行排列 -->
<div class="one">one</div>
<div class="two">two</div>
</body>
<style>
/* 浮动的标签 顶对齐 */
/* 浮动: 在一行排列, 宽高生效 -- 浮动后的标签具备行内块特点 */
.one {
width: 100px;
height: 100px;
background-color: pink;
float: left;
margin-top: 50px;
}
.two {
width: 200px;
height: 200px;
background-color: skyblue;
float: left;
/* 因为有浮动, 不能生效 - 盒子无法水平居中 */
margin: 0 auto;
}
.three {
width: 300px;
height: 300px;
background-color: orange;
}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</body>
</html>
4. 浮动的案例
➢ 需求：使用浮动，完成设计图中布局效果
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.top {
/* 宽度高度背景色 */
height: 40px;
background-color: #333;
}
.header {
width: 1226px;
height: 100px;
background-color: #ffc0cb;
margin: 0 auto;
}
.content {
width: 1226px;
height: 460px;
background-color: green;
margin: 0 auto;
}
.left {
float: left;
width: 234px;
height: 460px;
background-color: #ffa500;
}
.right {
float: left;
width: 992px;
height: 460px;
background-color: #87ceeb;
}
/* CSS书写顺序: 浏览器执行效率更高
1. 浮动 / display
2. 盒子模型: margin border padding 宽度高度背景色
3. 文字样式
*/
</style>
</head>
<body>
<!-- 通栏的盒子: 宽度和浏览器宽度一样大 -->
<div class="top"></div>
<div class="header">头部</div>
<div class="content">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
➢ 需求：使用浮动，完成设计图中布局效果
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
margin: 0 auto;
width: 1226px;
height: 614px;
/* background-color: pink; */
}
.left {
float: left;
width: 234px;
height: 614px;
background-color: #800080;
}
.right {
float: right;
width: 978px;
height: 614px;
/* background-color: green; */
}
ul {
/* 去掉列表的符号 */
list-style: none;
}
.right li {
float: left;
margin-right: 14px;
margin-bottom: 14px;
width: 234px;
height: 300px;
background-color: #87ceeb;
}
/* 如果父级的宽度不够, 子级会自动换行 */
/* 第四个li和第八个li右侧间距清除 */
.right li:nth-child(4n) {
margin-right: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
➢ 需求：使用浮动，完成设计图中布局效果
<!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>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.nav {
margin: 50px auto;
width: 640px;
height: 50px;
background-color: #ffc0cb;
}
ul {
list-style: none;
}
.nav li {
float: left;
}
.nav li a {
/* 1. 浮动 / display */
/* display: inline-block; */
display: block;
/* 2. 盒子模型 */
width: 80px;
height: 50px;
/* background-color: green; */
/* 3. 文字样式 */
text-align: center;
line-height: 50px;
color: #fff;
text-decoration: none;
}
.nav li a:hover {
background-color: green;
}
</style>
</head>
<body>
<!-- 导航 -->
<div class="nav">
<ul>
<li><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">新闻</a></li>
</ul>
</div>
</body>
</html>
- 清除默认的margin和padding
- 找到ul，去除小圆点
- 找到li标签，设置浮动让li一行中显示
- 找到a标签，设置宽高 → a标签默认是行内元素，默认不能设置宽高？？
• 方法一：给a标签设置 display : inline-block
• 方法二：给a标签设置 display : block
• 方法三：给a设置 float : left
七、清除浮动
- 清除浮动的介绍
- 清除浮动的方法
1. 清除浮动的介绍
➢ 含义：清除浮动带来的影响
• 影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
➢ 原因：
• 子元素浮动后脱标 → 不占位置
➢ 目的：
• 需要父元素有高度，从而不影响其他网页元素的布局
➢ 清除浮动的含义是什么？
• 清除浮动带来的影响
• 影响：如果子元素浮动了，此时子元素不能撑开父元素
➢ 清除浮动的目的是什么？
• 需要父元素有高度，从而不影响其他网页元素的布局
<!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>Document</title>
<style>
.top {
margin: 0 auto;
width: 1000px;
/* height: 300px; */
background-color: pink;
}
.bottom {
height: 100px;
background-color: green;
}
.left {
float: left;
width: 200px;
height: 300px;
background-color: #ccc;
}
.right {
float: right;
width: 790px;
height: 300px;
background-color: skyblue;
}
</style>
</head>
<body>
<!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
<div class="top">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</body>
</html>
2. 清除浮动的方法
2.1 清除浮动的方法 — ① 直接设置父元素高度
➢ 特点：
• 优点：简单粗暴，方便
• 缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块
2.2 清除浮动的方法 — ② 额外标签法
➢ 操作：
1. 在父元素内容的最后添加一个块级元素
2. 给添加的块级元素设置 clear:both
.clearfix {
/* 清除左右两侧浮动的影响 */
clear: both;
}
➢ 特点：
• 缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂
<!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>Document</title>
<style>
.top {
margin: 0 auto;
width: 1000px;
/* height: 300px; */
background-color: pink;
}
.bottom {
height: 100px;
background-color: green;
}
.left {
float: left;
width: 200px;
height: 300px;
background-color: #ccc;
}
.right {
float: right;
width: 790px;
height: 300px;
background-color: skyblue;
}
.clearfix {
/* 清除左右两侧浮动的影响 */
clear: both;
}
</style>
</head>
<body>
<!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
<div class="top">
<div class="left"></div>
<div class="right"></div>
<div class="clearfix"></div>
</div>
<div class="bottom"></div>
</body>
</html>
2.3 清除浮动的方法 — ③ 单伪元素清除法
➢ 操作：用伪元素替代了额外标签
/* 单伪元素清除浮动 和 额外标签法原理是一样的 */
.clearfix::after {
content: ‘’;
/* 伪元素添加的标签是行内, 要求块 */
display: block;
clear: both;
/* 为了兼容性 */
height: 0;
visibility: hidden;
}
➢ 特点：
• 优点：项目中使用，直接给标签加类即可清除浮动
<!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>Document</title>
<style>
.top {
margin: 0 auto;
width: 1000px;
/* height: 300px; */
background-color: pink;
}
.bottom {
height: 100px;
background-color: green;
}
.left {
float: left;
width: 200px;
height: 300px;
background-color: #ccc;
}
.right {
float: right;
width: 790px;
height: 300px;
background-color: skyblue;
}
/* 单伪元素清除浮动 和 额外标签法原理是一样的 */
.clearfix::after {
content: '';
/* 伪元素添加的标签是行内, 要求块 */
display: block;
clear: both;
/* 为了兼容性 */
height: 0;
visibility: hidden;
}
</style>
</head>
<body>
<!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
<div class="top clearfix">
<div class="left"></div>
<div class="right"></div>
<!-- 通过css 添加标签 -->
</div>
<div class="bottom"></div>
</body>
</html>
2.4 清除浮动的方法 — ④ 双伪元素清除法
➢ 操作：
/* 清除浮动 */
.clearfix::before,
.clearfix::after {
content: ‘’;
display: table;
}
/* 真正清除浮动的标签 */
.clearfix::after {
/* content: '';
display: table; */
clear: both;
}
➢ 特点：
• 优点：项目中使用，直接给标签加类即可清除浮动
<!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>Document</title>
<style>
.top {
margin: 0 auto;
width: 1000px;
/* height: 300px; */
background-color: pink;
}
.bottom {
height: 100px;
background-color: green;
}
.left {
float: left;
width: 200px;
height: 300px;
background-color: #ccc;
}
.right {
float: right;
width: 790px;
height: 300px;
background-color: skyblue;
}
/* .clearfix::before 作用: 解决外边距塌陷问题
外边距塌陷: 父子标签, 都是块级, 子级加margin会影响父级的位置
*/
/* 清除浮动 */
.clearfix::before,
.clearfix::after {
content: '';
display: table;
}
/* 真正清除浮动的标签 */
.clearfix::after {
/* content: '';
display: table; */
clear: both;
}
</style>
</head>
<body>
<!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
<div class="top clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</body>
</html>
2.5 清除浮动的方法 — ⑤ 给父元素设置overflow : hidden
➢ 操作：
1. 直接给父元素设置 overflow : hidden
➢ 特点：
• 优点：方便
<!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>Document</title>
<style>
.top {
margin: 0 auto;
width: 1000px;
/* height: 300px; */
background-color: pink;
overflow: hidden;
}
.bottom {
height: 100px;
background-color: green;
}
.left {
float: left;
width: 200px;
height: 300px;
background-color: #ccc;
}
.right {
float: right;
width: 790px;
height: 300px;
background-color: skyblue;
}
</style>
</head>
<body>
<!-- 父子级标签, 子级浮动, 父级没有高度, 后面的标准流盒子会受影响, 显示到上面的位置 -->
<div class="top">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom"></div>
</body>
</html>
总结
➢ 清除浮动的方法有哪些？
1. 直接设置父元素高度
2. 额外标签法
3. 单伪元素清除法
4. 双伪元素清除法
5. 给父元素设置overflow : hidden
BFC的介绍
➢ 块格式化上下文（Block Formatting Context）：BFC
• 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
➢ 创建BFC方法：
- html标签是BFC盒子
- 浮动元素是BFC盒子
- 行内块元素是BFC盒子
- overflow属性取值不为visible。如：auto、hidden…
- ……
➢ BFC盒子常见特点： - BFC盒子会默认包裹住内部子元素（标准流、浮动）→ 应用：清除浮动
- BFC盒子本身与子元素之间不存在margin的塌陷现象 → 应用：解决margin的塌陷
八、 网页制作
- 图片文件夹: images
- 样式文件夹: CSS
- 首页 : index.html
网页布局基本步骤
➢ 从外到内, 从上到下
➢ CSS美化
➢ 宽度,高度,背景色 → 调整位置
➢ 放内容 → 调整内容位置 → 调整细节(文字样式等等)
九、定位
- 定位的基本介绍
- 定位的基本使用
- 静态定位
- 相对定位
- 绝对定位
- 子绝父相
- 固定定位
- 元素的层级关系
1. 定位的基本介绍
1.1 网页常见布局方式
标准流
- 块级元素独占一行 → 垂直布局
- 行内元素/行内块元素一行显示多个 → 水平布局
浮动 - 可以让原本垂直布局的 块级元素变成水平布局
定位 - 可以让元素自由的摆放在网页的任意位置
- 一般用于 盒子之间的层叠情况
1.2 定位的常见应用场景
- 可以解决盒子与盒子之间的层叠问题
• 定位之后的元素层级最高，可以层叠在其他盒子上面 - 可以让盒子始终固定在屏幕中的某个位置
1.3 总结
- 解决盒子与盒子之间的层叠问题 → 定位之后元素层级最高，可以层叠在其他盒子上
- 可以让盒子始终固定在屏幕中的某个位置
2. 定位的基本使用
2.1 使用定位的步骤
- 设置定位方式
➢ 属性名：position
➢ 常见属性值：
| 定位方式 | 属性值 |
|---|---|
| 静态定位 | static |
| 相对定位 | relative |
| 绝对定位 | absolute |
| 固定定位 | fixed |
- 设置偏移值
➢ 偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
➢ 选取的原则一般是就近原则 （离哪边近用哪个）
| 方向 | 属性名 | 属性值 | 含义 |
|---|---|---|---|
| 水平 | left | 数字+px | 距离左边的距离 |
| 水平 | right | 数字+px | 距离右边的距离 |
| 垂直 | top | 数字+px | 距离上边的距离 |
| 垂直 | bottom | 数字+ px | 距离下边的距离 |
2.2 总结
- 设置定位的方式：position
| 定位方式 | 属性值 |
|---|---|
| 静态定位 | static |
| 相对定位 | relative |
| 绝对定位 | absolute |
| 固定定位 | fixed |
- 设置偏移值：水平+垂直就近各取一个
| 方向 | 属性名 | 属性值 | 含义 |
|---|---|---|---|
| 水平 | left | 数字+px | 距离左边的距离 |
| 水平 | right | 数字+px | 距离右边的距离 |
| 垂直 | top | 数字+px | 距离上边的距离 |
| 垂直 | bottom | 数字+ px | 距离下边的距离 |
3. 静态定位
3.1 静态定位
➢ 介绍：静态定位是默认值，就是之前认识的标准流。
➢ 代码：position:static
➢ 注意点：
- 静态定位就是之前标准流，不能通过方位属性进行移动
- 之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定
3.2 总结
➢ 静态定位不能通过方位属性进行移动吗，静态定位的元素就是默认标准流的情况
4. 相对定位
4.1 相对定位
➢ 介绍：自恋型定位，相对于自己之前的位置进行移动
➢ 代码：position:relative
➢ 特点：
1. 需要配合方位属性实现移动
2. 相对于自己原来位置进行移动
3. 在页面中占位置 → 没有脱标
➢ 应用场景：
1. 配合绝对定位组CP（子绝父相）
2. 用于小范围的移动
4.2 总结
➢ 相对定位position的属性值是 relative
➢ 相对定位需要配合方位属性实现移动
➢ 相对定位的元素相对于自己原来位置进行移动
➢ 相对定位的元素在网页的页面中占位置 → 没有脱标
5. 绝对定位
5.1 绝对定位
➢ 介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动
➢ 代码：position:absolute
➢ 特点：
- 需要配合方位属性实现移动
- 默认相对于浏览器可视区域进行移动
- 在页面中不占位置 → 已经脱标
➢ 应用场景： - 配合绝对定位组CP（子绝父相）
5.2 绝对定位到底相对于谁进行偏移
➢ 绝对定位相对于谁移动？
- 祖先元素中没有定位 → 默认相对于浏览器进行移动
- 祖先元素中有定位 → 相对于 最近的 有定位 的祖先元素进行移动
5.3 总结
➢ 绝对定位position的属性值是absolute
➢ 绝对定位需要配合方位属性实现移动
➢ 绝对定位的元素相对于谁进行移动？
- 祖先元素中没有定位 → 默认相对于浏览器进行移动
- 祖先元素中有定位 → 相对于 最近的 有定位 的祖先元素进行移动
➢ 绝对定位的元素在网页中的页面中不占位置 → 已经脱标
6. 子绝父相
6.1 子绝父相介绍
➢ 场景：让子元素相对于父元素进行自由移动
➢ 含义：
• 子元素：绝对定位
• 父元素：相对定位
➢ 子绝父相好处：
• 父元素是相对定位，则对网页布局影响最小
6.2 总结
➢ 子绝父相的含义是什么？
• 子元素：绝对定位
• 父元素：相对定位
➢ 子绝父相的应用场景是什么？
• 让子元素相对于父元素进行自由移动
➢ 子绝父相的好处是什么？
• 父元素是相对定位，则对网页布局影响最小
6.3 扩展
➢ 场景：在使用子绝父相的时候，发现父元素已经有绝对定位了，此时直接子绝即可！
➢ 原因：
• 父元素已经有定位已经满足要求，如果盲目修改父元素定位方式，可能会影响之前写好的布局
7. 固定定位
7.1 固定定位
➢ 介绍：死心眼型定位，相对于浏览器进行定位移动
➢ 代码：position:fixed
➢ 特点：
- 需要配合方位属性实现移动
- 相对于浏览器可视区域进行移动
- 在页面中不占位置 → 已经脱标
➢ 应用场景： - 让盒子固定在屏幕中的某个位置
7.2 总结
➢ 固定定位position的属性值是fixed
➢ 固定定位需要配合方位属性实现移动
➢ 固定定位的元素相对于浏览器可视区域进行移动
➢ 固定定位的元素在网页的页面中不占位置 → 已经脱标
8. 元素的层级关系
8.1 元素层级问题
➢ 不同布局方式元素的层级关系：
• 标准流 < 浮动 < 定位
➢ 不同定位之间的层级关系：
• 相对、绝对、固定默认层级相同
• 此时HTML中写在下面的元素层级更高，会覆盖上面的元素
8.2 更改定位元素的层级
➢ 场景：改变定位元素的层级
➢ 属性名：z-index
➢ 属性值：数字
• 数字越大，层级越高
8.3 总结
➢ 标准流、浮动、定位元素之间的层级关系是什么样？
• 标准流 < 浮动 < 定位
➢ 不同定位元素之间的层级关系是什么样？
• 相对、绝对、固定默认层级相同
• 此时HTML中写在下面的元素层级更高，会覆盖上面的元素
➢ 通过什么属性可以修改定位元素的层级？
• z-index：数字；
9. 总结
| 定位方式 | 属性值 | 相对于谁移动 | 是否占位置 |
|---|---|---|---|
| 静态定位 | static | 不能通过方位属性移动 | 占位置 |
| 相对定位 | relative | 相对于自己原来的位置 | 占位置 |
| 绝对定位 | absolute | 相对于最近的且有定位的祖先元素移动 | 不占位置(脱标) |
| 固定位置 | fixed | 相对于浏览器可视化区域 | 不占位置（脱标） |
十、装饰
- 垂直对齐方式
- 光标类型
- 边框圆角
- overflow溢出部分显示效果
- 元素本身隐藏
1. 垂直对齐方式
1.1 垂直对齐方式
➢ 属性名：vertical-align
➢ 属性值：
| 属性值 | 效果 |
|---|---|
| baseline | 默认，基线对齐 |
| top | 顶部对齐 |
| middle | 中部对齐 |
| bottom | 底部对齐 |
1.2 拓展
项目中 vertical-align 可以解决的问题
- 文本框和表单按钮无法对齐问题
- input和img无法对齐问题
- div中的文本框，文本框无法贴顶问题
- div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
- 使用line-height让img标签垂直居中问题
➢ 注意点：
• 学习浮动之后，不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题
• 推荐优先使用浮动完成效果
1.3 总结
➢ 设置行内/行内块元素垂直对齐方式的属性是什么？
• vertical-align
➢ 垂直对齐方式的常见取值有哪些？
| 属性值 | 效果 |
|---|---|
| baseline | 默认，基线对齐 |
| top | 顶部对齐 |
| middle | 中部对齐 |
| bottom | 底部对齐 |
2. 光标类型
2.1 光标类型
➢ 场景：设置鼠标光标在元素上时显示的样式
➢ 属性名：cursor
➢ 常见属性值：
| 属性值 | 效果 |
|---|---|
| default | 默认值，通常是箭头 |
| pointer | 小手效果，提示用户可以点击 |
| text | 工字型，提示用户可以选择文字 |
| move | 十字光标，提示用户可以移动 |
2.2 总结
➢ 光标类型属性的属性名是什么？
• 属性名：cursor
➢ 光标类型属性的常见属性值有哪些？
| 属性值 | 效果 |
|---|---|
| default | 默认值，通常是箭头 |
| pointer | 小手效果，提示用户可以点击 |
| text | 工字型，提示用户可以选择文字 |
| move | 十字光标，提示用户可以移动 |
3. 边框圆角
3.1 边框圆角
➢ 场景：让盒子四个角变得圆润，增加页面细节，提升用户体验
➢ 属性名：border-radius
➢ 常见取值：数字+px 、百分比
➢ 原理：
➢ 赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！
3.2 边框圆角的常见应用
➢ 画一个正圆：
- 盒子必须是正方形
- 设置边框圆角为盒子宽高的一半 → border-radius:50%
➢ 胶囊按钮： - 盒子要求是长方形
- 设置 → border-radius：盒子高度的一半
3.3 总结
➢ 如果需要在网页中用盒子展示出一个正圆，应该如何完成？
- 盒子必须是正方形
- 设置 → border-radius:50%
➢ 如果需要在网页中用盒子展示出一个胶囊按钮，应该如何完成？ - 盒子要求是长方形
- 设置 → border-radius：盒子高度的一半
4. overflow溢出部分显示效果
4.1 溢出部分显示效果
➢ 溢出部分：指的是盒子 内容部分 所超出盒子范围的区域
➢ 场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……
➢ 属性名：overflow
➢ 常见属性值：
| 属性值 | 效果 |
|---|---|
| visible | 默认值，溢出部分可见 |
| hidden | 溢出部分隐藏 |
| scroll | 无论是否溢出，都显示滚动条 |
| auto | 根据是否溢出，自动显示或隐藏滚动条 |
4.2 总结
➢ 设置溢出部分显示效果的属性名是什么？
• 属性名：overflow
➢ 设置溢出部分显示效果的常见属性值有哪些？
| 属性值 | 效果 |
|---|---|
| visible | 默认值，溢出部分可见 |
| hidden | 溢出部分隐藏 |
| scroll | 无论是否溢出，都显示滚动条 |
| auto | 根据是否溢出，自动显示或隐藏滚动条 |
5. 元素本身隐藏
5.1 元素本身隐藏
➢ 场景：让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏
➢ 常见属性：
- visibility：hidden
- display：none
➢ 区别： - visibility：hidden 隐藏元素本身，并且在网页中 占位置
- display：none 隐藏元素本身，并且在网页中 不占位置
➢ 注意点：
• 开发中经常会通过 display属性完成元素的显示隐藏切换
• display：none；（隐藏）、 display：block；（显示）
5.2 总结
➢ 设置元素本身显示与隐藏的常用代码是什么？
• 元素隐藏 → display：none
• 元素显示 → display：block
6. 拓展
1 元素整体透明度
➢ 场景：让某元素整体（包括内容）一起变透明
➢ 属性名：opacity
➢ 属性值：0~1之间的数字
• 1：表示完全不透明
• 0：表示完全透明
➢ 注意点：
• opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……
2 边框合并
➢ 场景：让相邻表格边框进行合并，得到细线边框效果
➢ 代码：border-collapse：collapse；
3 用CSS画三角形技巧（面试题）
➢ 场景：在网页中展示出小三角形时，除了可以使用图片外，还可以使用代码完成。
➢ 实现原理：
• 利用盒子边框完成
➢ 实现步骤：
- 设置一个盒子
- 设置四周不同颜色的边框
- 将盒子宽高设置为0，仅保留边框
- 得到四个三角形，选择其中一个后，其他三角形（边框）设置颜色为透明
十一、 选择器拓展
- 链接伪类选择器
- 焦点伪类选择器
- 属性选择器
1. 链接伪类选择器
1.1 链接伪类选择器
➢ 场景：常用于选中超链接的不同状态
➢ 选择器语法：
| 选择器语法 | 功能 |
|---|---|
| a:link{} | 选中a链接未访问过的状态 |
| a:visited{} | 选中a链接访问之后的状态 |
| a:hover{} | 选中鼠标悬停的状态 |
| a:active{} | 选中鼠标按下的状态 |
➢ 注意点：
• 如果需要同时实现以上四种伪类状态效果，需要按照 LVHA 顺序书写
记忆口诀：男盆友送了你一个 LV 包包，你开心的 HA 哈笑
• 其中 :hover伪类选择器 使用更为频繁，常用于选择各类元素的悬停状态
1.2 总结
➢ 选中超链接的不同状态，常用哪些伪类选择器？
| 选择器语法 | 功能 |
|---|---|
| a:link{} | 选中a链接未访问过的状态 |
| a:visited{} | 选中a链接访问之后的状态 |
| a:hover{} | 选中鼠标悬停的状态 |
| a:active{} | 选中鼠标按下的状态 |
➢ 如果同时实现以上四种伪类状态效果，需要按照什么顺序书写？
• 按照 LVHA 顺序书写
2. 焦点伪类选择器
2.1 焦点伪类选择器
➢ 场景：用于选中元素获取焦点时状态，常用于表单控件
➢ 选择器语法：
input:focus{
background-color: red;
}
➢ 效果：
• 表单控件获取焦点时默认会显示外部轮廓线#### 3. 属性选择器
2.2 总结
➢ 选中表单控件获取焦点的状态，可以使用什么伪类选择器？
• :focus { }
3. 属性选择器
3.1 属性选择器
➢ 场景：通过元素上的HTML属性来选择元素，常用于选择 input 标签
➢ 选择器语法：
| 选择器 | 功能 |
|---|---|
| E[attr] | 选择具有attr属性的E元素 |
| E[attr=‘val’] | 选择具有attr属性值等于val的E元素 |
3.2 总结
➢ 选中页面中所有的文本框，使用属性选择器如何实现呢？
• input[type=“text”] { }
十二、项目样式补充
- 精灵图
- 背景图片大小
- 文字阴影
- 盒子阴影
- 过渡
1. 精灵图
1.1 精灵图的介绍
Ø 场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图
Ø 优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度
Ø 例如：需要在网页中展示8张小图片
• 8张小图片分别发送 → 发送8次
• 合成一张精灵图发送 → 发送1次
1.2 精灵图的使用步骤
- 创建一个盒子
- 通过PxCook量取小图片大小，将小图片的宽高设置给盒子
- 将精灵图设置为盒子的背景图片
- 通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y
1.3 总结
精灵图的优点： 减少服务器发送次数，减轻服务器的压力，提高页面加载速度
Ø 使用精灵图的步骤是什么？
- 创建一个盒子
- 设置盒子大小为小图片大小
- 设置精灵图为盒子的背景图片
- 将小图片左上角坐标 取负值，设置给盒子的background-position：x y
2. 背景图片大小
2.1 背景图片大小
Ø 作用：设置背景图片的大小，
Ø 语法：background-size：宽度 高度；
Ø 取值：
| 取值 | 场景 |
|---|---|
| 数字+px | 简单使用，常用 |
| 百分比 | 相对于当前盒子自身的宽高百分比 |
| contain | 包含，将背景图片等比例缩放，直到不会超出盒子的最大 |
| cover | 覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白 |
2.2 background连写拓展
Ø 完整连写：background: color image repeat position/size;
Ø 注意点：
• background-size和background连写同时设置时，需要注意覆盖问题
Ø 解决：
- 要么单独的样式写连写的下面
- 要么单独的样式写在连写的里面
2.3 总结
Ø 设置背景图片大小的属性是什么？
• background-size：宽度 高度；
3. 文字阴影
3.1 文字阴影
Ø 作用：给文字添加阴影效果，吸引用户注意
Ø 属性名：text-shadow
Ø 取值：
| 参数 | 作用 |
|---|---|
| h-shadow | 必须，水平偏移量，允许负值 |
| v–shadow | 必须，垂直偏移量。允许负值 |
| blur | 可选，模糊度 |
| color | 可选，阴影颜色 |
Ø 拓展：
• 阴影可以叠加设置，每组阴影取值之间以逗号隔开
总结
Ø 文字阴影的属性是什么？
• text-shadow
Ø 文字阴影的取值常见的有哪些？
| 参数 | 作用 |
|---|---|
| h-shadow | 必须，水平偏移量，允许负值 |
| v–shadow | 必须，垂直偏移量。允许负值 |
| blur | 可选，模糊度 |
| color | 可选，阴影颜色 |
4. 盒子阴影
4.1 盒子阴影
Ø 作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节
Ø 属性名：box-shadow
Ø 取值：
| 参数 | 作用 |
|---|---|
| h-shadow | 必须，水平偏移量。允许负值 |
| v-shadow | 必须，处置偏移量。允许负值 |
| blur | 可选，模糊度 |
| spread | 可选，阴影扩大 |
| color | 可选，阴影颜色 |
| inset | 可选，将阴影改为内部阴影 |
4.2 总结
Ø 盒子阴影的属性是什么？
• box-shadow
Ø 盒子阴影的取值参数有哪些？
| 参数 | 作用 |
|---|---|
| h-shadow | 必须，水平偏移量。允许负值 |
| v-shadow | 必须，处置偏移量。允许负值 |
| blur | 可选，模糊度 |
| spread | 可选，阴影扩大 |
| color | 可选，阴影颜色 |
| inset | 可选，将阴影改为内部阴影 |
5. 过渡
5.1 过渡
Ø 作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验
Ø 属性名：transition
Ø 常见取值：
| 参数 | 取值 |
|---|---|
| 过度的属性 | all:所有能过度的属性都过度、具体属性名如：width:只有width有过度 |
| 过度的时长 | 数字+s（秒） |
Ø 注意点：
- 过渡需要：默认状态 和 hover状态样式不同，才能有过渡效果
- transition属性给需要过渡的元素本身加
- transition属性设置在不同状态中，效果不同的
① 给默认状态设置，鼠标移入移出都有过渡效果
② 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果
5.2 小结
Ø 过渡属性的属性名是什么？
• transition
Ø 过渡属性的常见取值有哪些什么？
| 参数 | 取值 |
|---|---|
| 过度的属性 | all:所有能过度的属性都过度、具体属性名如：width:只有width有过度 |
| 过度的时长 | 数字+s（秒） |
Ø 过渡属性给谁设置？
• 过渡属性给需要过渡的元素 本身加
十三、项目前置认知
- 网页与网站的关系
- 骨架结构标签
- SEO三大标签
- ico图标设置
- 版心
1. 网页与网站的关系
1.1 生活中的例子
Ø 网页：相当于是每页纸
Ø 网站：相当于一本书籍
• 用户翻阅的时候，看的是每页纸上的内容
• 由多页纸整合在一起，就是完整的一本书籍了
1.2 网页与网站的关系
Ø 在互联网中，网站类似于是一本书，网页就是这本书的每一页
• 比如：淘宝、京东、黑马程序员等就是一个网站，类似于是一本书
• 这些网站中的每一个网页，如：主页、登录页面、商品页面就是每一个单独的页面，类似于每一页纸
• 多个同主题网页整合在一起，就称之为网站。
1.3 网页与网站的概念
Ø 网页：网站中的每一“页” 。例如：淘宝的主页、淘宝的登录页、淘宝的商品页等。
Ø 网站：提供特定服务的一组网页集合。例如：百度、淘宝、京东、黑马程序员等；
1.4 总结
Ø 网站是什么？
• 提供特定服务的一组网页集合。
Ø 网页是什么？
• 网站中的每一“页”
2. 骨架结构标签
2.1 DOCTYPE文档说明
Ø 文档类型声明，告诉浏览器该网页的 HTML版本
Ø 注意点：DOCTYPE需要写在页面的第一行，不属于HTML标签
2.2 网页语言
Ø 标识 网页 使用的 语言
Ø 作用：搜索引擎归类 + 浏览器翻译
Ø 常见语言：zh-CN 简体中文 / en 英文
2.3 字符编码（了解）
Ø 标识 网页 使用的字符编码
Ø 作用：保存和打开的字符编码需要统一设置，否则可能会出现 乱码
Ø 常见字符编码：
- UTF-8：万国码，国际化的字符编码，收录了全球语言的文字
- GB2312：6000+ 汉字
- GBK：20000+ 汉字
Ø 注意点：开发中 统一使用 UTF-8 字符编码 即可
2.4 总结
Ø 的作用是什么？
• 文档类型声明，告诉浏览器该网页的 HTML版本
Ø 设置网页的语言为中文应该如何操作？
•
Ø 开发中统一使用的字符编码是什么？
•
3. SEO三大标签
3.1 SEO简介
Ø SEO（Search Engine Optimization）：搜索引擎优化
Ø 作用：让网站在搜索引擎上的排名靠前
Ø 提升SEO的常见方法：
- 竞价排名
- 将网页制作成html后缀
- 标签语义化（在合适的地方使用合适的标签）
- ……
3.2 SEO三大标签
- title：网页标题标签
- description：网页描述标签
- keywords：网页关键词标签
3.3 拓展
Ø 场景：在HTML5新版本中，推出了一些有语义的布局标签，可以增强网页的语义化
Ø 标签：
| 标签名 | 语义 |
|---|---|
| header | 网页头部 |
| nav | 网页导航 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| article | 网页文章 |
Ø 注意点：
• 以上标签显示特点和div一致，但是比div多了不同的语义
3.4 总结
Ø SEO三大标签分别是哪些？
- title：网页标题标签
- description：网页描述标签
- keywords：网页关键词标签
Ø 常见有语义的布局标签有哪些？
• header：网页头部
• nav：网页导航
• footer：网页底部
• aside：网页侧边栏
• section：网页区块
• article：网页文章
4. ico图标设置
4.1 ico图标设置
Ø 场景：显示在标签页标题左侧的小图标，习惯使用.ico格式的图标
Ø 常见代码：
4.2 总结
Ø 给网页设置ico图标需要使用的标签：
5. 版心
5.1 版心的介绍
Ø 场景：把页面的主体内容约束在网页中间
Ø 作用：让不同大小的屏幕都能看到页面的主体内容
Ø 代码：
/* 版心 */
container{
width: 1240px;
margin:0auto ;
}
Ø 注意点：
• 版心类名常用：container、wrapper、w 等
5.2 拓展 （CSS书写顺序）
Ø 衡量程序员的能力，除了要看实现业务需求的能力，还要看平时书写代码的规范（专业性）
Ø 不同的CSS书写顺序会影响浏览器的渲染性能，推荐前端工程师使用专业的书写顺序习惯
| 顺序 | 类别 | 属性 |
|---|---|---|
| 1 | 布局属性 | display、position、float、clear、visibility、overflow |
| 2 | 盒子模型+ 背景 | width、height、margin、padding、border、background |
| 3 | 文本内容属性 | color、font、text-decoration、text-align 、line-height |
| 4 | 点缀属性 | cursor、border-radius、text-shadow、box-shadow |
Ø 注意点：
• 开发中推荐多用类 + 后代，但不是层级越多越好，一个选择器中的类选择器的个数推荐 不要超过 3 个
5.3 小结
Ø 版心的使用场景是什么？
• 让页面的主体内容约束在网页中间
Ø 版心的常用代码是什么？
container{
width: 1240px;
margin:0auto ;
}
Ø CSS的书写顺序推荐是什么？
| 顺序 | 类别 | 属性 |
|---|---|---|
| 1 | 布局属性 | display、position、float、clear、visibility、overflow |
| 2 | 盒子模型+ 背景 | width、height、margin、padding、border、background |
| 3 | 文本内容属性 | color、font、text-decoration、text-align 、line-height |
| 4 | 点缀属性 | cursor、border-radius、text-shadow、box-shadow |
十四、项目结构搭建
- 文件和目录准备
- 基础公共样式
- index页面骨架
1. 文件和目录准备
目录及文件结构
2. 基础公共样式
2.1 基础公共样式
Ø 场景：一般项目开始前，首先会 去除掉浏览器默认样式，设置为 当前项目需要的初始化样式
Ø 作用：防止不同浏览器中标签默认样式不同的影响，统一不同浏览器的默认显示效果，方便后续项目开发
Ø 要求：
• 已经准备好base.css代码，同学们需要认识，项目中可以直接引入使用
2.2 总结
Ø 基础公共样式的作用是什么？
• 防止不同浏览器中标签默认样式不同的影响，统一不同浏览器的默认显示效果，方便后续项目开发
3. index页面骨架
4676
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
