第一周
2021.02.28知识点复习
1、快捷方式：
ctrl+c/v:复制、粘贴
ctrl+A全选
ctrl+s保存
ctrl+x 剪切
ctrl+z撤销
ctrl+y返回上一步
ctrl+f查找
2、网站的建站流程：
A. 注册域名：网址
B.租用服务器：存放资源的地方
C.项目研发：
a. 产品经理：PM ——原型图
b. UI设计——设计图
c. web前端开发工程师：前端界面以及前端的逻辑
d.后端工程师——Java/php...
e. 联调
f. 测试
D.网站的推广
E.维护
3、网页的组成
结构 HTML
表现 CSS
行为 JavaScript
4、html:超文本标记语言
xhtml:可拓展超文本标记语言（更加严格）
html5：html的第五次改版
5、html基础
DOCTYPE html ：申明文档类型是html
html lang="en" 根标签
<body>
6.html标签分类：
双标签、常规标签：<标签名 属性="属性值"></标签名>
单标签、空标签： <标签名>
语法构成：
标签是长在尖括号里面
属性在标签名后面用空格隔开，属性和属性值之间用等号和双引号表示
7.常见标签：
*1.标题标签 h1-h6
h1:在一个页面中只能有一个，放logo
h2-h6:在一个页面中可以多次使用
特点：默认有加粗效果，有自己默认的文字大小
*2. 段落标签<p></p>
使用：通过只是用来放 大段文字
*3.结构性标签:是一个干净的标签
*4.span：字符(小段文本)是一个干净的标签
8.不常见标签：
*1.加粗标签
<b></b>
<strong></strong>
*2.倾斜标签
<i></i>
<em></em>
*3.下划线标签
<u></u>
*4.强行换行
<br> 单标签
*5.水平线标签
<hr>单标签
*6.上标 <sup></sup>
下标<sub></sub>
*7.转义字符
>:>
<:<
©:版权符号
 ：空格
9.列表符号：
*1.无序列表：
<ul>
<li></li>
</ul>
特点：自带实心小圆点
*2.有序列表
<ol>
<li></li>
</ol>
特点：排列数字依次增大
属性：
type="a/A/i/I"
语法：<ol type="a/A/i/I"></ol>
start="3"
语法：<ol start="3"></ol> 特点：start的属性值必须是数字
*3.自定义列表
<dl>
<dt>描述的对象</dt> dt只能取一个
<dd>对应的描述<dd> dd可以取多个
</dl>
2021.03.01知识点复习
-
超链接 a:
*1.href="" 跳转的路径 *2.target="" 控制是否在新页面打开 取值：_self(覆盖当前) / _blank(新窗口) *3.下载 <a href="movie.zip">下载</a> *4.title="提示作用
2.图片标签 img:
html属性：
*1.src="文件的资源路径"
*2.alt=""
作用：1.图片没有正常显示的时候，做提示作用 2.有利于seo
*3.设置宽高 width/height
*4.title="提示作用
3.相对路径
*1.同级找同级：./文件名 或者 直接文件名
*2.子级找父级：../文件名
*3.进入下一级：/
4.表单
table
tr 行
td列
html属性
width:宽
height：高
border:边框
color：边框颜色
cellspacing:边框与边框之间的距离
cellpadding:边框与内容之间的距离
设置给tr或td：
align:水平方向对齐方式 left center right
valign:垂直方向对齐方式 top middle bottom
5.合并单元格： 注意：都是对td进行设置
合并列：colspan=""
合并行：rowspan=""
口诀：合并列删除自己行的td
合并行删除别人行的td
6.表单：form
<form action="接口" method="get/post">
</form>
属性：
action = "接口地址"
method = "get / post"
name = "表单名称"
表单控件：
<input>:
html属性：
1.type="" 控制input类型（输入框 按钮 密码框...)
2.name： 属性标识表单域的名称；
3.value： *1.在js中通过value拿到用户输入的内容
*2.根据type不同，value作用可能是提示或者修改文本
4.maxlength：控制最多输入的字符数，
5.size：控制框的宽度（以字符为单位）
7.css:层叠样式表 版本：最新的css3
css语法：
包含两个部分：选择符和申明（属性:属性值;）
选择符 {
属性:属性值;
属性:属性值 属性值 属性值;
}
注意事项：
1.冒号和分号必须是英文状态下的
2.多个属性值之间用空格隔开
3.所有的申明都必须放在{}
8.样式表 *1.内联样式表（不用） <标签名 style="属性：属性值；属性：属性值"></标签名>
*2.内部样式表（不常用）
语法：
<style type="text/css">
css语句
</style>
注：使用style标记创建样式时，最好将该标记写在<head></head>;
*3.外部样式表：
语法：<link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称">
a.在css文件夹中新建一个xx.css并设置对应的样式
b.在html文件中通过link引入css文件里面的css样式文件
2021.03.02知识点复习
一、样式表
*1.内联样式表（不用）
<标签名 style="属性：属性值；属性：属性值"></标签名>
*2.内部样式表（不常用）
语法：
<style type="text/css">
css语句
</style>
注：使用style标记创建样式时，最好将该标记写在<head></head>;
*3.外部样式表：
语法：<link rel="stylesheet" type="text/css" href="目标文件的路径及文件名全称">
a.在css文件夹中新建一个xx.css并设置对应的样式
b.在html文件中通过link引入css文件里面的css样式文件
二.样式表的权重
内联样式表的权重是最大的；
内部 外部 按照就近原则（就内部的距离）
!important >内联样式表 1000 >id选择符 0100>伪类 0010+/class选择符 0010> 标签选择符0001>通配符>继承性
包含选择符：父级+子级
群组选择符：本身
三.选择符
*1.标签选择符/类型选择符
说明：所有的html标签都可以作为标签选择符
标签名{
属性：属性值；
}
举例：html/div/html/body/p/i/em/h1...{}
特点：会找到当前页面所有叫此标签名的标签
*2.id选择符 (人的身份证)
语法：
html：<标签名 id="起个名字"></标签名>
css: #起的名字
特点：具有唯一性，一个网页中名字不能重复，类似人的身份证
使用场景：只能用于网页的最外围结构！！！！！！
(见04练习)
*3.class选择符 (人的名字)
html：<标签名 class="起个名字1 名字2 名字3"></标签名>
css: .起的名字
特点：*1.名字可以重复
*2.一个标签可以取多个名字
*4.通配符
理解：找到当前页面中所有标签
使用场景：清楚默认样式
*{
margin:0;
padding:0;
}
*5.包含选择符/后代选择符
理解：通过父元素找到子元素
语法：父元素选择符 子元素选择符{ } (只会对子元素生效的)
*6.群组选择符
理解：把多个选择符用逗号隔开，形成一组，达到统一的作用
语法：
选择符1,选择符2,选择符3....{
}
针对当前组的每一个标签
*7伪类选择符
a:link {color: red;} /* 未访问的链接状态 */
a:visited {color: green;} /* 已访问的链接状态 */
a:hover {color: blue;} /* 鼠标滑过链接状态 */
a:active {color: yellow;} /* 鼠标按下去时的状态 */
注意：
1.同时使用时有顺序问题
2.不要4个一起用
选择符 :hover{} //鼠标停在某个选择符上的时候，设置当前样式
四. css属性 *1.控制列表符号： list-style-type:circle圆/ square方块;
*2.列表符号可以为图片
list-style-image:url(图片路径);
*3.列表符号的位置：
list-style-position:outsise/inside;
* 4.去掉列表符号*
list-style:none;
五.边框：
简写形式或者复合写法：
border:1px solid red;
粗细 类型 颜色
拆分：
border-width:
border-style:solids实线 dotted点状线 dashed虚线 double双线
border-color:
单一方向设置：
border-left/right/top/bottom:
六. 浮动：float-left/rigt/none；
作用：让竖着排的标签可以横着排
特点：脱离文档流，不占据页面空间
使用：如果想要多个同级元素排在一行，需要在每个元素里设置浮动！！
注意：浮动不会覆盖文本、图片、表单
2022.03.03 day4
1.选择符的权重
!important>内联样式表>id选择符>伪类选择符/class选择选择符/>标签选择符>通配符>继承性
后代选择符：父元素+子元素
群组选择符：本身
2.背景background
简写：background:color url("") no repeat center center;
背景颜色：background-color
背景图片：background-image:url("");
背景图的显示状态：background-repeat:no repaet/repeat/repeat-x/repeat-y
背景图大小：background-size
背景图的位置：background-position:left/center/right; top/center/bottom;
背景的固定：background-attachment:fixed;
3.文本属性
文本大小：font-size
文本颜色：color
水平对齐方式：text-align:center/justify/left/right;
行高：line-height;
文本加粗：font-weight:bold;
文本样式：font-style:normal/italic/oblique;
文本修饰属性：text-decoration:none/line-through; 无/删除线；
设置字体：font-family
首行缩进：text-indent:2em;
词间距：word-spacing
字符间距：letter-spacing
4.继承性：
文本属性都可以继承
宽和高不可以继承
不可继承的： display、margin、border、padding、background、height、min-height、max- height、、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align
所有元素可继承：visibility和cursor
内联元素可继承：letter-spacing、word-spacing、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform
2022.03.04 day5
1.盒模型：
作为网页的基石
组成：
粉底液 ->内容（文本/图片/input...） ->content
拉菲草 ->内填充 ->padding
快递盒 - >盒子本身/border ->border
另一个快递盒 ->外边距 ->margin
2.padding: 需求：让文本与盒子之间有距离，使用padding
1.paddin长在内容盒盒子之间，长在盒子里面
******2.padding的作用：控制内容与外面盒子之间的距离******
3.padding是设置给父元素的，用于控制父元素和里面子元素之间的距离的
4.padding会撑开盒子：
如果想要保持原来的大小，盒子的宽减去左右的padding，盒子的高减去上下的padding
如果没有设置固定的宽高，设置padding值不用减
5.单一方向设置padding的值
padding-top/bottom/left/right
6.padding的多值设置：
padding：50px;四周
padding：10px 20px; 上下 左右
padding:10px 20px 30px; 上 左右 下
padding:10px 20px 30px 40px; 上 右 下 左
7.padding不可以取负值！！！！！！！！！！！！！！！！！！
8.padding不会影响背景图！！！！！！！！！！！！！！！！！！！
3. margin：需求：想要让同级元素之间产生一些距离
1.长在最外围的，不会撑开盒子内部的大小，但是盒子本身的占位变大了
2.作用:控制同级与同级元素之间的间距（同级）
3：给单一方向添加margin：margin-left/right/top/bottom；
4：margin设置方法：
margin:30px; 四周
margin:10px 30px; 上下 左右
margin:10px 30px 50px 上 左右 下
margin:10px 30px 50px 100px 上 右 下 左
5.margin可以取负值！！！！！！！！！！！！！！！！！！！！
6.margin：auto； 实现子标签在父标签中达到自适应居中
***前提条件：1.此元素不能设置浮动****
2.子元素设置固定宽度且宽度要小于父元素
3.div/p/h1-h6...支持 a/span/img不支持
7.margin自带的bug/问题：
a.同级元素上下margin之间会重合，不会叠加计算，按照值大的执行
b.父元素和第一个子元素都没有设置浮动，给子元素设置margin-top,会错误的添加给父元素
解决：给父元素设置padding-top
4.网页 通栏：div不设置宽度或者宽度为100%
版心：固定宽度，并且设置一个margin:auto达到自适应居中
建设网站：
1.新建一个站点文件夹
2.网页的规划： indenx.html
3.css文件部署
公共样式表：当前项目公共的样式
重置样式表：清楚默认的样式的
私有样式表：针对当前页面的样式
4.选择符命名
连接符、下划线、驼峰
id选择符仅用来作为最外围结构
尽量用class选择符
第二周
Day1 3.7 一、shift+alt+f 整理代码
二、单行文本省略号 1.固定宽高
2.不换行
white-space：nowrap;
3.溢出隐藏
overflow:hidden；
4.显示省略号：
text-ovrflow:ellipsis;
day2 3.8 一、元素类型的分类：
1.块级元素
1.设置宽高生效
2.从上往下排列，独占一行
3.如果不设置固定宽度，默认占满父元素的100%
常见的块级元素：
div -最常用的块级元素
dl - 和dt-dd 搭配使用的块级元素
form - 交互表单
h1 -h6- 大标题
hr - 水平分隔线
ol – 有序列表
p - 段落
ul - 无序列表
li
fieldset - 表单字段集
colgroup-col - 表单列分组元素
table-tr-td 表格及行-单元格
2.内联元素/行内元素
1.设置宽高不生效
2.在一行内从左往右排列
3.支持盒模型，但是不支持margin-top/margin-bottom;
常见的内联元素
a –超链接（锚点）
b - 粗体(不推荐)
br - 换行
i - 斜体
em - 强调
img - 图片
input - 输入框
label - 表单标签
span - 常用内联容器，定义文本内区块
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
u - 下划线
select - 项目选择
3.块级内联元素
1.设置宽高生效
2.在一行内从左往右排列
3.支持vertical-align属性 (设置元素的垂直对齐方式)
常见的块级内联元素
img-图片/ input-输入框 / textarea - 多行文本输入框
二、元素类型转换
display属性:
盒子模型可通过display属性来改变默认的显示类型
display:block;转为块级元素
拥有块级元素所有特征
display:inline; 转为内联元素
拥有内联元素所有特征
display:inline-block; 转为内联块级元素
拥有内联块级元素所有特征
display:none; 隐藏元素，不占据空间
三、浮动元素都可以设置宽高
只要设置了浮动的属性，都可以设置宽高，但是如果没有设置固定的宽度，由内容撑开宽度 （块级元素）
四、置换元素
置换元素：浏览器中显示的内容根据标签和属性决定的
img input
非置换元素：大部分标签都是非置换元素，写什么内容浏览器就显示什么内容
div p
day8 3.9 一、标签嵌套规则
1.默认嵌套规则
table>tr>td ul>li dl>dt+dd
2.块级元素都可以嵌套内联元素
3.内联元素不可以嵌套内联元素
特殊：a标签可以嵌套任何块级元素除了自己
4.块级元素套块级元素
特殊：p不能嵌套任何块级元素包括自己
div能嵌套任何块级元素包括自己
5.标签不可以自己嵌套自己
特殊：div可以
二、定位:position
（一）目标对象设置position属性 表示此标签要发生定位
（二）确定参照物
（三）指定坐标(top/bottom/left/right)
（四）浮动和绝对定位的标签都可以设置宽高，不再是一个标准的元素类型的标签
（五）position分类
1.position:static; 静态定位
默认值，不识别方位，此属性不适用
2.position:absolute; 绝对定位
a.如果没有设置参照物，那么以浏览器窗口为参照物
b.参照物：有定位的（除了static）最近的父级元素
c.脱离文档流，不占据页面空间
3.position:relative; 相对定位
a.始终占据页面空间的
b.参考物：本身默认的位置
c.使用场景： 1.通常搭配绝对定位使用 2.用于微调
4.position:fixed; 固定定位
a.参照物：浏览器窗口
b.脱离文档流，不占据页面空间
5.position:sticky;粘性定位
a.是相对定位和固定定位的结合体
b.如果没有达到临界条件，按照相对定位
c.如果达到临界条件，按照固定定位
给父元素设置相对定位，给子元素设置绝对定位 ->子绝父相
层级元素：z-index
前提条件：必须有定位的(除了static)元素才支持这个属性
z-index:层级元素
作用：改变定位元素堆叠顺序
取值：数字，正值越大表示层级越高 越在上面
三、标签在浏览器窗口居中的方法:
1. position:fixed;
left:50%;
top:50%;
margin-top:-高的一半
margin-left：-宽的一半
2. position:fixed;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
四、子元素在父元素中达到水平和垂直居中
1.方式1:
父元素:
position:relative;
子元素:
position:absolute;
top:50%;
left:50%;
margin-top:-高度的一半;
margin-left:-宽度的一半;
2.方式2;
父元素:
position:relative;
子元素:
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
五、 锚点： 是超链接的一种应用，实现在一个页面中不同位置的跳转
语法：
<标签名 id="起个锚点名称"></标签名>
<a href=""></a>
day9
一、宽高自适应 1.宽度自适应 块级元素不设置宽度或宽度设置为100%
2.高度自适应
不设置高度，或者高度为auto
min-height：最小高度
IE9浏览器以上才识别该属性, 如果内容少就按照最小高度执行，内容多就让内容撑开
3.全屏页面
html,body{
height:100%;
}
二、解决高度缺陷
(一)高度塌陷产生的原因：子元素都设置了浮动，父元素高度为0，父元素会出现高度塌陷
(二)解决高度塌陷/清除浮动的方法：
1.给父元素设置一个固定高度
2.给高度塌陷的父元素设置overflow:hidden;
原理：overflow:hidden触发了bfc,bfc规定浮动元素要参与高度计算
弊端：本意溢出隐藏，会影响定位元素
3.给想要清除浮动的元素后面加一个空div，并且设置css样式: clear: both
弊端:页面中会有很多无意义的标签，造成代码的冗余
4.万能清除法
选择符:after{
content:“";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;}
使用：
1.在reset.css文件中定义一个公共类名 表示专门解决高度缺陷的问题：
.clear-fix:after{
content:“";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;}
2.在需要解决高度塌陷的父元素上面去添加一个类名
<div class="body_ top clear_ fix"></div>
三、弹性盒
flex布局/弹性盒：
设置给元素上面的属性：
主轴和侧轴是相对而言的，X轴为主轴，则y轴为侧轴；X轴为侧轴，则y轴为主轴
设置给父元素用于形成弹性盒，达到控制子元素的排列布局
1.形成弹性盒：display:flex;
父元素形成了弹性盒，子元素都可以设置宽高
父元素形成了弹性盒，子元素想要达到水平和垂直居中，给子元素设置margin:auto;
默认主轴为x轴，默认排列顺序是沿着x轴进行排列
2.改变主轴：flex-direction:row/column;
3.主轴对齐方式：
justify-content:center;
justify-content:space-around;所有空间自动分配
justify-content:space-between;两端对齐，剩余空间自动分配
4.侧轴对齐方式：
align-items:center;
四、伪类选择符
1.选择符::after{content:"";} 作为选择符里面最后一个子元素
2.选择符::before{content:"";} 作为选择符里面第一个子元素
注意：before和after里面必须搭配content使用
3. ::first-letter{} 找到第一个字符
4. ::first-line{} 找到第一行
五、表单的补充
（一）表单控件的补充： 1.单选按钮 每一组单选按钮的name值必须一致
2.多选按钮/复选框
<input type="checkbox" name="">
3.下拉列表（菜单）
<select>
<option>重庆</option>
</select>
4.多行文本域 texarea
css属性：resize:none;禁止拖拽
5.文件的上传
<input type="file">
（二）html属性的补充： checked:默认选中 disabled:禁用 selected:下拉列表中的选中
（三）表单标签的补充 1.表单字段级：用于分组 语法：
2.表单字段级标题：用于放对应的标题
语法：<legend align="left/center/right/justify"></legend>
3.提示标签
语法：<label for="绑定控件id名"></label>
说明：label元素用来定义标签，为页面上的其他元素指定提示信息。要将label元素绑定到其他的控件上，可以将label元素的for属性设置为与该控件的id属性值相同。
day10
一、标签的补充
1:数据行分组
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
一个表格中只能有一个thead和tfoot,可以有多个tbody
2.数据列分组
<colgroup span="把几列分为一组"></colgroup>
3.表格标题
<caption></caption>
提供：caption-side:top/bottom/left/right;
4.列标题
<th></th>
默认文字加粗和居中效果
二、css的补充 1.相邻边框的合并 border-collapse:separate/collapse;
2.相邻边框之间的距离
border-spacing:10px;
3.单元格没有内容是否显示
empty-cells:show/hide;
4.控制表格的宽度
table-layout:fiexd/auto; 固定/自动；
第三周
day1
一、浏览器前缀：
css3:css3目前是预览版本，有兼容性问题，解决方案：加浏览器前缀
谷歌 -webkit-
火狐 -moz-
ie -ms-
欧鹏 -o-
二、线性渐变
background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction:方向
color-stop：颜色
1.单一方向的渐变
默认值：从上到下
to left /right/top/bottom 标准模式
right 兼容模式：不加to,方向表示的是开始的位置
2.对角渐变
to right top / to left bottom
left bottom
3.角度渐变 deg度
10deg
兼容模式：90deg - 标准模式
三、径向渐变：从一个点向四周 (!!!必须加前缀)
语法：background: radial-gradient(center, shape, size, start-color, ..., last-color);
说明：
1.center:渐变起点的位置,默认是图形的正中心。
水平 垂直
取值：1.10px 20px固定大小
2.百分比
3.方位值 top /bottom...
2.shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。
3.size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。
四、重复性线性渐变：
div { background: repeating-linear-gradient(red, yellow 10%, green 20%); }
重复性径向渐变
div { background: repeating-radial-gradient(red, yellow 10%, green 20%); }
五、过渡：transition
1. transition-property：检索或设置对象中的参与过渡的属性 通常设置为all;
2. transition-duration：检索或设置对象过渡的持续时间
3. transition-delay：检索或设置对象延迟过渡的时间
4. transition-timing-function：检索或设置对象中过渡的动画类型 linear/ease...
**简写**：
transition:all/具体属性值 运动时间s/ms 延迟时间s/ms 动画类型;
注意：两个时间有顺序性问题
transition必须要有鼠标时间触发(hover)
六、2d:二维平面空间，有x轴和y轴
css3-2d变形：transform
transform:translate 位移
transform:scale 缩放
transform:rotate 旋转
transform:skew 倾斜
1.位移 transform:translate(参数1,参数2); 参数1:水平位置 参数2：垂直位置
单独设置x轴和y轴：
transform:translateX();
translateY();
2.缩放 transform:scale(参数1,参数2); 取值：倍数：0-0.999 =1不变 >1放大 参数1：水平 参数2：垂直
单一方向的设置：
tranform:scaleX();
tranform:scaleY();
3.旋转：transform:rotate(); 单位deg
单一方向的设置：
rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转
rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转
改变变形原点:transform-origin:水平 垂直；
取值：固定大小：10px 10px;
百分比：10% 10%;
方位值：right bottom;
4.倾斜：transform:skew(水平 垂直 ) 单位deg
单一方向的设置：transform:skewX( ) / skewY( )
注意：多功能函数一起使用的时候，位移必须放在第一位
day2
一.景深: perspective:1200px;
二.形成3d空间 transform-style:preserve-3d;
三.3d位移 transform:translate3d(x,y,z)
translateX/Y/Z
四.旋转 tranform:rotateX()、rotateY()、rotateZ()、rotate3d()
五.缩放 transform:scale3d(2,2,2);/ scaleX/Y/Z;
六.animation：关键帧动画
(一)制定动画、关键帧
@keyframes 动画名move{
from{初始状态属性}
to{结束状态属性}
}
@keyframes move{
0%{初始状态属性}
50%（中间再可以添加关键帧）
100%{结束状态属性}
}
（二）调用
animation:动画名 持续时间 延迟时间 类型 次数；
animation:move 2s 1s linear infinite;
七、字体图标的使用
1.unicode方式
1.引入iconfont.css文件
2.<i class="iconfont"> unicode号 </i>
2.font-class方式
1.引入iconfont.css文件
2.<i class="iconfont 类名"> </i>
3.symbol方式
1.引入iconfont.css文件
2.引入iconfont.js文件
3.<svg></svg>
八、让子元素在父元素中达到水平和垂直居中的5种方式
1.父元素 position:relative;
子元素 position:absolute;
top:50%;
left:50%;
margin-top:-高度的一半；
margin-left:-宽度的一半；
2.父元素 position:relative;
子元素 position:absolute;
top:0;
left:0;
bottom:0；
right:0；
margin:auto;
3.过渡
子元素 position:relative;
top:50%;
left:50%;
transform: translate(-50%, -50%);
4.弹性盒
父元素:display:flex;
子元素:margin:auto;
5. 父元素
display:flex;
justify-content:center;
align-items:center;
day3
一. 语义化标签:
section元素 表示页面中的一个区块 --大块内容
main元素 表示页面中的主要的内容 --版心
header元素 表示页面中一个内容区块或整个页面的 标题
footer元素 表示页面中一个内容区块或整个页面的 脚注
nav元素 表示页面中 导航链接部分
figure元素 表示一段独立的内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)
article元素 表示一块与上下文无关的独立的内容
(了解)
aside元素 在article之外的，与article内容相关的辅助信息
hgroup标题的一个分组
mark定义高亮显示的文本(span)
time时间
dialog标记定义一个对话框(会话框)类似微信
二、视频、音频
1.视频
<video></video>
html属性：
src="" 资源路径
controls 展示控件
autoplay 自动播放
muted 静音
loop 是否循环
poster="图片路径"
2.音频
<audio></audio>
html属性：
src="" 资源路径
controls 展示控件
autoplay 自动播放
muted 静音
loop 是否循环
<source type=>
三、HTML5表单
新增type类型
Type=“email” 限制用户必须输入email类型
Type=“url” 限制用户必须输入url类型
Type=“range” 产生一个滑动条表单
Type=“number”
Type=“search” 产生一个搜索意义的表单
Type=“color” 生成一个颜色选择的表单
Type=“time” 限制用户必须输入时间类型
Type=“month” 限制用户必须输入月类型
Type=“week” 限制用户必须输入周类型
Type=“datetime-local” 选取本地时间
type=”date”
四、新增表单属性
***** autocomplete 是否自动提示信息 属性值 on off
***** placeholder 文本框的提示信息
required 监测是否为空。
min 最小
max 最大
step 步幅 确定一个法定值。 -3 0 3 6 9
autofocus 自动聚焦。一个页面只能由一个。
pattern 后面的属性值是一个正则表达式。
novalidate 取消验证
multiple 选择（上传）多个
list 必须结合datalist标签，绑定datalist id名称。
五、css3: 优雅降级: 夏总（百达翡丽3千万 ->劳力士 -> 小天才 -> 画个手表） 小夏
先针对高版本的设备开发，达到完美的功能和视觉效果，
项目向下兼容，视觉效果或者功能降低
渐进增强：
小李（走路 -> 自行车 ->qq车 ->奥迪 ->劳斯莱斯 ->私人飞机） 李董
保证基本的功能 ->不断完善
六、新增表单标签
output
<form action="" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input id="a" type="range" min="0" max="100">100+
<input id="b" type="text" value="50">=
<output name="x" for="a b"></output>
</form>
七、属性选择符：
****1、E[attr]：只使用属性名，但没有确定任何属性值
****2、E[attr=“value”]：指定属性名，并指定了该属性的属性值
3、E[attr~=“value”]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”必须的
4、E[attr^=“value”]：指定了属性名，并且有属性值，属性值是以value开头的
5、E[attr$=“value”]：指定了属性名，并且有属性值，而且属性值是以value结束的
6、E[attr*=“value”]：指定了属性名，并且有属性值，而且属值中包含了value
7、E[attr|=“value”]：指定了属性名，并且属性值仅是value或者以“value-”开头的值（比如说left-con）
day4
一、结构性标签
1.子元素的类型或者类名一致，采用child方式
选择符:first-child 匹配子集的第一个元素
选择符:last-child 最后一个X元素
选择符:nth-child(n) 用于匹配索引值为n的子元素。索引值从1开始
取值：n :具体的某个数字
2n/even: 找到所以偶数
2n+1/odd: 找到所有奇数
选择符:only-child这个伪类用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配
选择符:nth-last-child(n) 从最后一个开始算索引
2.子元素的类型或者类名不一致，采用of-type
选择符:first-of-type 匹配同级兄弟元素中的第一个X元素
选择符:last-of-type 最后一个X元素
***** 选择符:nth-of-type(n) 第n个同级兄弟元素X *****
选择符:only-of-type 唯一兄弟元素的X
选择符:nth-last-of-type(n) 倒数第n个同级兄弟元素X
3.根标签
:root 匹配文档的根元素。
在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML
html{}
:root{}
二、UI元素状态伪类选择符
E:enabled
匹配所有用户界面（form表单）中处于可用状态的E元素
E:disabled
匹配所有用户界面（form表单）中处于不可用状态的E元素
E:checked
匹配所有用户界面（form表单）中处于选中状态的元素E
E::selection
匹配E元素中被用户选中或处于高亮状态的部分
三、动态伪类选择器
E:link
链接伪类选择器
选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上
E:visited
链接伪类选择器
选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上
E:active
用户行为选择器
选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上
E:hover
用户行为选择器
选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
E:focus
用户行为选择器
选择匹配的E元素，而且匹配元素获取焦点
四、层级选择器
****父元素>子元素**** 父元素>子元素
找到当前父元素的第一层的所有子元素！
****兄弟元素+兄弟元素**** 相邻兄弟选择器
找到当前元素后面最近的一个兄弟元素
****兄弟元素~兄弟元素**** 通用选择器
找到当前元素后面所有的兄弟元素
五.文本阴影属性
text-shadow:水平移动的位置 垂直移动的位置 模糊程度 颜色；
六、盒子阴影 box-shadow
box-shadow: 水平移动的位置 垂直移动的位置 模糊程度 大小 颜色 inset(内阴影)；
10px 10px 5px 10px #888888 inset;
七、文本换行
Word-wrap:break-word; 尝试把长单词换到下一行，如果还有超出才会断开
word-break:break-all; 直接断开
八、颜色模式
1、rgba 颜色模式
2、 Hsl 颜色模式（了解）
3、 Hsla 颜色模式（了解）
就是色调(Hue)、饱和度(Saturation)、亮度(Lightness)三个颜色通道的改变以及它们相互之间的叠加来获得各种颜色，色调(Hue)色调最大值360，饱和度和亮度有百分比表示0-100%之间。 a表示透明度，取值为0-1
九、背景属性
background-origin 背景原点（背景的起始点）
说明：指定background-origin属性应该是相对位置
属性值
padding-box 背景图像填充框的相对位置 默认值
border-box 背景图像边界框的相对位置
content-box 背景图像的相对位置的内容框
background-clip 背景裁切
说明：background-clip 属性规定背景的绘制区域。
属性值
border-box 背景被裁剪到边框盒。
padding-box 背景被裁剪到内边距框。
content-box 背景被裁剪到内容框。 默认值
*****background-size 背景尺寸 *****
说明：background-size 规定背景图像的尺寸
属性值
固定值 (10px) 规定背景图的大小。第一个值宽度，第二个值高度。
percentage(%) 以百分比为值设置背景图大小
cover 等比缩放，把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
contain 等比缩放，以使其宽度或高度一个方向铺满即停止
十、图片边框
border-image 属性是一个简写属性，用于设置以下属性:
border-image-source 用在边框的图片的路径
border-image-slice 图片边框向内偏移(不加单位)
border-image-repeat 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)
border-image-outset 边框图像区域超出边框的量(值是一个倍数)
十一、圆角
border-radius:10px;
以当前设置的值位半径画圆相切
border-radius:10px 20px;
左上角/右下角 右上角/左下角
border-radius:10px 20px 20px;
左上角 左下角/右上角 右下角；
border-radius:10px 10px 20px 20px;
左上 右上 右下 坐下（左上角顺时针走一圈）
border-radius:20px / 50px;
第一个值位水平半径，第二个值为垂直半径，画椭圆
border-radius : 10px 20px 30px 40px / 100px 20px 30px 10px;
十二、width的属性值
fill-available、fit-content、max-content、min-content
十三、css3事件属性
pointer-events:none;
1.阻止默认事件触发
2.穿透蒙层/模态框
day5
一、标准盒模型和怪异盒模型
1.标准盒模型：
border长在设置的宽高的外面的，padding会撑开盒子的大小
实际宽高 = 设置的宽高 +padding + border + margin
2.怪异盒模型/ie盒模型：
触发：box-sizing:border-box;
border和padding长在盒子内部
实际宽高 = 设置的宽高（content+padding+border） + margin
二、flex布局：
作用：控制子元素的布局方式
显示规则：在主轴上进行排列
主轴/侧轴：相对而言的概念，如果x为主轴，y就为侧轴;如果y为主轴，x就为侧轴
设置方式：如果想要控制子元素的布局方式，必须给父元素形成弹性盒
(一)设置给父元素的属性：
1.形成弹性盒 display:flex;
弹性盒默认主轴为x轴，子元素默认排列顺序是从左往右排列
如果父元素形成了弹性盒，子元素都可以设置宽高
如果父元素形成了弹性盒，子元素想要水平和垂直居中,子元素设置margin:auto;
2.改变主轴 flex-direction:
*row
*column
row-reverse
column-reverse
3.主轴对齐方式 justify-content:
*center
*space-around
*space-between
flex-start
flex-end
4.侧轴对齐方式 align-items:
flex-start
flex-end
center
baseline 基线
stretch 拉伸
5.是否换行 flex-wrap
nowrap
wrap
wrap-reverse
6.行与行之间的对齐方式 align-content
flex-start
flex-end
center
space-around
space-between
stretch
7.flex-flow: flex-direction flex-wrap;
（二）子元素属性：
1.align-self 某一个子元素侧轴对齐方式
2.order 默认值是0，数字越大越往后排
****3.flex:1; 主轴剩余空间的完全分配
4.三个属性
flex-grow
一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
**** flex-shrink:0; 不压缩
一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
flex-basis
项目的长度
三、多列布局
1.column-count:分为几列
2.column-gap:列间距
3.column-rule:列边框
4.column-fill:列高
属性值： auto
balance
5.column-span: 是否横跨所有列
属性值：none
all
6.column-width:列宽
ps:同时设置列宽和列数时，并不能同时生效
四、响应式 响应式布局： 为了适应不同的设备，非常灵活 不同设备：pc/手机端/平板端/大屏
响应式布局优势
所有设备都能显示
响应式布局劣势
工作量非常大(css可能要写多套)
！！！！flex实现两栏布局！！！！！
<style>
* {
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
body{
display: flex;
/* flex-direction: column; */
flex-direction: row;
}
header{
/* height: 100px; */
width: 100px;
background: rgb(192, 255, 206);
}
footer{
/* height: 100px; */
width: 100px;
background: rgb(236, 162, 88);
}
section{
background: plum;
flex: 1;
}
</style>
！！定位实现两栏布局！！！
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
header {
width: 100%;
height: 100px;
background: pink;
position: fixed;
top: 0;
left: 0;
}
footer {
width: 100%;
height: 100px;
background: pink;
position: fixed;
bottom: 0;
left: 0;
}
section {
height: 100%;
background: lemonchiffon;
/* 解决头部和底部被遮盖的问题 */
padding: 100px 0;
justify-content:center;
/* 解决padding会撑开高度 */
box-sizing: border-box;
/* 解决背景颜色被划走 */
overflow-y: auto;
}
</style>
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
hello
