1.margin常出现的bug：
a:两个相邻元素上下的margin值 不会叠加 按照较大值设置。
b:如果父元素和第一个子元素没有浮动的情况下，给第一个子元素添加margin-top,会错误放在父元素上面。
2.margin设置方法：
margin:30px; 四周
margin:10px 30px; 上下 左右
margin:10px 30px 50px 上 左右 下
margin:10px 30px 50px 100px 上右下左
3.让一个元素始终在窗口水平、垂直位置居中：
1>div{width:200px;height:200px;background:#f00;position:fixed;left:0;right:0;top:0;bottom:0;margin:auto;}
2>div{width:200px;height:200px;background:#f00;position:fixed;left:50%;top:50%;margin:-100px 0 0 -100px;}
4.高度塌陷的解决方法
hack1：给父元素添加声明overflow:hidden;(触发一个BFC)
hack2:在浮动元素下方添加空div,并给该元素添加声明：
div{clear:both; height:0; overflow:hidden;}
***hack3:万能清除浮动法
选择符:after{
content:“";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;
}
5.阻止浏览器对窗口的拖动设置:{resize:none;}（css属性）
6.BFC
①BFC的布局规则
1>、内部的Box会在垂直方向，一个接一个地放置。
2>、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（按照最大margin值设置）
3>、每个元素的margin box的左边， 与包含块border box的左边相接触
4>、BFC的区域不会与float box重叠。
5>、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
6>、计算BFC的高度时，浮动元素也参与计算
②哪些元素或属性能触发BFC
根元素(html)
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
7.线性渐变
background: linear-gradient(direction, color-stop1, color-stop2, ...);
8.径向渐变
径向渐变不同于线性渐变，线性渐变是从“一个方向”向“另一个方向”的颜色渐变，而径向渐变是从“一个点”向四周的颜色渐变
语法：
background: radial-gradient(center, shape, size, start-color, ..., last-color);
说明：
center：渐变起点的位置，可以为百分比，默认是图形的正中心。
shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样。
size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。
9.重复性渐变
1>.重复性线性渐变
div { background: repeating-linear-gradient(red, yellow 10%, green 20%);
2>.重复性径向渐变
div { background: repeating-radial-gradient(red, yellow 10%, green 20%); }
10.过渡
1>. transition-property：检索或设置对象中的参与过渡的属性
2>. transition-duration：检索或设置对象过渡的持续时间
3>. transition-delay：检索或设置对象延迟过渡的时间
4>. transition-timing-function：检索或设置对象中过渡的动画类型
缩写：
transition:all/具体属性值 运动时间s/ms 延迟时间s/ms 动画类型
11.变形属性：transform
1>.2D位移 translate(tx,ty)
2>.2D缩放scale()
scale(2,2):让元素沿X轴和Y轴放大两倍
3>.旋转rotate()(正值，元素相对原点中心顺时针旋转)
rotateX()
rotateY()
x,y轴类似
4>.倾斜skew()
一个参数时：表示水平方向的倾斜角度；
两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度
12.实现3D场景
1>.transform-style属性:flat和preserve-3d
2>.rotate3d(x,y,z,a)(建议取值0或1)
- x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
- y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
- z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
- a：是一个角度值，主要用来指定元素在3D空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。
13.关键帧
@keyframes mymove{
from{初始状态属性}
to{结束状态属性}
}
或
@keyframes mymove{
0%{初始状态属性}
50%（中间再可以添加关键帧）
100%{结束状态属性}
}
14.animation vs transition
相同点：都是随着时间改变元素的属性值
不同点：transition需要触发一个事件(hover事件或click事件等)才会随时间改变其css属性；
而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值，从而达到一种动画的效果，css3的animation就需要明确的动画属性值
15.animation
1>.animation-name
- 检索或设置对象所应用的动画名称
- 必须与规则@keyframes配合使用，
eg:@keyframes mymove{} animation-name:mymove;
2>.animation-iteration-count - 检索或设置对象动画的循环次数
- 属性值
- animation-iteration-count: infinite | number;
- infinite：无限循环
- number: 循环的次数
3>animation-direction
- 检索或设置对象动画在循环中是否反向运动
- 属性值
- normal：正常方向
- reverse：反方向运行
- alternate：动画先正常运行再反方向运行，并持续交替运行
- alternate-reverse：动画先反运行再正方向运行，并持续交替运行
4>.animation-play-state
- 检索或设置对象动画的状态
- 属性值
- animation-play-state:running | paused;
- running:运动
- paused: 暂停
- animation-play-state:paused; 当鼠标经过时动画停止，鼠标移开动画继续执行
16.语义化标签
- section元素 表示页面中的一个区块
- article元素 表示一块与上下文无关的独立的内容
- aside元素 在article之外的，与article内容相关的辅助信息
- header元素 表示页面中一个内容区块或整个页面的标题
- footer元素 表示页面中一个内容区块或整个页面的脚注
- nav元素 表示页面中导航链接部分
- figure元素 表示一段独立的内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)
- main元素 表示页面中的主要的内容(ie不兼容)
- hgroup标题的一个分组
- mark定义高亮显示的文本(span)
- time时间
- dialog标记定义一个对话框(会话框)类似微信
- embed 标记定义外部的可交互的内容或插件 比如flash
17.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”
新增表单属性
required 监测是否为空。
min 最小
max 最大
step 步幅 确定一个法定值。 -3 0 3 6 9
list 必须结合datalist标签，绑定datalist id名称。
autocomplete 是否自动提示信息 属性值 on off
placeholder 文本框的提示信息
autofocus 自动聚焦。一个页面只能由一个。
pattern 后面的属性值是一个正则表达式。
novalidate 取消验证
multiple 选择（上传）多个
新增表单标签
output
datalist 必须和list属性结合使用。做提示信息。
18.CSS3选择符
1>属性选择器
①、E[attr]：只使用属性名，但没有确定任何属性值
②、E[attr=“value”]：指定属性名，并指定了该属性的属性值
③、E[attr~=“value”]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”必须的
④、E[attr^=“value”]：指定了属性名，并且有属性值，属性值是以value开头的
⑤、E[attr$=“value”]：指定了属性名，并且有属性值，而且属性值是以value结束的
⑥、E[attr*=“value”]：指定了属性名，并且有属性值，而且属值中包含了value�
⑦、E[attr|=“value”]：指定了属性名，并且属性值仅是value或者以“value-”开头的值（比如说left-con）
2>伪类选择器
- 结构性伪类选择器
X:first-child 匹配子集的第一个元素。IE7就可以支持
X:last-child匹配父元素中最后一个X元素
X:nth-child(n)用于匹配索引值为n的子元素。索引值从1开始
X:only-child这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。
X:nth-last-child(n)从最后一个开始算索引。
X:first-of-type匹配同级兄弟元素中的第一个X元素
X:last-of-type匹配同级兄弟元素中的最后一个X元素
X:nth-of-type(n)匹配同类型中的第n个同级兄弟元素X
X:only-of-type匹配属于同类型中唯一兄弟元素的X
X:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素X
:root匹配文档的根元素。在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML
X:empty匹配没有任何子元素（包括包含文本）的元素X
3>层级选择器
E>F
子选择器
选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素
E+F
相邻兄弟选择器
选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面
E~F
通用选择器
选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素