IE6 兼容问题
1、 在IE6下子元素会撑开父级设置好的宽高
2、 max-width 最大宽度
min-width 最小宽度
max-height 最大高度
min-height 最小高度 不兼容IE6
3、 在IE6下，不支持1px的点线
4、 元素内，除了内嵌还有其他类型的元素，行高会失效
5、 在IE6，7下，父级有边框,可能会造成子元素的margin值失效
解决办法:触发父级的haslayout
6、 关于标签兼容问题--------
7、 IE6下只支持l-v-h-a这四个伪类,并且支持加给a标签
8、 在IE6下，每行元素宽度和父级的总宽度，相差超过3px，最后一行下margin 失效
9、 在IE6下，不支持给块标签加inline-block
10、在IE6下，块元素有横向的margin和浮动的时候，横向的margin会被放大两倍ss
解决办法:给元素加display:inline
11、 在IE6下，高度不满19px的元素，高度会被当做19px来处理
解决办法:加overflow:hidden
12、在IE6，7下，li本身没浮动，但是li里边的内容浮动了，li下边会多出几个像素的间隙
解决办法:
1.给li加浮动（当li下的空隙问题和最小高度问题并存的时候，给li加浮动）
2.给li设置vertical-align
13、 在IE6下，两个浮动元素之间有注释或者内嵌元素，并且元素的宽度和父级宽度相差小于3px，最后几个文字 会被复 制
14、 在IE6,7下，浮动元素父级有宽度的情况下不用请浮动
haslayout（触发）
元素会根据自己自身内容的大小，或者父级的大小来重新计算自己的宽高
（触发条件：）
display: inline-block
height: (任何值除了auto)
float: (left 或 right)
position: absolute
width: (任何值除了auto)
zoom: (除 normal 外任意值) zoom放大或缩小
15、在IE6下，浮动元素和绝对定位元素是并列关系的时候，绝对定位元素会消失掉
解决办法:用div把绝对定位元素包起来
16、在IE6，7下，子元素有相对定位的话，父级的overflow对它不起作用
解决办法:给父级也加相对定位
17、在IE6下，父级的宽高是奇数的话，元素的right（bottom）有1px的偏差
18、IE6,7,8不支持opacity
用filter:alpha(opacity=50);
19、在IE6下，给输入类型的表单控件加border:none无效
解决办法:重置input背景
在IE6下，输入类型的表单控件上下各有1px的空隙
解决办法:给元素浮动
在IE6下，输入类型的表单控件输入文字的时候，背景会随着一块移动
解决办法:把背景加给父级
20、在IE6下，子元素的margin -1px（超出父集边框，） 父集会自动包裹住子元素
解决办法：给父集加 position：relative
动画 animation
@keyframs animate(名称随变起)
{
0%{
width=100px;
}
10%{
width=500px;
}
}
####样式内容：.box{animation:animate(名称) 3s（时间） 1s（延迟时间） infinite（无限循环） altermate（反向运行）； }
transform：变换
transform-origin：变还原点位置
（x轴方向 （left center right 百分比%）
y轴方向 （left center right 百分比%）
z轴方向 （left center right 百分比%）
）
transform-style：preserve-3d （做3d必须加）
transform：scale（x，y）
scale3d（x，y，z） 缩放
rotate（deg角度）
rotate（x,y,z,deg角度） 旋转
过渡属性：
transition: property duration timing-function delay;
值 描述
transition-property CSS 属性的名称
width、height
transition-duration 过度时间
秒、毫秒
transition-delay 延迟时间
秒、毫秒
transition-timing-function 规定运动形式
ease 逐渐变慢（默认值）
linear 匀速
ease-in 加速
ease-in-out 先加速后减慢
cubic-bezier（x1，y1，x1，y1） 贝塞尔曲线
滤镜：
-webkit-filter:blur(5px); //模糊，此处为5像素
-webkit-filter:sepia(0.5); //叠加褐色，取值范围0-1，此处表示50%的褐色
-webkit-filter:brightness(0.5); //亮度，取值范围0-1，5倍亮度（数字为0时为正常样式，为1时表示的 是100%亮度，无 法看 到图片）
-webkit-filter:hue-rotate(30deg); //色相（按照色相环进行旋转，顺时针方向，红-橙-黄-黄绿-绿-蓝绿-蓝- 蓝紫-紫-紫红- 红） 此处为叠加黄色滤镜
-webkit-filter:invert(1); //反色，取值范围0-1,0为原图，1为彻底反色之后，0.5为灰色
-webkit-filter:saturate(4); //饱和度，取值范围0~*,0为无饱和度，1为原图，值越高饱和度越大
-webkit-filter:contrast(2); //对比度，取值范围0~*,0为无对比度（灰色），1为原图，值越高对比度越大
-webkit-filter:opacity(0.8); //透明度，取值范围0~1,0为全透明，1为原图
-webkit-filter:drop-shadow(17px 17px 20px black); //阴影
移动端写默认
宽度适应屏幕大小
<meta name="viewport" content="width=device-width,user-scalable=no" />
清除样式:
a{-webkit-tap-highlight-color:rgba(255,0,0,0);} 点击有暗影
input{-webkit-appearance:none;}
body *{-webkit-text-size-adjust:none;} 字体最小大小
加入JS 使最宽不超过540px 设置rem 为16分之一
<script>
var oHtml=document.getElementsByTagName("html")[0];
var iWidth=document.documentElement.clientWidth;iWidth=iWidth>540?540:iWidth;
oHtml.style.fontSize=iWidth/16+"px";
</script>
解决滑动内容效果；
<script>
var oScroll= new mScroll("wrap");
</script> wrap{指的是内容块}
处理已给像素边框！！
<script>
var iScale=1/window.devicePixelRatio;
document.write('<meta name="viewport" content="width=device-width,initial- scale='+iScale+',minimum-scale='+iScale+',maximum-scale='+iScale+'" />');
</script>
处理设备高度固定屏幕高度：
<script>
document.body.style.height=document.documentElement.clientHeight+"px";
</script> 加入body第一个
响应式（媒询media）
媒体类型
all 所有的媒体类型
screen 彩屏设备
print 打印设备
handheld 手持设备
braille 盲文触觉设备
embossed 盲文打印机
projection 投影
speech 听觉设备
TTY
TV 电视
######关键字
and
not
only
媒询三种引入方式
1.<link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
2.@import url("css/style.css");
3.直接写入style里面。
@media all
{
.box{
width:100px;
}
}
弹性盒模型（需要加前缀）
display：flex == display：inline-flex
类似浮动，不用清浮动
在改类型的元素内 子元素可以设置margin：auto auto；
###### 设置主轴方向（flex-direction：）
row 从左向右排列（默认值）
row-reverse 从右向左
column 从上到下
column-reverse 向下到上
主轴内元素对齐方式（justify-content：）
flex-start 元素在开始位置 富裕空间在另一侧（默认）
flex-end 元素在末尾位置 富裕空间在起始处
center 元素居中 富裕空间平分左右两侧
space-between 富裕空间在元素之间平分
space-around 富裕空间在元素两侧平分
侧轴对齐 （align-items：为对齐元素的父集设置）
flex-start 元素在开始位置 富裕空间在另一侧（默认）
flex-end 元素在末尾位置 富裕空间在起始处
center 元素居中 富裕空间平分左右两侧
注意：align-self 也是侧轴对齐 但是用来写在对齐元素的样式内！！！
换行 （flex-wrap：）
nowrap（默认）
wrap 换行
wrap-reverse 反向换行
其中 主轴对齐方式 与 换行可以写集合
flex-flow：row（主轴对齐方式） wrap（换行）
堆栈伸缩行（algin-content：）
algin-content 会更改 flex-wrap 的行为
它和 align-items 相似，但是不是对齐伸缩项目，它对齐的是伸缩行。
flex-start
flex-end
center
space-between
space-around
oder（在元素的排列位置，给子元素加人） oder=0（默认）
遮罩（mask）
-webkit-mask：url（img）
mask：用背景图片来覆盖掉图片。
删栏（columns）加浏览器前缀
column-width 栏目宽度
column-cunt 栏目列数
column-gap 栏目距离
column-rule 栏目间隔线
column-fill 栏目高度是否统一
外联框架
<iframe src="http://www.baidu.com#form" width="900" height="40" scrolling="no" frameborder="0"></iframe>
ioc 网页小标
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="favicon.ico" rel="icon" />
</head>
热区
<map name="mt">
<area shape="rect" coords="923,398,1271,504" href="http://www.baidu.com">
</map>
shape="rect" 矩形
coords="左上角X,左上角Y,右下角X,右下角Y"
shape="circle" 圆形
coords="圆心的X,圆心的Y,半径"
shape="poly" 多边形
coords="第1个点X,第1个点y,第2个点X,第2个点y,第3个点X,第3个点y......"
table 设置宽度之后，宽度会自动分配到每一行,设置高度之后也会自动分配到tbody下的每一行