前端开发入门教程，web前端零基础html5 +css3+前端项目视频教程
HTML笔记：
1. !+Enter；快速新建
2. 注释：ctrl+/ ；再按一次取消；<!-- -->
3.结构
<html>
<head><title>标题</title>
</head>
<body></body>
</html>
4. 标题标签：<h1>一级标题</h1>；
1-6级标题，重要程度依次递减，写在<body>里
文字加粗，变大
5. 按住alt+标签里的字：整体删改标签
6. 段落标签：<p>文字</p>
段落之间存在空隙，空隙之间的大小用CSS改变
独占一行
7. vscode -> 查看 -> 自动换行：实现代码的长段字符自动换行
8. <br>让文字强制换行显示，单标签
9. 水平线：<hr>
10. 文本格式化标签：用右边的突出重要性的强调语境（语义化）
b：加粗 strong：加粗
u：下划线 ins：下划线
i：倾斜 em：倾斜
s：删除线 del：删除线
11. 图片标签：<img src="" alt="" title="">，单标签
对标签的属性进行设置：src和alt就是属性，
src是属性名，引号是属性值
./是当前，./img.jpg
一个标签可以存在多个属性，属性之间以空格隔开
属性有默认值
alt：替换文本，当图片加载失败，显示alt的文本
title：当鼠标悬停时显示的文本
width和height：只需要设置一个，另一个自动等比例缩放
12. 绝对路径、相对路径：绝对路径是从盘符开始的路径：D:/…
一般用相对路径：从当前文件出发找目标文件的过程：
同级目录<img src="目标图片.gif">或者<img src="./目标图片.gif">
下级目录<img src="images/目标图片.gif">
上级目录<img src="../目标图片.gif">；../回到上级目录
13. 音频标签：<audio src="./music.mp3" controls></audio>双标签
常见属性：src音频的路径，支持的格式：MP3、Wav、Ogg
controls显示播放的控件
autoplay自动播放（部分浏览器不支持）
loop循环播放
14. 视频标签：<video src="./video.mp4" controls></video>双标签：MP4、WebM、Ogg
src视频的路径
controls显示播放的控件
autoplays自动播放（谷歌需配合muted实现静音播放，即两个属性一起写）
loop循环播放
15. 链接标签：点击之后跳转到另一个页面<a href="./目标网页。html">超链接文本</a>
双标签，内部可以包裹内容
如果需要a标签点击之后去指定页面，需要设置a标签的href属性
当我们写了超链接，但还没有决定去除，在href里写#（空链接）
href=跳转地址，可以写自己的html、http网站、或者#
16. 如果要实现打开新的网页：
target属性，目标网页的打开形式；_self默认值，在当前窗口跳转（覆盖原网页）
_blank在新窗口跳转（保留原网页）
17. 命名：index.html首页
18. 列表标签：无序列表、有序列表、自定义列表
没有顺序的新闻：无序列表
<ul>表示无序列表的整体，用于包裹li标签
<li>表示无序列表的每一项，用于包含每一行的内容
ui标签中只允许包含li标签，li标签可以包含任意内容
显示特点：列表的每一项前默认显示圆点标识
<ul><li>内容1</li><li>内容2</li></ul>
有明确排序的排行榜：有序列表
<ol><li>内容</li></ol>
列表的每一项前默认显示序号
有结构的，最下面帮助中心等等：自定义列表
dl表示自定义列表的整体，用于包裹dt/dd标签
dt表示自定义列表的主题
dd表示自定义列表的针对主题的每一项内容，dd前默认缩进，css可以设计
<dl><dt>帮助中心</dt>
<dd>内容1</dd>
</dl>
19. 表格标签：
table 表格整体，可用于包裹多个
tr表示每行，可用于包裹td
td表示单元格，可用于包裹内容
标签的嵌套关系：table > tr > td
border 数字 边框宽度
width 数字 表格宽度，height 数字 表格高度，但一般在css里设置
caption 表格大标题，写在table内部；th 表头单元格，表示一列小标题
thead表格头部，tbody表格主体，tfoot表格底部，在table内部，在tr外面
合并单元格（水平或垂直多个单元格合并成一个单元格）
跨行合并（垂直合并成一个）
跨列合并（水平合并成一个）
1. 明确合并哪几个单元格
2. 通过左上原则，确定保留谁删除谁（上下-留上删下）
3. 给保留的单元格设置：跨行rowspan跨列colspan
4. 只有同一个结构标签中的单元格才能合并
例子：
<table border="1" width="500" height="300">
<caption><h3>表格大标题</h3></caption>
<thread>表格头部
<tr>
<th>内容</th>
</tr></thread>
<tbody>表格主体
<tr>
<td colspan="3">合并</td>
<td rowspace="2">合并<td>
</tr></thread>
</tbody>
<tfoot>表格底部
</tfoot>
</table>
20. 表单标签：登录注册、搜索功能
1. input系列标签：收集用户信息，如登录页、注册页
text 文本框，用于输入单行文本
//placeholder 占位符。提示用户输入内容
password 密码框，用于输入密码
radio 单选框，用于多选一
//name 分组。有相同name属性值的单选框，只能选一个
//checked默认选中
checkbox 多选框，用于多选多
file 文件选择，用于之后上传文件
//multiple选择多个文件上传
submit 提交按钮，用于提交
//默认文本是提交，用value改按钮上的字
reset 重置按钮，用于重置
button 普通按钮，默认无功能，配合js添加功能
2. 表单预标签：<form action="">，input的父级
3. button按钮标签：在网页中显示用户点击的按钮，同input按钮系列
submit，reset，button
谷歌浏览器中button默认是提交按钮
button标签是双标签，便于包裹其他内容（文字、图片等）
4. select下拉菜单标签：提供多个选项的下拉菜单表单控件
select标签：下拉菜单的整体
option标签：下拉菜单的每一项
selected：下拉菜单的默认选中<option selected></option>
<select><option>选项1</option></select>
5. textarea文本域标签：提供可输入多行文本的表单控件
标签名：textarea
常见属性：cols规定可见宽度，rows规定可见行数（用css设置）
特点：右下角拖拽改变大小
6. label系列：用于绑定内容与表单标签的关系
使用方法1：使用label标签把内容包裹；
在表单标签添加id属性；
在label标签的for属性中设置对应的id属性值
<input tyoe="radio" name="sex" id="nan"><label for="nan">男</label>
使用方法2：直接使用label标签把内容和表单标签一起包裹起来；
需要把label标签的for属性删除即可
<label><input type="radio" name="sex">女</label>
21. 语义化标签
1. 没有语义的布局标签-div和span（频繁使用）（都是双标签）
div标签：一行只显示一个
span标签：一行显示多个
2. 有语义的布局标签：手机端网页制作
header网页头部；nav网页导航；footer网页底部；
aside网页侧边栏；section网页区块；article网页文章
22. 字符实体：通过字符实体展示特殊符号，结构：&英文
空格  ，等等
/////////////////////////////////////////////////////////////////////////////////////////////
CSS笔记：层叠样式表，决定样式
1. css写在style标签中，style标签中，style一般写在head标签里，
<head><style>p{css属性}</style></head>
p{color：red;
font-size：30px;
background-color:green//背景颜色
width:400px;height:400px}
选择器：查找标签
2. CSS引入方式：
1. 内嵌式：CSS写在style标签中，在head标签中（当前页面，小案例）
2. 外链式：写在.css文件中，通过link标签在网页中引入（多个页面，项目中）
格式：在css文件中p{CSS属性}，
html文件head里<link rel="stylesheet" href="./my.css">
stylesheet：关系式样式表
3. 行内式：CSS写在标签的style属性里（当前标签，配合js使用）
格式<div style="CSS属性">
3. 基础选择器：
1. 标签选择器：标签名{css属性名：属性值；}以标签名命名的选择器
选中所有的这个标签都生效css
<body><p>内容</p></body>
2. 类选择器：.类名{css属性名：属性值；}类：定义和使用才能生效
<div class=“类名”>类名只由数字、字母、下划线、中划线组成
不能以数字或中划线开头；
一个标签可以同时有多个类名，类名之间空格隔开
3. id选择器：结构：#id属性值{css属性名：属性值；}
<div id="css属性名">
配合js加动画/互动的，只能单独使用
4. 通配符选择器：*{css属性名：属性值}找到页面中所有的标签，设置样式
使用极少，只有极特殊情况才会使用
*可以用来设置字体、默认行间距等
5. 字体和文本样式：
字体大小：属性名：font-size，取值：数字+px
谷歌浏览器默认文本16px
字体粗细：属性名：font-weight，
取值：关键字：normal正常、bold加粗；
纯数字100~900整百数，400正常，700加粗
字体倾斜：font-style，
取值：正常（默认值）normal，倾斜italic
字体系列：font-family，
取值：具体字体（微软雅黑）、字体系列（sans-serif）
渲染规则：按顺序查找，若电脑未安装，显示下一个字体
字体系列不需要引号包裹
（1）无衬线字体sans-serif：黑体、Arial（网页最常用）
（2）衬线字体：宋体、Times New Roman
（3）等宽字体：Consolas、fira code（每个字宽度相等）
font-family:微软雅黑，黑体，sans-serif
意思是若用户没有微软雅黑，则用黑体；若无黑体，用任意无衬线字体
*样式的层叠问题：给同一个标签设置了相同的样式，样式会层叠（覆盖），最下面生效
*CSS层叠样式表，即叠加，表示样式可以一层一层层叠覆盖
字体font相关属性的连写：font（复合属性）
取值：font：style weight size family；
只能省略前两个，省略为默认值
同时设置单独和连写：单独写在连写下面，或单独样式写在连写里面
*复合属性：一个冒号后面书写多个值的写法，空格隔开
文本缩进：text-indent，取值：数字+px；数字+em
（1em=当前标签的font-size的大小）
文本水平对齐方式：text-align 取值：left左对齐、center居中对齐、right右对齐
*text-align：center能让文本、span标签、a标签、input标签、img标签水平居中，
*如果需要以上元素水平居中，text-align：center需要给以上元素的父元素设置
文本修饰：text-decoration，
取值：underline下划线（常用）、
line-through删除线（不常用）、
overline上划线（几乎不用）、
none无装饰线（常用）
行高：line-height控制一行的上下行间距
*行高：上间距+文本高度+下间距
取值：数字+px、倍数（当前标签font-size，即自己字号的倍数）
应用：1. 让单行文本垂直居中可以设置line-height：文字父元素高度
2.网页精准布局时，会设置line-height：1. 可以取消上下间距
行高与font连写的注意点：
如果同时设置了行高和font连写，注意覆盖问题
font：style weight size/line-height family;
*注意字号和行高之间是斜线
4. Chrome调试工具：鼠标右键空白位置->检查，或者F12
左边elements：标签，右边是CSS；鼠标放在左边，看右边会显示对应CSS
可以调试的错误：1. 层叠覆盖；2. 语法错误；
3. 鼠标放在CSS的值上，用方向键上下调整，确定好返回去改代码
4. 按一下tab键，可以换行，换行后可以调试新的代码，可以用代码提示
5. CSS每一行前面有√，可以调试去掉效果
6. 删除线：注释、覆盖
5. 拓展 颜色常见取值：
属性名：如文字颜色color，背景颜色background-color
属性值：
颜色表示方式 表示含义 属性值
关键词 预定义的颜色名 red
rgb表示法 红绿蓝三原色，每项取值范围0~255 rgb(0,0,0)
rgba表示法 红绿蓝三原色+a表示透明度，取值范围0-1 rgba(255,255,255,0.5)
十六进制表示法 #开头，将数字转换成十六进制表示 #000000
6. 标签水平居中方法总结margin：0 auto（复合属性）
如果需要让div、p、h（大盒子）水平居中？
可以通过margin：0 auto；实现
*注意：1. 如果需要让div、p、h（大盒子）水平居中，直接给当前
2. margin：0 auto一般针对于固定宽度的盒子
7. 综合案例：
1. 新闻网页案例：
<style>div{
width:800px; height:600px; background-color:pink; margin:0 auto;}
h1{
text-align:center;}
.color1{…}
a{text-decoration:none;}
首行段落缩进.suojin{text-indent:2em;}
</style>
/////////////////////////////////////////
<body><h1>标题</h1>
<p class="center"><span class="color1">内容</span></p>
<a href="#">超链接</a>
<p class="缩进">文章内容</p>
</body>
2. 小米官网卡片案例：图片的设置
<style>body{background-color:#f5f5f5;}
<!-- div用来网页布局，一个页面可能用无数次，
原则：如果使用div，尽量使用类名控制样式 -->
.goods{
width:234px;height:300px;background-color:#fff;margin:0 auto;text-align:center}
<!--给父级加 text-align:center居中-->
<!--标签居中是margin，内容居中是text-align>
img{
width:168px;}
.title{ont-size:14px;line-height:25px}
.info{color:#ccc;font-size:12px;line-height:30px;}
.money{color:#ffa500;}
</style>
<body>
<div class="goods">商品图片</div>
<div class="title">商品名</div>
<div class="info">商品描述</div>
<div class="money">金额</div>
</body>
/////////////////////////////////////////////////////////////
8. 选择器进阶：
1. 后代选择器：空格
作用：根据HTML标签的嵌套关系，选择父元素 后代中 满足条件的元素
选择器语法：选择器1 选择器2{css}
结果：在选择器1所找到标签的所有后代中，
例子：<div><p>这是div的儿子p</p><div>
div p{color:red;}
2. 子代选择器：>
作用：根据HTML标签的嵌套关系，选择父元素 子代中 满足条件的元素
选择器语法：选择器>选择器2（css）
结果：在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式
注意：子代只包括儿子，子代选择器中，选择器与选择器之前通过>隔开
例子：<div><a href="#">这是div里面的a</a>
<p><a href="#">这是p里面的a</a></p></div>
div a{color:red;}（两个a都执行）
div>a{color:red;}（只有第一个a执行）
3. 并集选择器：，
作用：同时选择多组标签，设置相同的样式
选择器语法：选择器1，选择器2{css}
4. 交集选择器：紧挨着
作用：选中页面中 同时满足 多个选择器的标签
选择器语法：选择器1选择器2{css}，出现类名在前面加“.”
结果：（既又原则）找到页面中既被选择器1选中，又被选择器2选中的标签
注意：交集选择器中的选择器之间是紧挨着的，没有东西分隔
交集选择器中如果有标签选择器，必须写在最前面
5. hover伪类选择器：
作用：选中鼠标悬停在元素上的状态，设置样式
选择器语法：选择器:hover{css}
注意点：伪类选择器选中的元素的某种状态
例子：<a href="#">超链接</a>
a:hover{color:red;background-color:green}
<!--悬停时出现效果-->
6. Emmet语法：
作用：通过简写语法，快速生成代码
语法：类似于刚刚学习的选择器的写法
////////////////////////////////////////////////////
记忆 示例 效果
标签名 div <div></div>
类选择器 .red <div class="red"><.div>
id选择器 #one <div id="one"><div>
交集选择器 p.red#one <p class="red" id="one"></p>
子代选择器 ul>li <ul><li></li><ul>
内部文本 ul>li{li的内容} <ul><li>li的内容</li></ul>
创建多个 ul>li*3 <ul><li></li><li></li><li></li><ul>
////////////////////////////////////////////////////
9. 背景相关属性：
背景颜色background-color（bgc）：关键字、rgb、rgba、十六进制
注意：背景颜色默认透明
背景图片background-image（bgi）：url（“图片路径”）；
注意：可以省略引号，默认在水平和垂直方向平铺
背景平铺background-repeat（bgr）：repeat（水平和垂直方向都平铺）、
no-repeat（不平铺）、repeat-x（水平方向平铺）、repeat-y（垂直…）
背景位置background-position（bgp）：水平方向位置 垂直方向位置
属性值： 1. 方位名词（最多只能表示9个位置）
（水平方向left、center、right）
（垂直方向top、center、bottom）
2. 数字+px（坐标）
（坐标系：原点(0,0)盒子的左上角、x轴（水平向右）、y轴（垂直向下））
（操作：将图片左上角与坐标点重合即可）
背景相关属性连写background（bg）：单个属性值的合写，取值之间以空格隔开
推荐顺序：color image repeat position
注意：设置单独样式：连写的下面/里面
*img标签和背景图片的区别：
需求：需要在网页中展示一张图片的效果？
方法一：直接写上img标签即可（不设置宽高默认原尺寸）
方法二：div标签+背景图片（需要设置div的宽高，背景图不能撑开div标签）
10. 元素显示模式：
1. 块级元素：
显示特点：
1. 独占一行（一行只能显示一个）
2. 宽度默认是父元素的宽度，高度默认由元素撑开
3. 可以设置宽高
代表标签：div、p、h系列、ul、li、dl、dt、dd、form、header
2. 行内元素：
显示特点：
1. 一行可以显示多个
2. 宽度和高度默认由内容撑开
3. 不可以设置宽高
代表标签：a、span、b、u、i、s、strong、ins、em、del……
3. 行内块元素：
显示特点：
1. 一行可以显示多个
2. 可以设置宽高
代表标签：input、textarea、button、select…
特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示是inline
4. 元素显示模式转换：
目的：改变元素默认的显示特点，让元素符合布局要求
语法：
属性 效果 使用频率
display:block 转换成块级元素 较多
display:inline-block 转换成行内块元素 较多
display：inline 转换成行内元素 极少
*HTML嵌套规范注意点：
块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素…
但是：p标签中不要嵌套div、p、h等块级元素
a标签内部可以嵌套任何元素
但是：a标签不能嵌套a标签
11. CSS特性：
1. 继承性：子元素有默认继承父元素样式的特点
可以继承的常见属性（文字控制属性都可以继承）
1. color、font、text、line-height…
不是控制文字的都不能继承、标签有自带属性不能被继承
2. 层叠性：选择器优先级相同时，才能通过层叠性判断结果
*******************************
12. 综合案例1
<style>w100+h500+bgc</style>
<body>a*5
//alt+shift+鼠标左键，选多行加内容删除
</body>
13. 综合案例2
display: inline-block//转行内块
*******************************
3. 优先级：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式
优先级公式：（谁更精准，优先级越高）
**继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<important
注意：
1. !important写在属性值的后面，分号的前面
2. !important不能提升继承的优先级，继承优先级最低
3. 实际开发中不建议使用!important
4. 权重叠加计算：
场景：如果是复合选择器，此时需要通过权重叠加计算方式，判断最终哪个选择器优先级最高会生效
权重叠加计算公式：（每一级之间不存在进位）
（0,0,0,0）
（行内个数，id个数，类个数，标签个数）
14. PxCook的基本使用：测量工具，创建->拖入图片->测量
- 盒子模型：
- 盒子模型的介绍
- 盒子的概念
- 页面中的每一个标签，都可看作是一个盒子，通过盒子的视角布局
- 浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个矩形区域
- 盒子模型：CSS中规定每个盒子分别由内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成
- 例子：
- div{文本属性，边框线border属性，内边距padding属性，外边距margin属性}
- 在Chrome调试工具中，CSS的Computed中可以看到所有尺寸
- 内容区域
- 宽度和高度：width、height
- 边框border：
- 属性名：border（复合属性）
- 属性值：10px solid red（粗细、线条样式、线条颜色）dashed虚线、dotted点线
- 快捷键：bd+tab
- 单方向设置：border-方位名词：属性值
- 单个属性设置：粗细border-width，样式border-style，颜色border-color
- border会撑大盒子的尺寸
- 布局顺序：从上到下，从外到内，先宽高背景色，放内容，调节内容的位置，控制文字细节
- 内边距padding：
- 会撑大盒子的尺寸
- padding：50px
- 可当做复合属性，单独设置某个方向的内边距：
- padding：1px 2px 3px 4px（上右下左）顺时针
- 三个值：上 左右 下
- 两个值：上下 左右
- 自动内减：给盒子设置属性box-sizing：border-box
- 外边距margin：和内边距一样
- 清除默认内外边距：
- *{margin：0；padding：0；box-sizing：border-box}
- （在开发项目中一定要加的代码！）
- 版心居中：网页的有效内容居中
- margin：0 auto；//上下为0，左右为自动
- 外边距折叠现象：
- 合并现象：垂直布局的块级元素，上下的margin会合并（两者距离为较大值-避免）
- 塌陷现象：互相嵌套得到块级元素，子元素的margin-top会影响父元素
- 给父级设置border：如果设计没有border-top
- 给父元素设置overflow：hidden：最好的解决方法
- 转换成行内块元素
- 设置浮动
- 行内元素的内外边距的问题：margin padding
- 如果想要通过margin或padding改变行内标签的垂直位置，无法生效
- 行内标签的margin-top和bottom不生效
- 行内标签的padding-top和bottom不生效
- 解决方法：加行高：line-height：100px
- 结构伪类：能够使用结构伪类选择器在HTML中定位元素
- 作用与优势：
- 作用：根据元素在HTML中的结构关系查找元素
- 优势：减少对于HTML中类的依赖，有利于保持代码整洁
- 场景：常用于查找某父级选择器中的子元素
- 选择器 说明
- E：first-child{}：匹配父元素中第一个子元素，并且是E元素
- E：last-child{}：最后一个子元素
- E：nth-chil（n）{}：n为数字，找第n个子元素
- E：nth-last-child（n）{}：找倒数第n个子元素
- 注意：n可以填常见公式，n为0、1、2、3、4、5……
- 偶数：2n、even
- 奇数：2n+1、2n-1、odd
- 找到前五个：-n+5
- 找到从第五个往后：n+5
- 四的倍数：4n
- 伪元素：能够使用伪元素在网页中创建内容
- 伪元素：一般页面中的非主体内容可以使用伪元素
- 区别：
- 元素：HTML设置的标签
- 伪元素：CSS设置的标签
- 伪元素 作用：装饰性的不重要的小图
- .父类::before：在父元素内容的最前添加一个伪元素
- ::after：在父元素内容的最后添加一个伪元素
- 注意：
- 在伪元素CSS中必须有content属性才能生效
- 伪元素默认是行内元素
- 标准流：
- 又称为文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
- 常见标准流排版规则
- 块级元素：从上往下，垂直布局，独占一行
- 行内元素/行内块元素：从左往右，水平布局，空间不够自动折行
- 浮动
- 浮动的作用：
- 图文环绕
- img{float：left}
- 网页布局：块在一行排列
- 一个float：left；一个float：right
- 浮动的特点：
- 浮动元素会脱离标准流，在标准流中不占位置（相当于从地面票到空中）
- 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
- 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
- 浮动的标签顶对齐，用margin-top往下
- 浮动元素特殊的显示效果
- 一行可以显示多个
- 可以设置宽高
- 具有行内块特点
- 浮动的元素不能通过text-align：center或者margin:0 auto 居中，盒子无法水平居中
- *要在版心居中之后在里面浮动
- CSS书写顺序：浏览器执行效率更高
- 浮动/display
- 盒子模型：margin border padding 宽高背景色
- 文字样式
- 导航栏：div>ul>li（display）
- 清除浮动：清除浮动带来的影响
- 影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
- 原因：子元素浮动后脱标-> 不占位置
- 目的：需要父元素有高度，从而不影响其他元素
- 方法：
- 直接设置父元素高度
- 优点：简单、方便
- 缺点：有些布局中不能固定父元素高度，如新闻列表、京东推荐模块
- 额外标签法
- 操作：在父元素内容的最后添加一个块级元素，给添加的块级元素设置clear:both（class=“clearfix”）（清除左右两侧的浮动的影响）
- 缺点：会在页面中添加额外的标签，让页面的HTML结构变得复杂
- 单伪元素清除法
- 操作：用伪元素替代额外标签
- 基本写法：
- .clearfix::after{content:'';sidplay:block;clear:both}
- 补充：height:0;visibility:hidden;
- 解释：伪元素添加的行内，要求块，要加display:block转为块元素；浏览器解析的兼容性不同，visibility:hidden，在高版本不受印象
- 优点：项目中使用，直接给标签加类即可清除浮动
- 单伪元素法和额外标签法的原理相同
- 双伪元素清除法
- 操作：.clearfix::before，::clearfix::after{content:'';display:table;}.clearfix::after{clear:both;}
- 优点：项目中使用，直接给标签加类即可清除浮动
- .clearfix::before作用是解决外边距塌陷问题。
- 给父元素设置overflow:hidden
- 操作：直接给父元素设置
- 优点：方便
- 定位：
- 网页常见布局方式：
- 标准流：
- 块级元素独占一行->垂直布局
- 行内元素/行内块元素一行显示多个->水平布局
- 浮动：可以让原本垂直布局的块级元素变成水平布局
- 定位：
- 可以让元素自由摆放在网页的任意位置
- 一般用于盒子之间的层叠情况
- 定位的常见应用场景：
- 可以解决盒子与盒子之间的层叠问题
- 可以让盒子始终固定在屏幕中的某个位置
- 定位的步骤：
- 设置定位方式：
- 属性名position
- 定位方式 ：属性值
- 静态定位：static
- 相对定位relative
- 绝对定位：absolu
- 固定定位：fixed
- 设置偏移量
- 偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
- 选取的原则一般是就近原则
- left、right、top、bottom：数字+px
- 如果left和right都有，以left为准；top和bottom都有，以top为准
- 相对定位：自恋型
- 介绍：相对于自己之前的位置进行移动
- 代码：position:relative;
- 特点：
- 需要配合方位属性实现移动
- 占有原来的位置（不脱标）
- 仍然具体标签原有的显示模式特点
- 相对于自己原来位置进行移动
- 应用场景：
- 配合绝对定位组CP（子绝父相）
- 用于小范围的移动
- 备注：绝对定位查找父级的方式：就近找定位的父级，如果逐层查找不到这样的父级，就以浏览器窗口为参照进行定位
- 绝对定位：拼爹型
- 相对于非静态定位的父元素进行定位移动
- 代码：position:absolute;
- 特点：
- 需要配合方位属性实现移动
- 默认相对于浏览器可视区域进行移动
- 在页面中不占位置->已经脱标
- 改变标签的显示模式特点
- 应用场景：
- 配合绝对定位组CP（子绝父相）
- 备注：
- 先找已经定位的父级，如果有父级，以父级为参照物进行定位
- 如果父级没有定位，则以浏览器窗口为参照进行定位
- *父级相对定位，子级绝对定位
- 固定定位：死心眼型
- 介绍：相对于浏览器进行定位移动
- 代码：position:fixed;
- 特点：
- 需要配合方位属性实现移动
- 相对于浏览器可视区域进行移动
- 在页面中不占位置->已经脱标
- 具备行内块特点
- 应用场景：让盒子固定在屏幕中的某个位置
- 元素的层级关系：
- 元素层级问题：
- 标准流<浮动<定位
- 相对、绝对、固定默认层级相同
- 此时HTML中写在下面的元素层级更高，会覆盖上面的元素
- z-index：整数；取值越大，显示顺序越考上，z-index默认值为0，必须配合定位才生效
- 装饰：
- 垂直对齐
- 认识基线：浏览器文字类型元素排版中存在用于对齐的基线（baseline）
- 文字对齐问题：当图片和文字在一行中显示时，底部不对齐（解决行内/行内块元素垂直对齐问题），默认基线对齐
- 属性名：vertical-align
- 属性值：效果
- baseline：默认，基线对齐
- top：顶部对齐
- middle：中部对齐（行内块对齐）
- bottom：底部对齐
- 备注：
- 父子级对齐：给子级写对齐代码/变为行内块：display:block
- 光标类型：设置鼠标在光标在元素上时显示的样式
- 属性名：cursor
- 常见属性值：
- default：默认值，通常是箭头
- pointer：小手效果，提示用户可以点击
- text：工字型，提示用户可以选择文字
- move：十字光标，提示用户可以移动
- 边框圆角：让盒子四个角变得圆润，增加页面细节，提升用户体验
- 属性名：border-radius
- 常见取值：数字+px、百分比
- 原理：半径取值
- 赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角
- 常见应用：
- 画一个正圆：
- 盒子必须是正方形
- 设置边框圆角为盒子宽高的一半：50%
- 胶囊按钮：
- 盒子要求是长方形
- 设置border-radius为盒子高度的一半
- overflow溢出部分显示效果
- 溢出部分：指的是盒子内容部分所超出盒子范围地区域
- 场景：控制内容溢出部分的显示效果，如显示、隐藏、滚动条
- 属性名：overflow
- 场景属性值：
- visible：默认值，溢出部分可见
- hidden：溢出部分隐藏
- scroll：无论是否溢出，都显示滚动条
- auto：根据是否溢出，自动显示或隐藏滚动条
- 元素本身隐藏
- 场景：让某元素本身在屏幕中不可见，如鼠标：hover之后元素隐藏（子菜单）
- 常见属性：
- vidibility：hidden（占位隐藏）
- display：none（不占位隐藏）
- 元素整体透明度：
- 场景：让某元素整体（包括内容）一起变透明
- 属性名：opacity
- 属性值：0-1之间的数字（1完全不透明0完全透明）
- 注意点：opacity会让元素整体透明，包括里面的内容
- 精灵图：
- 介绍：多张小图片合并成一张大图片
- 优点：减轻服务器压力
- 使用步骤：
- 创建一个盒子，设置盒子的尺寸和小图尺寸相同
- 将精灵图设置为盒子的背景图片
- 修改背景图位置（取负值设置给盒子的background-position：x y）
- 精灵图的标签都用行内标签，span，b，i
- 背景图片大小：background-size：宽度 高度
- 取值：
- 数字+px
- 百分比：盒子自身的宽高百分比
- contain：包含，等比例缩放，盒子>图片
- cover：覆盖：将背景图片等比例缩放，图片超出盒子
- 盒子阴影：box-shadow
- h-shadow：必须，水平偏移量，允许负值
- v-shadow：必须，垂直偏移量，允许负值
- blur：可选，模糊度
- spread：可选，阴影扩大
- color：可选，阴影颜色
- inset：可选，将阴影改为内部阴影
- 过渡：
- 作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验
- 属性名：transition
- 常见取值：
- 过渡的属性：all：所有能过渡的属性都过渡、具体属性名如width：只有width有过度
- 过度的时长：数字+s（秒）
- 注意点：
- 过度需要：默认状态和hover状态样式不同，才能有过渡效果
- transition属性给需要过渡的元素本身加
- transition属性设置在不同状态中，效果不同的
- 给默认状态设置，鼠标移入移出都有过渡效果
- 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果
