第二天
1.html概念：
1）2014年正式版本
[if !supportLists]2）[endif]工作流程
[if !supportLists]3）[endif]网站的建站流程
[if !supportLists]2. [endif]基础知识：
[if !supportLists]1）[endif]html 超文本标记语言
[if !supportLists]2）[endif]语法；①双标签<标签的名称 属性=””></标签的名称>
②单标签<标签的名称/> 注:语法html5没有xhtml严格 在html5签中“/” 可省略，但 xhtml不能
[if !supportLists]3. [endif]常用的标签的使用：
[if !supportLists]1） [endif]标题标签h1~h6 h1 唯一性的logo 只有6个
①h$*6{111} 解析结果：<h1>111</h1>
.....
<h6>111</h6>
②ctrl+d
[if !supportLists]2) [endif]段落标签p <p>内容</p> 有上下间距 单行
[if !supportLists]3) [endif]列表标签：
①无序标签ul>li 多行li ul>li*n{内容} 有实心圆
②有序表签ol>li 多行li ol>li*n{内容} 有默认序号，从1开始
③自定义标签dl>dt{}+dd{} dd解释dt的内容 要多行 需要重新 dl
把无序列表前面的符号放进盒子里
另: 关于列表符号（序号）的改变
Type类型 a/A i/I 注：i/I 为罗马数字
例：<ol type=”i”>
[if !supportLists]3）[endif]超链接a : <a href=””title=””target=“”>内容</a>
①href 路径地址 title 提示文本
②target 打开窗口的方式 ：
1. _self 覆盖原窗口打开
[if !supportLists]2. [endif]_blank 在新窗口打开
另：控制当前页面所有的a标签打开窗口方式 <base target=””>
[if !supportLists]4) [endif]图片标签img: <img src=””alt=””width=””height=””border=””/>
①src 图片的地址路径
②alt 当浏览器加载失败时的提示文本
另：width 宽 height 高 border 边框 注：单位均为px（像素）
title: 所有html标签都可使用的 提示文本
第三天
[if !supportLists]1）[endif]路径的使用
①绝对路径有盘符服务器无盘符工作中不可用
②相对路径
--同级找同级：目标文件的名字.后缀名
--上级找下级：目标文件的文件夹/目标文件的名字.后缀名
--下级找上级：../目标文件的名字.后缀名
[if !supportLists]2）[endif]常见标签之间的嵌套
-a和img之间的嵌套 a>img
-p和h之间的嵌套
--p不能嵌套h1
--h1能嵌套p
p和p之间不能嵌套
[if !supportLists]3）[endif]div和span
--div可以嵌套span div可以嵌套所有
[if !supportLists]4）[endif]加粗和倾斜
--加粗 b < strong
--倾斜 i<em
[if !supportLists]5）[endif]div : 盒子 大的盒子 用来包裹其他盒子作为页面布局
Span：盒子 小的盒子 用来包装一段文本或者一个文字作为页面布局显示
[if !supportLists]6）[endif]表格table>tr*n>td*n
--table 表格
-- tr 行
--td 列
--tr和td相交的部分是单元格
[if !supportLists]7）[endif]属性
--width/height/border 宽/高/边框 设置html属性 建议给父级添加
--bordercolor/bgcolor 边框颜色/底色
--cellspacing/cellpadding 单元格与单元格之间的间隔/单元格与内容之间的间距
--表格中的对齐方式
--水平方向对齐 align:left\tight\center 左\右\中心
--垂直方向对齐 valign：top\bottom\center 上\下\中
--合并单元格---跨行合行，跨列合列
--colspan 列合并
--rowspan 行合并
[if !supportLists]8）[endif]表单form 作用：收集用户信息
--表单框 form 是一个盒子
属性：
--action 后台地址
--name 表单框的名字
--method get/post 携带参数的区别
--？ 后面接的参数
--表单控件 input
属性
--name 表单控件的名字
--size 尺寸 表单控件的宽度大小（字符数）
--maxlength 最大长度 约束用户输入的字符数
--type 类型 text（文本）、password（密码）、radio（单选）、checkbox（多选）、submit（提交）、button（空按键）、等20多种
--value 提示文本 会根据不同的type类型的属性值发生改变 占位
--功能按钮：必须放在form标签中内
--submit 提交
--reset 重置
--button 空按钮 需要绑定js事件
9）css语法组成
选择器{声明}=> 选择器{属性1：属性值1，属性2：属性值2，....... }
-选择器 修饰的对象 html结果标签
-声明 选中了对象 需要用怎样的的属性进行修饰
-声明 包含属性和属性值 一定要写在大括号里 冒号连接属性和性值 属性值不许要用引号引起来 （与html 不同）
当一个对象有多个声明的时候不区分先后顺序
10）css样式表的创建方式： 行内样式表、内部样式表、外部样式表
--行内样式表
--需要在标签的内部创建的
--创建一个style属性
--属性值就是css语法中的声明
--内部样式表
--需要在head区域内创建
--创建一个style标签
--在style标签中书写css语法即可
--外部样式表
--在外面创建一个后缀名为.css的文件
--在css文件中书写css语法即可
--在head区域内使用link标签引入外部的样式即可
拓展：
--外部样式表的引入处理link还有 @import 但是@import有缺陷使用的少
--在head区域内创建一个style标签
--在标签内书写@import url（‘相对路径’）
Link与@import 的有区别
--link 引入样式表的时候 结构和样式同时加载
--@import 方法先加载结构 后加载样式
三种样式表的优先级：行内最大内部与外部与他们的书写顺序有关后写的优先级更高
[if !supportLists]11）[endif]css语法组成 css选择器{属性：属性值}
css选择器： 标签选择器、id选择器、class选择器、包含选择器、群组选择器、通配符选择器、伪类选择器
标签选择器：-html 标签作为选择器出现 div、p、a..
id选择器：--在标签里面添加一个id属性 属性值取名规范和站点一样
--在样式表中使用 #属性值名字{声明}
--作用：通常在一块区域只使用一次 表示网页的外围结构
Class选择器：--在标签里面添加一个class属性
--在样式表中 . class的属性值名字
--作用：通常选择到的一类相同的对象修饰
包含选择器：--语法：父级选择器 子级选择器{}
--作用：通过父级选择子级
群组选择器：语法：选择器1，选择器2，选择器3...{相同的声明}
--选择到相同的声明的选择器
通配符选择器：--固定用法 *{margin：0；padding：0}清楚浏览器的默认间距
--*表示选中页面中的全部的标签
--建议放在样式表中最上方
第四天
[if !supportLists]1）[endif]hover 鼠标移入
--改变自己 格式： 选择器:hover{}
--通过父级改变子级 父级选择器:hover 子级选择器{}
[if !supportLists]2）[endif]css基础
--权重：优先级 四位数字表示0000
--标签选择器 0001
--id选择器 0100
--class选择器 0010
--包含选择器 相加
--群组选择器 各自计算
--通配符选择器 0000
--伪类选择器 0010
--行内样式表 1000
注：！Important 优先级最高
--层叠性
--每个元素都可以有多个选择器
--选择器中的声明冲突的时候 根据权重选择 不冲突的情况就进行相加
[if !supportLists]3）[endif]浮动flaot 属性值：left right
--脱离文档流 初始位置不存在
--停止条件
--包含框
--前一个含有浮动属性的元素
[if !supportLists]5) [endif]<sup>12</sup>吧12编程上角标
第五天
[if !supportLists]1） [endif]盒模型
--方向顺时针 上 右 下 左
--padding 内边距 top/right/bottom/left 不能为负
--marign 外边距 top/right/bottom/left 能为负 -重点:设置margin的时候 要有包含框的接触!!!
第六天
[if !supportLists]1）[endif]文本大小font-size 默认16px 最小12px
em单位是相对与父元素字体大小进行取值 1em=父元素文字大小
[if !supportLists]2）[endif]文本类型font-family
--中文 加双引号或者 单引号
--英文 只有一个单词时可以不加引号 否则 要加
[if !supportLists]3）[endif]文本加粗font-weigth
属性值：
--分9个等级100-900 （只可取整百）
100-500常规字体 600-900加粗字体
--bolder(更粗的) bold(加粗) normal(常规)
[if !supportLists]4）[endif]文本倾斜font-style： italic/oblique（更大）/normal;
[if !supportLists]5）[endif]文本行高line-height 设置行高与文本高度一致就好
[if !supportLists]6）[endif]文本属性的复合写法font:font-weight、font-style、font-size/line-height（不可换位）、font-family(不可不写)
[if !supportLists]7）[endif]文本颜色三种表示方法
--用英文单词
--十六进制
--rgb/rgba
[if !supportLists]8) [endif]对齐方式属性：text-align 属性值：left/right/center
[if !supportLists]9) [endif]首行缩进text-indent 针对第一行 可以是负值
[if !supportLists]10) [endif]字/词间距 letter/word-spacing
--em单位是相对与父元素字体大小进行取值 1em=父元素文字大小
[if !supportLists]11) [endif]列表属性属性：list-style 属性值：disc(实心圆) circle（空心圆） square（实心方块）
none(去掉列表符号)
[if !supportLists]12) [endif]text-transform这个属性有3个值分别为；
--text-transform: uppercase把文字变成全大写
--text-transform: lowercase把文字变成全小写
--text-transform: capitalize变成首字母大写
[if !supportLists]12）[endif]背景颜色属性：background-color/background
[if !supportLists]13）[endif]背景图片属性：background-image ：url(相对路径)
[if !supportLists]14）[endif]背景平铺属性：background-repeat: 属性值：no-repeat（不平铺） repeat（默认） repeat-x(横向平铺) repeat-y(纵向平铺)
15)背景定位 backgorund-position:center
--水平方向值：left/center/right或数值
--垂直方向值：top/center/bottom或数值
16)背景固定 background-attachment:fixed(固定)/scrol（滚动）l
17)简写 background
18)下划线 属性:text-decoration
--属性值：
--none：无
--underline：下划线
--overline :上划线
第七天
[if !supportLists]1）[endif]文本溢出属性:overflow 属性值：--hidden（隐藏）
--auto （自动） 固定宽高、在一行内显示、超出去隐藏、隐藏便省略号
[if !supportLists]2）[endif]元素分类--块级元素 可以设置宽高、独占一行、上下显示
--行内元素 不可设置宽高、在一行内逐个显示
--行内块 可以设置宽高、在一行内显示
3）元素转换 属性：display 属性值：--block 块
--inline 行内
--inline-block 行内块
--list-item 列表项目
--隐藏
浮动=>行内快
[if !supportLists]3）[endif]white-space 空白空间
属性值：--nowrap 不换行 （很重要）
--pre 保留空白
--pre-line 删除空格 保留换行
--pre-wrap 保留换行和空格
[if !supportLists]4）[endif]基线对齐vertical-align:top\bottom\middle
第八天
[if !supportLists]1）[endif]定位属性：position
属性值：
--static(静态定位 默认值）:静态定位
--relative(相对定位） ：相对于初始位置、不脱离文档流
--absolute(绝对定位） ：相对于父级的定位属性，若父级没有定位属性会一直往上查找直到浏览器会脱离文档流
--fixded(固定定位) :相对于浏览器进行位置偏移，会脱离文档流
sticky（粘性定位 css 新增属性值 好用但是兼容性问题很多) ：相对+固定
[if !supportLists]2) [endif]定位的三要素
--元素对象：需要移动的元素
--参照物：元素移动参照物 谁进行移动
--方向值：top/right/bottom/left
[if !supportLists]2）[endif]层叠性属性：z-index 属性值：auto/number（数字） 值越大 优先越高
4）锚点属性 <a href=”#跳转属性的地址”>
5)跳转位置id=“id的属性值”
第九天
[if !supportLists]1）[endif]宽度自适应
--不设置或者设置为100%沾满浏览器全屏（通栏效果）
--脱离文档流=>根据内容决定宽高
[if !supportLists]2）[endif]高度自适应
--height不设置时为0 设置auto时会自适应
--元素设置为百分比的情况 浏览器/图片
[if !supportLists]3）[endif]最大值高宽约束页面的比例、翻页门户网站
[if !supportLists]4）[endif]最小值高宽兼容自适应
[if !supportLists]5）[endif]高度塌陷（高度坍塌）万能清楚法
.clear-fix::after{
content:'';
width:100%;
height:0;
display:block;
overflow:hidden;
clear:both;
visibility:hidden;
}
[if !supportLists]6）[endif]伪对象/伪元素
--::before{content:’’}
--::after{contet:’’}
--first-letter/line{}
[if !supportLists]7）[endif]隐藏是几种方式
--display:none
--visibility:hidden
第十天
[if !supportLists]1）[endif]表单补充
下拉列表select>option
语法：
<select >
<option>下拉选项1</option>
<option>下拉选项2</option>
</select>
[if !supportLists]3) [endif]多行文本域textarea
表单域多行文本定义：
<textarea name="" cols="" rows="" > </textarea>
说明：
多行文本。rows属性和cols属性用来设置文本输入窗口的高度和宽度，单位是字符。 阻止浏览器对窗口的拖动设置:{resize:none;}（css属性）
4)表单字段集
语法：<fieldset></fieldset>
说明：
相当于一个方框，在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象。disabled定义空间禁制可用；
5)字段级标题
语法：<legend align="left/right/center/justify"></legend>
说明
legend元素可以在fieldset对象绘制的方框内插入一个标题。legend元素必须是fieldset内的第一个元素
6)提示信息标签
语法：<label for="绑定的id名字"></label>
说明:
label元素用来定义标签，为页面上的其他元素指定提示信息。要将label元素绑定到其他的控件上，可以将label元素的for属性设置为与该控件的id属性值相同。
7)上传文件框：
语法：<input type="file"/>
说明：type属性值新增的类型有：file文件类型，可进行文件的选择
8)单元格间距：
语法:border-spacing:value
说明：
单元格间距(该属性必须给table添加)表示单元格边框之间的距离不可取负值
9)合并相邻单元格边框：
语法：border-collapse:separate [ˈseprət]/collapse[kəˈlæps];
说明：
作用：合并相邻单元格边框(该属性必须给table添加)
separate(边框分开)默认值；
collapse(边框合并)
10)无内容时单元格的设置：
语法：empty-cells:show/hide;
说明：定义当单元格无内容时，是否显示该单元格的边框区域；show：显示 ；hide：隐藏
11）显示单元格行和列的算法(加快运行的速度)：
语法：table-layout:auto/fixed
说明：
自动表格布局：列的宽度是由列单元格中没有折行的最宽的内容设定的。
缺点：较慢（因为它需要在确定最终的布局前访问表格中的所有内容）。
优点：灵活固定表格布局,加快运行的速度,允许浏览器更快的对表格进行布局
12）显示单元格行和列的算法(加快运行的速度)：
语法：table-layout:auto/fixed
说明：
自动表格布局：列的宽度是由列单元格中没有折行的最宽的内容设定的。
缺点：较慢（因为它需要在确定最终的布局前访问表格中的所有内容）。
优点：灵活固定表格布局,加快运行的速度,允许浏览器更快的对表格进行布局
13）<caption></caption>
caption标记表示表格的名称，也叫表格标题。
设置表格标题的位置
caption-side:top/right/bottom/left
说明：
定义表格的caption对象放于表格的哪个位置，与caption对象一起使用； top为默认值；
left,right位置只有火狐识别 更新了也不可用了top,bottom IE6以上版本支持，IE6以下版本不支持其它属性值，只识别top;
14）数据行分组
<thead></thead>表头
<tbody></tbody>表体
<tfoot></tfoot>表尾
说明：一个Table中，只能包含一个thead,一个tfoot,但可包含多个tbody
thead 元素应该与 tbody 和 tfoot 元素结合起来使用。 tbody 元素用于对 HTML 表格中的主体内容进行分组， tfoot 元素用于对 HTML 表格中的表注（页脚）内容进行分组。 如果要使用 thead、tfoot 以及 tbody 元素，就必须使用全部的元素。
提示：在默认情况下这些元素不会影响到表格的布局。不过，可以使用CSS 使这些元素改变表格的外观。 详细描述： thead、tfoot 以及 tbody 元素使我们有能力对表格中的行进行分组。当创建某个表格时，也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。
15)数据列分组
<colgroup span="value"></colgroup>双标签
<col span="value" />单标签
说明：
1）col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组。
2）span属性显示指定相邻几列组成一组，span属性值默认为1，默认时仅定义一列为一组。
Firefox、Chrome 以及 Safari 仅支持 colgroup 元素的 span 和 width 属性
16)
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
17)BFC布局规则：
1、内部的Box会在垂直方向，一个接一个地放置。
2、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3、每个元素的margin box的左边， 与包含块border box的左边相接触
4、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
5、BFC的区域不会与float box重叠。
6、计算BFC的高度时，浮动元素也参与计算
18)
- 根元素 HTML
- float属性不为none ; left&&right
- position为absolute或fixed
- display为inline-block, flex
- overflow不为visible; auto hidden scroll
Overflow:auto
第十一天
[if !supportLists]1）[endif]语义化标签
section元素 表示页面中的一个内容区块 div
header元素 表示页面中一个内容区块或整个页面的标题
nav元素 表示页面中导航链接部
article元素 表示一块与上下文无关的独立的内容
aside元素 在article之外的，与article内容相关的辅助信息
footer元素 表示页面中一个内容区块或整个页面的脚注
figure元素 表示一段独立的流内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)
main元素 表示页面中的主要的内容
hgroup:标题组
Mark高亮
兼容低版本浏览器：
<dialog> 标签定义对话框或窗口。
<canvas>画布 – 三阶段
2)音频audio
视频video
[if !supportLists]4) [endif]智能表单
--Type=“email” 限制用户必须输入email类型
专门用来输入email地址的文本框,如果该文本框中内容不是email地址格式的，则不允许提交。但它不检查email地址是否存在。提交时可以为空，除非加上了required属性。
Type=“number” 限制用户必须输入数字类型
专门用来输入URL地址的文本框。如果该文本框中内容不是URL地址格式的，则不允 许提交。专门用来输入数字的文本框。在提交时会检查其中的内容是否为数字，具有min、max、step的属性。
例：<input name=“number1” type=“number” value=“25” min=“10” max=“100” step=“5” />
Type=“url” 限制用户必须输入url类型
Type=“range” 产生一个滑动条表单
range类型
是用来只允许输入一段范围内数值的文本框，它具有min属性与max属性，及step属性，可以指定每次拖动的步幅。
例：<input name=“range1” type=“range” value=“25” min=“0” max=“100” step=“5” />
min 最小值
max 最大值
step 数字间隔
Type=“search” 产生一个搜索意义的表单
Type=“color” 生成一个颜色选择的表单
Type=“time” 限制用户必须输入时间类型
Type=“date” 限制用户必须输入时间类型
Type=“month” 限制用户必须输入月类型
Type=“week” 限制用户必须输入周类型
Type=“datetime-local” 选取本地时间
[if !supportLists]5）[endif]placeholder属性 文本框处于未输入状态时文本框中显示的输入提示。
[if !supportLists]6）[endif]autofocus属性：给文本框、选择框、或者按钮控件加上该属性，当打开页面时，该控件 自动获得焦点，一个页面只能有一个。
[if !supportLists]7）[endif]autocomplete属性：输入富足和所用的自动完成功能，是一个节省输入时间，同时也十 分方便的功能。属性值：on/off。on可是显示指定候补输入的数据列表，使用datalist 元素与list属性提供候补输入的数据列表，自动完成时，可以将该datalist元素中的数 据作为候补输入的数据在文本框中显示：
[if !supportLists]8）[endif]novalidate取消验证 可以对form表单添加novalidate属性，即使form表单中的input 添加了required，也将不进行验证partten
[if !supportLists]9）[endif]Multiple:可以输入一个或多个值，每个值之间用逗号分开 例：<input type=“email” multiple/>还可以应用于file
[if !supportLists]10）[endif]pattern属性 pattern用于验证表单输入的内容，通常HTML5的type属性，比如email、 tel、number、data类、url等，已经自带了简单的数据格式验证功能了，加上pattern 后，前端部分的验证更加简单高效了。显而易见，pattern的属性值要用正则表达式。s第十二天
[if !supportLists]1）[endif]属性选择器
--标签名称[attr] 只使用属性名，但没有确定任何属性值；
--标签名称[attr=“value”] 指定属性名，并指定了该属性的属性值
--E[attr ~="value"]：指定属性名，并且具有属性值，其中词列表中包含了一个value
--E[attr ^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；
--E[attr $="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的
--E[attr *="value"]：指定了属性名，并且有属性值，而且属值中包含了value
--E[attr |="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值;
[if !supportLists]2) [endif]结构选择器
--当标签一样的时候 标签名称：nth-child(){}
--当标签不一样时 标签名称：nth-of=type(){}
3目标选择器 选择器：target{} :target 选择匹配E的所有元素，且匹配元素被相关URL 指向
4)ui选择器 E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素
E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素
E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E
E:focus 用户行为选择器 选择匹配的E元素，而且匹配元素获取焦点
[if !supportLists]4）[endif]层级选择器
--子代选择器 选择器1 选择器2...{}
--E>F E的所有子级F
--E+F 同级但不包括E
--E~F 选择相邻的所有同级元素
[if !supportLists]5）[endif]文本属性
--text-shadow 文本阴影 属性值：水平 垂直 模糊（程度） 颜色
--box-shadow 盒子阴影 属性值：水平 垂直 模糊（程度） 颜色
[if !supportLists]6）[endif]背景属性
--background-size: 100% 100% 宽高
--cover contain
-- background-size 规定背景图像的尺寸
--length规定背景图的大小。第一个值宽度，第二个值高度。
[if !supportLists]7）[endif]颜色属性hsl hsla
[if !supportLists]8）[endif]边框属性1、border-color
border-color:red green #000 yellow;(上右下左)
Border-radius 圆角边框 一个属性值 四个属性值
第十三天
[if !supportLists]1）[endif]线性渐变属性：background/background-image
属性值：linear-gradient(参数）
background: linear-gradient(direction, color-stop1, color-stop2, ...);
[if !supportLists]2）[endif]径向渐变属性值：radial-gradient(参数)
background: radial-gradient(center, shape, size, start-color, ..., last-color);
[if !supportLists]3）[endif]重复渐变属性值repeating- 10% 15%
4）过度属性
transition-property： 检索或设置对象中的参与过渡的属性
transition-duration： 检索或设置对象过渡的持续时间
transition-delay： 检索或设置对象延迟过渡的时间
transition-timing-function：检索或设置对象中过渡的动画类型
简写：transition:all/具体属性值 运动时间s/ms 延迟时间s/ms 动画类型
5）2d属性 属性：transfotm
属性值：transform
1：2D位移 transform：translate()
2：2D缩放 transform：scale()
3：2D旋转 transform：rotate()
4：2D倾斜 transform：skew()
6）transform-origin
transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用；
第十四天
[if !supportLists]1) [endif]景深效果(一般用于旋转之中) 圆小近大
程序中实现的方法perspective 元素距离 视线的距离（物体和眼睛的距离越小，近大远小的效果越明显）
perspective: 1200px;（在父元素中使用）
transform:perspective(1200px) （在子元素中使用）
2）3d 功能函数 属性：transform
实现3D场景：
Transform-style：preserve-3d
位移属性值
--translatZ()
--translat3d()
旋转属性值
--rotateZ()
--rotate3d(x,y,z,deg)
Iocon
[if !supportLists]2) [endif]帧定义
一次
@keyframes mymove{
from{初始状态属性}
to{结束状态属性}
}
多次
@keyframes mymove{
0%{初始状态属性}
50%（中间再可以添加关键帧）
100%{结束状态属性}
}
3）调用 @keyframes
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-play-state
简写animation:名称 时间 方式 次数
第十五天
[if !supportLists]1）[endif]盒模型
标准盒模型--content-box 属性值：paddding、border
计算方式自身：content+padding+border
实际:content+padding+border+margin
[if !supportLists]2）[endif]怪异盒模型属性：border-box s属性值：padding、border
[if !supportLists]3）[endif]弹性盒dispalay:flex
默认你的主轴时X轴（主轴和侧轴时对应关系）
弹性盒环境下所有的标签都能直接设置宽高大小（因为转换成了块）
居中方式margin：auto
浮动不可用定位个盒模型可以正常使用
[if !supportLists]4）[endif]给父级元素上加的属性
改变主轴的默认方向flex-direction:row/column
主轴上是对齐方式justify-content:flex-start/flex-end/center/space-between/space-around/
Space-evenly
侧轴对齐方式align-items:flex-start/flex-end/center
换行属性flex-wrap:wrap/nowrap(默认值)/wrap-reverse(反转wrap排列)
行与行之间有间距:align-content：flex-start/flex-end/center/space-between/space-around/
Space-evenly
align-content
说明：
当伸缩容器的侧轴还有多余空间时，本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的<' justify-content'> 属性类似。请注意本属性在只有一行的伸缩容器上没有效果。
flex-start没有行间距
flex-end底对齐没有行间距
center居中没有行间距
space-between两端对齐，中间自动分配
space-around自动分配距离
[if !supportLists]5) [endif]加在子级元素上的属性
侧轴上的对齐方式控制单个元素align-self
auto 默认值。元素继承了它的父容器的align-items属性。如果没有父容器则 为"stretch"。
Stretch 元素被拉伸以适应容器。
Center 元素位于容器的中心。
flex-start 元素位于容器的开头。
flex-end 元素位于容器的结尾。
排列优先级order:数字 越大优先级越高 显示越靠后
属性：flex:1 占据主轴上剩下的空间 并且会随着内容进行撑开
第十六天
[if !supportLists]1）[endif]多列布局
Column-count 属性规定元素应该被分割的列数
Column-gap 属性规定之间的间隔大小
Column-rule 设置或检索对象的列与列之间的边框
复合属性column-color 规定列之间规则的颜色
Column-rule 规定列之间规则的样式 简写同border属性值相同
Column-width 规定列之间规则的宽度
[if !supportLists]2）[endif]column-fill 设置或检索对象所有列的高度是否统一
属性值：auto 列高度自适应内容
属性值：balance 所有列的高度以其中最高的一列统一
[if !supportLists]3）[endif]column-span 设置或检索对象元素是否横跨所有列
属性值：none 不跨列
属性值：all 横跨所有列
[if !supportLists]4）[endif]column-width 设置或检索对象每列宽度
[if !supportLists]5）[endif]解决中断问题break-inside:avoid
[if !supportLists]6）[endif]媒体查询通过检测不同的设备类型从而设置不同的css样式
语法@meida 设备的类型 关键字（媒体特性 判断条件）{css声明}
@meida 声明/定义媒体查询的关键值 设备的类型电脑、手机、pad、打印机等硬件设备 关键字 常用的有and（链接设备类型和媒体特性）、not、only（媒体特性） 最大值和最小值{css声明}
[if !supportLists]7）[endif]注意点媒体查询是需要根据she备的特性从而设置css样式建议将媒体查询写在css样式表的最下面 媒体查询每个单词之间都需要加空格 如果有多个条件在媒体特性后面书写and 继续书写一个媒体特性即可 如果多个媒体查询之间的值相同 的首 建议间隔1px 注意 由于电脑厂商较多 会出现误差
第十七天
1）
第十八
1)移动端
1.媒体查询+rem
2.vw+rem
3.Flexible.js
网格布局
[if !supportLists]1、[endif]概念：网格布局和弹性盒相似，也是控制子级元素在父级元素中的位置（给当前父级元素添加网格属性，将页面划分成很多个网格）
属性：display
属性值：grid
特点：
容器：设置了网格属性的父级盒子
项目：在容器下的直接子级盒子
基础：设置了网格布局的属性默认是从上到下显示的，在浏览器中需显示看不见的需要手动审查元素才能看见
grid-template-columns：列
grid-template-rows：行
属性值
1：固定的数值 100px 100px 100px
2：百分比 33.33% 33.33% 33.33%
3：功能函数&关键字
fr 自适应单位
grid-template-areas 划分网格区域
grid-area 单元格的选择区域 简写方式：grid-template
grid-column-gap 列之间的距离
grid-row-gap 列之间的距离 简写方式：gri-gap
f
Hover
)
