1.规范：html规范、css规范、javascript规范、ECMA规范（ECMA262：js相关的标准
ECMA404：json规范）、DOM规范、BOM没有规范
2. target 代表一个特殊的元素，它的id是URI的片段标识符，是作用于链接元素的！
3. 表单相关伪类：
:enabled 匹配可编辑的表单
:disable 匹配被禁用的表单
:checked 匹配被选中的表单
:focus 匹配获焦的表单
4. less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展， LESS 既可以在客户端上运行 ，也可以借助Node.js在服务端运行。
6.浏览器的兼容问题（ie的hack）：
a.一张图片在a标签里面，会出现一个蓝色的边框
解决办法：给img{ border：0 none；}
b..div中的图片间隙BUG
描述：在div中插入图片时，图片会将div下方撑大大约三像素。
解决方法：（1）给div设置font-size：0
（2）给img设置display：block
c. 当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界（margin）加倍显示。
解决办法：给浮动的元素添加display：inline
d. 在IE6及以下版本中，部分块元素拥有默认高度（在16px左右；）
解决办法：设置font-size：0；
e. 表单元素行高对齐方式不一致
解决办法：给表单元素添加声明：float:left;
f. 各浏览器中按钮元素大小不一致
解决办法：input外边套一个标签，在这个标签里写按钮的样式，把input的边框去掉，默认padding也要去掉。
g. 在IE6及以下版本中在解析百分比时，会按四舍五入方式计算从而导致50%加50%大于100%的情况。
解决办法: 给右边的浮动元素添加声明：clear:right; 清除右浮动。
h. 在IE9以下的小手的表示取值：hand
兼容写法：cursor：pointer
Cursor取值： auto默认 crosshair加号 wait等待 help帮助 pointer手形
i. ie兼容透明度的写法：
filter: alpha(opacity=value)
value =0-100 的整数
j. 前元素(父元素里面第一个子元素)与父元素没有设置任何浮动的情况下，
设置margin-top后，会错误的把margin-top加在父级元素上
解决办法：（1）给子元素设置浮动float
（2）给父元素设置上边框border-top
（3）给父元素设置overflow：hidden
k. 当两个上下排列的元素，上元素有margin-bottom：30px；下面元素有margin-top:20px；他们中间的距离不会叠加，而是会设置为较大的值
解决办法：给两个盒子其中一个设置display：inline-block
7. form表单的属性<form action="" method="get/post" name="表单名称">
(1)action:信息传递到哪的地址,接口地址
(2)method:请求或者传递信息的一种方式(取值get不安全或post相对安全
Input属性：a.文本框 type="text"
b.密码框 type="password"
c.单选按钮 type="radio"
d.多选按钮(复选按钮) type="checkbox"
*一组单选按钮或多选按钮,需要给这一组添加相同name,
* 加checked=“checked”属性使按钮成为默认选中状态。
e.下拉菜单 <select>
<option>内容<option>
</select>
*selected=“selected”:属性默认选择
f.文本域 cols:列 rows:行-->
<textarea cols="30" rows="10"></textarea>
文本框：<textarea name="" id="" cols="30" rows="10"></textarea>
g.普通提交按钮 type="button" （只起到跳转的作用）
h.数据提交按钮type="submit" （可提交表单信息）
i.重置按钮 type="reset" 注意:不能重置默认的内容
表单的新增属性:
1. 表单字段集 <fieldset>一组input<fieldset>
字段集标题<legend align="left">登录字段集</legend>
2. label 提示信息：要使得label 与input 关联，给input一个id。
举例：<label for="username">用户名：</label>
<input type="text" name="username" id="username">
*点击“用户名”输入框也能获取焦点。
3. 文件上传框：<input type="file" multiple="multiple">
*默认只能选择一个文件，多个文件添加 multiple
4. 图像域（能点击的图像，与按钮功能类似） input 的type="image"
<input type="image" src="图像路径">
<form action="" method="">
<!-- 属性：1.placeholder 占位符
2、autofocus 自动获取焦点
3、reuired 必须有字段，否则不能提交
-->
用户名：
<input type="text" placeholder="请输入用户名" autofocus>
<input type="password" required>
<!-- 4、pattern="d{3}" 代表value的只能3个数字 -->
<input type="text" name="" pattern="d{3}">
<input type="submit">
</form>
5. H5插入影片：
<!-- 第一种写法 -->
<video src="../images/movie.ogg" autoplay="autoplay"></video>
<!-- 第二种写法 -->
<source src="../images/movie.ogg" src="../images/movie.ogg" type="video/ogg">
<!-- <video autoplay="autoplay">
video的属性：autoplay自动播放
controls 控制条
poster 加载等待时候的图片
loop 循环播放
6. 插入媒体声音:
<audio src="../images/sudi.mp3" autoplay="autoplay" controls loop></audio>
7. 利用边框制作三角形：（transparent为透明的意思）
举例：border-color: transparent red transparent transparent;（向左的三角形）
8. H5语义化标签：
头部
<header></header>
*header里面不能包含footer ,header address
一般header包含：nav，标题，logo，搜索......
导航
<nav>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
主体
<!-- 一个页面只有一个 main -->
<main></main>
文章
<article>
<header>某某某........</header>
<p></p>
</article>
分组
<hgroup>
<h1></h1>
<p></p>
<h2></h2>
<p></p>
</hgroup>
图文组合
<figure>
<figcaption>我是图片的说明</figcaption>
<img src="../images/21.jpg" alt="">
</figure>
下拉列表
<input type="text" list="aihao">
<datalist id="aihao">
<option value="lanqiu">篮球</option>
<option value="yumaoqiu">羽毛球</option>
</datalist>
详情
<details>
<summary>点击展开</summary>
<h1>展开内容</h1>
</details>
记号：（内联元素）
<mark>用法百度</mark>
没软用系列：
<progress max="200" value="100"> </progress>
<meter high="90" low="60" max="100" min="0" value="98" optimum="50"></meter>
对文字注音：
<ruby>
嫑
<rt>biao</rt>
</ruby>
简单的加减或者字符运算：（不能进行加）
<form action="" method="get" oninput="res.value = no1.value - no2.value">
<input type="text" name="no1"> <input type="text" name="no2">
<output name="res"></output></form>
<form action="" method="">
<!-- 1.type="color" 颜色选择框 -->
color:
<input type="color">
<!-- 2.type="email" 邮件输入框 -->
email:
<input type="email">
<!-- 3.type="number" 数字输入框 只能输入数字，不能输入特殊字符和英文->
number:
<input type="number">
<!-- 4.type="number" 电话输入框 -->
tel:
<input type="tel">
<br> url:
<!-- 5.type="url" 网址输入框 https://www ,http://www -->
<input type="url">
<input type="text">
search:
<input type="search">
range:
<!-- 6.type="range" -->
<input type="range" min="0" max="100" value="30">
date:
<!-- 7.type="data" n年月日-->
<input type="date">
<br> month:
<!-- 8.type="month" 年月-->
<input type="month">
<br> week:
<!-- 9.type="week" 周-->
<input type="week">
<!-- 10.type="time" -->
<br> time:
<input type="time">
</form>
9. box-sizing： 表示你设置的宽高从什么位置去设置
取值：
border-box：对象的实际宽度就等于设置的width值，即使定义有border和padding
content-border：对象的实际宽度等于设置的width值和border、padding之和
10. border-radius: 圆角边框:
取值：border-radius:左上角 右上角 右下角 左下角
border-radius:属性值1（左上角，右下角） 属性值2（右上角 左下角）；
border-radius:属性值1（左上角） 属性值2（右上角，左下角） 属性3（右下角）
11. box-shadow: 边框阴影（盒模型）
取值：x轴偏移量 y轴偏移量 颜色; （常用）
或者：x轴偏移量 y轴偏移量 模糊程度(不能为负值) 模糊面积 颜色;
12. 图像边框的向内偏移border-image-slice:属性值; （设置百分比）
border-image-repeat 是否平铺
取值：repeat 平铺不拉伸
round 平铺又拉伸
stretched 拉伸不平铺
13. 文字阴影：text-shadow:水平移动距离 垂直移动距离 模糊距离（程度）颜色
*模糊距离不能为负数
*属性值排序颜色要么最前 要么最后。
*可添加多层，每四个属性值后用逗号隔开
14. 文字描边：-webkit-text-stroke:属性1（宽度） 属性值2（颜色）；
一定要加上浏览器兼容前缀
15. dirction 文字排版 ltr(left to right 从左到右)
rtl（right to left 从右到左），
*一定要配合 unicode-bidi: bidi-override;使用
16. background-origin：属性规定 background-position 属性相对于什么位置来定定位
取值：border-box：从边框开始
padding-box：从padding的位置
content-box：从内容开始
*对背景图片才有作用
17. background-size:改变背景图片大尺寸
取值：（1）auto 背景图片原来的尺寸，默认值
（2）number，数字，可能让图片变形
（3）percentage：value% value%,百分值是根据盒子宽高定
（4）cover 容器被图片完全覆盖，但图片可能不能完全显示,
一般配合background-position: center;
（5）contain 包含，容器可能会出现空白区域
18. background-clip:设置背景显示在哪些区域
取值：border-box：显示content，padding，border区域
padding-box：显示content。padding区域
content-box：显示在content区域
19. 渐变：
线性渐变: background:linear-gradient(direction,color1,color2......)
direction取值：to left(从右往左)
to right(从左往右) to top（从下往上）
to bottom(从上往下)，默认
to left top(从右下角往左上角)
to left bottom（从右上角往左下角）
to right top（从左下角往右上角）
to right bottom（从左上角往右下角）
角度：角度的单位deg
以下为200px（300-100）的渐变，前后为纯色
重复渐变：（默认值为中心点）
repeating-linear-gradient(red, blue 20%, green 40%);
以下为：开始10%黄色纯色，之后10%~30%为黄到绿的渐变色，之后30%~70%为绿到粉的渐变色，70%之后都为粉纯色
径向渐变: background: radial-gradient(center, shape, size, start-color, ..., last-color);
1.resize允许你控制一个元素的可调整大小性。（一定要配合overflow：auto使用）
默认值：none 不可继承
可选值：None 元素不能被用户缩放。
both 允许用户在水平和垂直方向上调整元素的大小。
horizontal 允许用户在水平方向上调整元素的大小。
vertical 允许用户在垂直方向上调整元素的大小。
20. 插入自定义字体：（写在style中）
@font-face {
font-family:"自定义字体名称";
src: url(字体路径);
}
应用字体：
#test{
font: 50px '自定义字体名称';
}
21. 字体图标的使用：
第一种方法
1. 引入字体图标css文件：
<link rel="stylesheet" href="../iconfont/iconfont.css">
2. 插入字体图标源文件：
@font-face {font-family: "iconfont";
src: url('../iconfont/iconfont.eot');
3.在要应用的地方添加span标签，并设置样式如下：
<span class="iconfont meinv"></span>
.iconfont { font-family: "iconfont"; }
.meinv::after { content: "e667" }
第二种方法：
<span></span>
span { font-family: "willa";color: red; font-size: 30px; }
23.-webkit-box-reflect 设置元素倒影（准确的来说不能算是c3的东西，但需要大家知道）
默认值:none 不可继承
值：（必须是123的顺序）
1.倒影的方向，above, below, right, left
2.倒影的距离 单位：px
3.渐变
22. 过渡：transition（display：none好像需要利用js才能出发过渡效果）
单位：s
transition-property ：
对象中的参与过渡的属性，可以为width、height、font等等…
transition-duration ：
对象过渡的持续时间，单位一般为s，可以为毫秒ms，可分别为property中的属性指定时间。
transition-delay ：
对象延迟过渡的时间，单位一般为s，可以为毫秒ms，可分别为property中的属性指定时间。
transition-timing-function ：
对象中过渡的动画类型 （用法极多，例如贝塞尔曲线函数）
以下：steps为每秒钟跳动一次，跳五次。
ease： 平滑过渡 linear： 线性过渡
23. transform 2 D变换（只对块级元素有效）
1.transform: translate(x, y); 将元素向指定的方向移动,平移，移动
translateX()：水平方向移动一个对象。对像只向X轴进行移动，如果值为正值，对像向右移动；如果值为负值，对像向左移动。
translateY()：纵轴方向移动一个对象。对象只向Y轴进行移动，如果值为正值，对象向下移动；如果值为负值，对像向上移动。
* transform: translate(300px) 单值表示x轴位移，y轴不动。
2．transform: scale(2); 缩放：不加单位，表示在原来的基础上放大一倍
scaleX()：相当于scale(sx,1)。表示元素只在X轴（水平方向）缩放元素，其默认值是1。
scaleY()：相当于scale(1,sy)。表示元素只在Y轴（纵横方向）缩放元素，其默认值是１。
3．transform: rotate(120edg) 在2d平面旋转（旋转只对快元素有效）
transform: rotateX(60deg) 绕着x轴旋转
transform: rotateY(60deg) 绕着y轴旋转
*默认旋转基点为块元素中心
4.transform: skew(45deg); 倾斜（扭曲）
此知识点坐标轴有改变垂直的是x轴，水平的是y轴
transform: skew(xdeg, ydeg);
如果ydeg值为正数的是，顺时针旋转，负值就是逆时针倾斜旋转
如果xdeg的值为正数的时候，逆时针旋转，负数就是顺时针倾斜旋转
5.transform-origin 改变旋转元素的旋转基点
取值：left top：左上角left bottom 左下角left 左边的中间
top 上面的中间right top 右上角
bottom下面的中间right bottom 右下角right 右边的中间
24. 关键帧语法：
@keyframes animiationName{
keyframes-selector{
css-style;
}
}
说明：animiationName:必写项，定义动画的名称
keyframes-selector：必写项，动画持续时间的百分比
from：0%
to：100%
css-style：css声明
25.Animation（动画）
简写属性animation：
在每个动画定义中，顺序很重要：可以被解析为 <time>的第一个值被分配给animation-duration, 第二个分配给 animation-delay。
完整属性：
animation-name属性指定应用的一系列动画，每个名称代表一个由@keyframes定义的动画序列
animation-duration属性指定一个动画周期的时长。默认值为0s，表示无动画。单位为秒(s)或者毫秒(ms)
animation-timing-function属性定义CSS动画在每一动画周期中执行的节奏。动画的默认效果：由慢变快再变慢。
取值：steps(n,[start|end]) 传入一到两个参数，第一个参数意思是把动画分成 n 等分，然后动画就会平均地运行。第二个参数 start 表示从动画的开头开始运行，相反，end 就表示从动画的结尾开始运行，默认值为 end。
linear：线性过渡 ease:平滑过渡 。。。
animation-delay定义动画开始前等待的时间,单位s或毫ms animation-iteration-count定义了动画执行的次数
取值：infinite无限循环播放动画.<number>动画播放的次数 不可为负值.
animation-direction定义了动画执行的方向
取值：normal每个循环内动画向前循环，换言之，每个动画循环结束，动画重置到起点重新开始（默认属性）。
alternate 动画交替反向运行，反向运行时，动画按步后退，同时，带时间功能的函数也反向， 比如ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代
reverse反向运行动画，每周期结束动画由尾到头运行。
alternate-reverse 反向交替， 反向开始交替
animation-play-state定义了动画执行的运行和暂停
取值：
running当前动画正在运行。
paused 当前动画以被停止。
27.弹性盒模型：
1.display：flex将盒子为弹性盒
2.flex- direction 主轴方向（设置子元素在父元素中的排列方式，父元素设置，作用于子元素）
取值：(1)row(默认值),在一行排列
(2)column纵向排列,垂直排列
3.justify-content： 主轴（水平）对齐方式（给父元素设置，作用于子元素）
取值：（1）center 居中
（2）flex-start左对齐（默认值）
（3）flex-end 右对齐
（4）space-between两端对齐
（5）space-around自动分配多余空间两边
4.align-items：（单行项目）纵向（垂直）对齐方式（给父元素设置，作用于子元素）
取值：（1）flex-start 两端对齐
（2）flex-end 末端对齐
（3）center 居中对齐
（4）baseline 基线对齐
5.align-content（多行项目）多行情况下侧轴对齐方式
取值：（1）center 居中
（2）flex-start 左对齐（默认值）
（3）flex-end 右对齐
（4）space-between 两端对齐
(5)space-around 自动分配多余空间两边
6.align-self盒子本身在容器中的对齐方式（侧轴）（给本身设置）
取值：（1）Stretch元素被拉伸以适应容器
（2）Center元素位于容器的中心
（3）flex-start元素位于容器的开头（最上面水平位置）
（4）flex-end元素位于容器的结尾（最下面水平位置）
7.flex-wrap:控制flex容器是单行或者多行（作用于子元素）
取值: wrap 换行
2018-09-2620:26:10