一、网页认识
1、网页组成
文字、图片、超链接、音频、视频；
2、网页背后本质
前端程序员写的一行行的代码；
3、代码通过什么转化为网页
浏览器（通过渲染引擎）转换（解析和渲染）
二、浏览器内核
1、常用浏览器
IE 、火狐 、谷歌 、SAFARI浏览器 、Opera（欧朋）浏览器
2、浏览器内核
IE : Trident 猎豹 360急速 百度；
FireFox : Gecko；
Safari : Webkit；
Chrome/Opera : Blink webkit分支；
三、Web标准
1、构成：
结构-HTML语言-页面元素表现-CSS语言-页面样式行为-javaScript-页面交互
四、HTML基础认识
1、HTML中文译名
超文本标记语言（Hyper Text Markup Language）
2、骨架结构组成
html、head、title、body
3、注释
快捷键：ctrl+/
4、标签构成
双标签：开始标签、包裹内容、结束标签
单标签：开始标签，自成一体，无法包裹内容。
eg：< br>< hr>
5、标签属性
写在开始 标签 属性名=”属性值“ 如：class="one“
注意点：
1.标签的属性写在开始标签内部
2.标签上可以同时存在多个属性
3.属性之间以空格隔开
4.标签名与属性之间必须以空格隔开
5.属性之间没有顺序之分
6、标签与标签之间关系
父子关系（嵌套关系）、兄弟关系（并列关系）
五、HTML标签学习
1、排版标签
1.1标题标签
代码:h系列标签
语义：1~6级标题，重要程度依次递减
特点：
文字都有加粗；
字体都有变大，并且从h1 →h6文字逐渐减少;
独占一行;
1.2段落标签
代码: < p>< /p>
语义：段落
特点：
段落之间存在间隙；
独占一行；
1.3换行标签
代码:< br>
语义：换行；
特点：
单标签；
让文字强制换行；
1.4水平线标签
代码:< hr>
语义:主题的分割切换
特点：
单标签；
在页面中显示一条水平线；
1.5文本格式化标签
代码：b加粗 u下划线 i倾斜 s 删除线
strong 加粗 ins下划线 em倾斜 del删除线
语义：突出文字重要性
注意：推荐使用< strong>、< ins>、< em>、< del>，语义更强烈，遵循标签语义化 好处： 对人：好记忆、好理解 对机器：对SEO（搜索引擎）有帮助
2、媒体标签
2.1图片标签 img：
代码：<img src="" alt="">
特点：
2.1.1.src属性（必须属性）
eg: ./cat.gif ./指的是当前目录or同级目录
2.1.2alt属性 属性值：替换文本
加载失败才会显示alt的文本
2.1.3.title属性 属性值：提示文本
鼠标悬停时，才显示的文本（不论图片是否加载成功，都会显示），也可以用于其他标签eg：h1等
2.1.4.width和height属性（在标签内设置属性值可以不加单位）
注意：1.一般只设置width或者height其中一个时，另一个没设置的会等比缩放（图片不会变形）
2.同时设置两个，设置不当会导致图片变形
2.2音频标签 audio
代码:< audio src="">< /audio>
属性： src:音频路径
controls :播放控件
autoplay：自动播放 谷歌浏览器不支持
loop:循环播放
muted：禁音
只支持：MP3、Wav、Ogg 建议使用MP3
2.3视频标签 video
代码:< video src="">< /video>
属性：
src：填写视频路径
controls：显示播放控件
autoplay：自动播放（谷歌禁用），要配合muted（静音播放）才可以
loop：循环播放
poster：加载等待时的图片
muted：禁音
只支持：MP4、Webm、Ogg 建议使用MP4
3、链接标签 a
代码：< a href="">< /a>
特点：
1.双标签，内部可以包裹内容
2.需要去指定网页的话，需要设置a标签的href属性
<!-- 外部链接以https://或http://开头 -->
外部链接：< a href="https://www.baidu.com/"></ a >
<!-- 内部链接以./开头 选择目标页面 -->
内部链接：< a href="./index.html"></ a >
3.1 target属性
取值 效果
_self 默认，在当前窗口内跳转
_blank 在新窗口中跳转
3.2 a标签的显示特点
a标签默认是下划线
a标签未点击过时，默认显示为蓝色
a标签点击过后显示为紫色（清除历史记录可恢复蓝色）
3.3 空链接
< a href="#">< /a>
功能：
1.点击后回到顶部（假试的刷新页面）
2.开发中不确定链接最终位置时，用空链接占个位置
3.4 锚点链接
第一步：把需要跳转的文本用a链接包裹起来，href里面填充#加名字
第二步：找到目标文本，给他的标签里面添加 ID 属性：id=“名字”
六、路径的介绍
1.绝对路径
绝对位置，可直达目标位置，一般以盘符开始
eg： 盘符开头：E:\a-ketang\day1\笔记
网络地址：https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
2.相对路径
当前文件：当前的html网页
目标文件：要放入的图片
2.1 同级目录
当前文件和目标文件在同一目录（一个文件夹中）
方法一：直接写图片名字
方法二：使用 ./ VS Code会提示同级目录有哪些图片
2.2 下级目录
目标文件在下级目录
方法一：写目标图片所在的文件夹，再直接写图片名字
方法二：使用 ./进入目标图片所在的文件夹，再直接写图片名字
2.3 上级目录
方法：使用 ../返回上一级的文件夹，直到返回到图片所在的文件夹后，再直接写或选择图片名字
day02
一、列表标签
1、应用场景
场景：新闻列表、排行榜、账单
特点：按照行的方式，整齐显示内容
种类：无序列表、有序列表、自定义列表
2、无序列表
场景：新闻列表
组成：
ul：无序列表的整体，用于包裹li
li：表示无序列表的每一项
特点：列表每项前面默认显示圆点标识
注意：ul只能包裹li、li可以包裹任何内容
3、有序列表
场景：排行榜
组成：
ol：有序列表的整体，用于包裹li
li：表示有序列表的每一项
特点：列表每项前面默认显示序号标识
注意：ol只能包裹li、li可以包裹任何内容
4、自定义列表
场景：网页底部导航
组成：
dl：表示自定义列表的整体，用于包裹dt/dd
dt：表示自定义列表的主题
dd：表示自定义列表针对主题的每一项内容（解释说明)
特点：dd前面默认显示缩进效果
注意：dl只能包裹dt、dd；
dt、dd可以包裹任何内容
二、表格标签
1.表格的基本标签
场景：学习成绩表
基本标签：
table：表格整体，可包裹tr
tr：表格每行，可包裹td
td：表格单元格，可包裹内容
注意嵌套关系：table>tr>td
2.表格的相关属性
属性名 属性值 效果
border 数字 表格边框宽度
width 数字 表格宽度
hieght 数字 表格高度
align center/left/right 居中/居左/居右
cellspacing 数字 单元格与单元格之间的距离
cellpadding 数字 单元格的内容与单元格边界的距离
注意：开发时，推荐使用CSS设置
3.表格标题和表头单元格标签
其他标签
属性名 名称 效果
caption 表格大标题 在表格顶部居中显示
th 表头单元格 表格一列的小标题（默认内部居中加粗显示）
注意：
caption标签书写在table标签内部th标签书写在tr标签内部（用于替换td标签）
4.表格的结构标签
场景：突出表头、主体、底部
结构标签：
标签名 名称
thead 表格头部
tbody 表格主体
tfoot 表格底部
注意：
1.表格结构标签内部用于包裹tr标签2.表格的结构标签可以省略
5.合并单元格
场景：将水平或者垂直的多个单元格合并成一个单元格
合并单元格步骤：
确定是跨行合并（垂直方向）还是跨列合并（水平方向）
找到目标单元格左上原则：
跨行合并（垂直方向）rowspan="合并几个就写几" 保留最上的
跨列合并（水平方向）colspan="合并几个就写几" 保留最左边的从谁开始合并 谁就是目标单元格
删除多余的单元格
属性名 属性值 说明
rowspan 合并的个数 跨行合并，将多个单元格垂直合并
colspan 合并的个数 跨列合并 将多个单元格水平合并
只有同一结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）
三、表单标签
1.input系列标签（单标签）
场景：登录页、注册页
标签名：input
通过type属性值的不同，展示不同效果
type属性值 说明
text（默认） 文本框，用于输入单行文本
password 密码框，用于输入密码
radio 单选框，多选一
checkbox 复选框，多选多
file 文件选择，用于上传文件
submit 提交按钮
reset 重置按钮
button 普通按钮，之后配合js使用
date 日期按钮
1.1文本框
type属性值：text
常用属性：placeholder 效果:占位符，提示用户输入的文本
注意：只要是输入型的input 都可以使用该属性
value：相当于用户输入的内容，提交后会发送给服务器
name：提交后可以告示后端发送过去的数据是什么含义
后端接收到的数据的格式是：name的属性值=value的属性值
1.2密码框
type属性值：password
注意：type写错或多加空格就会变为默认的text
1.3单选框
type属性值：radio
常用属性：
name：有相同的name的单选框为一组，一组只有一个可以被选中
checked：默认选中
1.4复选框
type属性值：checkbox
常用属性：
checked：默认选中
1.5文件选择
type属性值：file
常用属性：
multiple：多文件选择
1.6按钮
type属性值
submit：提交按钮，点击会提交数据给服务器
reset：重置按钮，点击后恢复默认值
button：普通按钮，之后配合js添加功能
注意：
value属性可以更改按钮的显示内容
2.button按钮标签(双标签)
标签名：buttom
type属性：
submit：提交按钮，点击会提交数据给服务器
reset：重置按钮，点击后恢复默认值
button：普通按钮，之后配合js添加功能
注意：
1.谷歌浏览器中buttom默认是提交按钮
2.buttom是双标签，包裹的内容就是显示内容
3.button标签一般用于普通按钮，提交和重置使用input里面的提交和重置
3.select下拉菜单标签
标签组成
select：下拉菜单的整体
option：下拉菜单的每一项
常见属性：
selected：默认被选中
4.textarea文本域标签
标签名：textarea
常见属性：
rows：文本域的可见行
clos：文本域的可见宽
注意点：
1.右下角可以拖拽改变大小（用resize：none；可取消）
2.推荐使用CSS设置相关样式
3.填充内容需要和标签写在一行，不然会多出不必要的空格
5.label标签
标签名：label
使用方法①：
1.使用label标签把内容（如：文本）包裹起来
2.在表单标签上添加id属性
3.在label标签的for属性中设置对应的id属性值
使用方法②:
1.直接使用label标签把内容（如：文本）和表单标签一起包裹起来
2.需要把label标签的for属性删除即可
四、语义化标签
1.无语义的布局标签
div标签：独占一行（块元素）
span标签：一行多个（行内元素）
2.有语义的布局标签
head：网页头部
nav：网页导航
footer：网页底部
aside：网页侧边栏
section：网页区块
article：网页文章
注意：显示特点与div一致，但是多了语义
五、字符实体
1.HTML中的空格合并现象
如果HTML代码同时出现多个空格、换行、缩进，页面只会显示一个空格
2.常见的字符实体
结构：&英文；
空格： ；
小于：<；
大于：>；
day03
一、基础认知
1.CSS初识
1.1 CSS介绍
中文名：（Cascading style sheets）层叠样式表
CSS写在哪里？
写在style中，style写在head中，title下面
CSS作用：给页面中的html标签设置样式
1.2语法规则
选择器{
css属性（属性名+属性值（键值对））；
}
2.CSS的引入方式
内嵌式：写在style标签中，stlye通常写在head标签中
外联式：单独写在一个.CSS文件中，需要通过link标签在网页里引入
行内式：写在标签的style属性中
小结：
二、基础选择器
1.标签选择器
1.1选择器的作用
选择页面中的标签，后续设置样式
1.2标签选择器
结构：标签名 { css属性名：属性值； }
作用：通过标签名，找到页面中所有这类标签，设置样式注意点：
1.标签选择器选择的是一类标签，而不是单独某一个
2.标签选择器无论嵌套关系有多深，都能找到对应的标签
优点：可以一次性选择一类标签进行更改
缺点：不能差异化选择
2.类选择器
结构：.类名 { css属性名：属性值； }作用：通过类名，找到页面中所有带有这个类名的标签，设置样式 注意点：
1.所有标签上都有class属性，class属性的属性值称为类名（类似于名字）
2.类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头
3.一个标签可以同时有多个类名，类名之间以空格隔开
4.类名可以重复，一个类选择器可以同时选中多个标签
3.id选择器
结构：#id属性值 { css属性名：属性值； }作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式注意点：
1.所有标签上都有id属性
2.id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！
3.一个标签上只能有一个id属性值
4.一个id选择器只能选中一个标签
3.1 class类名与id属性值的区别
class类名相当于姓名，可以重复，一个标签可以同时有多个class类名
id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值
3.2类选择器与id选择器的区别
类选择器以 . 开头id选择器以 # 开头
3.3实际开发的情况
类选择器用的最多 id一般配合js使用，除非特殊情况，否则不要使用id设置样式实际开发中会遇到冗余代码的抽取 （可以将一些公共的代码抽取到一个公共的类中去）
4.通配符选择器
结构：* { css属性名：属性值； }作用：找到页面中所有的标签，设置样式注意点：
1.开发中使用极少，只会在极特殊情况下才会用到
2.在基础班小页面中可能会用于去除标签默认的margin和padding（后续讲解）
三、字体和文本样式
1 字体样式
字体大小：font-size
字体粗细：font-weight
字体样式：font-style
字体类型：font-family
字体类型：font属性连写
1.1字体大小
属性名：font-size（速打：fsz）取值：数字 + px注意点：1.谷歌浏览器默认文字大小是16px、最小是12px2.单位需要设置，否则无效
1.2字体粗细
属性名：font-weight取值：
关键字：
normal：正常
加粗：bold
纯数字：
100~900的整百数：
400：正常
700：加粗
注意点：1.不是所有字体都提供了九种粗细，因此部分取值页面中无变化2.实际开发中以：正常、加粗两种取值使用最多。
1.3字体样式（是否倾斜）
属性名：font-style取值：正常（默认值）：normal
倾斜：italic
1.4常见字体系列（了解）
无衬线字体（sans-serif）
1.特点：文字笔画粗细均匀，并且首尾无装饰
2.场景：网页中大多采用无衬线字体
3.常见该系列字体：黑体、Arial
衬线字体（serif）
1.特点：文字笔画粗细不均，并且首尾有笔锋装饰
2.场景：报刊书籍中应用广泛
3.常见该系列字体：宋体、Times New Roman
等宽字体（monospace）
1.特点：每个字母或文字的宽度相等
2.场景：一般用于程序代码编写，有利于代码的阅读和编写
3.常见该系列字体：Consolas、fira code
1.5字体系列 font-family
属性名：font-family常见取值：具体字体1,具体字体2,具体字体3,具体字体4,...,字体系列
eg：
• 具体字体："Microsoft YaHei"、微软雅黑、黑体、宋体、楷体等……• 字体系列：sans-serif、serif、monospace等……渲染规则：
1.从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体
2.如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体
注意点：
1.如果字体名称中存在多个单词，推荐使用引号包裹
2.最后一项字体系列不需要引号包裹
3.网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示
1.6 样式的层叠问题
问题：给同一个标签设置了相同的样式，此时浏览器会如何渲染呢？结果：如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效
1.7 字体font相关属性的连写
属性名：font
取值：• font : style weight size family;顺序要求：• swsf （稍微舒服）省略要求：• 只能省略前两个，如果省略了相当于设置了默认值注意点：如果需要同时设置单独和连写形式• 要么把单独的样式写在连写的下面（避免层叠）• 要么把单独的样式写在连写的里面（避免层叠）
2 文本样式
2.1 文本缩进
属性名：text-indent取值：• 数字+px• 数字+em（推荐：1em = 当前标签的font-size的大小）
2.2 文本水平对齐方式
属性名：text-align取值：
left:左对齐
right:右对齐
center:水平居中对齐
注意点：• 如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置
2.3文本修饰
属性名：text-decoration
属性值 效果
underline 下划线（常用）
line-through 删除线（不常用）
overline 上划线（几乎不用）
none 无装饰线（常用）
注意：
开发中会使用 text-decoration : none ; 清除a标签默认的下划线
2.4 水平居中方法总结 text-align : center
text-align : center 能让那些元素水平居中？
1.文本
2.span标签、a标签
3.input标签、img标签
总结：只要是一行显示多个的元素，都可以给其父元素添加text-aligh : center令其水平居中
注意点：
如果需要让以上元素水平居中， text-align : center 需要给以上元素的 父元素 设置
2.5水平居中方法
margin : 0 auto
如果需要让div、p、h（大盒子）水平居中？• 可以通过margin : 0 auto ; 实现注意点：
1.如果需要让 div、p、h（大盒子） 水平居中，直接给 当前元素本身 设置即可
2.margin：0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度
3 行高
作用：控制一行的上下行间距属性名：line-height取值：• 数字+px• 倍数（当前标签font-size的倍数） 应用：
1.让单行文本垂直居中可以设置 line-height : 文字父元素高度
2.网页精准布局时，会设置 line-height : 1 可以取消上下间距 行高与font连写的注意点：• 如果同时设置了行高和font连写，注意覆盖问题• font : style weight size/line-height family ;
• 如果行高不跟单位，那就是当前文字大小的倍数
四、Chrome调试工具
1 Chrome调试工具操作
打开方式• ① 右击 → 检查 ② 看哪里选择元素• 两种常见方法控制样式• ① 修改属性值 ② 添加属性 ③ 控制样式生效特殊情况• ① 出现删除线 ② 出现小三角形
2 扩展 颜色取值
文字颜色 ：color
背景颜色 ：background-color
属性值：
1.关键词（预定义的颜色名）
常见 ：
red 红色
green 绿色
blue 蓝色
yellow 黄色
orange 黄色
skyblue 天空蓝
pink 粉色
2.rgb表示法
r：红
g：绿
b：蓝
每项取值（0255）三原色
eg: color:rgb(255,0,0);
常见取值：
3.rgba表示法
a表示透明度
取值范围 0~1
0：完全透明
1：完全不透明
省略写法：
rgba（0，0，0，0.5）省略成rgba（0，0，0，.5）
4.十六进制表示法
#ff（red） 00（green） 00（blue）
取值范围：
两个数字为一组，每个数值取值为：0~9，a，b，c，d，e，f
省略写法：
#ff0000 写成 #f00（）每组两个相同可以写成一个
常见取值：
#fff 白色
#000 黑色
day04
一、选择器进阶
1.复合选择器
1.1 后代选择器 空格
作用：根据 HTML 标签的嵌套关系，选择父元素 后代中 满足条件的元素选择器语法：选择器1 选择器2 { css }结果：• 在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式注意点：
1.后代包括：儿子、孙子、重孙子……
2.后代选择器中，选择器与选择器之前通过 空格 隔开
1.2 子代选择器 >
作用：根据 HTML 标签的嵌套关系，选择父元素 子代中 满足条件的元素选择器语法：选择器1 > 选择器2 { css }结果：• 在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式注意点：
1.子代只包括：儿子
2.子代选择器中，选择器与选择器之前通过 > 隔开
2.并集选择器：,
作用：同时选择多组标签，设置相同的样式选择器语法：选择器1 ， 选择器2 { css }结果：• 找到 选择器1 和 选择器2 选中的标签，设置样式注意点：
1.并集选择器中的每组选择器之间通过 , 分隔
2.并集选择器中的每组选择器可以是基础选择器或者复合择器
3.并集选择器中的每组选择器通常一行写一个，提高代码的可读性
3.交集选择器:紧贴着
作用：选中页面中 同时满足 多个选择器的标签选择器语法：选择器1选择器2 { css }结果：• （既又原则）找到页面中 既 能被选择器1选中，又 能被选择器2选中的标签，设置样式注意点：
1.交集选择器中的选择器之间是紧挨着的，没有东西分隔
2.交集选择器中如果有标签选择器，标签选择器必须写在最前面
4.Emmet语法
作用：通过简写语法，快速生成代码语法：
5.hover伪类选择器
作用：选中鼠标悬停在元素上的状态，设置样式
选择器语法：选择器:hover { css }
注意点：
1.伪类选择器选中的元素的某种状态
总结：
二、背景相关属性
1 背景颜色
属性名：background-color（bgc）属性值：• 颜色取值：关键字、rgb表示法、rgba表示法、十六进制……注意点：背景颜色默认值是透明： rgba(0,0,0,0) 、transparent
背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色
2 背景图片
属性名：background-image（bgi）属性值：background-image：url（图片路径）；注意点：• 背景图片中url中可以省略引号• 背景图片默认是在水平和垂直方向平铺的• 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的
3 背景平铺
属性名：background-repeat（bgr）
属性值:
4 背景位置
属性名：background-position（bgp）
注意点：方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直
5 背景相关属性的连写形式
属性名：background
属性值：• 单个属性值的合写，取值之间以空格隔开
书写顺序：• 推荐：background：color image repeat position省略问题：可以按照需求省略特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写 background：url()注意点：• 如果需要设置单独的样式和连写要么把单独的样式写在连写的下面要么把单独的样式写在连写的里面
6.1 （拓展）img标签和背景图片的区别
需求：需要在网页中展示一张图片的效果？方法一：直接写上img标签即可• img标签是一个标签，不设置宽高默认会以原尺寸显示方法二：div标签 + 背景图片• 需要设置div的宽高，因为背景图片只是装饰的CSS样式，不能撑开div标签
三、元素显示模式
1 块级元素
属性：display：block显示特点：
1.独占一行（一行只能显示一个）
2.宽度默认是父元素的宽度，高度默认由内容撑开
3.可以设置宽高代表标签：• div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……
注意：对于文本类型的块级元素，里面不要再去包含其他块级元素，尤其是div
2 行内元素
属性：display：inline显示特点：
1.一行可以显示多个
2宽度和高度默认由内容撑开
3.不可以设置宽高
代表标签：• a、span 、b、u、i、s、strong、ins、em、del……
注意：
一般行内元素可以包含文本或其他行内元素，不能包含其他块级元素，但a链接可以包含块级元素，a链接里面不要再包含a链接
3 行内块元素
属性：display：inline-block显示特点：
1.一行可以显示多个
2.可以设置宽高代表标签：• img、input、button、textarea、select……• 特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline
4 元素显示模式转换
目的：改变元素默认的显示特点，让元素符合布局要求
语法：
5 拓展1：HTML嵌套规范注意点
块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等……但是：p标签中不要嵌套div、p、h等块级元素
a标签内部可以嵌套任意元素但是：a标签不能嵌套a标签
6 拓展2：居中方法总结
四、CSS三大特性
1 继承性介绍
特性：子元素有默认继承父元素样式的特点（子承父业）可以继承的常见属性：
1.color
2.font-style、font-weight、font-size、font-family
3.text-indent、text-align
4.line-height
5.……注意点：• 可以通过调试工具判断样式是否可以继承
2（拓展）继承的应用
好处：可以在一定程度上减少代码常见应用场景：
可以直接给ul设置 list-style:none （lin速写）属性，从而去除列表默认的小圆点样式
直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小
3（拓展）继承失效的特殊情况
如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式
1.a标签的color会继承失效其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
2.h系列标签的font-size会继承失效其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
3.div的高度不能继承，但是宽度有类似于继承的效果，原因是div独占一行的特性导致的
4 层叠性介绍
特性：
1.给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
2.给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效注意点：
当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
day05
CCS布局
一、CSS三大特性
1.继承性
2.层叠性
3.优先级
1 优先级的介绍
特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式：• 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important注意点：
1.!important写在属性值的后面，分号的前面！
2.!important不能提升继承的优先级，只要是继承优先级最低！
3.实际开发中不建议使用 !important 。
2.权重叠加计算
场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效权重叠加计算公式：（每一级之间不存在进位）比较规则：
1.先比较第一级数字，如果比较出来了，之后的统统看
2如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看
3.……
4.如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算!）注意点：!important如果不是继承，则权重最高，天下第一！
3（拓展）权重叠加计算案例
权重计算题解题步骤：
1.先判断选择器是否能直接选中标签，如果不能直接选中 → 是继承，优先级最低 → 直接pass
2.通过权重计算公式，判断谁权重最高注意点：1.实际开发中选择标签需要精准，尽量避免多个选择器同时选中一个标签的情况，不要自己难为自己
2.全是继承的情况下，要比较父级元素的权重(看父元素的样式)
4（拓展）查错流程
（遇到样式出不来，要学会通过调试工具找错）
二、PxCook的基本使用
略
三、盒子模型
1 盒子模型的介绍
1.盒子的概念
2.页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局
3.浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子
4.盒子模型CSS 中规定每个盒子分别由：
内容区域（content）
内边距区域（padding）
边框区域（border）
外边距区域（margin）构成，这就是 盒子模型
5.记忆：可以联想现实中的包装盒
2 内容的宽度和高度
作用：利用 width 和 height 属性默认设置是盒子 内容区域 的大小属性：width / height常见取值：数字+px
3 边框（boder）
1 边框（border）-单个属性
作用：给设置边框粗细、边框样式、边框颜色效果
2 边框（border）- 连写形式
属性名：border属性值：单个取值的连写，取值之间以空格隔开• 如：border : 10px solid red;快捷键：bd + tab
3 边框（border）- 单方向设置
场景：只给盒子的某个方向单独设置边框属性名：border - 方位名词属性值：连写的取值
4 盒子实际大小计算公式
4.1 盒子实际大小初级计算公式
需求：盒子尺寸 400*400，背景绿色，边框10px 实线 黑色，如何完成？• 注意点： ① 设置width和height是内容的宽高！② 设置border会撑大盒子！盒子实际大小初级计算公式：• 盒子宽度 = 左边框 + 内容宽度 + 右边框• 盒子高度 = 上边框 + 内容高度 + 下边框解决：当盒子被border撑大后，如何满足需求？• 解决：计算多余大小，手动在内容中减去（手动内减）
4.2 盒子实际大小终极计算公式
需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？• 注意点：① 设置width和height是内容的宽高！
② 设置border会撑大盒子
③ 设置padding会撑大盒子
盒子实际大小终极计算公式：• 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框• 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框解决方法 ① ：手动内减• 操作：自己计算多余大小，手动在内容中减去• 缺点：项目中计算量太大，很麻烦解决方法 ② ：自动内减• 操作：给盒子设置属性 box-sizing : border-box ; 即可• 优点：浏览器会自动计算多余大小，自动在内容中减去
5 盒子模型布局顺序
1.从外往内，从上往下每一个盒子的样式：
1.宽高
2.辅助的背景颜色
3.盒子模型的部分：border、padding、margin
4.其他样式：color、font-、text-、……
6 内边距（padding）- 取值
作用：设置 边框 与 内容区域 之间的距离属性名：padding
记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！
6.1内边距（padding）- 单方向设置
场景：只给盒子的某个方向单独设置内边距属性名：padding - 方位名词属性值：数字 + px
7 外边距（margin）- 取值
作用：设置边框以外，盒子与盒子之间的距离属性名：margin常见取值：
记忆规则：从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！
7.1外边距（margin） - 单方向设置
场景：只给盒子的某个方向单独设置外边距属性名：margin - 方位名词属性值：数字 + px
8 清除默认内外边距
场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的margin和padding，后续自己设置• 比如：body标签默认有margin：8px• 比如：p标签默认有上下的margin• 比如：ul标签默认由上下的margin和padding-le
9 内外边距各类情况
9.1 正常情况
场景：水平布局 的盒子，左右的margin正常，互不影响结果：最终两者距离为左右margin的和
9.2 外边距折叠现象 – ① 合并现象
场景：垂直布局 的 块级元素，上下的margin会合并结果：最终两者距离为margin的最大值解决方法：避免就好• 只给其中一个盒子设置margin即可
9.3 外边距折叠现象 – ② 塌陷现象
场景：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上结果：导致父元素一起往下移动解决方法：
1.给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
2.给父元素设置overflow：hidden
3.转换成行内块元素
4.给父元素或子元素设置浮动
9.4行内元素的margin和padding无效情况
场景：给行内元素设置margin和padding时结果：
1.水平方向的margin和padding布局中有效！
2.垂直方向的margin和padding布局中无效！
day06
一、结构伪类选择器
1 nth-child()
作用与优势：
1.作用：根据元素在HTML中的结构关系查找元素
2.优势：减少对于HTML中类的依赖，有利于保持代码整洁
3.场景：常用于查找某父级选择器中的子元素
nth的由来
n的注意点：
1.n为：0、1、2、3、4、5、6、……
2.通过n可以组成常见公式
n选择中间几个的写法：
2 nth-of-type()
区别：
nth-child：从父元素的所有元素中查找第N个（一个列表只有一类的标签用nth-child）
nth-of-type：从父元素的当前所选择的标签类型中查找第N个（一个列表有多类的标签用nth-of-type）
二、伪元素
伪元素：一般页面中的非主体内容可以使用伪元素区别：
1.元素：HTML 设置的标签
2.伪元素：由 CSS 模拟出的标签效果种类：
注意点：
1.必须设置content属性才能生效
2.伪元素默认是行内元素
3.伪元素是加在内容的前后
4.每一个盒子只能有两个伪元素，一个before，一个after
5.img、单标签没有伪元素
三、标准流
标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
常见标准流排版规则：
1.块级元素：从上往下，垂直布局，独占一行
2.行内元素 或 行内块元素：从左往右，水平布局，空间不够自动折行
四、浮动
1 浮动的作用
早期的作用：图文环绕
现在的作用：网页布局
场景：让垂直布局的盒子变成水平布局，如：一个在左，一个在右
2 浮动的代码
属性名：float
属性值：left（左浮动）、right（右浮动）
3 浮动的特点
1.浮动元素会脱离标准流（简称：脱标），在标准流中不占位置• 相当于从地面飘到了空中
2.浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3.浮动找浮动（找边缘），找到边缘停止浮动。下一个浮动元素会在上一个浮动元素后面左右浮动
4.浮动元素不会影响上面的标准流，只会影响下面的标准流
5.任何元素可以添加浮动，只要添加了浮动，都具有行内块元素的特点，即：• 一行可以显示多个• 可以设置宽高注意点：• 浮动的元素不能通过text-align:center或者margin:0 auto，让浮动元素本身水平居中，margin:0 auto设置盒子水平居中的必要条件是这个盒子是独占一行的盒子，且必须有宽度
口诀：一浮全浮，子浮父不浮，兄弟一起浮。
五、清除浮动
1 清除浮动的介绍
含义：清除浮动带来的影响• 影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素原因：• 子元素浮动后脱标 → 不占位置目的：• 需要父元素有高度，从而不影响其他网页元素的布局
2、清除浮动的方法
2.1清除浮动的方法
① 直接设置父元素高度
• 优点：简单粗暴，方便• 缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块
② 额外标签法
操作：
1.在父元素内容的最后添加一个块级元素
2.给添加的块级元素设置 clear:both
• 缺点：
会在页面中添加额外的标签，会让页面的HTML结构变得复杂
③ 单伪元素清除法
操作：用伪元素替代了额外标签① ：基本写法
② ：补充写法
• 优点：项目中使用，直接给标签加类即可清除浮动
④ 双伪元素清除法
操作：
特点：• 优点：项目中使用，直接给标签加类即可清除浮动
⑤ 给父元素设置overflow : hidden
操作：
直接给父元素设置 overflow : hidden特点：• 优点：方便
六、（拓展补充）BFC的介绍
块格式化上下文（Block Formatting Context）：BFC• 是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。创建BFC方法：
1.html标签是BFC盒子
2.浮动元素是BFC盒子
3.行内块元素是BFC盒子
4.overflow属性取值不为visible。如：auto、hidden…
5.…… BFC盒子常见特点：
1.BFC盒子会默认包裹住内部子元素（标准流、浮动）→ 应用：清除浮动
2.BFC盒子本身与子元素之间不存在margin的塌陷现象 → 应用：解决margin的塌陷
day07
一、CSS书写顺序
二、学成在线页面
day08
一、定位
1 定位的基本介绍
1.1网页布局常见的布局方式
标准流
1.块级元素独占一行 → 垂直布局
2.行内元素/行内块元素一行显示多个 → 水平布局
浮动
1.可以让原本垂直布局的 块级元素变成水平布局
定位
1.可以让元素自由的摆放在网页的任意位置
2.一般用于盒子之间的层叠情况
1.2 定位的常见应用场景
1.可以解决盒子与盒子之间的层叠问题• 定位之后的元素层级最高，可以层叠在其他盒子上面
2.可以让盒子始终固定在屏幕中的某个位置
2 定位的基本使用
定位的使用步骤
1.设置定位方式属性名：position常见属性值：
2.设置偏移值偏移值设置分为两个方向，水平和垂直方向各选一个使用即可选取的原则一般是就近原则 （离哪边近用哪个）
总结
3 静态定位
介绍：静态定位是默认值，就是之前认识的标准流。代码：position：static；注意点：
1.静态定位就是之前标准流，不能通过方位属性进行移动
2.之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定
4 相对定位
介绍：自恋型定位，相对于自己之前的位置进行移动代码：position :relative;特点：
1.需要配合方位属性实现移动
2.相对于自己原来位置进行移动
3.在页面中占位置 → 没有脱标应用场景：
1.配合绝对定位组CP（子绝父相）
2.用于小范围的移动
5 绝对定位
5.1绝对定位
介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动代码：position：absolute;特点：
1.需要配合方位属性实现移动
2.默认相对于浏览器可视区域进行移动
3.在页面中不占位置 → 已经脱标
ps：只要是脱标的元素都具有行内块元素的特性
应用场景：
1.配合绝对定位组CP（子绝父相）
5.2 绝对定位移动
绝对定位相对于谁移动？
1.祖先元素中没有定位 → 默认相对于浏览器进行移动
2.祖先元素中有定位 → 相对于 最近的 有定位 的祖先元素进行移动
6 子绝父相
6.1 子绝父相
场景：让子元素相对于父元素进行自由移动含义：• 子元素：绝对定位• 父元素：相对定位子绝父相好处：• 父元素是相对定位，则对网页布局影响最小
6.2（拓展） 子绝父绝特殊场景
场景：在使用子绝父相的时候，发现父元素已经有绝对定位了，此时直接子绝即可！原因：• 父元素已经有定位已经满足要求，如果盲目修改父元素定位方式，可能会影响之前写好的布局
6.3（案例）子绝父相水平居中案例-解决方法
1.子绝父相
2.先让子盒子往右移动父盒子的一半• left：50%
3.再让子盒子往左移动自己的一半• 普通做法：margin-left：负的子盒子宽度的一半缺点：子盒子宽度变化后需要重新改代码• 优化做法：transform：translateX(-50%)优点：表示沿着X轴负方向（往左）始终移动自己宽度的一半，子盒子宽度变化不需要更改代码
eg：father盒子内有个son盒子
.father {
position: relative;
width: 600px;
height: 400px;
margin: 0 auto;
background-color: blue;
}
.son {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 100px;
background-color: pink;
}
6.4（案例）子绝父相水平垂直都居中案例-解决方法
1.子绝父相
2.让子盒子往右走大盒子一半• left：50%
3.让子盒子往下走大盒子一半• top：50%
4.让子盒子往左+往上走自己的一半• transform：translate(-50%，-50%)；
7 固定定位
介绍：死心眼型定位，相对于浏览器进行定位移动代码：position：fixed；特点：
1.需要配合方位属性实现移动
2.相对于浏览器可视区域进行移动
3.在页面中不占位置 → 已经脱标应用场景：
1.让盒子固定在屏幕中的某个位置
8、元素层级问题
8.1 元素层级问题
不同布局方式元素的层级关系：• 标准流 < 浮动 < 定位不同定位之间的层级关系：• 相对、绝对、固定默认层级相同• 此时HTML中写在下面的元素层级更高，会覆盖上面的元素
8.2 更改定位元素的层级
场景：改变定位元素的层级属性名：z-index属性值：数字• 数字越大，层级越高
二、装饰
1 基线
1.1 认识基线
基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）。
1.2 文字对齐问题
场景：解决行内/行内块元素垂直对齐问题问题：当图片和文字在一行中显示时，其实底部不是对齐的
1.3 垂直对齐方式
属性名：vertical-align属性值：
1.4（拓展）项目中 vertical-align 可以解决的问题
1.iput文本框和表单按钮无法对齐问题
2.input和img无法对齐问题
3.div中的iput文本框，iput文本框无法贴顶问题
4.div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题（将img转化为块元素也可以解决该问题）
5.使用line-height让img标签垂直居中问题注意点：• 学习浮动之后，不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题• 推荐优先使用浮动完成效果
2 光标类型
场景：设置鼠标光标在元素上时显示的样式属性名：cursor常见属性值：
3 边框圆角
场景：让盒子四个角变得圆润，增加页面细节，提升用户体验属性名：border-radius常见取值：数字+px 、百分比原理：
赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角！
3.2 边框圆角的常见应用
画一个正圆：
1.盒子必须是正方形
2.设置边框圆角为盒子宽高的一半 → border-radius:50%胶囊按钮：
1.盒子要求是长方形
2.设置 → border-radius：盒子高度的一半
4 溢出部分显示效果
溢出部分：指的是盒子 内容部分 所超出盒子范围的区域场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条……属性名：overflow常见属性值：
5 元素隐藏
场景：让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏常见属性：
1.visibility：hidden
2.display：none区别：
1.visibility：hidden 隐藏元素本身，并且在网页中 占位置
2.display：none 隐藏元素本身，并且在网页中 不占位置注意点：开发中经常会通过 display属性完成元素的显示隐藏切换display：none；（隐藏）、 display：block；（显示）
6 （拓展）
1 元素整体透明度
场景：让某元素整体（包括内容）一起变透明属性名：opacity属性值：0~1之间的数字• 1：表示完全不透明• 0：表示完全透明注意点：• opacity会让元素整体透明，包括里面的内容，如：文字、子元素等……
2 边框合并
场景：让相邻表格边框进行合并，得到细线边框效果代码：border-collapse：collapse；（给table标签设置）
3 用CSS画三角形技巧（面试题）
用CSS画三角形的步骤是什么呢？
1.设置一个盒子
2.设置四周不同颜色的边框
3.将盒子宽高设置为0，仅保留边框
4.得到四个三角形，选择其中一个后，其他三角形（边框）设置颜色为透明
eg :
.box {
width: 0;
height: 0;
border: 20px solid transparent;
border-bottom: 20px solid #000;
}
/* 清除浏览器兼容性 */
font-size: 0;
line-height: 0;
拓展：通过调整不同边框的宽度，可以调整三角形的形态
直角三角形：
水平和垂直各设置一个为0，各保留一个
eg：boder-width：0 0 50px（改变高） 100p(改变宽)x；
直角三角形宽由水平方向的属性控制，高由垂直方向属性控制
三、选择器拓展
1 链接伪类选择器
场景：常用于选中超链接的不同状态选择器语法：
注意点：• 如果需要同时实现以上四种伪类状态效果，需要按照 LVHA 顺序书写记忆口诀：男盆友送了你一个 LV 包包，你开心的 HA 哈笑• 其中 :hover伪类选择器 使用更为频繁，常用于选择各类元素的悬停状态
2 焦点伪类选择器
场景：用于选中元素获取焦点时状态，常用于表单控件（input、textarea）选择器语法：
效果：• 表单控件获取焦点时默认会显示外部轮廓线
注意:
1.textarea和input去除外部轮廓线使用outline：none；
2.textarea防止拖动使用 resize：none
3 属性选择器
场景：通过元素上的HTML属性来选择元素，常用于选择 input 标签选择器语法
eg：
day09
一、项目样式补充
1 精灵图
1 介绍
场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度例如：需要在网页中展示8张小图片• 8张小图片分别发送 → 发送8次• 合成一张精灵图发送 → 发送1次
2 步骤
1.创建一个盒子
2.通过PxCook量取小图片大小，将小图片的宽高设置给盒子
3.将精灵图设置为盒子的背景图片
4.通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y
2 背景图片大小
作用：设置背景图片的大小，语法：background-size：宽度 高度；一个值则代表等比例
取值：
2.1 background连写拓展
完整连写：
注意点：• background-size和background连写同时设置时，需要注意覆盖问题解决：
1.要么单独的样式写连写的下面
2.要么单独的样式写在连写的里面
3 文字阴影
作用：给文字添加阴影效果，吸引用户注意属性名：text-shadow取值：
拓展：• 阴影可以叠加设置，每组阴影取值之间以逗号隔开
4 盒子阴影
作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节属性名：box-shadow
取值：
5 过渡
作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验属性名：transition常见取值：
注意点：
1.过渡需要：默认状态 和 hover状态样式不同，才能有过渡效果
2.transition属性给需要过渡的元素本身加
3.transition属性设置在不同状态中，效果不同的① 给默认状态设置，鼠标移入移出都有过渡效果② 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果
二、项目的前置认知
1 网页与网站的关系
在互联网中，网站类似于是一本书，网页就是这本书的每一页• 比如：淘宝、京东、黑马程序员等就是一个网站，类似于是一本书• 这些网站中的每一个网页，如：主页、登录页面、商品页面就是每一个单独的页面，类似于每一页纸• 多个同主题网页整合在一起，就称之为网站。
1.1 网页与网站的概念
网页：网站中的每一“页” 。例如：淘宝的主页、淘宝的登录页、淘宝的商品页等。网站：提供特定服务的一组网页集合。例如：百度、淘宝、京东、黑马程序员等；
2 DOCTYPE文档说明
3 SEO简介
SEO（Search Engine Optimization）：搜索引擎优化作用：让网站在搜索引擎上的排名靠前提升SEO的常见方法：
1.竞价排名
2.将网页制作成html后缀
3.标签语义化（在合适的地方使用合适的标签）
4.……
3.1（拓展补充）有语义的布局标签
场景：在HTML5新版本中，推出了一些有语义的布局标签，可以增强网页的语义化
4 ico图标
场景：显示在标签页标题左侧的小图标，习惯使用.ico格式的图标常见代码：
5 版心
场景：把页面的主体内容约束在网页中间作用：让不同大小的屏幕都能看到页面的主体内容代码：
注意点：• 版心类名常用：container、wrapper、w 等
6（扩展补充）CSS书写顺序
衡量程序员的能力，除了要看实现业务需求的能力，还要看平时书写代码的规范（专业性）不同的CSS书写顺序会影响浏览器的渲染性能，推荐前端工程师使用专业的书写顺序习惯注意点：• 开发中推荐多用类 + 后代，但不是层级越多越好，一个选择器中的类选择器的个数推荐 不要超过 3 个
注意：
1.line-hight：1；可以清除标题标签和段落标签的默认行高
2.textarea和input去除外部轮廓线使用outline：none；
3.textarea防止拖动使用 resize：none
4.文字溢出以省略号显示
5.悬停时让li往上移动，用相对定位给top负值，给过渡时，自身top值也要设置为0才有过渡效果
